@verisoft/ui-core 20.0.0 → 20.1.1

package/src/lib/components/table/table.models.ts

@@ -0,0 +1,261 @@
+import { EventEmitter, InjectionToken, TemplateRef } from '@angular/core';
+import { Params } from '@angular/router';
+import { LazyLoadEvent, Sort, SortDirectionType } from '@verisoft/core';
+import { v4 } from 'uuid';
+import { FieldAlignType } from '../../common';
+
+export const TABLE_COMPONENT_TOKEN = new InjectionToken<TableCore<any>>(
+  'TabVIewComponentToken'
+);
+
+export const TABLE_COLUMN_PROVIDER = new InjectionToken(
+  'TABLE_COLUMN_PROVIDER'
+);
+
+export enum TableSelectionMode {
+  single = 'single',
+  multiple = 'multiple',
+}
+
+export enum TableButtonSeverity {
+  success = 'success',
+  info = 'info',
+  warning = 'warning',
+  danger = 'danger',
+  help = 'help',
+  primary = 'primary',
+  secondary = 'secondary',
+  contrast = 'contrast',
+}
+
+export enum ColumnVisibility {
+  visible = 'visible',
+  hidden = 'hidden',
+  default = 'default',
+}
+
+export type TableSelectionModeType = keyof typeof TableSelectionMode;
+export type TableButtonSeverityType = keyof typeof TableButtonSeverity;
+export type ColumnVisibilityType = keyof typeof ColumnVisibility;
+
+export interface TableCore<T> {
+  sorters: Sort[];
+  columns: ColumnDefinition<T>[];
+  data: T[];
+  total: number;
+  filter: Partial<T> | undefined;
+  loading: boolean;
+  scrollable: boolean;
+  pageSize: number;
+  currentPage: number;
+  showPaginator: boolean;
+  sortMultiple: boolean;
+  lazy: boolean;
+  selection: T[];
+  selectionMode: TableSelectionModeType | undefined;
+  showPageSizePicker: boolean;
+  entityKey: string | undefined;
+  selectionChange: EventEmitter<T[]>;
+  lazyLoad: EventEmitter<LazyLoadEvent>;
+  maximumColumnLength: number;
+  disableCustomClicks: boolean;
+}
+
+export interface TableSignal {
+  name: string,
+  symbol: symbol
+}
+
+export interface ActionColumnsDefinition<T> {
+  severity?: TableButtonSeverity;
+  title?: string;
+  icon?: string;
+  tooltip?: string;
+  rounded?: boolean;
+  outlined?: boolean;
+  raised?: boolean;
+  badge?: string;
+  visible?: (row: T) => boolean;
+  routerLink?: (row: T) => string;
+  queryParams?: Params;
+  disabled?: boolean | ((row: T) => boolean);
+  onClick?: (row: T, event?: MouseEvent) => void;
+}
+
+export interface ColumnProvider<T> {
+  getDefinition(): ColumnDefinition<T>;
+  index: number;
+}
+
+export interface ColumnDefinition<T, _KEY = keyof T> {
+  id: string;
+  value?: (row: T, index?: number) => string;
+  headerName?: ((columnId: string, index?: number) => string) | string;
+  icon?: string | ((row?: T | undefined) => string);
+  type?: string;
+  sortable?: boolean;
+  format?: (row: T) => string
+  routerLink?: (row: T) => string | string;
+  queryParams?: Params;
+  columnClass?: string;
+  template?: TemplateRef<{ $implicit: T }>;
+  actions?: ActionColumnsDefinition<T>[];
+  textAlign?: FieldAlignType;
+  width?: string | number;
+  forceVisibility?: ColumnVisibilityType;
+  visible?: boolean;
+}
+
+export function LinkRenderer<T>(text: string, href: string) {
+  return (row: T, index: number | undefined) => {
+    return '<a href="' + href + '">' + text + '</a>';
+  };
+}
+
+export function routerRenderer<T>(link: string, text: string) {
+  return (row: T, index?: number | undefined) => {
+    return { text: text, link: link };
+  };
+}
+
+export function Renderer<T>(fnc: (row: T) => string) {
+  return (row: T) => {
+    return fnc(row);
+  };
+}
+
+export class ColumnModel<T> {
+  sortDirection: SortDirectionType | undefined = undefined;
+  columnClass?: string;
+  queryParams?: Params;
+  routerLink?: (row: T) => string | string;
+  valueGetter!: (row: T, index: number) => string;
+  headerGetter!: (columnId: string, index: number) => string | string;
+  template?: TemplateRef<{ $implicit: T }>;
+  actions?: ActionColumnsDefinition<T>[];
+  sortable?: boolean;
+  id: string;
+  // eslint-disable-next-line @typescript-eslint/ban-types
+  format!: Function;
+  textAlign?: FieldAlignType;
+  width: string | undefined;
+  forceVisibility: ColumnVisibilityType = ColumnVisibility.default;
+  visible = true;
+
+  constructor(readonly configuration: ColumnDefinition<T>) {
+    this.id = this.configuration.id;
+
+    if (this.configuration.format) {
+      this.format = this.configuration.format;
+    }
+
+    if (this.configuration.value) {
+      this.valueGetter = (row, index) => {
+        const value = this.configuration.value?.(row, index) ?? '-';
+        return this.format ? this.format(value, row) : value;
+      };
+    } else {
+      this.valueGetter = (row) => {
+        const value = ((row as { [key: string]: string })?.[this.configuration.id]) ?? '';
+        return this.format ? this.format(value, row) : value;
+      };
+    }
+
+    if (this.configuration.actions) {
+      this.actions = this.configuration.actions;
+    }
+
+    if (this.configuration.routerLink) {
+      this.routerLink = this.configuration.routerLink;
+    }
+
+    if (this.configuration.columnClass) {
+      this.columnClass = this.configuration.columnClass;
+    }
+
+    if (this.configuration.template) {
+      this.template = this.configuration.template;
+    }
+
+    if (this.configuration.headerName) {
+      this.headerGetter = (
+        typeof this.configuration.headerName === 'string'
+          ? () => this.configuration.headerName ?? ''
+          : (columnId: string, index: number) =>
+              (<(columnId: string, index?: number) => string>(
+                this.configuration.headerName
+              ))?.(columnId, index) ?? this.id
+      ) as (columnId: string, index: number) => string;
+    } else {
+      this.headerGetter = () => "";
+    }
+
+    if (this.configuration.queryParams) {
+      this.queryParams = this.configuration.queryParams;
+    }
+
+    if (this.routerLink) {
+      this.columnClass += ' ' + 'link';
+    }
+
+    if (this.configuration.sortable !== undefined) {
+      this.sortable = this.configuration.sortable;
+    } else {
+      this.sortable = true;
+    }
+
+    if (this.configuration.width){
+      this.width = typeof this.configuration.width === "number" ? this.configuration.width + 'px' : this.configuration.width;
+    }
+
+    if (this.configuration.textAlign !== undefined) {
+      this.textAlign = this.configuration.textAlign;
+    }
+
+    if (this.configuration.forceVisibility) {
+      this.forceVisibility = this.configuration.forceVisibility;
+    }
+
+    if (this.configuration.visible !== undefined) {
+      this.visible = this.configuration.visible;
+    }
+  }
+}
+
+export class RowModel<T> {
+  row: T;
+  index?: number;
+  id: number | string;
+  selected: boolean;
+  marked?: boolean;
+  focused?: boolean;
+  expanded: boolean;
+  fnc?: void;
+  customRoute: string | undefined;
+
+  constructor(
+    row: T,
+    selected: boolean,
+    expanded: boolean,
+    marked?: boolean,
+    index?: number,
+    fnc?: void,
+    customRoute?: string,
+    entityKey?: string
+  ) {
+    this.row = row;
+    this.id = (row as { [key: string]: string })['id'] ?? v4();
+    this.index = index;
+    this.selected = selected;
+    this.expanded = expanded;
+    this.marked = marked;
+    this.fnc = fnc;
+    this.customRoute = createCustomRoute<T>(row, entityKey, customRoute);
+  }
+}
+
+function createCustomRoute<T>(row: T, entityKey?: string, customRoute?: string) {
+  return customRoute && entityKey
+    ? `${customRoute}/` + (row as { [key: string]: string })[entityKey]
+    : undefined;
+}

