@verisoft/ui-govcz 0.0.1 → 18.3.0

package/src/lib/components/shared-components/dynamic-component/dynamic-component-factory.service.ts

@@ -0,0 +1,90 @@
+import {
+  Injectable,
+  ViewContainerRef,
+  Type,
+  ComponentFactoryResolver,
+  Injector,
+  ComponentRef,
+  ComponentFactory,
+  OnInit,
+  OnChanges,
+  SimpleChanges,
+  SimpleChange,
+} from '@angular/core';
+
+@Injectable({
+  providedIn: 'root',
+})
+export class DynamicComponentFactoryService {
+  constructor(private componentFactoryResolver: ComponentFactoryResolver) {}
+
+  async createDynamicComponent<TComponent>(
+    componentType: Type<TComponent>,
+    viewContainerRef: ViewContainerRef,
+    inputs: Partial<TComponent>,
+    injector: Injector | undefined = undefined
+  ) {
+    const componentFactory =
+      this.componentFactoryResolver.resolveComponentFactory(componentType);
+    viewContainerRef.clear();
+    const component = viewContainerRef.createComponent(
+      componentFactory,
+      undefined,
+      injector
+    );
+
+    this.setComponentDataInt(componentFactory, component, inputs);
+    this.fireComponentEvents(component.instance, inputs);
+    return component;
+  }
+
+  setComponentData<TComponent>(
+    component: ComponentRef<TComponent>,
+    inputs: Partial<TComponent>
+  ) {
+    const factory = this.componentFactoryResolver.resolveComponentFactory(
+      component.componentType
+    );
+
+    this.setComponentDataInt(factory, component, inputs);
+  }
+
+  private fireComponentEvents<TComponent>(instance: TComponent, inputs: Partial<TComponent>) {
+    if (instance) {
+      const onChangeComponent = instance as unknown as OnChanges;
+      if (onChangeComponent.ngOnChanges && inputs) {
+        const changeEventArgs = Object.keys(inputs).reduce((changes: SimpleChanges, key: string) => {
+          const inputValue = (inputs as { [key: string]: unknown })[key];
+          changes[key] = new SimpleChange(undefined, inputValue, true);
+          return changes;
+        }, {} as SimpleChanges);
+        
+
+        onChangeComponent.ngOnChanges(changeEventArgs);
+      }
+
+      const onInitComponent = instance as unknown as OnInit;
+      if (onInitComponent.ngOnInit) {
+        onInitComponent.ngOnInit();
+      }
+    }
+  }
+
+  private setComponentDataInt<TComponent>(
+    factory: ComponentFactory<TComponent>,
+    component: ComponentRef<TComponent>,
+    inputs: Partial<TComponent>
+  ) {
+    if (inputs) {
+      const propertyNames = factory.inputs.map((x) => x.propName);
+      const inputsHash = new Set(propertyNames);
+      Object.keys(inputs)
+        .filter((x) => inputsHash.has(x))
+        .forEach((x) => {
+          (<{ [key: string]: unknown }>component.instance)[x] = (<
+            { [key: string]: unknown }
+          >inputs)[x];
+        });
+    }
+  }
+}

package/src/lib/components/shared-components/dynamic-component/dynamic-component.component.ts

@@ -0,0 +1,55 @@
+import {
+  AfterViewInit,
+  ChangeDetectionStrategy,
+  ChangeDetectorRef,
+  Component,
+  inject,
+  Injector,
+  Input,
+  OnChanges,
+  Type,
+  ViewChild,
+  ViewContainerRef,
+} from '@angular/core';
+import { DynamicComponentFactoryService } from './dynamic-component-factory.service';
+
+@Component({
+  selector: 'v-dynamic-component',
+  standalone: true,
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  template: `<ng-container #dynamicContainer></ng-container>`,
+})
+export class DynamicComponent<TComponent> implements AfterViewInit, OnChanges {
+  @Input() componentType!: Type<TComponent>;
+
+  @Input() data!: Partial<TComponent>;
+
+  @ViewChild('dynamicContainer', { read: ViewContainerRef, static: true })
+  container!: ViewContainerRef;
+
+  private factoryServices = inject(DynamicComponentFactoryService);
+
+  private changeDetectorRef = inject(ChangeDetectorRef);
+
+  private injector = inject(Injector);
+
+  ngOnChanges(): void {
+    this.crateComponent();
+  }
+
+  ngAfterViewInit(): void {
+    this.crateComponent();
+    this.changeDetectorRef.detectChanges();
+  }
+
+  private crateComponent() {
+    if (this.container) {
+      this.factoryServices.createDynamicComponent(
+        this.componentType,
+        this.container,
+        this.data,
+        this.injector
+      );
+    }
+  }
+}

