spiderly 0.0.8 → 19.0.1

package/src/lib/components/auth/registration/registration.component.ts

@@ -0,0 +1,77 @@
+import { ActivatedRoute, Router } from '@angular/router';
+import { ChangeDetectorRef, Component, KeyValueDiffers, OnInit } from '@angular/core';
+import { HttpClient } from '@angular/common/http';
+import { TranslocoDirective, TranslocoService } from '@jsverse/transloco';
+import { LayoutBaseService } from '../../../services/app-layout-base.service';
+import { AuthBaseService } from '../../../services/auth-base.service';
+import { BaseFormCopy } from '../../base-form/base-form copy';
+import { SpiderlyFormGroup } from '../../spiderly-form-control/spiderly-form-control';
+import { Registration } from '../../../entities/security-entities';
+import { SpiderlyMessageService } from '../../../services/spiderly-message.service';
+import { BaseFormService } from '../../../services/base-form.service';
+import { CommonModule } from '@angular/common';
+import { ReactiveFormsModule } from '@angular/forms';
+import { AuthComponent } from '../partials/auth.component';
+import { PrimengModule } from '../../../modules/primeng.module';
+import { SpiderlyControlsModule } from '../../../controls/spiderly-controls.module';
+import { RegistrationVerificationComponent } from '../partials/registration-verification.component';
+
+@Component({
+    selector: 'app-registration',
+    templateUrl: './registration.component.html',
+    imports: [
+        CommonModule,
+        ReactiveFormsModule,
+        AuthComponent,
+        PrimengModule,
+        SpiderlyControlsModule,
+        RegistrationVerificationComponent,
+        TranslocoDirective,
+    ]
+})
+export class RegistrationComponent extends BaseFormCopy implements OnInit {
+    registrationFormGroup = new SpiderlyFormGroup<Registration>({});
+
+    companyName: string;
+    showEmailSentDialog: boolean = false;
+
+    constructor(
+        protected override differs: KeyValueDiffers,
+        protected override http: HttpClient,
+        protected override messageService: SpiderlyMessageService, 
+        protected override changeDetectorRef: ChangeDetectorRef,
+        protected override router: Router, 
+        protected override route: ActivatedRoute,
+        protected override translocoService: TranslocoService,
+        protected override baseFormService: BaseFormService,
+        public layoutService: LayoutBaseService, 
+        private authService: AuthBaseService, 
+    ) {
+        super(differs, http, messageService, changeDetectorRef, router, route, translocoService, baseFormService);
+    }
+
+    override ngOnInit(){
+        this.initRegistrationFormGroup(new Registration({}));
+    }
+    
+    initRegistrationFormGroup(model: Registration){
+        this.initFormGroup(this.registrationFormGroup, this.formGroup, model, model.typeName, []);
+    }
+
+    companyNameChange(companyName: string){
+        this.companyName = companyName;
+    }
+
+    sendRegistrationVerificationEmail() {
+        let isFormGroupValid: boolean = this.baseFormService.checkFormGroupValidity(this.registrationFormGroup);
+
+        if (isFormGroupValid == false) 
+            return;
+
+        // const returnUrl = this.route.snapshot.queryParams['returnUrl'] || '';
+        this.authService.sendRegistrationVerificationEmail(this.registrationFormGroup.getRawValue()).subscribe(() => {
+            this.showEmailSentDialog = true;
+        });
+    }
+
+}

package/src/lib/components/base-details/role-base-details.component.html

