@verisoft/ui-core 0.0.1 → 18.3.0

package/package.json

@@ -1,16 +1,19 @@
 {
   "name": "@verisoft/ui-core",
-  "version": "0.0.1",
+  "version": "18.3.0",
   "peerDependencies": {
     "@angular/core": "^18.2.8",
     "@angular/router": "18.2.8",
     "@verisoft/core": "18.0.0",
     "@angular/forms": "18.2.8",
-    "primeng": "^17.18.11",
     "rxjs": "~7.8.0",
     "@angular/common": "^18.2.8",
     "lodash-es": "^4.17.21",
-    "@verisoft/store": "18.0.0"
+    "@verisoft/store": "18.0.0",
+    "@ngrx/store": "18.0.2",
+    "@angular/platform-browser": "18.2.8",
+    "uuid": "^10.0.0",
+    "@ngx-translate/core": "^15.0.0"
   },
   "sideEffects": false
 }

package/src/index.ts

@@ -1,4 +1,6 @@
 export * from './lib/common';
 export * from './lib/components';
 export * from './lib/directives';
-export * from './lib/pipes';
+export * from './lib/pipes';
+export * from './lib/services';
+export * from './lib/format/format';

package/src/lib/common/constants.ts

@@ -1 +1,5 @@
-export const DEFAULT_DEBOUNCE_TIME = 300;
+export const DEFAULT_DEBOUNCE_TIME = 300;
+
+export const DEFAULT_PAGINATION = [10, 25, 50, 100];
+
+export const MAX_COLUMN_CHAR_COUNT = 30;

package/src/lib/common/control.models.ts

@@ -41,11 +41,23 @@ export enum FieldSize {
   large = 'large',
 }
 
+export enum FieldAlign {
+  left = 'left',
+  center = 'center',
+  right = 'right',
+}
+
 export enum FieldType {
   text = 'text',
   number = 'number',
   password = 'password',
   search = 'search',
+  date = 'date',
+}
+
+export enum LayoutType {
+  horizontal = 'horizontal',
+  vertical = 'vertical',
 }
 
 export type ControlSeverityType = keyof typeof ControlSeverity;
@@ -54,4 +66,6 @@ export type GovButtonTypeType = keyof typeof GovButtonType;
 export type IconPositionType = keyof typeof IconPosition;
 export type SlotPositionType = keyof typeof SlotPosition;
 export type FieldSizeType = keyof typeof FieldSize;
+export type FieldAlignType = keyof typeof FieldAlign;
 export type FieldTypeType = keyof typeof FieldType;
+export type LayoutTypeType = keyof typeof LayoutType;

package/src/lib/common/datasource-component.model.ts

@@ -1,14 +1,14 @@
 import { EventEmitter, SimpleChanges } from '@angular/core';
