@verisoft/ui-core 20.1.1 → 20.1.2

package/src/lib/directives/table-datasource.directive.ts

@@ -1,184 +0,0 @@
-import { HttpClient } from '@angular/common/http';
-import {
-  ChangeDetectorRef,
-  Directive,
-  inject,
-  Input,
-  OnChanges,
-  OnInit,
-  SimpleChanges,
-} from '@angular/core';
-import { Store } from '@ngrx/store';
-import {
-  BASE_URL_PATH,
-  BaseHttpService,
-  convertDatasource,
-  DataSourceFunctionType,
-  DatasourceType,
-  LazyLoadEvent,
-  normalizeRequest,
-  Page,
-  RequestParams,
-} from '@verisoft/core';
-import {
-  BehaviorSubject,
-  catchError,
-  debounceTime,
-  map,
-  of,
-  switchMap,
-  takeUntil,
-  tap,
-} from 'rxjs';
-import {
-  DEFAULT_DEBOUNCE_TIME,
-  ExtendedRequestType,
-  isFilterEmpty,
-  setComponentProperties,
-} from '../common';
-import {
-  TABLE_COMPONENT_TOKEN,
-  TableCore,
-  UnsubscribeComponent,
-} from '../components';
-
-@Directive({
-  // eslint-disable-next-line @angular-eslint/directive-selector
-  selector: 'v-table[useDatasource]',
-  exportAs: 'useDatasource',
-  standalone: true,
-})
-export class TableDatasourceDirective<T>
-  extends UnsubscribeComponent
-  implements OnInit, OnChanges
-{
-  protected readonly store = inject(Store);
-
-  @Input() autoBind = true;
-
-  @Input({ required: true }) tableName!: string;
-
-  @Input() debounceTime = DEFAULT_DEBOUNCE_TIME;
-
-  @Input() datasource!: DatasourceType<T>;
-
-  @Input() extraFilter!: any;
-
-  @Input() transformFn?: (data: T) => unknown;
-
-  private tableComponent = inject<TableCore<T>>(TABLE_COMPONENT_TOKEN, {
-    self: true,
-  });
-  private changeDetectorRef = inject(ChangeDetectorRef);
-  private httpClient = inject(HttpClient);
-  private baseUrl: string = inject(BASE_URL_PATH);
-
-  private dataSourceService?: DataSourceFunctionType<T>;
-  private parameters$ = new BehaviorSubject<Partial<ExtendedRequestType<T>>>({});
-
-  params$ = this.parameters$.asObservable();
-
-  ngOnInit(): void {
-    if (!this.tableName) {
-      throw new Error('Property tableName must be defined.');
-    }
-
-    this.tableComponent.lazyLoad.pipe(takeUntil(this.destroyed$)).subscribe((value: LazyLoadEvent) => {
-      this.parameters$.next({
-        offset: value?.offset,
-        limit: value?.limit,
-        filter: { ...value?.filter, ...this.extraFilter },
-        sort: value?.sort,
-      });
-    });
-
-    this.parameters$
-      .pipe(
-        takeUntil(this.destroyed$),
-        map((request) =>
-          normalizeRequest({
-            ...request,
-            filter: { ...request.filter, ...this.extraFilter },
-          })
-        ),
-        debounceTime(this.debounceTime),
-        tap(() => {
-          this.changeComponent(this.tableComponent, {
-            lazy: true,
-            loading: true,
-          });
-        }),
-        switchMap((request) =>
-          this.dataSourceService
-            ? this.dataSourceService(request).pipe(
-                map((response) => ({ request, response }))
-              )
-            : of({
-                request,
-                response: {
-                  data: [] as T[],
-                  total: 0,
-                  limit: request.limit,
-                  offset: request.offset,
-                } as Page<T>,
-              })
-        ),
-        catchError((request) => {
-          this.changeComponent(this.tableComponent, {
-            loading: false,
-          });
-          return of({
-            request: request as ExtendedRequestType<T>,
-            response: {
-              data: [] as T[],
-              total: 0,
-              limit: request.limit,
-              offset: request.offset,
-            } as Page<T>,
-          });
-        })
-      )
-      .subscribe(({ request, response }) =>
-        this.setDataToControl(request, response)
-      );
-  }
-
-  ngOnChanges(changes: SimpleChanges): void {
-    if (changes['datasource']) {
-      this.dataSourceService = convertDatasource(
-        this.datasource,
-        this.baseUrl,
-        this.httpClient
-      );
-
-      if (this.autoBind) {
-        this.parameters$.next({ offset: 0 });
-      }
-    }
-  }
-
-  reload() {
-    this.parameters$.next({ ...this.parameters$.value });
-  }
-
-  private changeComponent(
-    component: TableCore<T>,
-    value: Partial<TableCore<T>>
-  ) {
-    setComponentProperties(component, value);
-    this.changeDetectorRef.detectChanges();
-  }
-
-  private setDataToControl(request: RequestParams<T>, result: Page<T>): void {
-    const data = result.data;
-    const total = result.total;
-    const transferedData = this.transformFn ? data.map((x) => this.transformFn?.(x)) : data;
-
-    this.changeComponent(this.tableComponent, {
-      lazy: !isFilterEmpty(request.filter) || data?.length < total || this.datasource instanceof BaseHttpService,
-      data: transferedData as T[],
-      loading: false,
-      total,
-    });
-  }
-}

