@verisoft/ui-core 19.0.0-rc001 → 20.1.0

package/src/lib/pipes/error/error.pipe.ts

@@ -0,0 +1,27 @@
+import { Pipe, PipeTransform } from '@angular/core';
+import { ValidationErrors } from '@angular/forms';
+import { ErrorCodesFns } from './error.codes';
+import { getFirstError } from './error.models';
+
+const EMPTY = '';
+
+@Pipe({
+  name: 'error',
+  standalone: true,
+})
+export class ErrorPipe implements PipeTransform {
+  transform(errors: ValidationErrors | undefined | null): string {
+    if (!errors) {
+      return EMPTY;
+    }
+    const error = getFirstError(errors);
+    if (error) {
+      const errorFn = ErrorCodesFns[error.key];
+      if (!errorFn) {
+        return EMPTY;
+      }
+      return ErrorCodesFns[error.key](error.value);
+    }
+    return EMPTY;
+  }
+}

package/src/lib/pipes/error/warning.codes.ts

@@ -0,0 +1,5 @@
+type WarningCodesFn = (value?: any) => string;
+
+export const WarningCodesFns: { [key: string]: WarningCodesFn } = {
+  validationWarning: (value: any) => `${value}`,
+};

package/src/lib/pipes/error/warning.pipe.ts

@@ -0,0 +1,27 @@
+import { Pipe, PipeTransform } from '@angular/core';
+import { ValidationErrors } from '@angular/forms';
+import { getFirstError } from './error.models';
+import { WarningCodesFns } from './warning.codes';
+
+const EMPTY = '';
+
+@Pipe({
+  name: 'warning',
+  standalone: true,
+})
+export class WarningPipe implements PipeTransform {
+  transform(warnings: ValidationErrors | undefined | null): string {
+    if (!warnings) {
+      return EMPTY;
+    }
+    const error = getFirstError(warnings);
+    if (error) {
+      const errorFn = WarningCodesFns[error.key];
+      if (!errorFn) {
+        return EMPTY;
+      }
+      return WarningCodesFns[error.key](error.value);
+    }
+    return EMPTY;
+  }
+}

package/src/lib/pipes/helper/enumToList.pipe.ts

@@ -0,0 +1,16 @@
+import { Pipe, PipeTransform } from "@angular/core";
+
+@Pipe({
+    name: 'enumToList',
+    standalone: true,
+})
+export class EnumToListPipe implements PipeTransform {
+    transform(data: any): any[] {
+        return Object.keys(data)
+            .filter(key => isNaN(Number(key)))
+            .map(key => ({
+                label: key,
+                value: data[key as keyof typeof data],
+            }));
+    }
+}

package/{lib/pipes/index.d.ts → src/lib/pipes/index.ts}

@@ -4,4 +4,4 @@ export * from './error/error.pipe';
 export * from './error/warning.pipe';
 export * from './error/warning.codes';
 export * from './keyOrFn/keyOrFn.pipe';
-export * from './helper/enumToList.pipe';
+export * from './helper/enumToList.pipe'

package/src/lib/pipes/keyOrFn/keyOrFn.pipe.ts

@@ -0,0 +1,23 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
+import { Pipe, PipeTransform } from '@angular/core';
+
+@Pipe({
+  name: 'keyOrFn',
+  pure: false,
+  standalone: true,
+})
+export class KeyOrFunctionPipe implements PipeTransform {
+  transform(keyOrFn: any, row: any): any {
+    if (keyOrFn instanceof Function) {
+      return keyOrFn(row);
+    } else if (typeof keyOrFn === 'string') {
+      const value = row[keyOrFn];
+      if (value) {
+        return value;
+      }
+    } else if (typeof keyOrFn === 'boolean') {
+      return keyOrFn;
+    }
+    return '';
+  }
+}

package/src/lib/services/confirm-dialog.service.ts

