@verisoft/ui-core 18.0.0 → 18.3.0

package/src/lib/components/table/column-configuration.ts

@@ -0,0 +1,38 @@
+import { ColumnDefinition } from "./table.models";
+
+export class ColumnConfiguration<TEntity> {
+    private column: Partial<ColumnDefinition<TEntity>> = {};
+  
+    constructor(private id: string | keyof TEntity) {
+      this.column.id = id as string;
+    }
+  
+    headerName(headerName: string | ((columnId: string, index?: number) => string)): this {
+      this.column.headerName = headerName;
+      return this;
+    }
+  
+    sortable(sortable: boolean): this {
+      this.column.sortable = sortable;
+      return this;
+    }
+  
+    columnClass(columnClass: string): this {
+      this.column.columnClass = columnClass;
+      return this;
+    }
+  
+    valueFunction(value: (row: TEntity, index?: number) => string): this {
+      this.column.value = value;
+      return this;
+    }
+  
+    type(type: string): this {
+      this.column.type = type;
+      return this;
+    }
+  
+    build(): ColumnDefinition<TEntity> {
+      return this.column as ColumnDefinition<TEntity>;
+    }
+  }

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

@@ -1,2 +1,4 @@
 export * from './table.models';
-export * from './template-column.directive';
+export * from './table-column.directive';
+export * from './table-builder';
+export * from './column-configuration';

package/src/lib/components/table/table-builder.ts

@@ -0,0 +1,93 @@
+import { Injectable } from '@angular/core';
+import { ColumnConfiguration } from './column-configuration';
+import { ColumnDefinition } from './table.models';
+
+@Injectable({
+  providedIn: 'root',
+})
+export class TableBuilder<TEntity> {
+  private columns: ColumnDefinition<TEntity>[] = [];
+
+  addColumn(
+    id: string | keyof TEntity,
+    config?: (v: ColumnConfiguration<TEntity>) => void
+  ): TableBuilder<TEntity> {
+    const columnConfig = new ColumnConfiguration<TEntity>(id);
+    config?.(columnConfig);
+    this.columns.push(columnConfig.build());
+    return this;
+  }
+
+  addTextColumn(
+    id: string | keyof TEntity,
+    config?: (v: ColumnConfiguration<TEntity>) => void
+  ): TableBuilder<TEntity> {
+    return this.addColumn(id, (x) => {
+      config?.(x);
+      x.type('text');
+    });
+  }
+
+  addNumberColumn(
+    id: string | keyof TEntity,
+    config?: (v: ColumnConfiguration<TEntity>) => void
+  ): TableBuilder<TEntity> {
+    return this.addColumn(id, (x) => {
+      config?.(x);
+      x.type('number').columnClass('text-end');
+    });
+  }
+
+  addDateColumn(
+    id: string | keyof TEntity,
+    config?: (v: ColumnConfiguration<TEntity>) => void
+  ): TableBuilder<TEntity> {
+    return this.addColumn(id, (x) => {
+      config?.(x);
+      x.type('date').valueFunction((row) => covertFromDateToUserLocale(row, id as string));
+    });
+  }
+
+  addBooleanColumn(
+    id: string,
+    config?: (v: ColumnConfiguration<TEntity>) => void
+  ): TableBuilder<TEntity> {
+    return this.addColumn(id, (x) => {
+      config?.(x);
+      x.type('boolean');
+    });
+  }
+
+  addEnumColumn(
+    id: string | keyof TEntity,
+    config?: (v: ColumnConfiguration<TEntity>) => void
+  ): TableBuilder<TEntity> {
+    return this.addColumn(id, (x) => {
+      config?.(x);
+      x.type('enum');
+    });
+  }
+
+  build(): ColumnDefinition<TEntity>[] {
+    return this.columns;
+  }
+}
+
+function covertFromDateToUserLocale<TEntity>(row: TEntity, id: string) {
+  const value = (row as { [key: string]: undefined | string | Date })[id];
+  if (value === undefined) {
+    return '';
+  }
+
+  const locale = navigator.language;
+
+  if (value instanceof Date) {
+    return value.toLocaleDateString(locale);
+  }
+
+  if (typeof value === 'string' && !isNaN(Date.parse(value))) {
+    return new Date(value).toLocaleDateString(locale);
+  }
+
+  return value;
+}

package/src/lib/components/table/table-column.directive.ts