package/src/lib/directives/table-filter.directive.ts

@@ -1,69 +0,0 @@
-import {
-  ChangeDetectorRef,
-  Directive,
-  inject,
-  Input,
-  OnChanges,
-  OnDestroy,
-  SimpleChanges,
-} from '@angular/core';
-import { debounceTime, Subject, Subscription } from 'rxjs';
-import { DEFAULT_DEBOUNCE_TIME, setComponentProperties } from '../common';
-import { FilterCore, TABLE_COMPONENT_TOKEN, TableCore } from '../components';
-
-@Directive({
-  // eslint-disable-next-line @angular-eslint/directive-selector
-  selector: 'v-table[useFilter]',
-  standalone: true,
-  exportAs: 'tableFilterDirective',
-})
-export class TableFilterDirective<T> implements OnChanges, OnDestroy {
-  @Input({ required: true }) filterComponent!: FilterCore;
-
-  private filterChange$ = new Subject<T>();
-  private subscription: Subscription | undefined = undefined;
-
-  private tableComponent = inject<TableCore<T>>(TABLE_COMPONENT_TOKEN);
-
-  private changeDetectorRef = inject(ChangeDetectorRef);
-
-  ngOnChanges(changes: SimpleChanges): void {
-    if (changes['filterComponent']) {
-      this.unRegister();
-      this.register();
-    }
-  }
-
-  private onFilterChange(value: T): void {
-    if (this.tableComponent?.filter !== value) {
-      setComponentProperties(this.tableComponent, {
-        filter: value,
-        currentPage: 1,
-      });
-      
-      this.changeDetectorRef.detectChanges();
-    }
-  }
-
-  ngOnDestroy(): void {
-    this.unRegister();
-  }
-
-  private unRegister() {
-    this.subscription?.unsubscribe();
-  }
-
-  private register() {
-    this.filterComponent.registerOnChange((value: T) => {
-      this.filterChange$.next(value);
-    });
-
-    this.subscription = this.filterChange$
-      .pipe(
-        debounceTime(
-          this.filterComponent.debounceTime ? 0 : DEFAULT_DEBOUNCE_TIME
-        )
-      )
-      .subscribe((value) => this.onFilterChange(value));
-  }
-}

package/src/lib/format/format.ts

