@verisoft/ui-core 18.6.0 → 18.7.0

package/src/lib/components/action-button-group/action-button-group.model.ts

@@ -0,0 +1,15 @@
+import { InjectionToken } from '@angular/core';
+import { IconPositionType } from '../../common';
+import { ActionButton } from './action-button.model';
+
+export const ACTION_BUTTON_GROUP_COMPONENT_TOKEN =
+  new InjectionToken<ActionButtonGroupCore>('ActionButtonGroupComponentToken');
+
+export interface ActionButtonGroupCore {
+  maxItems: number;
+  maxItemsMobile: number;
+  items: ActionButton[];
+  menuIconPos: IconPositionType;
+  menuIcon: string;
+  label?: string;
+}

package/src/lib/components/action-button-group/action-button.model.ts

@@ -0,0 +1,15 @@
+import { EventEmitter } from '@angular/core';
+import { ControlSeverityType, FieldSizeType, NotificableProperty } from '../../common';
+
+export interface ActionButton extends NotificableProperty {
+  disabled: boolean;
+  toolTip?: string;
+  id?: string;
+  icon?: string;
+  outlined: boolean;
+  raised: boolean;
+  severity?: ControlSeverityType;
+  label?: string;
+  size?: FieldSizeType;
+  click: EventEmitter<MouseEvent>;
+}

package/{lib/components/action-button-group/index.d.ts → src/lib/components/action-button-group/index.ts}

@@ -1,2 +1,2 @@
-export * from './action-button-group.model';
-export * from './action-button.model';
+export * from './action-button-group.model';
+export * from './action-button.model';

package/src/lib/components/base-form/base-form-input.component.ts

@@ -0,0 +1,121 @@
+import { CommonModule } from '@angular/common';
+import { Component, inject, Input, OnInit } from '@angular/core';
+import {
+  AbstractControl,
+  ControlValueAccessor,
+  FormControl,
+  FormControlDirective,
+  FormControlName,
+  FormGroupDirective,
+  NgControl,
+  NgModel,
+  ReactiveFormsModule,
+} from '@angular/forms';
+import { ERROR_PROVIDER_TOKEN } from '@verisoft/core';
+import { BaseInputControls } from './models/base-form-input.models';
+
+const noop = () => {
+  /* */
+};
+
+@Component({
+  template: '',
+  standalone: true,
+  imports: [CommonModule, ReactiveFormsModule],
+})
+export class BaseFormInputComponent
+  implements BaseInputControls<any>, ControlValueAccessor, OnInit
+{
+  readonly ngControl?: NgControl;
+
+  readonly errorService = inject(ERROR_PROVIDER_TOKEN);
+
+  formControl!: FormControl;
+
+  constructor(private readonly control: NgControl) {
+    this.ngControl = control;
+    if (this.control) {
+      this.ngControl.valueAccessor = this;
+    }
+  }
+
+  @Input()
+  label?: string;
+
+  @Input()
+  required = false;
+
+  @Input()
+  readonly!: boolean;
+
+  @Input()
+  disabled!: boolean;
+
+  @Input()
+  tooltip!: string;
+
+  @Input()
+  formDisplay: 'flex' | 'block' = 'flex';
+
+  @Input()
+  clearable = true;
+
+  @Input()
+  placeholder?: string = '';
+
+  @Input()
+  testId?: string;
+
+  inputId = Math.random().toString(36).substring(2);
+
+  selectionChanged: any = noop;
+
+  onTouch: any = noop;
+
+  registerOnChange(fn: any): void {
+    this.selectionChanged = fn;
+  }
+
+  registerOnTouched(fn: any): void {
+    this.onTouch = fn;
+  }
+
+  // eslint-disable-next-line @typescript-eslint/no-empty-function
+  writeValue(value: any): void {}
+
+  ngOnInit(): void {
+    if (this.ngControl) {
+      if (this.ngControl instanceof FormControlName) {
+        this.formControl =
+          this.ngControl.control ||
+          ((this.ngControl.formDirective as FormGroupDirective)?.form.controls[
+            this.ngControl.name as string
+          ] as FormControl);
+      } else if (
+        this.ngControl instanceof FormControlDirective ||
+        this.ngControl instanceof NgModel
+      ) {
+        this.formControl = this.ngControl.control;
+        if (this.ngControl instanceof NgModel) {
+          this.formControl.valueChanges.subscribe(() =>
+            this.ngControl?.viewToModelUpdate(this.control?.value)
+          );
+        }
+      } else {
+        this.formControl = new FormControl();
+      }
+    } else {
+      this.formControl = new FormControl();
+    }
+  }
+
+  isRequired() {
+    if (this.ngControl) {
+      const validator = this.ngControl?.control?.validator?.(
+        {} as AbstractControl
+      );
+      return this.required || (validator && validator['required']);
+    }
+    return this.required;
+  }
+}

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