@@ -0,0 +1,62 @@
+import { ContentChild, Directive, Input, TemplateRef } from '@angular/core';
+import { Params } from '@angular/router';
+import { FieldAlign, FieldAlignType } from '../../common';
+import { ColumnDefinition, ColumnProvider, ColumnVisibility, ColumnVisibilityType, TABLE_COLUMN_PROVIDER } from './table.models';
+
+@Directive({
+  // eslint-disable-next-line @angular-eslint/directive-selector
+  selector: 'v-table-column',
+  standalone: true,
+  providers: [
+    {
+      provide: TABLE_COLUMN_PROVIDER,
+      useExisting: TableColumnDirective,
+      multi: true,
+    },
+  ],
+})
+export class TableColumnDirective<T> implements ColumnProvider<T> {
+  @ContentChild(TemplateRef) template!:
+  TemplateRef<{ $implicit: T }>;
+
+  @Input() index = 0;
+
+  @Input() id!: string;
+
+  @Input() columnClass!: string;
+
+  @Input() sortable!: boolean;
+
+  @Input() routerLink!: (row: T) => string;
+
+  @Input() queryParams!: Params;
+
+  @Input() headerName!: ((column: string, index?: number) => string) | string;
+
+  @Input() width: string | number | undefined;
+
+  @Input() textAlign: FieldAlignType = FieldAlign.left;
+
+  @Input() format!: (row: T) => string
+
+  @Input() forceVisibility: ColumnVisibilityType = ColumnVisibility.default;
+
+  @Input() visible = true;
+
+  getDefinition(): ColumnDefinition<T> {
+    return {
+      id: this.id,
+      columnClass: this.columnClass,
+      template: this.template,
+      headerName: this.headerName,
+      routerLink: this.routerLink,
+      queryParams: this.queryParams,
+      sortable: this.sortable,
+      width: this.width,
+      format: this.format,
+      textAlign: this.textAlign,
+      forceVisibility: this.forceVisibility,
+      visible: this.visible,
+    };
+  }
+}

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

@@ -1,7 +1,8 @@
-import { InjectionToken, TemplateRef } from '@angular/core';
+import { EventEmitter, InjectionToken, TemplateRef } from '@angular/core';
 import { Params } from '@angular/router';
-import { Page, Sort } from '@verisoft/core';
-import { Observable } from 'rxjs';
+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'
@@ -11,26 +12,58 @@ 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;
-  scrollHeight: string;
   scrollable: boolean;
   pageSize: number;
   currentPage: number;
   showPaginator: boolean;
   sortMultiple: boolean;
   lazy: boolean;
-  selectionMode: 'single' | 'multiple' | null | undefined;
-  multipleSelect: boolean;
-  autoIndex: boolean;
+  selection: T[];
+  selectionMode: TableSelectionModeType | undefined;
   showPageSizePicker: boolean;
