@verisoft/ui-core 19.0.0-rc001 → 20.1.0

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

@@ -0,0 +1,43 @@
+import { EventEmitter, SimpleChanges } from '@angular/core';
+import { FilterEvent, LazyLoadEvent, RequestParams } from '@verisoft/core';
+
+export interface DataSourceComponentModel<TEntity> {
+  ngOnChanges?: (changes: SimpleChanges) => void;
+  lazy: boolean;
+  loading: boolean;
+  filter: boolean;
+  options: TEntity[] | undefined;
+  optionValue: string | undefined;
+  optionLabel: string | undefined;
+  showed: EventEmitter<any>;
+  cleared: EventEmitter<any>;
+  filtered: EventEmitter<FilterEvent>;
+  lazyLoad: EventEmitter<LazyLoadEvent>;
+}
+
+export function setDataToArray<T>(
+  targetArray: (T | undefined)[] | undefined,
+  data: T[],
+  offset = 0,
+  total: number | undefined = undefined,
+  defaultItem: T | undefined = undefined
+): (T | undefined)[] {
+  const totalItems = total ?? data.length + offset;
+  if (!targetArray) {
+    targetArray = Array(totalItems).fill(defaultItem);
+  }
+
+  if (targetArray.length < totalItems) {
+    targetArray = targetArray.concat(
+      new Array(totalItems - targetArray.length).fill(defaultItem)
+    );
+  }
+
+  for (let i = 0; i < data.length; i++) {
+    targetArray[i + offset] = data[i] ?? defaultItem;
+  }
+
+  return targetArray;
+}
+
+export type ExtendedRequestType<T> = RequestParams<T> & { useNewData: boolean}

package/{lib/common/deactivate-guard.model.d.ts → src/lib/common/deactivate-guard.model.ts}

@@ -1,4 +1,5 @@
 import { Observable } from "rxjs";
+
 export interface PreventUnsavedChangesCore {
-    canDeactivate: () => Observable<boolean> | Promise<boolean> | boolean;
+  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/{lib/common/icons.d.ts → src/lib/common/icons.ts}

@@ -1,34 +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;
-}
+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/{lib/common/index.d.ts → src/lib/common/index.ts}

@@ -1,10 +1,10 @@
-export * from './angular-helper';
-export * from './control.models';
-export * from './constants';
-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';
+export * from './angular-helper';
+export * from './control.models';
+export * from './constants';
+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/{lib/common/notificable-property.model.d.ts → src/lib/common/notificable-property.model.ts}

@@ -1,4 +1,5 @@
-import { Observable } from "rxjs";
-export interface NotificableProperty {
-    propertyChanged: Observable<unknown>;
-}
+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

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

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

@@ -0,0 +1,15 @@
+import { EventEmitter } from '@angular/core';
+import { ControlSeverityType, FieldSizeType, NotificableProperty } from '../../common';
+
+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/{lib/components/action-button-group/index.d.ts → src/lib/components/action-button-group/index.ts}

@@ -1,2 +1,2 @@
-export * from './action-button-group.model';
-export * from './action-button.model';
+export * from './action-button-group.model';
+export * from './action-button.model';

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

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

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