@@ -1,74 +0,0 @@
-import { toCzechDateTimeString } from "@verisoft/core";
-
-/* eslint-disable @typescript-eslint/ban-types */
-export class Format {
-    static concatArray(value: any[], itemFormatter?: Function, delimeter = ';') {
-        if (!value) {
-            return '';
-        }
-
-        return value
-            .map(item => itemFormatter ? itemFormatter(item) : item)
-            .filter(item => item !== undefined && item !== null)
-            .join(`${delimeter} `);
-    }
-
-    static czechDate(value: Date | string) {
-        return toCzechDateTimeString(value);
-    }
-
-    static date(value: Date | string) {
-        if (!value) {
-            return '';
-        }
-
-        if (typeof value === 'string') {
-            value = new Date(value);
-        }
-
-        return value.getDate() + '. ' + (value.getMonth() + 1) + '. ' + value.getFullYear();
-    }
-
-    static dateAndTime(value: Date | string) {
-        if (!value) {
-            return '';
-        }
-
-        if (typeof value === 'string') {
-            value = new Date(value);
-        }
-
-        return ('0' + value.getDate()).slice(-2)
-            + '.' + ('0' + (value.getMonth() + 1)).slice(-2)
-            + '.' + value.getFullYear() + ' ' + ('0' + value.getHours()).slice(-2)
-            + ':' + ('0' + value.getMinutes()).slice(-2) + ':' + ('0' + value.getSeconds()).slice(-2);
-    }
-
-    static convertToUserLocaleDate(value?: Date | string) {
-        if (!value) {
-            return '';
-        }
-
-        if (typeof value === 'string') {
-            value = new Date(value);
-        }
-
-        return value.toLocaleDateString(navigator.language, { timeZone: 'UTC' });
-    }
-
-    static bool(value: boolean) {
-        if (value) {
-            return 'Yes';
-        } else {
-            return 'No';
-        }
-    }
-
-    static boolWithIcon(value: boolean) {
-        if (value) {
-            return `<span>✓</span>`;
-        } else {
-            return `<span>⨯</span>`;
-        }
-    }
-}

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

@@ -1,11 +0,0 @@
-type ErrorCodesFn = (value?: any) => string;
-
-export const ErrorCodesFns: { [key: string]: ErrorCodesFn } = {
-  required: () => `This field is required!`,
-  email: () => `Email is in wrong format!`,
-  iban: () => `IBAN is in wrong format!`,
-  lowStrength: () => `Password too weak!`,
-  customPasswordRequirements: () => `Password does not meet minimal requirements.`,
-  fieldsNotMatching: () => `Passwords are not the same!`,
-  validationError: (value: any) => `${value}`,
-};

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

@@ -1,27 +0,0 @@
-import { AbstractControl, ValidationErrors } from '@angular/forms';
-
-type ErrorValue = { key: string; value: string } | null;
-
-export function getFirstErrorFromControl<T extends AbstractControl>(
-  control: T
-): ErrorValue {
-  if (!control || !control.errors) {
-    return null;
-  }
-  const errors = control.errors ?? false;
-  if (errors) {
-    const key = Object.keys(control.errors)[0];
-    const value = control.errors[key];
-    return { key, value };
-  }
-  return null;
-}
-
-export function getFirstError(errors: ValidationErrors): ErrorValue {
-  if (errors) {
-    const key = Object.keys(errors)[0];
-    const value = errors[key];
-    return { key, value };
-  }
-  return null;
-}

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

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

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

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

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

@@ -1,16 +0,0 @@
-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/src/lib/pipes/index.ts

@@ -1,7 +0,0 @@
-export * from './error/error.codes';
-export * from './error/error.models';
-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'

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

@@ -1,23 +0,0 @@
-/* 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

@@ -1,44 +0,0 @@
-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/src/lib/services/index.ts

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

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

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

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

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

@@ -1,28 +0,0 @@
-{
-  "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

@@ -1,17 +0,0 @@
-{
-  "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"]
-}