-  page: Page<T> | undefined;
-  entityId: string;
-  searchIndex$: Observable<number>;
-  filterComponent: any;
+  entityKey: string | undefined;
+  selectionChange: EventEmitter<T[]>;
+  lazyLoad: EventEmitter<LazyLoadEvent>;
+  maximumColumnLength: number;
+  disableCustomClicks: boolean;
+}
+
+export interface TableSignal {
+  name: string,
+  symbol: symbol
 }
 
 export interface ActionColumnsDefinition<T> {
@@ -54,29 +87,23 @@ export interface ColumnProvider<T> {
   index: number;
 }
 
-export enum TableButtonSeverity {
-  SUCCESS = 'success',
-  INFO = 'info',
-  WARNING = 'warning',
-  DANGER = 'danger',
-  HELP = 'help',
-  PRIMARY = 'primary',
-  SECONDARY = 'secondary',
-  CONTRAST = 'contrast',
-}
-
 export interface ColumnDefinition<T, _KEY = keyof T> {
   id: string;
   value?: (row: T, index?: number) => string;
-  headerName?: (column: string, 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<T>;
+  template?: TemplateRef<{ $implicit: T }>;
   actions?: ActionColumnsDefinition<T>[];
+  textAlign?: FieldAlignType;
+  width?: string | number;
+  forceVisibility?: ColumnVisibilityType;
+  visible?: boolean;
 }
 
 export function LinkRenderer<T>(text: string, href: string) {
@@ -98,30 +125,40 @@ export function Renderer<T>(fnc: (row: T) => string) {
 }
 
 export class ColumnModel<T> {
-  sortDirection: SortDirection | undefined = undefined;
-  sortColumn: Sort | undefined = undefined;
+  sortDirection: SortDirectionType | undefined = undefined;
   columnClass?: string;
   queryParams?: Params;
   routerLink?: (row: T) => string | string;
   valueGetter!: (row: T, index: number) => string;
-  headerGetter!: (column: string, index: number) => string | string;
-  template?: TemplateRef<T>;
+  headerGetter!: (columnId: string, index: number) => string | string;
+  template?: TemplateRef<{ $implicit: T }>;
   actions?: ActionColumnsDefinition<T>[];
   sortable?: boolean;
-
-  get headerName(): string {
-    return this.configuration.headerName?.toString() ?? 'undefined';
-  }
+  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) =>
-        this.configuration.value?.(row, index) ?? '-';
+      this.valueGetter = (row, index) => {
+        const value = this.configuration.value?.(row, index) ?? '-';
+        return this.format ? this.format(value, row) : value;
+      };
     } else {
-      this.valueGetter = (row) =>
-        ((row as { [key: string]: string })?.[
-          this.configuration.id
-        ] as string) ?? '';
+      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) {
@@ -141,10 +178,16 @@ export class ColumnModel<T> {
     }
 
     if (this.configuration.headerName) {
-      this.headerGetter = (column, index) =>
-        this.configuration.headerName?.(column, index) ?? '';
+      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 = (column, index) => column[index];
+      this.headerGetter = () => "";
     }
 
     if (this.configuration.queryParams) {
@@ -160,30 +203,59 @@ export class ColumnModel<T> {
     } 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 declare type SortDirection = 'asc' | 'desc' | undefined;
-
 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
+    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/textfield/textfield.model.ts

@@ -7,7 +7,7 @@ export const TEXTFIELD_COMPONENT_TOKEN = new InjectionToken<TextfieldCore>(
 );
 
 export interface TextfieldCore extends BaseFormCore {
-    size?: FieldSizeType;
+    size: FieldSizeType | undefined;
     type: FieldTypeType;
     floatLabel: boolean;
 }

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

@@ -5,5 +5,4 @@ export const TRISTATE_CHECKBOX_COMPONENT_TOKEN = new InjectionToken<TristateChec
     'TristateCheckboxComponentToken'
 );
 
-// eslint-disable-next-line @typescript-eslint/no-empty-interface
-export interface TristateCheckboxCore extends BaseFormCore {}
+export type TristateCheckboxCore = BaseFormCore

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

@@ -1,4 +1,3 @@
-/* eslint-disable @angular-eslint/directive-selector */
 import { HttpClient } from '@angular/common/http';
 import {
   ChangeDetectorRef,
@@ -35,6 +34,7 @@ import {
 import {
   DataSourceComponentModel,
   DEFAULT_DEBOUNCE_TIME,
+  ExtendedRequestType,
   setComponentProperties,
   setDataToArray,
 } from '../common';
@@ -48,10 +48,9 @@ import {
   UnsubscribeComponent,
 } from '../components';
 
-type ExtendedRequestType<T> = RequestParams<T> & { useNewData: boolean}
-
 @Directive({
   selector:
+    // eslint-disable-next-line @angular-eslint/directive-selector
     'v-dropdown[useDatasource], v-multiselect[useDatasource], v-generic-field[useDatasource]',
   standalone: true,
 })
@@ -69,6 +68,8 @@ export class DatasourceDirective<T>
 
   @Input() transformFn?: (data: T) => unknown;
 
+  @Input() extraFilter!: any;
+
   get activeComponent(): DataSourceComponentModel<T> {
     return (this.dropdownComponent ??
       this.multiSelectComponent ??
@@ -136,6 +137,7 @@ export class DatasourceDirective<T>
             offset: 0,
             filter: {
               [property]: value.filter ? value.filter : undefined,
+              ...(this.extraFilter ?? {})
             } as Partial<T>,
             useNewData: true,
           });
@@ -147,7 +149,7 @@ export class DatasourceDirective<T>
         takeUntil(this.destroyed$),
         filter(request => !this.isDataForRequestLoaded(request)),
         map((request) => {
-          const extendedParams = normalizeRequest({ ...this.lastParameter, ...request }) as ExtendedRequestType<T>;
+          const extendedParams = normalizeRequest({ ...this.lastParameter, ...request }, DEFAULT_SEARCH_LIMIT) as ExtendedRequestType<T>;
           extendedParams.useNewData = request.useNewData ?? false;
           return extendedParams;
         }),
@@ -203,8 +205,6 @@ export class DatasourceDirective<T>
         this.httpClient
       );
 
-      this.activeComponent.loading = true;
-      this.changeDetectorRef.detectChanges();
       if (this.autoBind) {
         this.parameters$.next({ offset: 0 });
       }
@@ -212,22 +212,22 @@ export class DatasourceDirective<T>
   }
 
   private isDataForRequestLoaded(request: Partial<ExtendedRequestType<T>>) {
-    if (request.useNewData){
+    if (request.useNewData) {
       return false;
     }
 
     const offset = request.offset ?? 0;
     const limit = request.limit ?? DEFAULT_SEARCH_LIMIT;
     const options = this.activeComponent.options;
-    if (!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);    
+
+    const allItemsFilled = options.slice(offset, offset + limit).every(item => item !== undefined && item != this.loadingPlaceholderItem);
     return allItemsFilled;
   }
 

package/src/lib/directives/index.ts

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