@verisoft/ui-core 19.0.0-rc001 → 20.1.0

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

@@ -0,0 +1,275 @@
+import { HttpClient } from '@angular/common/http';
+import {
+  ChangeDetectorRef,
+  Directive,
+  inject,
+  Input,
+  OnChanges,
+  OnInit,
+  SimpleChanges,
+} from '@angular/core';
+import {
+  BASE_URL_PATH,
+  convertDatasource,
+  DataSourceFunctionType,
+  DatasourceType,
+  DEFAULT_SEARCH_LIMIT,
+  FilterEvent,
+  LazyLoadEvent,
+  normalizeRequest,
+  Page,
+  RequestParams,
+} from '@verisoft/core';
+import {
+  BehaviorSubject,
+  catchError,
+  debounceTime,
+  filter,
+  map,
+  of,
+  switchMap,
+  takeUntil,
+  tap,
+} from 'rxjs';
+import {
+  DataSourceComponentModel,
+  DEFAULT_DEBOUNCE_TIME,
+  ExtendedRequestType,
+  setComponentProperties,
+  setDataToArray,
+} from '../common';
+import {
+  DROPDOWN_COMPONENT_TOKEN,
+  DropdownCore,
+  GENERIC_FIELD_COMPONENT_TOKEN,
+  GenericFieldCore,
+  MULTISELECT_COMPONENT_TOKEN,
+  MultiselectCore,
+  UnsubscribeComponent,
+} from '../components';
+
+@Directive({
+  selector:
+    // eslint-disable-next-line @angular-eslint/directive-selector
+    'v-dropdown[useDatasource], v-multiselect[useDatasource], v-generic-field[useDatasource]',
+  standalone: true,
+})
+export class DatasourceDirective<T>
+  extends UnsubscribeComponent
+  implements OnChanges, OnInit
+{
+  @Input() datasource!: DatasourceType<T>;
+
+  @Input() autoBind = true;
+
+  @Input() loadingText = '... loading ...';
+
+  @Input() filterField: string | undefined = 'fulltext';
+
+  @Input() transformFn?: (data: T) => unknown;
+
+  @Input() extraFilter!: any;
+
+  get activeComponent(): DataSourceComponentModel<T> {
+    return (this.dropdownComponent ??
+      this.multiSelectComponent ??
+      this.genericField) as DataSourceComponentModel<T>;
+  }
+
+  private httpClient = inject(HttpClient);
+
+  private baseUrl: string = inject(BASE_URL_PATH);
+
+  private changeDetectorRef = inject(ChangeDetectorRef);
+
+  private isAllDataLoaded = false;
+
+  private parameters$ = new BehaviorSubject<Partial<ExtendedRequestType<T>>>({});
+
+  private lastParameter = {};
+
+  private dropdownComponent = inject<DropdownCore<T>>(
+    DROPDOWN_COMPONENT_TOKEN,
+    { optional: true }
+  );
+
+  private multiSelectComponent = inject<MultiselectCore<T>>(
+    MULTISELECT_COMPONENT_TOKEN,
+    {
+      optional: true,
+    }
+  );
+
+  private genericField = inject<GenericFieldCore<T>>(
+    GENERIC_FIELD_COMPONENT_TOKEN,
+    { optional: true }
+  );
+
+  private dataSourceService?: DataSourceFunctionType<T>;
+
+  private loadingPlaceholderItem: { [key: string]: unknown } = {};
+
+  ngOnInit(): void {
+    this.activeComponent.showed
+      .pipe(takeUntil(this.destroyed$))
+      .subscribe(() => {
+        if (
+          !this.autoBind &&
+          !this.activeComponent.options &&
+          !this.activeComponent.loading
+        ) {
+          this.parameters$.next({});
+        }
+      });
+
+    this.activeComponent.lazyLoad
+      .pipe(takeUntil(this.destroyed$))
+      .subscribe((value: LazyLoadEvent) => {
+        this.parameters$.next({ offset: value?.offset, limit: value?.limit });
+      });
+
+    this.activeComponent.filtered
+      .pipe(takeUntil(this.destroyed$))
+      .subscribe((value: FilterEvent) => {
+        const property = this.filterField ?? this.activeComponent.optionLabel;
+        if (property) {
+          this.parameters$.next({
+            offset: 0,
+            filter: {
+              [property]: value.filter ? value.filter : undefined,
+              ...(this.extraFilter ?? {})
+            } as Partial<T>,
+            useNewData: true,
+          });
+        }
+      });
+
+    this.parameters$
+      .pipe(
+        takeUntil(this.destroyed$),
+        filter(request => !this.isDataForRequestLoaded(request)),
+        map((request) => {
+          const extendedParams = normalizeRequest({ ...this.lastParameter, ...request }, DEFAULT_SEARCH_LIMIT) as ExtendedRequestType<T>;
+          extendedParams.useNewData = request.useNewData ?? false;
+          return extendedParams;
+        }),
+        tap((request) => {
+          this.lastParameter = request;
+        }),
+        debounceTime(DEFAULT_DEBOUNCE_TIME),
+        tap(() => {
+          this.changeComponent(this.activeComponent, {
+            loading: true,
+          });
+        }),
+        switchMap((request) =>
+          this.dataSourceService
+            ? this.dataSourceService(request as RequestParams<T>).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.activeComponent, {
+            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 });
+      }
+    }
+  }
+
+  private isDataForRequestLoaded(request: Partial<ExtendedRequestType<T>>) {
+    if (request.useNewData) {
+      return false;
+    }
+
+    const offset = request.offset ?? 0;
+    const limit = request.limit ?? DEFAULT_SEARCH_LIMIT;
+    const options = this.activeComponent.options;
+    if (!options) {
+      return false;
+    }
+
+    if (options.length < offset + limit) {
+      return false;
+    }
+
+    const allItemsFilled = options.slice(offset, offset + limit).every(item => item !== undefined && item != this.loadingPlaceholderItem);
+    return allItemsFilled;
+  }
+
+  private setDataToControl(request: ExtendedRequestType<T>, result: Page<T>): void {
+    this.isAllDataLoaded = result.total <= result.data.length;
+    const data = result.data;
+    const total = result.total;
+    const offset = request.offset;
+    const transferedData = this.transformFn
+      ? data.map((x) => this.transformFn?.(x))
+      : data;
+
+    if (this.activeComponent.optionLabel) {
+      this.loadingPlaceholderItem[this.activeComponent.optionLabel] =
+        this.loadingText;
+    }
+
+    if (this.activeComponent.optionValue) {
+      this.loadingPlaceholderItem[this.activeComponent.optionValue] = -1;
+    }
+
+    const options = request.useNewData ? undefined : this.activeComponent.options;
+    const newOptions = setDataToArray(
+      options,
+      transferedData,
+      offset,
+      total,
+      this.loadingPlaceholderItem
+    );
+
+    this.changeComponent(this.activeComponent, {
+      options: newOptions as T[],
+      loading: false,
+      lazy: !this.isAllDataLoaded,
+    });
+  }
+
+  private changeComponent(
+    component: DataSourceComponentModel<T>,
+    value: Partial<DataSourceComponentModel<T>>
+  ) {
+    setComponentProperties(component, value);
+    this.changeDetectorRef.detectChanges();
+  }
+}

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