package/src/lib/components/shared-components/dynamic-component/index.ts

@@ -0,0 +1,2 @@
+export * from './dynamic-component-factory.service';
+export * from './dynamic-component.component';

package/src/lib/components/shared-components/feature-list/directives/feature-list-column.directive.ts

@@ -0,0 +1,26 @@
+import { Directive, Input } from '@angular/core';
+import { TableColumnDirective } from '@verisoft/ui-core';
+import { FEATURE_LIST_COLUMN_PROVIDER, FeatureListColumnDefinition, FeatureListColumnProvider } from '../feature-list-page.model';
+
+@Directive({
+  // eslint-disable-next-line @angular-eslint/directive-selector
+  selector: 'v-feature-list-column',
+  standalone: true,
+  providers: [
+    {
+      provide: FEATURE_LIST_COLUMN_PROVIDER,
+      useExisting: FeatureListColumnDirective,
+      multi: true,
+    },
+  ],
+})
+export class FeatureListColumnDirective<T> extends TableColumnDirective<T> implements FeatureListColumnProvider<T> {
+  @Input()
+  filter = false;
+
+  override getDefinition(): FeatureListColumnDefinition<T> {
+    const definition = super.getDefinition() as FeatureListColumnDefinition<T>;
+    definition.filter = this.filter;
+    return definition;
+  }
+}

package/src/lib/components/shared-components/feature-list/directives/feature-list-filter-field.directive.ts

@@ -0,0 +1,8 @@
+import { Directive } from '@angular/core';
+import { FilterFieldDirective } from '../../filter';
+@Directive({
+  // eslint-disable-next-line @angular-eslint/directive-selector
+  selector: 'v-feature-list-filter-field',
+  standalone: true,
+})
+export class FeatureListFilterFieldDirective extends FilterFieldDirective {}

package/src/lib/components/shared-components/feature-list/feature-list-filter.pipe.ts

@@ -0,0 +1,21 @@
+import { Pipe, PipeTransform } from "@angular/core";
+import { GenericFieldDefinition, GenericFieldType } from "@verisoft/ui-core";
+import { FeatureListColumnDefinition } from "./feature-list-page.model";
+
+@Pipe({
+    name: 'featureListColumn',
+    standalone: true,
+})
+export class FeatureListFilterPipe<T> implements PipeTransform {
+    transform(value: FeatureListColumnDefinition<T>[] | undefined): GenericFieldDefinition[] | undefined {
+        if (!value){
+            return undefined;
+        }
+
+        return value.filter(x => x.filter).map((x, index) => ({
+            name: x.id,
+            label: typeof x.headerName === 'function'? x.headerName(x.id, index) : x.headerName ?? '',
+            type: x.type as GenericFieldType,
+        }));
+    }
+}

package/src/lib/components/shared-components/feature-list/feature-list-page.component.ts

@@ -0,0 +1,31 @@
+import { Component } from '@angular/core';
+import { ActivatedRoute } from '@angular/router';
+import {
+  FEATURE_LIST_PAGE_CONFIG_PROPERTY,
+  FeatureListPageConfig,
+} from './feature-list-page.model';
+import { FeatureListComponent } from './feature-list.component';
+
+@Component({
+  selector: 'v-feature-list-page',
+  standalone: true,
+  imports: [FeatureListComponent],
+  template: `
+    <v-feature-list
+      [title]="config.title"
+      [tableName]="config.tableName"
+      [showAdd]="config.showAdd ?? true"
+      [showDownload]="config.showDownload ?? true"
+      [showDelete]="config.showDelete ?? true"
+    >
+    </v-feature-list>
+  `,
+})
+export class FeatureListPageComponent {
+  config!: FeatureListPageConfig;
+
+  constructor(activatedRoute: ActivatedRoute) {
+    this.config =
+      activatedRoute.snapshot.data[FEATURE_LIST_PAGE_CONFIG_PROPERTY];
+  }
+}

package/src/lib/components/shared-components/feature-list/feature-list-page.model.ts

