@verisoft/ui-core 20.1.0 → 20.1.2

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

@@ -1,120 +0,0 @@
-
-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: '',
-    imports: [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

@@ -1,236 +0,0 @@
-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

@@ -1,219 +0,0 @@
-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/src/lib/components/base-form/index.ts

@@ -1,4 +0,0 @@
-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

@@ -1,11 +0,0 @@
-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

@@ -1,31 +0,0 @@
-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/src/lib/components/base-form/models/index.ts

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

package/src/lib/components/breadcrumb/breadcrumb.model.ts

@@ -1,21 +0,0 @@
-import { InjectionToken } from '@angular/core';
-import { ActivatedRoute } from "@angular/router";
-import { MenuItem } from '../side-menu';
-
-export const BREADCRUMB_COMPONENT_TOKEN = new InjectionToken<BreadcrumbCore>(
-    'BreadcrumbComponentToken'
-);
-
-export interface BreadcrumbCore {
-    items: MenuItem[];
-    homeRoute: string;
-    useHomeRoute: boolean;
-}
-
-export interface Breadcrumb {
-    label: string;
-    routerLink?: string;
-    url?: string;
-    active?: boolean;
-    activatedRoute?: ActivatedRoute;
-}

package/src/lib/components/breadcrumb/breadcrumb.service.ts

@@ -1,9 +0,0 @@
-import { EventEmitter, Injectable, Output } from '@angular/core';
-import { Breadcrumb } from './breadcrumb.model';
-
-@Injectable({
-  providedIn: 'root',
-})
-export class BreadcrumbService {
-  @Output() routeChange: EventEmitter<Breadcrumb> = new EventEmitter();
-}