-import { FilterEvent, LazyLoadEvent } from '@verisoft/core';
+import { FilterEvent, LazyLoadEvent, RequestParams } from '@verisoft/core';
 
 export interface DataSourceComponentModel<TEntity> {
   ngOnChanges?: (changes: SimpleChanges) => void;
   lazy: boolean;
   loading: boolean;
   filter: boolean;
-  options?: TEntity[];
-  optionValue?: string;
-  optionLabel?: string;
+  options: TEntity[] | undefined;
+  optionValue: string | undefined;
+  optionLabel: string | undefined;
   showed: EventEmitter<any>;
   cleared: EventEmitter<any>;
   filtered: EventEmitter<FilterEvent>;
@@ -39,3 +39,5 @@ export function setDataToArray<T>(
 
   return targetArray;
 }
+
+export type ExtendedRequestType<T> = RequestParams<T> & { useNewData: boolean}

package/src/lib/common/deactivate-guard.model.ts

@@ -0,0 +1,5 @@
+import { Observable } from "rxjs";
+
+export interface PreventUnsavedChangesCore {
+  canDeactivate: () => Observable<boolean> | Promise<boolean> | boolean;
+}

package/src/lib/common/download-file.ts

@@ -0,0 +1,20 @@
+export function downloadText(
+  filename: string,
+  text: string,
+  mimeType: string | undefined = 'text/plain'
+): void {
+  const blob = new Blob([text], { type: mimeType });
+  downloadFile(filename, blob);
+}
+
+export function downloadFile(
+  filename: string,
+  blob: Blob
+): void {
+  const url = window.URL.createObjectURL(blob);
+  const a = document.createElement('a');
+  a.href = url;
+  a.download = filename;
+  a.click();
+  window.URL.revokeObjectURL(url);
+}

package/src/lib/common/filter.ts

@@ -0,0 +1,7 @@
+export function isFilterEmpty<T>(filter: Partial<T> | undefined) {
+  if (filter == undefined) {
+    return true;
+  }
+
+  return !Object.entries(filter).some((x) => x[1] != undefined);
+}

package/src/lib/common/icons.ts

@@ -0,0 +1,34 @@
+export interface CommonIcons {
+    add: string;
+    minus: string;
+    delete: string;
+    filter: string;
+    download: string;
+    save: string;
+    print: string;
+    edit: string;
+    settings: string;
+    house: string;
+    calendar: string;
+    chevronRight: string;
+    chevronLeft: string;
+    chevronDown: string;
+    chevronUp: string;
+    checkbox: string;
+    warning: string;
+    search: string;
+    action: string;
+    user: string;
+    logout: string;
+    crossCircle: string;
+    infoCircle: string;
+    cross: string;
+    arrowLeft: string;
+    arrowRight: string;
+    questionCircle: string;
+    checkCircle: string;
+    sitemap: string;
+    check: string;
+    envelope: string;
+    loader: string;
+}

package/src/lib/common/index.ts

@@ -1,4 +1,10 @@
 export * from './angular-helper';
 export * from './control.models';
 export * from './constants';
-export * from './datasource-component.model';
+export * from './datasource-component.model';
+export * from './filter';
+export * from './notificable-property.model';
+export * from './rxjs';
+export * from './icons';
+export * from './download-file';
+export * from './deactivate-guard.model'

package/src/lib/common/notificable-property.model.ts

@@ -0,0 +1,5 @@
+import { Observable } from "rxjs";
+
+export interface NotificableProperty {
+  propertyChanged: Observable<unknown>;
+}

package/src/lib/common/rxjs.spec.ts

@@ -0,0 +1,58 @@
+import { QueryList } from '@angular/core';
+import { skip, Subject } from 'rxjs';
+import { NotificableProperty } from './notificable-property.model';
+import { queryListChanged } from './rxjs';
+
+describe('queryListChanged', () => {
+  let queryList: QueryList<NotificableProperty>;
+
+  beforeEach(() => {
+    queryList = new QueryList<NotificableProperty>();
+  });
+
+  it('should emit initial value', (done) => {
+    queryListChanged(queryList).subscribe((result) => {
+      expect(result).toEqual([]);
+      done();
+    });
+  });
+
+  it('should emit when propertyChanged emits', (done) => {
+    const propertyChanged = new Subject<void>();
+    const item = { propertyChanged } as NotificableProperty;
+    queryList.reset([item]);
+    queryList.notifyOnChanges();
+
+    queryListChanged(queryList)
+      .pipe(skip(1))
+      .subscribe((result) => {
+        expect(result).toEqual([item]);
+        done();
+      });
+
+    setTimeout(() => {
+      propertyChanged.next();
+    }, 60);
+  });
+
+  it('should debounce emissions', (done) => {
+    const propertyChanged = new Subject<void>();
+    const item = { propertyChanged } as NotificableProperty;
+    queryList.reset([item]);
+    queryList.notifyOnChanges();
+
+    const emittedValues: NotificableProperty[][] = [];
+    queryListChanged(queryList).subscribe((result) => {
+      emittedValues.push(result);
+    });
+
+    propertyChanged.next();
+    propertyChanged.next();
+
+    setTimeout(() => {
+      expect(emittedValues.length).toBe(1);
+      expect(emittedValues[0]).toEqual([item]);
+      done();
+    }, 100);
+  });
+});

package/src/lib/common/rxjs.ts

@@ -0,0 +1,21 @@
+import { QueryList } from '@angular/core';
+import { debounceTime, map, merge, startWith, switchMap } from 'rxjs';
+import { NotificableProperty } from './notificable-property.model';
+
+export function queryListChanged<TEntity>(list: QueryList<TEntity>) {
+  return list.changes.pipe(
+    startWith({}),
+    switchMap(() => {
+      const actionPropertyChanges$ = list
+        .toArray()
+        .filter((action) => (<NotificableProperty>action).propertyChanged)
+        .map((action) => (<NotificableProperty>action).propertyChanged);
+
+      return merge(...actionPropertyChanges$).pipe(
+        startWith({}),
+        map(() => list.toArray())
+      );
+    }),
+    debounceTime(50)
+  );
+}

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

@@ -2,15 +2,14 @@ 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 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;
-}
+  maxItems: number;
+  maxItemsMobile: number;
+  items: ActionButton[];
+  menuIconPos: IconPositionType;
+  menuIcon: string;
+  label?: string;
+}

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

@@ -1,16 +1,15 @@
-import { EventEmitter } from "@angular/core";
-import { ControlSeverityType, FieldSizeType } from "../../common";
+import { EventEmitter } from '@angular/core';
+import { ControlSeverityType, FieldSizeType, NotificableProperty } from '../../common';
 