@@ -0,0 +1,33 @@
+<ng-container *transloco="let t">
+    <spiderly-panel>
+        <panel-header></panel-header>
+
+        <panel-body>
+            <form *ngIf="loading === false" class="grid"> <!-- FT: Don't put @deffer it's not working as expected -->
+                <div class="col-12">
+                    <spiderly-textbox [control]="control('name', roleFormGroup)"></spiderly-textbox>
+                </div>
+                <div class="col-12">
+                    <spiderly-textarea [control]="control('description', roleFormGroup)"></spiderly-textarea>
+                </div>
+                <div class="col-12">
+                    <spiderly-multiautocomplete [control]="selectedUsersForRole" [options]="usersForRoleOptions" (onTextInput)="searchUsersForRole($event)" [label]="t('Users')"></spiderly-multiautocomplete>
+                </div>
+                <div class="col-12">
+                    <spiderly-multiselect [control]="selectedPermissionsForRole" [options]="permissionsForRoleOptions" [label]="t('Permissions')"></spiderly-multiselect>
+                </div>
+            </form>
+
+            <card-skeleton *ngIf="loading === true" [height]="502"></card-skeleton>
+
+        </panel-body>
+
+        <panel-footer>
+            <spiderly-button [disabled]="!isAuthorizedForSave" (onClick)="save()" [label]="t('Save')" icon="pi pi-save"></spiderly-button>
+            @for (button of additionalButtons; track button.label) {
+                <spiderly-button (onClick)="button.onClick()" [disabled]="button.disabled" [label]="button.label" [icon]="button.icon"></spiderly-button>
+            }
+            <return-button></return-button>
+        </panel-footer>
+    </spiderly-panel>
+</ng-container>

package/src/lib/components/base-details/role-base-details.component.ts

