@verisoft/ui-govcz 20.0.0 → 20.1.0

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

@@ -0,0 +1,360 @@
+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,
+  GovButtonType,
+  GovButtonTypeType,
+  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>;
+
+  @ViewChild('table')
+  tableComponent!: TableComponent<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() applyLabel = 'Apply';
+
+  @Input() clearLabel = 'Clear';
+
+  @Input() recordsText = 'FILTER.RECORDS';
+
+  @Input() buttonType: GovButtonTypeType = GovButtonType.solid;
+
+  @Input() buttonOutlined = false;
+
+  @Input() deleteConfirmMessage: string | undefined;
+
+  @Input() autoDeleteEnabled = true;
+
+  @Input() autoDownloadEnabled = true;
+
+  @Input() downloadFileName = 'export.csv';
+
+  @Input() datasource!: DatasourceType<T>;
+
+  @Input() extraFilter!: any;
+
+  @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[] = [];
+
+  get tableTotal(): number | undefined {
+    return this.tableComponent?.total;
+  }
+
+  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

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

@@ -0,0 +1,35 @@
+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',
+  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;
+
+  @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

@@ -0,0 +1,78 @@
+<div class="v-filter w-100">
+  @if (formGroup$ | async; as formGroup){
+  <form [formGroup]="formGroup">
+    <div class="v-filter__header d-flex align-items-center p-3">
+      @if (title) {
+      <div class="v-filter_title pe-4">
+        <h2 class="m-0">{{ title }}</h2>
+      </div>
+      }
+      @if (total !== undefined && showRecords) {
+      <div class="v-filter_records pe-4">
+        <span class="v-filter_records-text">{{ recordsText | translate: {count: total} }}</span>
+      </div>
+      }
+      <div class="v-filter__fulltext flex-grow-1 pe-4">
+        @if (showFulltext){
+        <v-textfield
+          placeholder="Search"
+          size="large"
+          [formControlName]="fulltextFieldName"
+          type="search"
+          [clearable]="true"
+        />
+        }
+      </div>
+      <div class="v-filter_action-buttons d-flex align-items-center gap-2">
+        @if (!autoBind) {
+        <v-button
+          useShortCut
+          [shortCutFn]="submitValue.bind(this)"
+          shortCutKey="Enter"
+          [type]="buttonType"
+          [outlined]="buttonOutlined"
+          size="small"
+          [label]="applyLabel"
+          (click)="submitValue()"
+        />
+        }
+        @if (isExpanded) {
+        <v-button
+          useShortCut
+          [shortCutFn]="clear.bind(this)"
+          shortCutKey="Escape"
+          size="small"
+          [type]="buttonType"
+          [outlined]="buttonOutlined"
+          [label]="clearLabel"
+          (click)="clear()"
+        />
+        }
+        @if (simpleFormFieldDefinitions$ | async; as declaration){ @if
+        (declaration.length) {
+        <v-button
+          size="small"
+          [type]="buttonType"
+          [outlined]="buttonOutlined"
+          [icon]="icons.filter"
+          [label]="$any(filledFiltersCount$ | async)"
+          (click)="toggleFilters()"
+        />
+        } }
+
+        <ng-content select="v-action-button-group"></ng-content>
+      </div>
+    </div>
+    @if (simpleFormFieldDefinitions$ | async; as declaration){ @if (isExpanded
+    && declaration.length) {
+    <div class="v-filter__expanded p-3">
+      <v-generic-form
+        [fields]="declaration"
+        [formGroup]="formGroup"
+        [columns]="2"
+      />
+    </div>
+    } }
+  </form>
+  }
+</div>

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

@@ -0,0 +1,32 @@
+:host {
+    display: block;
+}
+
+.v-filter {
+    background: var(--v-filter-background);
+    border-radius: 0.5rem;
+}
+
+.v-filter__header {
+    border-bottom: 1px solid var(--v-filter-border);
+    background-color: var(--v-filter-header-background);
+}
+
+.v-filter_records-text {
+    color: var(--v-filter-records-text-color);
+}
+
+.v-filter__expanded {
+    animation: slideDown 0.3s ease-out;
+}
+
+@keyframes slideDown {
+    from {
+        opacity: 0;
+        transform: translateY(-10px);
+    }
+    to {
+        opacity: 1;
+        transform: translateY(0);
+    }
+}

package/src/lib/components/filter/filter.component.spec.ts

@@ -0,0 +1,21 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { FilterComponent } from './filter.component';
+
+describe('VerisoftTableFilterComponent', () => {
+  let component: FilterComponent<any>;
+  let fixture: ComponentFixture<FilterComponent<any>>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [FilterComponent],
+    }).compileComponents();
+
+    fixture = TestBed.createComponent(FilterComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

package/src/lib/components/filter/filter.component.stories.ts

@@ -0,0 +1,23 @@
+import type { Meta, StoryObj } from '@storybook/angular';
+import { FilterComponent } from './filter.component';
+
+const meta: Meta<FilterComponent<any>> = {
+  component: FilterComponent,
+  title: 'VerisoftTableFilterComponent',
+};
+export default meta;
+type Story = StoryObj<FilterComponent<any>>;
+
+export const Primary: Story = {
+  args: {
+    filterDefinitions: [],
+    debounceTime: 0,
+  },
+};
+
+export const Heading: Story = {
+  args: {
+    filterDefinitions: [],
+    debounceTime: 0,
+  },
+};