@verisoft/ui-govcz 18.6.4 → 18.7.0

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

@@ -1,342 +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 { 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() 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!: 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[] = [];
-
-  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/shared-components/filter/directives/filter-field.directive.ts

@@ -1,35 +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',
-  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/shared-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>

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

@@ -1,21 +0,0 @@
-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/shared-components/filter/filter.component.stories.ts

@@ -1,23 +0,0 @@
-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,
-  },
-};