@verisoft/ui-core 20.1.0 → 20.1.2

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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