@verisoft/ui-core 19.0.0-rc001 → 20.1.0

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 './base-form.component'
 export * from './directives/detail-store.directive';
-export * from './models';
+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.models';

package/{lib/components/breadcrumb/breadcrumb.model.d.ts → src/lib/components/breadcrumb/breadcrumb.model.ts}

@@ -1,12 +1,17 @@
 import { InjectionToken } from '@angular/core';
 import { ActivatedRoute } from "@angular/router";
 import { MenuItem } from '../side-menu';
-export declare const BREADCRUMB_COMPONENT_TOKEN: InjectionToken<BreadcrumbCore>;
+
+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;

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

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

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

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

package/{lib/components/button/button.model.d.ts → src/lib/components/button/button.model.ts}

@@ -1,7 +1,11 @@
 import { InjectionToken } from '@angular/core';
 import { Params } from '@angular/router';
 import { ControlSeverityType, FieldSizeType, IconPositionType } from '../../common';
-export declare const BUTTON_COMPONENT_TOKEN: InjectionToken<ButtonCore>;
+
+export const BUTTON_COMPONENT_TOKEN = new InjectionToken<ButtonCore>(
+    'ButtonComponentToken'
+);
+
 export interface ButtonCore {
     label?: string;
     icon?: string;

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

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

package/{lib/components/calendar/calendar.model.d.ts → src/lib/components/calendar/calendar.model.ts}

@@ -1,6 +1,10 @@
 import { InjectionToken } from '@angular/core';
 import { BaseFormCore } from '../base-form';
-export declare const CALENDAR_COMPONENT_TOKEN: InjectionToken<CalendarCore>;
+
+export const CALENDAR_COMPONENT_TOKEN = new InjectionToken<CalendarCore>(
+    'CalendarComponentToken'
+);
+
 export interface CalendarCore extends BaseFormCore {
     maxDate: Date;
     icon: string;
@@ -9,4 +13,4 @@ export interface CalendarCore extends BaseFormCore {
     footer: string;
     floatLabel: string | undefined;
     selectionMode: "single" | "multiple" | "range" | undefined;
-}
+}

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

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

package/{lib/components/checkbox/checkbox.model.d.ts → src/lib/components/checkbox/checkbox.model.ts}

@@ -1,6 +1,10 @@
 import { InjectionToken, InputSignal } from '@angular/core';
 import { BaseFormCore } from '../base-form';
-export declare const CHECKBOX_COMPONENT_TOKEN: InjectionToken<CheckboxCore>;
+
+export const CHECKBOX_COMPONENT_TOKEN = new InjectionToken<CheckboxCore>(
+    'CheckboxComponentToken'
+);
+
 export interface CheckboxCore extends BaseFormCore {
     indeterminate: InputSignal<boolean>;
 }

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

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

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

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

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

package/{lib/components/dropdown/dropdown.model.d.ts → src/lib/components/dropdown/dropdown.model.ts}

@@ -1,7 +1,11 @@
 import { InjectionToken } from '@angular/core';
 import { DataSourceComponentModel } from '../../common';
 import { BaseFormCore } from '../base-form';
-export declare const DROPDOWN_COMPONENT_TOKEN: InjectionToken<DropdownCore<any>>;
+
+export const DROPDOWN_COMPONENT_TOKEN = new InjectionToken<DropdownCore<any>>(
+    'DropdownComponentToken'
+);
+
 export interface DropdownCore<T> extends DataSourceComponentModel<T>, BaseFormCore {
     dropdownIcon?: string;
     floatLabel?: string;

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

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

package/{lib/components/dropdown-button/dropdown-button.model.d.ts → src/lib/components/dropdown-button/dropdown-button.model.ts}

@@ -1,14 +1,18 @@
-import { InjectionToken, InputSignal } from "@angular/core";
-import { ControlSeverityType, FieldSizeType } from "../../common";
-import { MenuItem } from "../side-menu";
-export declare const DROPDOWN_BUTTON_COMPONENT_TOKEN: InjectionToken<DropdownButtonCore>;
-export interface DropdownButtonCore {
-    label: InputSignal<string | undefined>;
-    icon: InputSignal<string | undefined>;
-    rounded: InputSignal<boolean | undefined>;
-    outlined: InputSignal<boolean | undefined>;
-    raised: InputSignal<boolean | undefined>;
-    severity: InputSignal<ControlSeverityType | undefined>;
-    size: InputSignal<FieldSizeType | undefined>;
-    items: InputSignal<MenuItem[] | undefined>;
-}
+import { InjectionToken, InputSignal } from "@angular/core";
+import { ControlSeverityType, FieldSizeType } from "../../common";
+import { MenuItem } from "../side-menu";
+
+export const DROPDOWN_BUTTON_COMPONENT_TOKEN = new InjectionToken<DropdownButtonCore>(
+    'DropdownButtonComponentToken'
+);
+
+export interface DropdownButtonCore {
+    label: InputSignal<string | undefined>;
+    icon: InputSignal<string | undefined>;
+    rounded: InputSignal<boolean | undefined>;
+    outlined: InputSignal<boolean | undefined>;
+    raised: InputSignal<boolean | undefined>;
+    severity: InputSignal<ControlSeverityType | undefined>;
+    size: InputSignal<FieldSizeType | undefined>;
+    items: InputSignal<MenuItem[] | undefined>;
+}

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

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

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

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

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

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

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

@@ -0,0 +1,17 @@
+import { InjectionToken } from '@angular/core';
+import { ControlValueAccessor } from '@angular/forms';
+import { GenericFieldDefinition } from '../generic-form';
+
+export const FILTER_COMPONENT_TOKEN = new InjectionToken<FilterCore>(
+    'FilterComponentToken'
+);
+
+export interface FilterCore extends ControlValueAccessor {
+    fields: GenericFieldDefinition[];  
+    title?: string;  
+    fulltextFieldName: string;  
+    showFulltext: boolean;  
+    showFilters: boolean;  
+    autoBind: boolean;  
+    debounceTime?: number;
+}

package/{lib/components/filter/index.d.ts → src/lib/components/filter/index.ts}

@@ -1 +1 @@
-export * from './filter.model';
+export * from './filter.model';

package/{lib/components/form-field/form-field.model.d.ts → src/lib/components/form-field/form-field.model.ts}

@@ -1,6 +1,10 @@
 import { InjectionToken } from '@angular/core';
 import { NgControl } from '@angular/forms';
-export declare const FORM_FIELD_COMPONENT_TOKEN: InjectionToken<FormFieldCore>;
+
+export const FORM_FIELD_COMPONENT_TOKEN = new InjectionToken<FormFieldCore>(
+    'FormFieldComponentToken'
+);
+
 export interface FormFieldCore {
     ngControl?: NgControl;
     label?: string;
@@ -8,4 +12,4 @@ export interface FormFieldCore {
     required: boolean;
     testId?: string;
     display: 'flex' | 'block';
-}
+}

package/src/lib/components/form-field/index.ts

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

package/{lib/components/generic-field/generic-field.model.d.ts → src/lib/components/generic-field/generic-field.model.ts}

@@ -1,6 +1,10 @@
 import { InjectionToken } from '@angular/core';
 import { DataSourceComponentModel } from '../../common';
 import { BaseFormCore } from '../base-form';
-export declare const GENERIC_FIELD_COMPONENT_TOKEN: InjectionToken<GenericFieldCore<any>>;
+
+export const GENERIC_FIELD_COMPONENT_TOKEN = new InjectionToken<GenericFieldCore<any>>(
+    'GenericFieldComponentToken'
+);
+
 export interface GenericFieldCore<T> extends DataSourceComponentModel<T>, BaseFormCore {
 }

package/src/lib/components/generic-field/index.ts

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

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

@@ -0,0 +1,33 @@
+import { ValidatorFn } from '@angular/forms';
+import { DatasourceType } from '@verisoft/core';
+import { FieldSizeType } from '../../common';
+
+export interface GenericFieldDefinition {
+  validator?: ValidatorFn[];
+  type?: GenericFieldTypeType;
+  label?: string;
+  floatLabel?: boolean;
+  name: string;
+  optionLabel?: string;
+  optionValue?: string;
+  options?: unknown[];
+  value?: unknown;
+  testId?: string;
+  size?: FieldSizeType;
+  readonly?: boolean;
+  datasource?: DatasourceType<any>;
+  filterField?: string;
+  showFilter?: boolean;
+  localSearch?: boolean;
+}
+
+export enum GenericFieldType {
+  'dropdown' = 'dropdown',
+  'checkbox' = 'checkbox',
+  'simplecheckbox' = 'simplecheckbox',
+  'calendar' = 'calendar',
+  'multiselect' = 'multiselect',
+  'text' = 'text',
+}
+
+export type GenericFieldTypeType = keyof typeof GenericFieldType;