@@ -0,0 +1,41 @@
+import { InjectionToken } from '@angular/core';
+import { Route } from '@angular/router';
+import { ColumnDefinition } from '@verisoft/ui-core';
+import { FeatureListPageComponent } from './feature-list-page.component';
+
+export interface FeatureListPageConfig {
+  title: string;
+  datasource: string;
+  tableName: string;
+  showAdd?: boolean;
+  showDownload?: boolean;
+  showDelete?: boolean;
+}
+
+export const FEATURE_LIST_PAGE_CONFIG_PROPERTY = 'feature_list_config';
+
+export function addFeatureListPage(
+  value: Partial<Route> & { config: FeatureListPageConfig }
+): Route {
+  const { config, ...route } = value;
+  return {
+    component: FeatureListPageComponent,
+    ...route,
+    data: {
+      [FEATURE_LIST_PAGE_CONFIG_PROPERTY]: config,
+      ...(route.data ?? {}),
+    },
+  };
+}
+
+export interface FeatureListColumnDefinition<T> extends ColumnDefinition<T> {
+  filter?: boolean;
+}
+
+export const FEATURE_LIST_COLUMN_PROVIDER = new InjectionToken(
+  'FEATURE_LIST_COLUMN_PROVIDER'
+);
+
+export interface FeatureListColumnProvider<T> {
+  getDefinition: () => FeatureListColumnDefinition<T>;
+}

package/src/lib/components/shared-components/feature-list/feature-list.component.html

@@ -0,0 +1,56 @@
+<div class="feature-list__container full-height-container">
+  <v-filter
+    #filter
+    [title]="title"
+    [fields]="columns | featureListColumn"
+    [filters]="filters"
+    [fulltextFieldName]="fulltextFieldName"
+    [showFulltext]="showFulltext"
+    [showFilters]="showExtendedFilter"
+  >
+    <v-action-button-group
+      [maxItems]="maxVisibleActions"
+      [maxItemsMobile]="maxVisibleMobileActions"
+    >
+      @if (showAdd) {
+      <v-action-button
+        [icon]="icons.add"
+        label="Add"
+        [disabled]="!canAdd"
+        (click)="addClick.emit()"
+      ></v-action-button>
+      } @if (showDelete){
+      <v-action-button
+        [icon]="icons.delete"
+        label="Delete"
+        [disabled]="!canDelete || !selection.length"
+        (click)="startDeleteItems()"
+      ></v-action-button>
+      } @if (showDownload){
+      <v-action-button
+        [icon]="icons.download"
+        label="Download"
+        [disabled]="!canDownload"
+        (click)="startDownload()"
+      ></v-action-button>
+      }
+    </v-action-button-group>
+  </v-filter>
+  <div class="feature-list__table-container full-height-container">
+    <div class="full-height-container">
+      <v-table
+        useDatasource
+        useFilter
+        [filterComponent]="filter"
+        class="full-height-container"
+        [selectionMode]="selectionMode"
+        [tableName]="tableName"
+        [autoBind]="true"
+        [datasource]="datasource"
+        [columns]="columns"
+        (selectionChange)="selectItems($event)"
+      >
+      </v-table>
+    </div>
+  </div>
+</div>

package/src/lib/components/shared-components/feature-list/feature-list.component.scss

@@ -0,0 +1,10 @@
+.full-height-container {
+    display: flex;
+    flex-direction: column;
+    flex-grow: 1;
+    height: 100%;
+}
+
+:host {
+    @extend .full-height-container;
+  }

package/src/lib/components/shared-components/feature-list/feature-list.component.ts