@@ -0,0 +1,44 @@
+import { EventEmitter, Injectable, Output } from '@angular/core';
+import { ExtendedDialogData } from '../components';
+
+@Injectable({
+  providedIn: 'root',
+})
+export class DialogService {
+  @Output() showEvent: EventEmitter<ExtendedDialogData> =
+    new EventEmitter<ExtendedDialogData>();
+
+  @Output() closeEvent: EventEmitter<null> = new EventEmitter();
+
+  showDialog<TInputs, TOutputs>(data: ExtendedDialogData<TInputs, TOutputs>): void {
+    const mappedData = this.mapInputAndOutpus(data);
+
+    this.showEvent.emit({
+      ...data,
+      data: mappedData,
+    });
+  }
+
+  private mapInputAndOutpus<TInputs, TOutputs>(
+    data: ExtendedDialogData<TInputs, TOutputs>
+  ): ExtendedDialogData<TInputs, TOutputs> {
+    const inputsAndOutputs = data.data as TInputs & TOutputs;
+    return {
+      ...data.data,
+      ...(Object.keys(inputsAndOutputs ?? {})
+        .filter((key) => typeof inputsAndOutputs[key as keyof TOutputs] === 'function')
+        .reduce((acc, key) => {
+          acc[key] = (value: any) => {
+            if (typeof inputsAndOutputs[key as keyof TOutputs] === 'function') {
+              (inputsAndOutputs[key as keyof TOutputs] as (value: any) => void)(value);
+            }
+          };
+          return acc;
+        }, {} as Record<string, any>)),
+    };
+  }
+
+  closeModal(): void {
+    this.closeEvent.emit();
+  }
+}

package/{lib/services/index.d.ts → src/lib/services/index.ts}

@@ -1,4 +1,4 @@
-export * from './screen-size.service';
-export * from './confirm-dialog.service';
-export * from './leave-form.service';
-export * from './table.service';
+export * from './screen-size.service';
+export * from './confirm-dialog.service';
+export * from './leave-form.service';
+export * from './table.service';

package/src/lib/services/leave-form.service.ts

@@ -0,0 +1,53 @@
+import { Injectable, inject } from '@angular/core';
+import { CanDeactivate } from '@angular/router';
+import { TranslateService } from '@ngx-translate/core';
+import { Observable, Subject } from 'rxjs';
+import { PreventUnsavedChangesCore, CommonIcons } from '../common';
+import { DialogService } from './confirm-dialog.service';
+
+@Injectable({
+  providedIn: 'root',
+})
+export class PreventUnsavedChangesDirective implements CanDeactivate<PreventUnsavedChangesCore> {
+  private dialogService = inject(DialogService);
+  private translateService = inject(TranslateService);
+  private readonly Icons!: CommonIcons;
+
+  canDeactivate(component: PreventUnsavedChangesCore): Observable<boolean> | Promise<boolean> | boolean {
+    if (!component || !component.canDeactivate) {
+      return true;
+    }
+    const result = component.canDeactivate();
+    return result;
+  }
+
+  showConfirmationDialog(): Observable<boolean> {
+    const resultSubject = new Subject<boolean>();
+
+    const title = this.translateService.instant('VALIDATIONS.UNSAVED_CHANGES');
+    const message = this.translateService.instant('VALIDATIONS.LEAVING_UNSAVED_FORM');
+    const leaveButton = this.translateService.instant('BUTTONS.LEAVE');
+    const stayButton = this.translateService.instant('BUTTONS.STAY');
+
+    this.dialogService.showDialog({
+      title: title,
+      headerIcon: this.Icons.infoCircle,
+      innerHTML: `<p>${message}</p>`,
+      showCancelButton: true,
+      confirmButtonText: stayButton,
+      cancelButtonText: leaveButton,
+      confirmButtonFn: () => {
+        resultSubject.next(false);
+        resultSubject.complete();
+        this.dialogService.closeModal();
+      },
+      cancelButtonFn: () => {
+        resultSubject.next(true);
+        resultSubject.complete();
+        this.dialogService.closeModal();
+      },
+    });
+
+    return resultSubject.asObservable();
+  }
+}

package/src/lib/services/screen-size.service.ts