@@ -0,0 +1,236 @@
+import {
+  AfterViewInit,
+  ChangeDetectorRef,
+  Directive,
+  EventEmitter,
+  HostListener,
+  inject,
+  Input,
+  OnChanges,
+  OnDestroy,
+  OnInit,
+  Output,
+  SimpleChanges,
+  ViewChild,
+} from '@angular/core';
+import { FormGroup } from '@angular/forms';
+import { cloneDeep } from 'lodash-es';
+import { Subject, takeUntil, filter, map, Observable } from 'rxjs';
+import { PreventUnsavedChangesCore } from '../../common';
+import { PreventUnsavedChangesDirective } from '../../services';
+import { FormState, isFormStateEqual } from './models';
+@Directive({
+  // eslint-disable-next-line @angular-eslint/directive-selector
+  selector: '[v-baseForm]',
+  standalone: true,
+})
+export abstract class BaseFormDirective<T extends object>
+  implements OnInit, OnChanges, OnDestroy, AfterViewInit, PreventUnsavedChangesCore
+{
+  @Input() data!: T | any;
+  @Output() dataChange = new EventEmitter<T>();
+  @Output() statusChange = new EventEmitter<FormState>();
+  @Output() formSubmit = new EventEmitter<T>();
+  @Output() formClear = new EventEmitter<void>();
+
+  formDestroyed$ = new Subject<void>();
+  keys: { key: string; alias?: string; type?: string; readOnly: string }[] = [];
+  formGroup!: FormGroup;
+  cd = inject(ChangeDetectorRef);
+  valueInitialization = false;
+  lastState!: FormState;
+  guardViewChild!: ViewChild;
+  formSubmitted = false;
+  protected guard = inject(PreventUnsavedChangesDirective);
+
+  @HostListener('window:beforeunload', ['$event'])
+  unloadHandler(event: BeforeUnloadEvent) {
+    if (this.formGroup.dirty) {
+      event.preventDefault();
+    }
+  }
+
+  canDeactivate(): Observable<boolean> | Promise<boolean> | boolean {
+    if (this.formGroup.dirty && !this.formSubmitted) {
+      const result = this.guard.showConfirmationDialog();
+      return result;
+    }
+
+    return true;
+  }
+
+  ngOnInit(): void {
+    this.initializeFormGroup();
+  }
+
+  ngOnChanges(changes: SimpleChanges): void {
+    if (changes['data'] && this.formGroup) {
+      this.valueInitialization = true;
+      const dirty = this.formGroup.dirty;
+
+      this.formGroup.patchValue(this.fromModel(this.data), {
+        emitEvent: false,
+        onlySelf: true,
+      });
+
+      this.formGroup.updateValueAndValidity();
+      if (!dirty) {
+        this.formGroup.markAsPristine();
+      }
+
+      this.valueInitialization = false;
+      this.createAndEmitIfFormStateChanged();
+    }
+  }
+
+  ngAfterViewInit() {
+    this.cd.detectChanges();
+  }
+
+  ngOnDestroy(): void {
+    this.formDestroyed$.next();
+    this.formDestroyed$.complete();
+  }
+
+  abstract createFormGroup(): FormGroup;
+
+  createCompleteData() {
+    const change = this.toModel(this.formGroup?.value);
+    this.recursiveObjectAttributesTransformation(change);
+    const updatedData = this.applyChanges(
+      cloneDeep(this.data),
+      cloneDeep(change)
+    );
+
+    return updatedData;
+  }
+
+  submit() {
+    this.formSubmitted = true;
+    this.formGroup.markAllAsTouched();
+    if (!this.formGroup.invalid) {
+      this.formSubmit.emit(this.createCompleteData());
+    }
+    this.formGroup.markAsPristine();
+  }
+
+  clear() {
+    this.formClear.emit();
+  }
+
+  private initializeFormGroup() {
+    this.formGroup = this.createFormGroup();
+    this.valueInitialization = true;
+    this.formGroup.patchValue(this.fromModel(this.data), {
+      emitEvent: false,
+      onlySelf: true,
+    });
+
+    this.formGroup.markAsPristine();
+    this.initValueChanges();
+    this.initStatusChanges();
+    this.valueInitialization = false;
+  }
+
+  private initValueChanges() {
+    this.formGroup.valueChanges
+      .pipe(
+        takeUntil(this.formDestroyed$),
+        filter(() => !this.valueInitialization),
+        map((value) => {
+          const change = this.toModel(value);
+          this.recursiveObjectAttributesTransformation(change);
+          const updatedData = this.applyChanges(
+            cloneDeep(this.data),
+            cloneDeep(change)
+          );
+          return updatedData;
+        })
+      )
+      .subscribe((updatedData) => {
+        this.dataChange.emit(updatedData);
+      });
+  }
+
+  private initStatusChanges() {
+    this.formGroup.statusChanges
+      .pipe(takeUntil(this.formDestroyed$))
+      .subscribe(() => {
+        if (!this.valueInitialization) {
+          this.createAndEmitIfFormStateChanged();
+        }
+      });
+
+    this.createAndEmitIfFormStateChanged();
+  }
+
+  private createAndEmitIfFormStateChanged() {
+    const formState: FormState = {
+      valid: !this.formGroup.invalid,
+      dirty: this.formGroup.dirty,
+    };
+
+    if (!isFormStateEqual(formState, this.lastState)) {
+      this.lastState = formState;
+      this.statusChange.emit(formState);
+    }
+  }
+
+  protected applyChanges(data: T, changes: Partial<T>): T {
+    return Object.assign(data || ({} as T), changes);
+  }
+
+  protected toModel(data: T): Partial<T> {
+    return data || {};
+  }
+
+  protected fromModel(data: T): T {
+    return { ...(data || {}) } as T;
+  }
+
+  private recursiveObjectAttributesTransformation(obj: any): void {
+    this.recursiveObjectAttributesTraversal(
+      obj,
+      this.transformEmptyStringToNullStringFn
+    );
+  }
+
+  private recursiveObjectAttributesTraversal(
+    obj: any,
+    transformationFn: (obj: any, key: string) => void
+  ) {
+    if (
+      obj === null ||
+      transformationFn === null ||
+      typeof transformationFn !== 'function'
+    ) {
+      return;
+    }
+
+    const traverse = (obj: any) => {
+      for (const key in obj) {
+        // eslint-disable-next-line no-prototype-builtins
+        if (obj.hasOwnProperty(key)) {
+          transformationFn(obj, key);
+
+          if (typeof obj[key] === 'object') {
+            traverse(obj[key]);
+          }
+        }
+      }
+    };
+
+    traverse(obj);
+  }
+
+  private transformEmptyStringToNullStringFn(obj: any, key: string) {
+    // if empty string - transformation to null string
+    if (typeof obj[key] === 'string' && obj[key] === '') {
+      try {
+        obj[key] = null;
+      } catch (error) {
+        console.error(`Cannot modify ${key}: ${error}`)
+      }
+    }
+  }
+}