package/src/lib/components/table-filter/index.ts

@@ -0,0 +1 @@
+export * from './table-filter.model';

package/src/lib/components/table-filter/table-filter.model.ts

@@ -0,0 +1,22 @@
+import { InjectionToken } from '@angular/core';
+import { BaseFormDirectiveCore } from '../base-form';
+
+export const TABLE_FILTER_COMPONENT_TOKEN = new InjectionToken<TableFilterCore<any>>(
+    'TableFilterComponentToken'
+);
+
+export interface FilterDefinition {
+    optionLabel: string;
+    label: string;
+    optionValue?: string;
+    url?: string;
+    filterType?: 'dropdown' | 'checkbox' | 'calendar' | 'multiselect';
+    initialValue?: any;
+}
+
+export interface TableFilterCore<T> extends BaseFormDirectiveCore<T> {
+    filterDefinitions: FilterDefinition[];
+    title: string;
+    hideSearch?: boolean;
+    debounceTime?: number;
+}

package/src/lib/components/tag/index.ts

@@ -0,0 +1 @@
+export * from './tag.model';

package/src/lib/components/tag/tag.model.ts

@@ -0,0 +1,13 @@
+import { InjectionToken, InputSignal } from "@angular/core";
+import { ControlSeverityType, FieldSizeType } from "../../common";
+
+export const TAG_COMPONENT_TOKEN = new InjectionToken<TagCore>('TagComponentToken');
+
+export type TagVariant = 'bold' | 'subtle';
+
+export interface TagCore {
+    label: InputSignal<string | undefined>;
+    severity: InputSignal<ControlSeverityType | undefined>;
+    variant: InputSignal<TagVariant>;
+    size: InputSignal<FieldSizeType>;
+  }