-export interface ActionButton {
-    disabled: boolean;
-    toolTip?: string;
-    id?: string;
-    icon?: string;
-    outlined: boolean;
-    raised: boolean;
-    text: boolean;
-    severity?: ControlSeverityType;
-    label?: string;
-    size?: FieldSizeType;
-    clickEvent: EventEmitter<void>;
-}
+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/src/lib/components/base-form/base-form-input.component.ts

@@ -1,5 +1,5 @@
 import { CommonModule } from '@angular/common';
-import { Component, Input, OnInit } from '@angular/core';
+import { Component, inject, Input, OnInit } from '@angular/core';
 import {
   AbstractControl,
   ControlValueAccessor,
@@ -11,6 +11,7 @@ import {
   NgModel,
   ReactiveFormsModule,
 } from '@angular/forms';
+import { ERROR_PROVIDER_TOKEN } from '@verisoft/core';
 import { BaseInputControls } from './models/base-form-input.models';
 
 const noop = () => {
@@ -27,6 +28,8 @@ export class BaseFormInputComponent
 {
   readonly ngControl?: NgControl;
 
+  readonly errorService = inject(ERROR_PROVIDER_TOKEN);
+
   formControl!: FormControl;
 
   constructor(private readonly control: NgControl) {
@@ -45,6 +48,9 @@ export class BaseFormInputComponent
   @Input()
   readonly!: boolean;
 
+  @Input()
+  disabled!: boolean;
+
   @Input()
   tooltip!: string;
 

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

@@ -3,6 +3,7 @@ import {
   ChangeDetectorRef,
   Directive,
   EventEmitter,
+  HostListener,
   inject,
   Input,
   OnChanges,
@@ -10,19 +11,21 @@ import {
   OnInit,
   Output,
   SimpleChanges,
+  ViewChild,
 } from '@angular/core';
 import { FormGroup } from '@angular/forms';
 import { cloneDeep } from 'lodash-es';
-import { Subject, takeUntil, filter, map } from 'rxjs';
+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
+  implements OnInit, OnChanges, OnDestroy, AfterViewInit, PreventUnsavedChangesCore
 {
   @Input() data!: T | any;
   @Output() dataChange = new EventEmitter<T>();
@@ -36,13 +39,32 @@ export abstract class BaseFormDirective<T extends object>
   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['initialData'] && this.formGroup) {
+    if (changes['data'] && this.formGroup) {
       this.valueInitialization = true;
       const dirty = this.formGroup.dirty;
 
@@ -84,11 +106,12 @@ export abstract class BaseFormDirective<T extends object>
   }
 
   submit() {
+    this.formSubmitted = true;
     this.formGroup.markAllAsTouched();
     if (!this.formGroup.invalid) {
       this.formSubmit.emit(this.createCompleteData());
     }
-    this.formGroup.markAsUntouched();
+    this.formGroup.markAsPristine();
   }
 
   clear() {
@@ -203,7 +226,11 @@ export abstract class BaseFormDirective<T extends object>
   private transformEmptyStringToNullStringFn(obj: any, key: string) {
     // if empty string - transformation to null string
     if (typeof obj[key] === 'string' && obj[key] === '') {
-      obj[key] = null;
+      try {
+        obj[key] = null;
+      } catch (error) {
+        console.error(`Cannot modify ${key}: ${error}`)
+      }
     }
   }
 }

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

@@ -10,9 +10,12 @@ import {
 import { ActivatedRoute } from '@angular/router';
 import { createFeatureSelector, createSelector, Store } from '@ngrx/store';
 import {
+  BackendValidationError,
   createInitDetailAction,
+  createInitNewDetailAction,
   createResetStateAction,
   createUpdateDetailAction,
+  createUpdateDetailSetErrorsAction,
   createUpdateFormStateAction,
   DetailState,
 } from '@verisoft/store';
@@ -30,17 +33,27 @@ 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 }) 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 {
@@ -65,9 +78,22 @@ export class DetailStoreDirective
   }
 
   private initForm() {
-    this.store.dispatch(
-      createInitDetailAction(this.detailsRepository)({ obj: this.detailId })
-    );
+    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() {
@@ -78,29 +104,46 @@ export class DetailStoreDirective
     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'
-          );
-        }
+      .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'
+            );
 
-        this.loaded = loaded;
-        this.cdr.detectChanges();
-      });
+            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() {
@@ -141,6 +184,36 @@ export class DetailStoreDirective
         control.markAsDirty();
       }
     });
-    this.cdr.markForCheck();
   };
+
+  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;
+  }
 }