@verisoft/ui-primeng 20.1.1 → 20.1.3

package/src/lib/components/errors/error.component.ts

@@ -1,34 +0,0 @@
-import { CommonModule } from "@angular/common";
-import { Component, inject, Input, } from "@angular/core";
-import { NgControl, ValidationErrors } from "@angular/forms";
-import { ERROR_PROVIDER_TOKEN } from "@verisoft/core";
-import { SlotPosition, SlotPositionType } from "@verisoft/ui-core";
-import { MessageModule } from "primeng/message";
-import { Observable } from "rxjs";
-import { Icons } from "../../icons";
-
-@Component({
-  selector: "v-validation-message",
-  templateUrl: "./error.component.html",
-  styleUrl: "./error.component.scss",
-  imports: [CommonModule, MessageModule]
-})
-export class ErrorComponent {
-  @Input({ required: true }) ngControl?: NgControl;
-
-  @Input() errorSlot: SlotPositionType = SlotPosition.bottom
-
-  @Input() messageSlot: SlotPositionType = SlotPosition.bottom
-
-  @Input() variant = 'simple';
-
-  @Input() severity = 'error';
-
-  readonly errorService = inject(ERROR_PROVIDER_TOKEN);
-
-  icons = Icons
-
-  getErrorMessage(errors: ValidationErrors): Observable<string | undefined> {
-    return this.errorService.mapError(errors);
-  }
-}

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

@@ -1 +0,0 @@
-export * from './error.component';

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

@@ -1,32 +0,0 @@
-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/feature-list/directives/feature-list-filter-field.directive.ts

@@ -1,8 +0,0 @@
-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/feature-list/feature-list-filter.pipe.ts

@@ -1,21 +0,0 @@
-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/feature-list/feature-list-page.component.ts

@@ -1,32 +0,0 @@
-import { Component, inject } 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',
-    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;
-
-  private readonly activatedRoute = inject(ActivatedRoute);
-
-  constructor() {
-    this.config =
-      this.activatedRoute.snapshot.data[FEATURE_LIST_PAGE_CONFIG_PROPERTY];
-  }
-}

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

@@ -1,42 +0,0 @@
-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/feature-list/feature-list.component.html

@@ -1,59 +0,0 @@
-<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/feature-list/feature-list.component.scss

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

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

@@ -1,341 +0,0 @@
-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,
-  MAX_COLUMN_CHAR_COUNT,
-  TableDatasourceDirective,
-  TableFilterDirective,
-  TableSelectionMode,
-  TableSelectionModeType,
-} from '@verisoft/ui-core';
-import { take, switchMap, forkJoin, Observable, of } from 'rxjs';
-import { Icons } from '../../icons';
-import { FilterComponent } from '../filter';
-import {
-  ActionButtonComponent,
-  ActionButtonGroupComponent,
-} from '../shared-components/action-button-group';
-import { TableComponent } from '../table';
-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,
-    ],
-    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() 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>;
-
-  @Input() extraFilter: Partial<T> | undefined;
-
-  @Input() disableCustomClicks = false;
-
-  @Input() maximumColumnLength = MAX_COLUMN_CHAR_COUNT;
-
-  @Output() addClick = new EventEmitter();
-
-  @Output() downloadClick = new EventEmitter();
-
-  @Output() deleteClick = new EventEmitter<T[]>();
-
-  @Output() selectionChange = new EventEmitter();
-
-  @Input() set selectionMode(mode: TableSelectionModeType | undefined) {
-    this._selectionMode = mode;
-  }
-
-  get selectionMode(): TableSelectionModeType | undefined {
-    return this.canDelete
-      ? TableSelectionMode.single
-      : this._selectionMode;
-  }
-
-  icons = Icons;
-
-  private httpClient = inject(HttpClient);
-
-  private baseUrl: string = inject(BASE_URL_PATH);
-
-  private _selectionMode: TableSelectionModeType | 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();
-    }
-
-    this.cdRef.detectChanges();
-  }
-
-  selectItems(items: T[]) {
-    this.selection = items ?? [];
-
-    if (this.selectionMode !== undefined) {
-      this.selectionChange.emit(
-        this.selectionMode === 'multiple'
-          ? this.selection
-          : this.selection[0]
-      );
-    }
-  }
-
-  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/feature-list/index.ts

@@ -1,5 +0,0 @@
-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';
-export * from './feature-list-filter.pipe';

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

@@ -1,34 +0,0 @@
-import { Directive, Input } from '@angular/core';
-import { ValidatorFn } from '@angular/forms';
-import { DatasourceType } from '@verisoft/core';
-import { GenericFieldDefinition, GenericFieldType, GenericFieldTypeType } from '@verisoft/ui-core';
-
-@Directive({
-  // eslint-disable-next-line @angular-eslint/directive-selector
-  selector: 'v-filter-field',
-})
-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;
-
-  @Input() validator?: ValidatorFn[];
-
-  @Input() datasource: DatasourceType<any> | undefined;
-
-  @Input() filterField?: string;
-
-  @Input() showFilter?: boolean;
-
-  @Input() localSearch?: boolean;
-}

package/src/lib/components/filter/filter.component.html

@@ -1,68 +0,0 @@
-<div class="v-filter w-100 p-3 bg-primary">
-  @if (formGroup$ | async; as formGroup){
-  <form [formGroup]="formGroup" class="d-flex align-items-center">
-    @if (title) {
-    <div class="v-filter_title pe-4">
-      <h2 class="text-white m-0">{{ title }}</h2>
-    </div>
-    }
-    <div class="v-filter__fulltext flex-grow-1 pe-4">
-      @if (showFulltext){
-      <v-textfield
-        class="d-none d-lg-block"
-        placeholder="Search"
-        size="large"
-        formControlName="searchField"
-        type="search"
-        [clearable]="true"
-      >
-      </v-textfield>
-      }
-    </div>
-    @if (simpleFormFieldDefinitions$ | async; as declaration){
-       @if (showFilters)
-    {
-    <div class="v-filter_filters d-none d-sm-block me-2">
-      <v-generic-form
-        [fields]="declaration"
-        [formGroup]="formGroup"
-      ></v-generic-form>
-      <v-button label="X" class="mt-3" (click)="clear()" />
-    </div>
-  }
-    <div class="v-filter_action-buttons d-flex">
-      @if (declaration.length && !showFilters) {
-      <v-button 
-        class="me-4"
-        [icon]="icons.filter"
-        [label]="$any(filledFiltersCount$ | async)"
-        (click)="openFilter()"
-      />
-      } @if (!autoBind) {
-      <v-button
-        useShortCut
-        [shortCutFn]="submitValue.bind(this)"
-        shortCutKey="Enter"
-        class="text-white mx-2"
-        [outlined]="true"
-        size="small"
-        label="Apply"
-        (click)="submitValue()"
-      ></v-button>
-      <v-button
-        useShortCut
-        [shortCutFn]="clear.bind(this)"
-        shortCutKey="Escape"
-        class="text-white"
-        [outlined]="true"
-        size="small"
-        label="Clear"
-        (click)="clear()"
-      ></v-button>
-      } 
-    </div>
-    }
-    <ng-content select="v-action-button-group"></ng-content>
-  </form>
-  }
-</div>