package/src/lib/components/textarea/index.ts

@@ -0,0 +1 @@
+export * from './textarea.model';

package/src/lib/components/textarea/textarea.model.ts

@@ -0,0 +1,13 @@
+import { InjectionToken } from '@angular/core';
+import { BaseFormCore } from '../base-form';
+
+export const TEXTAREA_COMPONENT_TOKEN = new InjectionToken<TextareaCore>(
+    'TextareaComponentToken'
+);
+
+export interface TextareaCore extends BaseFormCore {
+    rows: number;
+    cols: number;
+    autoResize: boolean;
+    floatLabel: string | undefined;
+}

package/src/lib/components/textfield/index.ts

@@ -0,0 +1 @@
+export * from './textfield.model';

package/src/lib/components/textfield/textfield.model.ts

@@ -0,0 +1,13 @@
+import { InjectionToken } from '@angular/core';
+import { FieldSizeType, FieldTypeType } from '../../common';
+import { BaseFormCore } from '../base-form';
+
+export const TEXTFIELD_COMPONENT_TOKEN = new InjectionToken<TextfieldCore>(
+    'TextfieldComponentToken'
+);
+
+export interface TextfieldCore extends BaseFormCore {
+    size: FieldSizeType | undefined;
+    type: FieldTypeType;
+    floatLabel: boolean;
+}

package/src/lib/components/tooltip/index.ts

@@ -0,0 +1 @@
+export * from './tooltip.model';

package/src/lib/components/tooltip/tooltip.model.ts

@@ -0,0 +1,13 @@
+import { InjectionToken, Signal } from '@angular/core';
+import { ControlSeverityType, FieldSizeType, PositionType } from '../../common';
+
+export const TOOLTIP_COMPONENT_TOKEN = new InjectionToken<TooltipCore>(
+    'TooltipComponentToken'
+);
+
+export interface TooltipCore {
+    color: Signal<ControlSeverityType | undefined>;
+    position: Signal<PositionType | undefined>;
+    size: Signal<FieldSizeType | undefined>;
+    tooltipText: Signal<string | undefined>;
+}

package/src/lib/components/unsubscribe.component.ts

@@ -0,0 +1,12 @@
+import { Directive, OnDestroy } from '@angular/core';
+import { Subject } from 'rxjs';
+
+@Directive()
+export abstract class UnsubscribeComponent implements OnDestroy {
+  destroyed$ = new Subject<void>();
+
+  ngOnDestroy() {
+    this.destroyed$.next();
+    this.destroyed$.complete();
+  }
+}

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/src/lib/directives/index.ts

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