@@ -0,0 +1,315 @@
+import { HttpClient } from '@angular/common/http';
+import {
+  AfterViewInit,
+  ChangeDetectionStrategy,
+  ChangeDetectorRef,
+  Component,
+  ContentChildren,
+  EventEmitter,
+  inject,
+  Input,
+  Output,
+  QueryList,
+  ViewChild,
+} from '@angular/core';
+import {
+  AllDataRequestParams,
+  BASE_URL_PATH,
+  BaseHttpService,
+  convertDatasource,
+  DatasourceType,
+  DEFAULT_PAGE_SIZE,
+} from '@verisoft/core';
+import {
+  ColumnModel,
+  DialogService,
+  downloadFile,
+  GenericFieldDefinition,
+  TableDatasourceDirective,
+  TableFilterDirective,
+  TableSelectionMode,
+  TableSelectionModeType,
+} from '@verisoft/ui-core';
+import { forkJoin, Observable, of, switchMap, take } from 'rxjs';
+import { Icons } from '../../../icons';
+import { TableComponent } from '../../table';
+import {
+  ActionButtonComponent,
+  ActionButtonGroupComponent,
+} from '../action-button-group';
+import { FilterComponent } from '../filter';
+import { FeatureListFilterFieldDirective } from './directives/feature-list-filter-field.directive';
+import { FeatureListFilterPipe } from './feature-list-filter.pipe';
+import {
+  FEATURE_LIST_COLUMN_PROVIDER,
+  FeatureListColumnDefinition,
+  FeatureListColumnProvider,
+} from './feature-list-page.model';
+
+@Component({
+  selector: 'v-feature-list',
+  imports: [
+    TableComponent,
+    TableDatasourceDirective,
+    FilterComponent,
+    TableFilterDirective,
+    ActionButtonGroupComponent,
+    ActionButtonComponent,
+    FeatureListFilterPipe,
+  ],
+  standalone: true,
+  templateUrl: './feature-list.component.html',
+  styleUrls: ['./feature-list.component.scss'],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class FeatureListComponent<T> implements AfterViewInit {
+  @ContentChildren(FEATURE_LIST_COLUMN_PROVIDER) viewColumns!: QueryList<
+    FeatureListColumnProvider<T>
+  >;
+
+  @ContentChildren(FeatureListFilterFieldDirective)
+  fieldDeclarations!: QueryList<FeatureListFilterFieldDirective>;
+
+  @ViewChild(TableDatasourceDirective)
+  tableDatasourceDirective!: TableDatasourceDirective<T>;
+
+  @Input() autoBind = true;
+
+  @Input({ required: true }) title!: string;
+
+  @Input() columns!: FeatureListColumnDefinition<T>[];
+
+  @Input() filters!: GenericFieldDefinition[];
+
+  @Input() maxVisibleActions = 2;
+
+  @Input({ required: true }) tableName!: string;
+
+  @Input() ngrxFeatureKey?: string;
+
+  @Input() maxVisibleMobileActions = 0;
+
+  @Input() showExtendedFilter = false;
+
+  @Input() showDownload = false;
+
+  @Input() showDelete = false;
+
+  @Input() showAdd = false;
+
+  @Input() canDownload = true;
+
+  @Input() canDelete = true;
+
+  @Input() canAdd = true;
+
+  @Input() useRouterFilter = true;
+
+  @Input() fulltextFieldName = 'searchField';
+
+  @Input() showFulltext = true;
+
+  @Input() deleteConfirmMessage: string | undefined;
+
+  @Input() autoDeleteEnabled = true;
+
+  @Input() autoDownloadEnabled = true;
+
+  @Input() downloadFileName = 'export.csv';
+
+  @Input() datasource!: DatasourceType<T>;
+
+  @Output() addClick = new EventEmitter();
+
+  @Output() downloadClick = new EventEmitter();
+
+  @Output() deleteClick = new EventEmitter<T[]>();
+
+  icons = Icons;
+
+  private httpClient = inject(HttpClient);
+
+  private baseUrl: string = inject(BASE_URL_PATH);
+
+  get selectionMode(): TableSelectionModeType | undefined {
+    return this.canDelete ? TableSelectionMode.single : undefined;
+  }
+
+  private cdRef = inject(ChangeDetectorRef);
+
+  private dialogService = inject(DialogService);
+
+  selection: T[] = [];
+
+  ngAfterViewInit(): void {
+    if (this.viewColumns?.length) {
+      const vewColumns = this.viewColumns
+        ?.toArray()
+        .map((x) => x.getDefinition());
+      this.columns = [...(this.columns ?? []), ...(vewColumns ?? [])];
+      this.cdRef.detectChanges();
+    }
+
+    if (this.fieldDeclarations?.length) {
+      this.filters = this.fieldDeclarations?.toArray();
+    }
+  }
+
+  selectItems(items: T[]) {
+    this.selection = items ?? [];
+  }
+
+  startDeleteItems() {
+    if (!this.selection.length) {
+      return;
+    }
+
+    if (this.deleteConfirmMessage) {
+      const message = this.deleteConfirmMessage;
+      this.dialogService.showDialog({
+        innerHTML: message,
+        confirmButtonFn: () => this.deleteItems(this.selection),
+      });
+    } else {
+      this.deleteItems(this.selection);
+    }
+  }
+
+  startDownload() {
+    this.downloadClick.emit();
+    if (!this.autoDownloadEnabled) {
+      return;
+    }
+
+    const dowloadFn = this.createDownloadFn(this.datasource);
+    if (dowloadFn) {
+      this.tableDatasourceDirective.params$
+        .pipe(
+          take(1),
+          switchMap((params) => dowloadFn(params))
+        )
+        .subscribe((blob) => {
+          downloadFile(this.downloadFileName, blob);
+        });
+    }
+  }
+
+  private deleteItems(items: T[]) {
+    if (!this.autoDeleteEnabled) {
+      this.deleteClick.emit(items);
+    } else {
+      this.forceDelete(items);
+    }
+  }
+
+  private forceDelete(items: T[]) {
+    const deleteFn = this.createDeleteFn(this.datasource);
+    if (deleteFn) {
+      const deleteMethods = items.map((x) => deleteFn(x));
+      forkJoin(deleteMethods)
+        .pipe(take(1))
+        .subscribe(() => this.finishDeletion(items));
+    } else {
+      this.finishDeletion(items);
+    }
+  }
+
+  private createDeleteFn(
+    datasource: DatasourceType<T>
+  ): ((item: T) => Observable<unknown>) | undefined {
+    if (!datasource) {
+      return undefined;
+    }
+
+    if (typeof datasource === 'string') {
+      const service = new BaseHttpService<T>(
+        this.httpClient,
+        this.baseUrl,
+        datasource
+      );
+
+      return (item: T) => service.delete((item as { id: string }).id);
+    }
+
+    if (datasource instanceof BaseHttpService) {
+      return (item: T) => datasource.delete((item as { id: string }).id);
+    }
+
+    return undefined;
+  }
+
+  private createDownloadFn(
+    datasource: DatasourceType<T>
+  ): ((request: AllDataRequestParams<T>) => Observable<Blob>) | undefined {
+    if (!datasource) {
+      return undefined;
+    }
+
+    if (typeof datasource === 'string') {
+      const service = new BaseHttpService<T>(
+        this.httpClient,
+        this.baseUrl,
+        datasource
+      );
+
+      return (request: AllDataRequestParams<T>) => service.export(request);
+    }
+
+    if (datasource instanceof BaseHttpService) {
+      return (request: AllDataRequestParams<T>) => datasource.export(request);
+    }
+
+    const fetchFunction = convertDatasource(
+      datasource,
+      this.baseUrl,
+      this.httpClient
+    );
+
+    return (request: AllDataRequestParams<T>) => {
+      const allData: T[] = [];
+      let offset = 0;
+      const fetchAllData = (): Observable<Blob> => {
+        return fetchFunction({
+          ...request,
+          offset,
+          limit: DEFAULT_PAGE_SIZE,
+        }).pipe(
+          take(1),
+          switchMap((response) => {
+            allData.push(...response.data);
+            if (allData.length < response.total) {
+              offset = offset + DEFAULT_PAGE_SIZE;
+              return fetchAllData();
+            } else {
+              return of(this.convertToBlob(allData));
+            }
+          })
+        );
+      };
+
+      return fetchAllData();
+    };
+  }
+
+  private finishDeletion(items: T[]) {
+    if (this.datasource && Array.isArray(this.datasource)) {
+      this.datasource = this.datasource.filter((x) => !items.includes(x));
+    } else {
+      this.tableDatasourceDirective.reload();
+    }
+
+    this.deleteClick.emit(items);
+  }
+
+  private convertToBlob(data: T[]): Blob {
+    const columnModel = this.columns.map((x) => new ColumnModel(x));
+    const headers = columnModel.map((x, index) => x.headerGetter(x.id, index));
+    const dataValues = data.map((row, rowIndex) =>
+      columnModel.map((column) => column.valueGetter(row, rowIndex))
+    );
+    const csvData = [headers, ...dataValues]
+      .map((row) => row.join(','))
+      .join('\n');
+    return new Blob([csvData], { type: 'text/csv' });
+  }
+}

package/src/lib/components/shared-components/feature-list/index.ts

@@ -0,0 +1,4 @@
+export * from './feature-list.component';
+export * from './feature-list-page.model';
+export * from './directives/feature-list-column.directive';
+export * from './directives/feature-list-filter-field.directive';

package/src/lib/components/shared-components/filter/directives/filter-field.directive.ts

@@ -0,0 +1,24 @@
+import { Directive, Input } from '@angular/core';
+import { GenericFieldDefinition, GenericFieldType, GenericFieldTypeType } from '@verisoft/ui-core';
+
+@Directive({
+  // eslint-disable-next-line @angular-eslint/directive-selector
+  selector: 'v-filter-field',
+  standalone: true,
+})
+export class FilterFieldDirective implements GenericFieldDefinition {
+  
+    @Input({ required: true }) name!: string;
+
+    @Input() type?: GenericFieldTypeType | undefined = GenericFieldType.text;
+
+    @Input() label?: string | undefined;
+
+    @Input() optionLabel!: string;
+
+    @Input() optionValue?: string | undefined;
+
+    @Input() options?: unknown[] | undefined;
+
+    @Input() value?: unknown;
+}