@@ -1,4 +1,4 @@
-export * from './datasource.directive';
-export * from './table-datasource.directive';
-export * from './shortcut.directive';
-export * from './table-filter.directive';
+export * from './datasource.directive';
+export * from './table-datasource.directive';
+export * from './shortcut.directive';
+export * from './table-filter.directive';

package/src/lib/directives/shortcut.directive.ts

@@ -0,0 +1,37 @@
+import { Directive, HostListener, Input } from "@angular/core";
+
+@Directive({
+    // eslint-disable-next-line @angular-eslint/directive-selector
+    selector: 'v-button[useShortCut]',
+    exportAs: 'useShortCut',
+    standalone: true,
+  })
+  export class ButtonShortCutDirective
+  {
+     @Input() shortCutFn?: () => void;
+     @Input() shortCutKey!: string;
+
+     private keyMap: { [key: string]: boolean } = {};
+
+     @HostListener('document:keydown', ['$event'])
+     onKeyDown(event: KeyboardEvent) {
+       this.keyMap[event.key.toLowerCase()] = true;
+       this.checkShortcut();
+     }
+   
+     @HostListener('document:keyup', ['$event'])
+     onKeyUp(event: KeyboardEvent) {
+       this.keyMap[event.key.toLowerCase()] = false;
+     }
+
+     private checkShortcut() {
+       if (this.shortCutKey && this.shortCutFn) {
+         const keys = this.shortCutKey.toLowerCase().split('+');
+         const isShortcutPressed = keys.every((key) => this.keyMap[key]);   
+         if (isShortcutPressed) {
+           this.shortCutFn?.();
+           keys.forEach((key) => (this.keyMap[key] = false));
+         }
+       }
+     }
+}

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

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

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

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

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

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