package/src/lib/components/base-form/directives/detail-store.directive.ts

@@ -0,0 +1,219 @@
+import {
+  Directive,
+  AfterViewInit,
+  inject,
+  Input,
+  OnInit,
+  ChangeDetectorRef,
+  OnDestroy,
+} from '@angular/core';
+import { ActivatedRoute } from '@angular/router';
+import { createFeatureSelector, createSelector, Store } from '@ngrx/store';
+import {
+  BackendValidationError,
+  createInitDetailAction,
+  createInitNewDetailAction,
+  createResetStateAction,
+  createUpdateDetailAction,
+  createUpdateDetailSetErrorsAction,
+  createUpdateFormStateAction,
+  DetailState,
+} from '@verisoft/store';
+import { takeUntil } from 'rxjs';
+import { UnsubscribeComponent } from '../../unsubscribe.component';
+import { BaseFormDirective } from '../base-form.component';
+
+@Directive({
+  // eslint-disable-next-line @angular-eslint/directive-selector
+  selector: '[v-useDetailStore]',
+  exportAs: 'useDetailStore',
+  standalone: true,
+})
+export class DetailStoreDirective
+  extends UnsubscribeComponent
+  implements OnInit, AfterViewInit, OnDestroy
+{
+  @Input({ required: true }) form!: BaseFormDirective<any>;
+
+  @Input({ required: true }) detailsRepository!: string;
+
+  @Input() autoBind = true;
+
+  @Input() detailId!: string | number | undefined;
+
+  @Input({ required: true }) ngrxFeatureKey!: string;
+
+  @Input() destroyForm = true;
+
+  @Input() readonly = false;
+
+  @Input() readonlyControlNames: string[] = [];
+
+  store = inject(Store);
+  cdr = inject(ChangeDetectorRef);
+  route = inject(ActivatedRoute);
+
+  private itemCache: any = null;
+  private loaded!: boolean;
+
+  ngOnInit(): void {
+    if (!this.loaded) {
+      this.listenFormState();
+    }
+    this.listenFormChange();
+    this.listenFormStatusChange();
+  }
+
+  ngAfterViewInit(): void {
+    if (this.autoBind && !this.loaded) {
+      this.initForm();
+    }
+  }
+
+  override ngOnDestroy(): void {
+    super.ngOnDestroy();
+    if (this.destroyForm) {
+      this.store.dispatch(createResetStateAction(this.detailsRepository)());
+    }
+  }
+
+  private initForm() {
+    if (this.detailId === 'create') {
+      this.store.dispatch(createInitNewDetailAction(this.detailsRepository)());
+    } else {
+      this.store.dispatch(
+        createInitDetailAction(this.detailsRepository)({ obj: this.detailId })
+      );
+    }
+
+    if (this.readonly) {
+      this.form.formGroup.disable();
+      return;
+    }
+
+    this.readonlyControlNames.forEach(x => {
+      this.form.formGroup.get(x)?.disable();
+    });
+  }
+
+  private listenFormState() {
+    const selectIncomeData = createSelector(
+      createFeatureSelector<any>(this.ngrxFeatureKey),
+      (state: any) => state?.[this.detailsRepository] as DetailState<any>
+    );
+    this.store
+      .select(selectIncomeData)
+      .pipe(takeUntil(this.destroyed$))
+      .subscribe(
+        (
+          { item, loaded, backendValidationErrors } = {
+            item: undefined,
+            loaded: false,
+            saveItemState: { saveInProgress: false },
+            backendValidationErrors: []
+          }
+        ) => {
+          if (item
+            && ((item.validationErrors || item.validationWarnings) && !this.form.formGroup.dirty)
+            || backendValidationErrors.length
+          ) {
+            this.handleValidation(
+              'propertyName',
+              item.validationWarnings || [],
+              'validationWarning',
+              'warningMessage'
+            );
+            this.handleValidation(
+              'propertyName',
+              item.validationErrors || [],
+              'validationError',
+              'errorMessage'
+            );
+
+            if (this.itemCache && this.isStateChanged(item) && backendValidationErrors.length) {
+              backendValidationErrors = this.dispatchErrors(item, backendValidationErrors);
+            }
+
+            this.handleBackendValidation(backendValidationErrors);
+            this.cdr.markForCheck();
+          }
+
+          this.itemCache = item;
+
+          this.loaded = loaded;
+          this.cdr.detectChanges();
+        }
+      );
+  }
+
+  private listenFormChange() {
+    this.form.dataChange.pipe(takeUntil(this.destroyed$)).subscribe((item) => {
+      this.store.dispatch(
+        createUpdateDetailAction(this.detailsRepository)({ item })
+      );
+    });
+  }
+
+  private listenFormStatusChange() {
+    this.form.statusChange
+      .pipe(takeUntil(this.destroyed$))
+      .subscribe((formState) => {
+        this.store.dispatch(
+          createUpdateFormStateAction(this.detailsRepository)({ formState })
+        );
+      });
+  }
+
+  private handleValidation = (
+    controlName: string,
+    errors: any[],
+    errorKey: string,
+    messageKey: string
+  ) => {
+    if (errors.length > 0) return;
+    errors.forEach((error: any) => {
+      const control = this.form.formGroup.get(error[controlName]);
+      if (control) {
+        control.disabled
+          ? control.disable({ emitEvent: false, onlySelf: true })
+          : control.enable({ emitEvent: false, onlySelf: true });
+        control.setErrors(
+          { [errorKey]: error[messageKey] },
+          { emitEvent: true }
+        );
+        control.markAsDirty();
+      }
+    });
+  };
+
+  private handleBackendValidation(errors: BackendValidationError[]) {
+    errors.forEach(({ parameters, code }: BackendValidationError) => {
+      const control = this.form.formGroup.get(this.normalizePropertyNames(parameters));
+      if (!control) return;
+
+      control[control.disabled ? "disable" : "enable"]({ emitEvent: false, onlySelf: true });
+      control.setErrors({ "validationError": code }, { emitEvent: true });
+      control.markAsDirty();
+    });
+  }
+
+  private dispatchErrors(item: any, errors: BackendValidationError[]): BackendValidationError[] {
+    const error = errors.filter((e: BackendValidationError) => {
+      return this.itemCache[this.normalizePropertyNames(e.parameters)] === item[this.normalizePropertyNames(e.parameters)];
+    });
+
+    this.store.dispatch(
+      createUpdateDetailSetErrorsAction(this.detailsRepository)({ error })
+    );
+
+    return error;
+  }
+
+  private normalizePropertyNames(input: string): string {
+    return String(input[0]).toLocaleLowerCase() + String(input).slice(1);
+  }
+
+  private isStateChanged(item: any): boolean {
+    return item !== this.itemCache;
+  }
+}

