@verisoft/ui-core 18.4.0 → 18.6.0

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/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/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();
-}

package/src/lib/components/breadcrumb/breadcrumbcore.component.ts

@@ -1,115 +0,0 @@
-import {
-  ChangeDetectorRef,
-  Directive,
-  Input,
-  inject,
-  OnInit,
-} from '@angular/core';
-import { ActivatedRoute, NavigationEnd, Router } from '@angular/router';
-import { filter, takeUntil } from 'rxjs';
-import { MenuItem } from '../side-menu';
-import { UnsubscribeComponent } from '../unsubscribe.component';
-import { BreadcrumbCore } from './breadcrumb.model';
-import { BreadcrumbService } from './breadcrumb.service';
-
-@Directive({})
-export class BreadcrumbCoreComponent
-  extends UnsubscribeComponent
-  implements BreadcrumbCore, OnInit
-{
-  @Input() items: MenuItem[] = [];
-  @Input() homeRoute = '/';
-  @Input() useHomeRoute = false;
-
-  static readonly ROUTE_DATA_BREADCRUMB = 'breadcrumb';
-  static readonly ROUTE_DATA_BREADCRUMB_URL = 'breadcrumb_url';
-  static readonly ROUTE_DATA_NO_BREADCRUMB_ROUTE = 'breadcrumb_no_route';
-  static readonly BREADCRUMB_HIDE = 'breadcrumb_hide';
-  readonly home = { icon: 'pi pi-home', routerLink: this.homeRoute };
-
-  router = inject(Router);
-  activatedRoute = inject(ActivatedRoute);
-  breadcrumbService = inject(BreadcrumbService);
-  cdr = inject(ChangeDetectorRef);
-
-  ngOnInit(): void {
-    this.initBreadcrumbsCreation();
-    this.initRouteChangeListen();
-  }
-
-  private initBreadcrumbsCreation() {
-    this.router.events
-      .pipe(
-        filter((event) => event instanceof NavigationEnd),
-        takeUntil(this.destroyed$)
-      )
-      .subscribe(
-        () => (this.items = this.createBreadcrumbs(this.activatedRoute.root))
-      );
-  }
-
-  private initRouteChangeListen() {
-    this.breadcrumbService.routeChange
-      .pipe(
-        filter((x) => x.label !== 'Undefined'),
-        takeUntil(this.destroyed$)
-      )
-      .subscribe((x) => {
-        this.items = [
-          ...this.items,
-          {
-            label: x.label,
-            routerLink: x.routerLink,
-            url: x.url,
-            class: 'breadcrumb',
-          },
-        ];
-        this.cdr.detectChanges();
-      });
-  }
-
-  private createBreadcrumbs(
-    route: ActivatedRoute,
-    routerLink = '',
-    breadcrumbs: MenuItem[] = []
-  ): any {
-    const children: ActivatedRoute[] = route.children;
-
-    if (children.length === 0) {
-      return breadcrumbs;
-    }
-
-    for (const child of children) {
-      const routeURL: string = child.snapshot.url
-        .map((segment) => segment.path)
-        .join('/');
-
-      if (!child.snapshot.data[BreadcrumbCoreComponent.BREADCRUMB_HIDE]) {
-        if (BreadcrumbCoreComponent.ROUTE_DATA_BREADCRUMB_URL !== undefined) {
-          const route =
-            child.snapshot.data[BreadcrumbCoreComponent.ROUTE_DATA_BREADCRUMB_URL];
-          routerLink += `/${route}`;
-        }
-
-        if (!BreadcrumbCoreComponent.ROUTE_DATA_BREADCRUMB_URL && routeURL !== '') {
-          routerLink += `/${routeURL}`;
-        }
-
-        const label = child.snapshot.data[BreadcrumbCoreComponent.ROUTE_DATA_BREADCRUMB];
-        if (
-          label &&
-          BreadcrumbCoreComponent.ROUTE_DATA_NO_BREADCRUMB_ROUTE &&
-          child.snapshot.data[
-            BreadcrumbCoreComponent.ROUTE_DATA_NO_BREADCRUMB_ROUTE
-          ]
-        ) {
-          breadcrumbs.push({ label, routerLink: undefined });
-        } else if (label && child.snapshot.routeConfig?.path !== '') {
-          breadcrumbs.push({ label, routerLink: routerLink });
-        }
-      }
-
-      return this.createBreadcrumbs(child, routerLink, breadcrumbs);
-    }
-  }
-}

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

@@ -1,3 +0,0 @@
-export * from './breadcrumb.model';
-export * from './breadcrumbcore.component'
-export * from './breadcrumb.service';

package/src/lib/components/button/index.ts

@@ -1 +0,0 @@
-export * from './button.model';

package/src/lib/components/calendar/index.ts

@@ -1 +0,0 @@
-export * from './calendar.model';

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

@@ -1,8 +0,0 @@
-import { InjectionToken } from '@angular/core';
-import { BaseFormCore } from '../base-form';
-
-export const CHECKBOX_COMPONENT_TOKEN = new InjectionToken<CheckboxCore>(
-    'CheckboxComponentToken'
-);
-
-export type CheckboxCore = BaseFormCore

package/src/lib/components/checkbox/index.ts

@@ -1 +0,0 @@
-export * from './checkbox.model';

package/src/lib/components/confirm-dialog/confirm-dialog.model.ts

@@ -1,31 +0,0 @@
-import { InjectionToken, Type } from '@angular/core';
-import { SafeHtml } from "@angular/platform-browser";
-import { ControlSeverityType } from '../../common';
-
-export const CONFIRM_DIALOG_COMPONENT_TOKEN = new InjectionToken<ConfirmDialogCore>(
-  'ConfirmDialogComponentToken'
-);
-
-export type ConfirmDialogCore = object
-
-export interface DialogData {
-  title?: string;
-  headerIcon?: string;
-  severity?: ControlSeverityType;
-  showCancelButton?: boolean;
-  buttonOrder?: 'confirm-cancel' | 'cancel-confirm';
-  confirmButtonText?: string;
-  confirmButtonFn?: () => void;
-  cancelButtonFn?: () => void;
-  cancelButtonText?: string;
-  innerHTML?: string | SafeHtml;
-  data?: unknown;
-  componentType?: Type<unknown>;
-  closable?: boolean;
-  width?: string;
-  height?: string;
-}
-
-export interface ExtendedDialogData<TInputs = any, TOutputs = any> extends DialogData {
-  data?: TInputs & TOutputs;
-}

package/src/lib/components/confirm-dialog/index.ts

@@ -1 +0,0 @@
-export * from './confirm-dialog.model';

package/src/lib/components/dropdown/index.ts

@@ -1 +0,0 @@
-export * from './dropdown.model';

package/src/lib/components/dynamic-component/dynamic-component.model.ts

@@ -1,2 +0,0 @@
-export type ExtendedComponent<TComponent> = 
-    Partial<TComponent> & { [key: string]: (value: any) => void; };

package/src/lib/components/dynamic-component/index.ts

@@ -1 +0,0 @@
-export * from './dynamic-component.model';