@@ -0,0 +1,194 @@
+import { CommonModule } from '@angular/common';
+import { FormsModule, ReactiveFormsModule } from '@angular/forms';
+import { Component, EventEmitter, Input, Output } from '@angular/core';
+import { TranslocoDirective } from '@jsverse/transloco';
+import { ActivatedRoute } from '@angular/router';
+import { combineLatest, forkJoin, map, Observable, of, Subscription } from 'rxjs';
+import { MenuItem } from 'primeng/api';
+import { PrimengModule } from '../../modules/primeng.module';
+import { CardSkeletonComponent } from '../card-skeleton/card-skeleton.component';
+import { SpiderlyFormArray, SpiderlyFormControl, SpiderlyFormGroup } from '../spiderly-form-control/spiderly-form-control';
+import { BaseEntity } from '../../entities/base-entity';
+import { LastMenuIconIndexClicked } from '../../entities/last-menu-icon-index-clicked';
+import { Role, RoleSaveBody } from '../../entities/security-entities';
+import { SpiderlyButton } from '../../entities/spiderly-button';
+import { getControl, getPrimengAutocompleteNamebookOptions, getPrimengDropdownNamebookOptions, nameof } from '../../services/helper-functions';
+import { BaseFormService } from '../../services/base-form.service';
+import { ApiSecurityService } from '../../services/api.service.security';
+import { PrimengOption } from '../../entities/primeng-option';
+import { AutoCompleteCompleteEvent } from 'primeng/autocomplete';
+import { IsAuthorizedForSaveEvent } from '../../entities/is-authorized-for-save-event';
+import { AuthBaseService } from '../../services/auth-base.service';
+import { SpiderlyTextboxComponent } from '../../controls/spiderly-textbox/spiderly-textbox.component';
+import { SpiderlyTextareaComponent } from '../../controls/spiderly-textarea/spiderly-textarea.component';
+import { SpiderlyMultiAutocompleteComponent } from '../../controls/spiderly-multiautocomplete/spiderly-multiautocomplete.component';
+import { SpiderlyMultiSelectComponent } from '../../controls/spiderly-multiselect/spiderly-multiselect.component';
+import { SpiderlyPanelsModule } from '../spiderly-panels/spiderly-panels.module';
+import { SpiderlyButtonComponent } from '../spiderly-buttons/spiderly-button/spiderly-button.component';
+import { SpiderlyReturnButtonComponent } from '../spiderly-buttons/return-button/return-button.component';
+
+@Component({
+    selector: 'role-base-details',
+    templateUrl: 'role-base-details.component.html',
+    imports: [
+        CommonModule,
+        FormsModule,
+        ReactiveFormsModule,
+        PrimengModule,
+        TranslocoDirective,
+        CardSkeletonComponent,
+        SpiderlyTextboxComponent,
+        SpiderlyTextareaComponent,
+        SpiderlyMultiAutocompleteComponent,
+        SpiderlyMultiSelectComponent,
+        SpiderlyPanelsModule,
+        SpiderlyButtonComponent,
+        SpiderlyReturnButtonComponent
+    ]
+})
+export class RoleBaseDetailsComponent {
+    @Output() onSave = new EventEmitter<void>();
+    @Output() onRoleFormGroupInitFinish = new EventEmitter<void>();
+    @Input() getCrudMenuForOrderedData: (formArray: SpiderlyFormArray, modelConstructor: BaseEntity, lastMenuIconIndexClicked: LastMenuIconIndexClicked, adjustFormArrayManually: boolean) => MenuItem[];
+    @Input() formGroup: SpiderlyFormGroup;
+    @Input() roleFormGroup: SpiderlyFormGroup<Role>;
+    @Input() additionalButtons: SpiderlyButton[] = [];
+
+    authorizationForSaveSubscription: Subscription;
+    @Input() authorizedForSaveObservable: () => Observable<boolean> = () => of(false);
+    isAuthorizedForSave: boolean = false;
+    @Output() onIsAuthorizedForSaveChange = new EventEmitter<IsAuthorizedForSaveEvent>(); 
+    
+    modelId: number;
+    loading: boolean = true;
+    roleSaveBodyName: string = nameof<RoleSaveBody>('roleDTO');
+
+    usersForRoleOptions: PrimengOption[];
+    permissionsForRoleOptions: PrimengOption[];
+
+    selectedUsersForRole = new SpiderlyFormControl<PrimengOption[]>(null, {updateOn: 'change'});
+    selectedPermissionsForRole = new SpiderlyFormControl<number[]>(null, {updateOn: 'change'});
+
+    constructor(
+        private apiService: ApiSecurityService,
+        private route: ActivatedRoute,
+        private baseFormService: BaseFormService,
+        private authService: AuthBaseService
+    ) {}
+
+    ngOnInit(){
+        this.formGroup.initSaveBody = () => { 
+            let saveBody = new RoleSaveBody();
+            saveBody.roleDTO = this.roleFormGroup.getRawValue();
+
+            saveBody.selectedUsersIds = this.selectedUsersForRole.getRawValue()?.map(n => n.code);
+            saveBody.selectedPermissionsIds = this.selectedPermissionsForRole.getRawValue();
+
+            return saveBody;
+        }
+
+        this.formGroup.saveObservableMethod = this.apiService.saveRole;
+        this.formGroup.mainDTOName = this.roleSaveBodyName;
+
+        this.route.params.subscribe(async (params) => {
+            this.modelId = params['id'];
+
+            getPrimengDropdownNamebookOptions(this.apiService.getPermissionsDropdownListForRole).subscribe(po => {
+                this.permissionsForRoleOptions = po;
+            });
+
+            if(this.modelId > 0){
+                forkJoin({
+                    mainUIFormDTO: this.apiService.getRoleMainUIFormDTO(this.modelId)
+                })
+                .subscribe(({ mainUIFormDTO }) => {
+                    this.initRoleFormGroup(new Role(mainUIFormDTO.roleDTO));
+
+                    this.selectedPermissionsForRole.setValue(
+                        mainUIFormDTO.permissionsNamebookDTOList.map(n => { return n.id })
+                    );
+                    this.selectedUsersForRole.setValue(
+                        mainUIFormDTO.usersNamebookDTOList.map(n => ({label: n.displayName, code: n.id }))
+                    );
+                    
+                    this.authorizationForSaveSubscription = this.handleAuthorizationForSave().subscribe();
+                    this.loading = false;
+                });
+            }
+            else{
+                this.initRoleFormGroup(new Role({id: 0}));
+
+                this.authorizationForSaveSubscription = this.handleAuthorizationForSave().subscribe();
+                this.loading = false;
+            }
+        });
+    }
+
+    initRoleFormGroup(role: Role) {
+        this.baseFormService.addFormGroup<Role>(
+            this.roleFormGroup, 
+            this.formGroup, 
+            role, 
+            this.roleSaveBodyName,
+            []
+        );
+        this.roleFormGroup.mainDTOName = this.roleSaveBodyName;
+        this.onRoleFormGroupInitFinish.next();
+    }
+    
+    handleAuthorizationForSave = () => {
+        return combineLatest([this.authService.currentUserPermissionCodes$, this.authorizedForSaveObservable()]).pipe(
+            map(([currentUserPermissionCodes, isAuthorizedForSave]) => {
+                if (currentUserPermissionCodes != null && isAuthorizedForSave != null) {
+                    this.isAuthorizedForSave =
+                        (currentUserPermissionCodes.includes('InsertRole') && this.modelId <= 0) || 
+                        (currentUserPermissionCodes.includes('UpdateRole') && this.modelId > 0) ||
+                        isAuthorizedForSave;
+
+                    if (this.isAuthorizedForSave) { 
+                        this.roleFormGroup.controls.name.enable();
+                        this.roleFormGroup.controls.description.enable();
+                        this.selectedUsersForRole.enable();
+                        this.selectedPermissionsForRole.enable();
+                    }
+                    else{
+                        this.roleFormGroup.controls.name.disable();
+                        this.roleFormGroup.controls.description.disable();
+                        this.selectedUsersForRole.disable();
+                        this.selectedPermissionsForRole.disable();
+                    }
+
+                    this.onIsAuthorizedForSaveChange.next(new IsAuthorizedForSaveEvent({
+                        isAuthorizedForSave: this.isAuthorizedForSave, 
+                        currentUserPermissionCodes: currentUserPermissionCodes
+                    })); 
+                }
+            })
+        );
+    }
+
+    searchUsersForRole(event: AutoCompleteCompleteEvent) {
+        getPrimengAutocompleteNamebookOptions(this.apiService.getUsersAutocompleteListForRole, 50, event?.query ?? '').subscribe(po => {
+            this.usersForRoleOptions = po;
+        });
+    }
+
+    control(formControlName: string, formGroup: SpiderlyFormGroup){
+        return getControl(formControlName, formGroup);
+    }
+
+    getFormArrayGroups<T>(formArray: SpiderlyFormArray): SpiderlyFormGroup<T>[]{
+        return this.baseFormService.getFormArrayGroups<T>(formArray);
+    }
+
+    save(){
+        this.onSave.next();
+    }
+
+    ngOnDestroy(){
+        if (this.authorizationForSaveSubscription) {
+            this.authorizationForSaveSubscription.unsubscribe();
+        }
+    }
+
+}