package/{lib/components/base-form/index.d.ts → src/lib/components/base-form/index.ts}

@@ -1,4 +1,4 @@
-export * from './base-form-input.component';
-export * from './base-form.component';
-export * from './directives/detail-store.directive';
-export * from './models';
+export * from './base-form-input.component';
+export * from './base-form.component'
+export * from './directives/detail-store.directive';
+export * from './models';

package/src/lib/components/base-form/models/base-form-input.models.ts

@@ -0,0 +1,11 @@
+import { NgControl } from '@angular/forms';
+
+export abstract class BaseInputControls<T> {
+  value?: T | null;
+
+  readonly ngControl?: NgControl;
+
+  readonly label?: string;
+
+  readonly required!: boolean;
+}

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

@@ -0,0 +1,31 @@
+export interface BaseFormCore {
+  label?: string;
+  required: boolean;
+  readonly: boolean;
+  tooltip: string;
+  formDisplay: 'flex' | 'block';
+  clearable: boolean;
+  placeholder?: string
+  testId?: string;
+}
+
+export interface BaseFormDirectiveCore<T> {
+  initialData: T | any;
+}
+
+export interface FormState {
+  dirty: boolean;
+  valid: boolean;
+}
+
+export function isFormStateEqual(current: FormState, other: FormState) {
+  if (!current && !other) {
+    return true;
+  }
+
+  if (current && other) {
+    return current.dirty === other.dirty && current.valid === other.valid;
+  }
+
+  return false;
+}

package/{lib/components/base-form/models/index.d.ts → src/lib/components/base-form/models/index.ts}

@@ -1,2 +1,2 @@
-export * from './base-form-input.models';
-export * from './base-form.models';
+export * from './base-form-input.models';
+export * from './base-form.models';