@@ -0,0 +1,25 @@
+import { Injectable } from '@angular/core';
+import { BehaviorSubject } from 'rxjs';
+
+@Injectable({
+  providedIn: 'root',
+})
+export class ScreenSizeService {
+  isMobileBlock = new BehaviorSubject<boolean>(false);
+  prevState = false;
+
+  constructor() {
+    this.checkScreenSize();
+    window.addEventListener('resize', async () => {
+      await this.checkScreenSize();
+    });
+  }
+
+  async checkScreenSize() {
+    const isMobile = window.matchMedia('(max-width: 768px)').matches;
+    if (isMobile !== this.prevState) {
+      this.prevState = isMobile;
+      this.isMobileBlock.next(isMobile);
+    }
+  }
+}

package/src/lib/services/table.service.ts

@@ -0,0 +1,22 @@
+import { Injectable, signal } from "@angular/core";
+import { TableSignal } from "../components";
+
+@Injectable({
+  providedIn: 'root'
+})
+export class TableService {
+  readonly reload = signal<TableSignal | symbol>(Symbol())
+
+  /**
+   * If name is set, reload a specific table with the set`[tableName]`
+   *
+   * If name is NOT set, reload all tables in the current DOM
+   * */
+  forceReload(name?: string): void {
+    if (name) {
+      this.reload.set({ name: name, symbol: Symbol() });
+    } else {
+      this.reload.set(Symbol());
+    }
+  }
+}

package/src/test-setup.ts

@@ -0,0 +1,8 @@
+// @ts-expect-error https://thymikee.github.io/jest-preset-angular/docs/getting-started/test-environment
+globalThis.ngJest = {
+  testEnvironmentOptions: {
+    errorOnUnknownElements: true,
+    errorOnUnknownProperties: true,
+  },
+};
+import 'jest-preset-angular/setup-jest';

package/tsconfig.json

@@ -0,0 +1,28 @@
+{
+  "compilerOptions": {
+    "target": "es2022",
+    "forceConsistentCasingInFileNames": true,
+    "strict": true,
+    "noImplicitOverride": true,
+    "noPropertyAccessFromIndexSignature": true,
+    "noImplicitReturns": true,
+    "noFallthroughCasesInSwitch": true
+  },
+  "files": [],
+  "include": [],
+  "references": [
+    {
+      "path": "./tsconfig.lib.json"
+    },
+    {
+      "path": "./tsconfig.spec.json"
+    }
+  ],
+  "extends": "../../../tsconfig.base.json",
+  "angularCompilerOptions": {
+    "enableI18nLegacyMessageIdFormat": false,
+    "strictInjectionParameters": true,
+    "strictInputAccessModifiers": true,
+    "strictTemplates": true
+  }
+}

package/tsconfig.lib.json

@@ -0,0 +1,17 @@
+{
+  "extends": "./tsconfig.json",
+  "compilerOptions": {
+    "outDir": "../../../dist/out-tsc",
+    "declaration": true,
+    "declarationMap": true,
+    "inlineSources": true,
+    "types": []
+  },
+  "exclude": [
+    "src/**/*.spec.ts",
+    "src/test-setup.ts",
+    "jest.config.ts",
+    "src/**/*.test.ts"
+  ],
+  "include": ["src/**/*.ts"]
+}

package/tsconfig.lib.prod.json

@@ -0,0 +1,9 @@
+{
+  "extends": "./tsconfig.lib.json",
+  "compilerOptions": {
+    "declarationMap": false
+  },
+  "angularCompilerOptions": {
+    "compilationMode": "partial"
+  }
+}

package/tsconfig.spec.json

@@ -0,0 +1,16 @@
+{
+  "extends": "./tsconfig.json",
+  "compilerOptions": {
+    "outDir": "../../../dist/out-tsc",
+    "module": "commonjs",
+    "target": "es2016",
+    "types": ["jest", "node"]
+  },
+  "files": ["src/test-setup.ts"],
+  "include": [
+    "jest.config.ts",
+    "src/**/*.test.ts",
+    "src/**/*.spec.ts",
+    "src/**/*.d.ts"
+  ]
+}