@verisoft/ui-primeng 18.6.0 → 18.7.0

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

@@ -0,0 +1,142 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
+import {
+  Injectable,
+  ViewContainerRef,
+  Type,
+  ComponentFactoryResolver,
+  Injector,
+  ComponentRef,
+  ComponentFactory,
+  OnChanges,
+  SimpleChanges,
+  SimpleChange,
+  EventEmitter,
+  OnDestroy,
+} from '@angular/core';
+import { ExtendedComponent } from '@verisoft/ui-core';
+import { Subscription } from 'rxjs';
+
+@Injectable({
+  providedIn: 'root',
+})
+export class DynamicComponentFactoryService implements OnDestroy {
+  constructor(private componentFactoryResolver: ComponentFactoryResolver) { }
+
+  ngOnDestroy(): void {
+    this.unsubscribeComponentEvents(this);
+  }
+
+  async createDynamicComponent<TComponent>(
+    componentType: Type<TComponent>,
+    viewContainerRef: ViewContainerRef,
+    inputs: ExtendedComponent<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 unsubscribeComponentEvents<TComponent>(instance: TComponent) {
+    const subscriptionStoreKey = '__outputSubscriptions__';
+    const subscriptions = (instance as any)[subscriptionStoreKey] as Map<string, Subscription>;
+
+    if (subscriptions) {
+      subscriptions.forEach((sub) => sub.unsubscribe());
+      subscriptions.clear();
+    }
+  }
+
+  private fireComponentEvents<TComponent>(
+    instance: TComponent,
+    inputs: ExtendedComponent<TComponent>
+  ) {
+    if (!instance || typeof instance !== 'object') return;
+
+    this.fireInputComponentEvents(instance, inputs);
+    this.fireOutputComponentEvents(instance, inputs);
+  }
+
+  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];
+        });
+    }
+  }
+
+  private fireInputComponentEvents<TComponent>(
+    instance: TComponent,
+    inputs: ExtendedComponent<TComponent>
+  ) {
+    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);
+    }
+  }
+
+  private fireOutputComponentEvents<TComponent>(
+    instance: TComponent & object,
+    inputs: ExtendedComponent<TComponent>
+  ) {
+    const outputs = Object.keys(inputs).filter((key) => {
+      const emitter = (instance as Record<string, any>)[key];
+      return emitter instanceof EventEmitter;
+    });
+
+    const subscriptionStoreKey = '__outputSubscriptions__';
+    if (!(subscriptionStoreKey in instance)) {
+      (instance as any)[subscriptionStoreKey] = new Map<string, Subscription>();
+    }
+    const subscriptions = (instance as any)[subscriptionStoreKey] as Map<string, Subscription>;
+
+    for (const outputKey of outputs) {
+      const eventEmitter = (instance as Record<string, any>)[outputKey] as EventEmitter<any>;
+      const callback = inputs[outputKey] as (value: any) => void;
+
+      if (eventEmitter && typeof callback === 'function') {
+        if (subscriptions.has(outputKey)) {
+          subscriptions.get(outputKey)!.unsubscribe();
+        }
+
+        const subscription = eventEmitter.subscribe((value: any) => callback(value));
+        subscriptions.set(outputKey, subscription);
+      }
+    }
+  }
+}

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

@@ -0,0 +1,56 @@
+import {
+  AfterViewInit,
+  ChangeDetectionStrategy,
+  ChangeDetectorRef,
+  Component,
+  inject,
+  Injector,
+  Input,
+  OnChanges,
+  Type,
+  ViewChild,
+  ViewContainerRef,
+} from '@angular/core';
+import { ExtendedComponent } from '@verisoft/ui-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!: ExtendedComponent<TComponent>;
+
+  @ViewChild('dynamicContainer', { read: ViewContainerRef, static: true })
+  container!: ViewContainerRef;
+
+  private factoryServices = inject(DynamicComponentFactoryService);
+
+  private changeDetectorRef = inject(ChangeDetectorRef);
+
+  private injector = inject(Injector);
+
+  ngOnChanges(): void {
+    this.createComponent();
+  }
+
+  ngAfterViewInit(): void {
+    this.createComponent();
+    this.changeDetectorRef.detectChanges();
+  }
+
+  private createComponent() {
+    if (this.container) {
+      this.factoryServices.createDynamicComponent(
+        this.componentType,
+        this.container,
+        this.data,
+        this.injector
+      );
+    }
+  }
+}

package/{lib/components/shared-components/dynamic-component/index.d.ts → src/lib/components/shared-components/dynamic-component/index.ts}

@@ -1,2 +1,2 @@
-export * from './dynamic-component-factory.service';
-export * from './dynamic-component.component';
+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,32 @@
+import { Directive, Input } from '@angular/core';
+import { GenericFieldType, GenericFieldTypeType, 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;
+
+  @Input() type: GenericFieldTypeType = GenericFieldType.text;
+
+  override getDefinition(): FeatureListColumnDefinition<T> {
+    const definition = super.getDefinition() as FeatureListColumnDefinition<T>;
+    definition.filter = this.filter;
+    definition.type = this.type;
+    definition.format = this.format;
+    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,42 @@
+import { InjectionToken } from '@angular/core';
+import { Route } from '@angular/router';
+import { ColumnDefinition, GenericFieldTypeType } 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;
+  type?: GenericFieldTypeType;
+}
+
+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,59 @@
+<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"
+        [extraFilter]="extraFilter"
+        [maximumColumnLength]="maximumColumnLength"
+        [disableCustomClicks]="disableCustomClicks"
+        (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;
+}