@verisoft/ui-govcz 20.1.0 → 20.1.2

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

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

@@ -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,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/filter/filter.component.html

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

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

@@ -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/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,
-  },
-};