package/src/lib/components/base-form/base-form copy.ts

@@ -0,0 +1,356 @@
+import { BaseFormService } from './../../services/base-form.service';
+import {
+  ChangeDetectorRef,
+  Component,
+  KeyValueDiffer,
+  KeyValueDiffers,
+  OnInit,
+} from '@angular/core';
+import { SpiderlyFormArray, SpiderlyFormControl, SpiderlyFormGroup } from '../spiderly-form-control/spiderly-form-control';
+import { HttpClient } from '@angular/common/http';
+import { SpiderlyMessageService } from '../../services/spiderly-message.service';
+import { ActivatedRoute, Router } from '@angular/router';
+import { MenuItem } from 'primeng/api';
+import { getControl, getParentUrl } from '../../services/helper-functions';
+import { TranslocoService } from '@jsverse/transloco';
+import { BaseEntity } from '../../entities/base-entity';
+import { LastMenuIconIndexClicked } from '../../entities/last-menu-icon-index-clicked';
+
+@Component({
+    selector: 'base-form',
+    template: '',
+    styles: [],
+    standalone: false
+})
+export class BaseFormCopy implements OnInit { 
+  formGroup: SpiderlyFormGroup = new SpiderlyFormGroup({});
+  saveBody: any;
+  successfulSaveToastDescription: string = this.translocoService.translate('SuccessfulSaveToastDescription');
+  loading: boolean = true;
+
+  private modelDiffer: KeyValueDiffer<string, any>;
+
+  constructor(
+    protected differs: KeyValueDiffers, 
+    protected http: HttpClient, 
+    protected messageService: SpiderlyMessageService, 
+    protected changeDetectorRef: ChangeDetectorRef,
+    protected router: Router, 
+    protected route: ActivatedRoute,
+    protected translocoService: TranslocoService,
+    protected baseFormService: BaseFormService,
+  ) {
+  }
+
+  ngOnInit(){
+  }
+
+  //#region Model
+
+  initFormGroup = <T>(
+    formGroup: SpiderlyFormGroup<T>, 
+    parentFormGroup: SpiderlyFormGroup, 
+    modelConstructor: any, 
+    propertyNameInSaveBody: string,
+    updateOnChangeControls?: (keyof T)[]
+  ) => {
+    return this.baseFormService.addFormGroup(
+      formGroup, parentFormGroup, modelConstructor, propertyNameInSaveBody, updateOnChangeControls
+    );
+  }
+
+  createFormGroup = <T>(
+    formGroup: SpiderlyFormGroup<T>, 
+    modelConstructor: T & BaseEntity, 
+    updateOnChangeControls?: (keyof T)[]
+  ) => {
+    return this.baseFormService.initFormGroup(
+      formGroup, modelConstructor, updateOnChangeControls
+    );
+  }
+
+  control = <T extends BaseEntity>(formControlName: string & keyof T, formGroup: SpiderlyFormGroup<T>) => {
+    return getControl(formControlName, formGroup);
+  }
+
+  onSave = (reroute: boolean = true) => {
+    this.saveBody = this.formGroup.initSaveBody();
+    this.onBeforeSave(this.saveBody);
+
+    this.saveBody = this.saveBody ?? this.formGroup.getRawValue();
+
+    let isValid: boolean = this.areFormGroupsFromParentFormGroupValid();
+    let isFormArrayValid: boolean = this.areFormArraysValid();
+
+    if(isValid && isFormArrayValid){
+      this.formGroup.saveObservableMethod(this.saveBody).subscribe(res => {
+        this.messageService.successMessage(this.successfulSaveToastDescription);
+
+        Object.keys(res).forEach((key) => {
+          const formControl = this.formGroup.get(key);
+          
+          if (formControl) {
+            if (formControl instanceof SpiderlyFormArray) {
+              const formArray = formControl as SpiderlyFormArray;
+              if (res[key].length !== 0) {
+                formArray.clear();
+              }
+              else{
+                // FT: This is okay because when we have M2M association with additional fields, we will not give back the list because we are not checking version on the server.
+                // console.error(`You returned empty array for control: ${formArray.translationKey}.`);
+              }
+
+              res[key].forEach((model: any) => {
+                if (typeof model === 'object' && model !== null) {
+                  Object.assign(formArray.modelConstructor, model);
+                  let helperFormGroup = new SpiderlyFormGroup({});
+                  this.baseFormService.initFormGroup(helperFormGroup, formArray.modelConstructor)
+                  formArray.push(helperFormGroup);
+                } else {
+                  console.error('Can not add primitive form control inside form array.');
+                }
+              });
+
+            } else {
+              formControl.patchValue(res[key]);
+            }
+          }else{
+            // FT: It's okay to do this.
+            // console.error('You returned something that is not in the save DTO.');
+          }
+        });
+
+        if (reroute) {
+          const savedObjectId = (res as any)[this.formGroup.mainDTOName]?.id;
+          this.rerouteToSavedObject(savedObjectId); // You always need to have id, because of id == 0 and version change
+        }
+        
+        this.onAfterSave();
+      });
+      
+      this.onAfterSaveRequest();
+    }else{
+      this.baseFormService.showInvalidFieldsMessage();
+    }
+  }
+
+  rerouteToSavedObject = (rerouteId: number | string): void => {
+    if(rerouteId == null){
+      // console.error('You do not have rerouteId in your DTO.')
+      const currentUrl = this.router.url;
+      const parentUrl: string = getParentUrl(currentUrl);
+      this.router.navigateByUrl(parentUrl);
+      return;
+    }
+      
+    const segments = this.router.url.split('/');
+    segments[segments.length - 1] = rerouteId.toString();
+
+    const newUrl = segments.join('/');
+    this.router.navigateByUrl(newUrl);
+  }
+
+  onBeforeSave = (saveBody?: any) => {}
+  onAfterSave = () => {}
+  onAfterSaveRequest = () => {}
+
+  areFormGroupsFromParentFormGroupValid(): boolean {
+    if(this.formGroup.controls == null)
+      return true;
+
+    let invalid: boolean = false;
+
+    Object.keys(this.formGroup.controls).forEach(key => {
+      const formGroupOrControl = this.formGroup.controls[key];
+
+      if (formGroupOrControl instanceof SpiderlyFormGroup){
+        Object.keys(formGroupOrControl.controls).forEach(key => {
+          const formControl = formGroupOrControl.controls[key] as SpiderlyFormControl; // this.formArray.markAsDirty(); // FT: For some reason this doesnt work
+
+          if (formGroupOrControl.controlNamesFromHtml.includes(formControl.label) && formControl.invalid) {
+            formControl.markAsDirty();
+            invalid = true;
+          }
+        });
+      }
+      else if (formGroupOrControl instanceof SpiderlyFormControl){
+        if (formGroupOrControl.invalid) {
+          formGroupOrControl.markAsDirty();
+          invalid = true;
+        }
+      }
+
+    });
+
+    if (invalid) {
+      return false;
+    }
+
+    return true;
+  }
+
+  //#endregion
+
+  //#region Model List
+  
+  getFormArrayControlByIndex<T>(formControlName: keyof T & string, formArray: SpiderlyFormArray<T>, index: number, filter?: (formGroups: SpiderlyFormGroup<T>[]) => SpiderlyFormGroup<T>[]): SpiderlyFormControl {
+    if(formArray.controlNamesFromHtml.findIndex(x => x === formControlName) === -1)
+      formArray.controlNamesFromHtml.push(formControlName);
+
+    let filteredFormGroups: SpiderlyFormGroup<T>[];
+
+    if (filter) {
+      filteredFormGroups = filter(formArray.controls as SpiderlyFormGroup<T>[]);
+    }
+    else{
+      return (formArray.controls[index] as SpiderlyFormGroup<T>).controls[formControlName] as SpiderlyFormControl;
+    }
+
+    return filteredFormGroups[index]?.controls[formControlName] as SpiderlyFormControl; // FT: Don't change this. It's always possible that change detection occurs before something.
+  }
+
+  getFormArrayControls<T>(formControlName: keyof T & string, formArray: SpiderlyFormArray<T>, filter?: (formGroups: SpiderlyFormGroup<T>[]) => SpiderlyFormGroup<T>[]): SpiderlyFormControl[] {
+    if(formArray.controlNamesFromHtml.findIndex(x => x === formControlName) === -1)
+      formArray.controlNamesFromHtml.push(formControlName);
+
+    let filteredFormGroups: SpiderlyFormGroup<T>[];
+
+    if (filter) {
+      filteredFormGroups = filter(formArray.controls as SpiderlyFormGroup<T>[]);
+    }
+    else{
+      return (formArray.controls as SpiderlyFormGroup<T>[]).map(x => x.controls[formControlName] as SpiderlyFormControl);
+    }
+
+    return filteredFormGroups.map(x => x.controls[formControlName] as SpiderlyFormControl);
+  }
+
+  getFormArrayGroups<T>(formArray: SpiderlyFormArray<T>): SpiderlyFormGroup<T>[]{
+    return this.baseFormService.getFormArrayGroups(formArray);
+  }
+
+  addNewFormGroupToFormArray<T>(
+    formArray: SpiderlyFormArray<T>, 
+    modelConstructor: T & BaseEntity,
+    index: number,
+  ) : SpiderlyFormGroup {
+    return this.baseFormService.addNewFormGroupToFormArray(formArray, modelConstructor, index)
+  }
+
+  initFormArray<T>(
+    parentFormGroup: SpiderlyFormGroup, 
+    modelList: (T & BaseEntity)[], 
+    modelConstructor: T & BaseEntity, 
+    formArraySaveBodyName: string, 
+    formArrayTranslationKey: string, 
+    required: boolean = false)
+  {
+    return this.baseFormService.initFormArray<T>(
+      parentFormGroup, modelList, modelConstructor, formArraySaveBodyName, formArrayTranslationKey, required
+    );
+  }
+
+  removeFormControlFromTheFormArray(formArray: SpiderlyFormArray, index: number) {
+    if(index == null)
+      throw new Error('Can not pass null index.');
+
+    formArray.removeAt(index);
+  }
+
+  removeFormControlsFromTheFormArray(formArray: SpiderlyFormArray, indexes: number[]) {
+    // Sort indexes in descending order to avoid index shifts when removing controls
+    const sortedIndexes = indexes.sort((a, b) => b - a);
+
+    sortedIndexes.forEach(index => {
+      if (index >= 0 && index < formArray.length) {
+        formArray.removeAt(index);
+      }
+    });
+  }
+
+  areFormArraysValid(): boolean {
+    if(this.formGroup.controls == null)
+      return true;
+
+    let invalid: boolean = false;
+
+    Object.keys(this.formGroup.controls).forEach(key => {
+      const formArray = this.formGroup.controls[key] as unknown as SpiderlyFormArray;
+      
+      if (formArray instanceof SpiderlyFormArray){
+        (formArray.controls as SpiderlyFormGroup[]).forEach(formGroup => {
+          Object.keys(formGroup.controls).forEach(key => {
+            const formControl = formGroup.controls[key] as SpiderlyFormControl; // this.formArray.markAsDirty(); // FT: For some reason this doesn't work
+
+            if (
+              (formGroup.controlNamesFromHtml.includes(formControl.label) || formArray.controlNamesFromHtml.includes(formControl.label)) && 
+              formControl.invalid
+            ) {
+              formControl.markAsDirty();
+              invalid = true;
+            }
+          });
+        });
+
+        if (formArray.required == true && formArray.length == 0) {
+          invalid = true;
+          this.messageService.warningMessage(this.translocoService.translate('ListCanNotBeEmpty'));
+        }
+      }
+    });
+
+    if (invalid) {
+      return false;
+    }
+
+    return true;
+  }
+
+  onBeforeSaveList(){}
+  onAfterSaveList(){}
+  onAfterSaveListRequest(){}
+
+  // FT: Sending LastMenuIconIndexClicked class because of reference type
+  getCrudMenuForOrderedData = (
+    formArray: SpiderlyFormArray, 
+    modelConstructor: BaseEntity, 
+    lastMenuIconIndexClicked: LastMenuIconIndexClicked, 
+    adjustFormArrayManually: boolean = false
+  ): MenuItem[] => {
+    let crudMenuForOrderedData: MenuItem[] = [
+        {label: this.translocoService.translate('Remove'), icon: 'pi pi-minus', command: () => {
+          this.onBeforeRemove(formArray, modelConstructor, lastMenuIconIndexClicked.index);
+          if (adjustFormArrayManually === false) {
+            this.removeFormControlFromTheFormArray(formArray, lastMenuIconIndexClicked.index);
+          }
+        }},
+        {label: this.translocoService.translate('AddAbove'), icon: 'pi pi-arrow-up', command: () => {
+          this.onBeforeAddAbove(formArray, modelConstructor, lastMenuIconIndexClicked.index);
+          if (adjustFormArrayManually === false) {
+            this.baseFormService.addNewFormGroupToFormArray(
+              formArray, modelConstructor, lastMenuIconIndexClicked.index
+            );
+          }
+        }},
+        {label: this.translocoService.translate('AddBelow'), icon: 'pi pi-arrow-down', command: () => {
+          this.onBeforeAddBelow(formArray, modelConstructor, lastMenuIconIndexClicked.index);
+          if (adjustFormArrayManually === false) {
+            this.baseFormService.addNewFormGroupToFormArray(
+              formArray, modelConstructor, lastMenuIconIndexClicked.index + 1
+            );
+          }
+        }},
+    ];
+
+    return crudMenuForOrderedData;
+  }
+
+  onBeforeRemove = (formArray: SpiderlyFormArray, modelConstructor: any, lastMenuIconIndexClicked: number) => {}
+
+  onBeforeAddAbove = (formArray: SpiderlyFormArray, modelConstructor: any, lastMenuIconIndexClicked: number) => {}
+
+  onBeforeAddBelow = (formArray: SpiderlyFormArray, modelConstructor: any, lastMenuIconIndexClicked: number) => {}
+
+  //#endregion
+
+}

package/src/lib/components/card-skeleton/card-skeleton.component.html

@@ -0,0 +1,8 @@
+<div class="border-round border-1 surface-border p-4 surface-card" [style]="'height: ' + height + 'px;'">
+    <div [style]="'margin-bottom:' + titleMarginBottom + 'px; margin-top:' + titleMarginTop + 'px;'">
+        <p-skeleton width="160px" [height]="titleHeight + 'px'"></p-skeleton>
+    </div>
+    <div [style]="'height: ' + dataHeight + 'px;'">
+        <p-skeleton width="100%" height="100%"/>
+    </div>
+</div>