@verisoft/ui-core 0.0.1

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

@@ -0,0 +1,209 @@
+import {
+  AfterViewInit,
+  ChangeDetectorRef,
+  Directive,
+  EventEmitter,
+  inject,
+  Input,
+  OnChanges,
+  OnDestroy,
+  OnInit,
+  Output,
+  SimpleChanges,
+} from '@angular/core';
+import { FormGroup } from '@angular/forms';
+import { cloneDeep } from 'lodash-es';
+import { Subject, takeUntil, filter, map } from 'rxjs';
+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
+{
+  @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;
+
+  ngOnInit(): void {
+    this.initializeFormGroup();
+  }
+
+  ngOnChanges(changes: SimpleChanges): void {
+    if (changes['initialData'] && 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.formGroup.markAllAsTouched();
+    if (!this.formGroup.invalid) {
+      this.formSubmit.emit(this.createCompleteData());
+    }
+    this.formGroup.markAsUntouched();
+  }
+
+  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] === '') {
+      obj[key] = null;
+    }
+  }
+}

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

@@ -0,0 +1,146 @@
+import {
+  Directive,
+  AfterViewInit,
+  inject,
+  Input,
+  OnInit,
+  ChangeDetectorRef,
+  OnDestroy,
+} from '@angular/core';
+import { ActivatedRoute } from '@angular/router';
+import { createFeatureSelector, createSelector, Store } from '@ngrx/store';
+import {
+  createInitDetailAction,
+  createResetStateAction,
+  createUpdateDetailAction,
+  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
+{
+  store = inject(Store);
+  cdr = inject(ChangeDetectorRef);
+  route = inject(ActivatedRoute);
+  @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;
+
+  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() {
+    this.store.dispatch(
+      createInitDetailAction(this.detailsRepository)({ obj: this.detailId })
+    );
+  }
+
+  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 } = { item: undefined, loaded: false }) => {
+        if (
+          item &&
+          (item.validationErrors || item.validationWarnings) &&
+          !this.form.formGroup.dirty
+        ) {
+          this.handleValidation(
+            'propertyName',
+            item.validationWarnings || [],
+            'validationWarning',
+            'warningMessage'
+          );
+          this.handleValidation(
+            'propertyName',
+            item.validationErrors || [],
+            'validationError',
+            'errorMessage'
+          );
+        }
+
+        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();
+      }
+    });
+    this.cdr.markForCheck();
+  };
+}

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

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

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

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

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

@@ -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,94 @@
+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';
+  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))
+      .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 (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 !== undefined && label !== null) {
+        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/src/lib/components/button/button.model.ts

@@ -0,0 +1,22 @@
+import { InjectionToken } from '@angular/core';
+import { Params } from '@angular/router';
+import { ControlSeverityType, FieldSizeType, IconPositionType } from '../../common';
+
+export const BUTTON_COMPONENT_TOKEN = new InjectionToken<ButtonCore>(
+    'ButtonComponentToken'
+);
+
+export interface ButtonCore {
+    label?: string;
+    icon?: string;
+    badge?: string;
+    iconPos: IconPositionType;
+    rounded: boolean;
+    text: boolean;
+    outlined: boolean;
+    raised: boolean;
+    severity?: ControlSeverityType;
+    routerLink: any[];
+    size: FieldSizeType | undefined;
+    queryParams?: Params;
+}

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

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

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

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

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

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

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

@@ -0,0 +1,9 @@
+import { InjectionToken } from '@angular/core';
+import { BaseFormCore } from '../base-form';
+
+export const CHECKBOX_COMPONENT_TOKEN = new InjectionToken<CheckboxCore>(
+    'CheckboxComponentToken'
+);
+
+// eslint-disable-next-line @typescript-eslint/no-empty-interface
+export interface CheckboxCore extends BaseFormCore {}

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,26 @@
+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'
+);
+
+// eslint-disable-next-line @typescript-eslint/no-empty-interface
+export interface ConfirmDialogCore {}
+
+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;
+}

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

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

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

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

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

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

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

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

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

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

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

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

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

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