@verisoft/ui-govcz 0.0.1 → 18.3.0

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

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

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

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

@@ -0,0 +1,284 @@
+import { AsyncPipe } from '@angular/common';
+import {
+  AfterContentInit,
+  ChangeDetectionStrategy,
+  ChangeDetectorRef,
+  Component,
+  ContentChildren,
+  forwardRef,
+  inject,
+  Input,
+  OnChanges,
+  OnInit,
+  QueryList,
+  SimpleChanges,
+} from '@angular/core';
+import {
+  FormGroup,
+  NG_VALUE_ACCESSOR,
+  ReactiveFormsModule,
+} from '@angular/forms';
+import { BaseHttpService } from '@verisoft/core';
+import {
+  ButtonShortCutDirective,
+  DEFAULT_DEBOUNCE_TIME,
+  DialogService,
+  FieldSize,
+  FILTER_COMPONENT_TOKEN,
+  FilterCore,
+  GenericFieldDefinition,
+  isFilterEmpty,
+  ScreenSizeService,
+  UnsubscribeComponent,
+} from '@verisoft/ui-core';
+import { BadgeModule } from 'primeng/badge';
+import {
+  BehaviorSubject,
+  combineLatestWith,
+  debounceTime,
+  distinctUntilChanged,
+  map,
+  Observable,
+  startWith,
+  takeUntil,
+} from 'rxjs';
+import { Icons } from '../../../icons';
+import { ButtonComponent } from '../../button';
+import { TextfieldComponent } from '../../textfield';
+import { generateFormGroup, GenericFormComponent } from '../generic-form';
+import { FilterFieldDirective } from './directives/filter-field.directive';
+import { getFilledControlCount } from './filter.model';
+
+type FilterValueType = { [key: string]: unknown };
+
+@Component({
+  selector: 'v-filter',
+  standalone: true,
+  imports: [
+    AsyncPipe,
+    ReactiveFormsModule,
+    BadgeModule,
+    TextfieldComponent,
+    GenericFormComponent,
+    ButtonComponent,
+    ButtonShortCutDirective,
+  ],
+  providers: [
+    {
+      provide: NG_VALUE_ACCESSOR,
+      useExisting: forwardRef(() => FilterComponent),
+      multi: true,
+    },
+    {
+      provide: FILTER_COMPONENT_TOKEN,
+      useExisting: FilterComponent,
+    },
+  ],
+  templateUrl: './filter.component.html',
+  styleUrl: './filter.component.scss',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class FilterComponent<T extends object>
+  extends UnsubscribeComponent
+  implements OnChanges, OnInit, AfterContentInit, FilterCore
+{
+  @ContentChildren(FilterFieldDirective)
+  fieldDeclarations!: QueryList<FilterFieldDirective>;
+
+  @Input() fields: GenericFieldDefinition[] = [];
+
+  @Input() filters: GenericFieldDefinition[] = [];
+
+  @Input() title?: string;
+
+  @Input() fulltextFieldName = 'searchField';
+
+  @Input() showFulltext = true;
+
+  @Input() showFilters = true;
+
+  @Input() autoBind = true;
+
+  @Input() debounceTime?: number = DEFAULT_DEBOUNCE_TIME;
+
+  icons = Icons;
+
+  fieldDefinitios$?: Observable<GenericFieldDefinition[]>;
+
+  formGroup$?: Observable<FormGroup>;
+
+  simpleFormFieldDefinitions$?: Observable<GenericFieldDefinition[]>;
+
+  private searchField: GenericFieldDefinition = {
+    name: this.fulltextFieldName,
+  };
+
+  private onTouch?: () => void;
+
+  private onChange?: (value: FilterValueType | undefined) => void;
+
+  private inputFields$ = new BehaviorSubject<
+    GenericFieldDefinition[] | undefined
+  >([...this.fields ?? [], ...this.filters ?? []]);
+
+  FieldSize = FieldSize;
+
+  protected screenSizeService = inject(ScreenSizeService);
+  protected changeDetectorRef = inject(ChangeDetectorRef);
+  protected dialogService = inject(DialogService);
+
+  service!: BaseHttpService<T>;
+
+  formGroup = new FormGroup({});
+
+  filledFiltersCount$: Observable<string> = this.formGroup.valueChanges.pipe(
+    startWith(this.formGroup),
+    map(() => getFilledControlCount(this.formGroup).toString())
+  );
+
+  private lastFormFields: GenericFieldDefinition[] = [];
+
+  ngOnInit(): void {
+    this.formGroup.valueChanges
+      .pipe(
+        takeUntil(this.destroyed$),
+        debounceTime(this.debounceTime ?? DEFAULT_DEBOUNCE_TIME),
+        map((x) => this.convertFilter(x)),
+        distinctUntilChanged()
+      )
+      .subscribe((value) => this.onChange?.(value));
+  }
+
+  ngOnChanges(changes: SimpleChanges): void {
+    if (changes['fields'] || changes['filters']) {
+      this.inputFields$.next([...this.fields ?? [], ...this.filters ?? []]);
+    }
+  }
+
+  ngAfterContentInit(): void {
+    const fieldDeclaratios$: Observable<GenericFieldDefinition[]> =
+      this.fieldDeclarations.changes.pipe(
+        startWith({}),
+        map(() => this.fieldDeclarations.toArray())
+      );
+
+    this.fieldDefinitios$ = this.inputFields$.pipe(
+      combineLatestWith(fieldDeclaratios$),
+      map(([inputs, views]) => {
+        this.searchField.name = this.fulltextFieldName;
+        this.lastFormFields = [this.searchField, ...(inputs ?? []), ...views];
+        return this.lastFormFields;
+      })
+    );
+
+    this.simpleFormFieldDefinitions$ = this.fieldDefinitios$.pipe(
+      map((fields) => {
+        return fields
+          .filter((x) => x.name !== this.fulltextFieldName)
+          .map((x) => ({ ...x, floatLabel: true, size: FieldSize.large }));
+      })
+    );
+
+    this.formGroup$ = this.fieldDefinitios$.pipe(
+      map((fields) =>
+        generateFormGroup(fields, this.formGroup, undefined, false)
+      )
+    );
+
+    this.changeDetectorRef.detectChanges();
+  }
+
+  protected openFilter() {
+    const fields = this.lastFormFields.map((x) => ({
+      ...x,
+      label:
+        x.name === this.fulltextFieldName ? 'Fulltext' : x.label ?? x.name,
+    }));
+
+    const formGroup = generateFormGroup(
+      this.lastFormFields,
+      undefined,
+      undefined,
+      false
+    );
+    formGroup.patchValue(this.formGroup.value);
+    this.dialogService.showDialog({
+      title: 'Set filters',
+      headerIcon: this.icons.filter,
+      severity: 'primary',
+      componentType: GenericFormComponent,
+      data: {
+        formGroup,
+        fields: fields,
+        columns: 1,
+      },
+      confirmButtonFn: () => this.setFilterValues(formGroup),
+      confirmButtonText: 'Apply',
+      cancelButtonFn: () => this.clear(),
+      cancelButtonText: 'Clear all',
+      showCancelButton: true,
+      closable: false,
+    });
+  }
+
+  protected openSearch() {
+    this.dialogService.showDialog({
+      headerIcon: 'pi pi-search',
+      severity: 'primary',
+      innerHTML: '<p>Search</p>',
+      confirmButtonFn: () => this.submitValue(),
+      confirmButtonText: 'Apply',
+      cancelButtonFn: () => this.clear(),
+      cancelButtonText: 'Clear all',
+      showCancelButton: true,
+      closable: false,
+    });
+  }
+
+  writeValue(data: FilterValueType): void {
+    this.formGroup.patchValue(data);
+  }
+
+  registerOnChange(fn: (value: FilterValueType | undefined) => void): void {
+    this.onChange = fn;
+  }
+
+  registerOnTouched(fn: () => void): void {
+    this.onTouch = fn;
+  }
+
+  setDisabledState?(isDisabled: boolean): void {
+    isDisabled ? this.formGroup.disable() : this.formGroup.enable();
+  }
+
+  submitValue() {
+    if (!this.autoBind) {
+      this.onChange?.(this.formGroup.value);
+    }
+  }
+
+  setFilterValues(dialogFormGroup: FormGroup) {
+    this.formGroup.setValue(dialogFormGroup.value);
+    this.submitValue();
+  }
+
+  clear() {
+    this.formGroup.reset();
+    this.submitValue();
+  }
+
+  private convertFilter(
+    value: FilterValueType | undefined
+  ): FilterValueType | undefined {
+    if (value == undefined) {
+      return undefined;
+    }
+
+    const isEmpty = isFilterEmpty(value);
+    if (isEmpty) {
+      return undefined;
+    }
+
+    return value;
+  }
+}

package/src/lib/components/shared-components/filter/filter.model.ts

@@ -0,0 +1,18 @@
+import { FormGroup } from '@angular/forms';
+
+export function getFilledControlCount(formGroup: FormGroup): number {
+  let count = 0;
+  Object.keys(formGroup.controls).forEach((key) => {
+    const control = formGroup.get(key);
+    if (control?.value) {
+      if (typeof control.value === 'boolean') {
+        count++;
+      }
+      if (typeof control.value === 'string' && control.value.trim() !== '') {
+        count++;
+      }
+    }
+  });
+
+  return count;
+}

package/src/lib/components/shared-components/filter/index.ts

@@ -0,0 +1,2 @@
+export * from './filter.component';
+export * from './directives/filter-field.directive';

package/src/lib/components/shared-components/generic-field/generic-field.component.html

@@ -0,0 +1,54 @@
+@if (!type || type === fieldTypes.text) {
+<v-textfield
+  [label]="label"
+  [floatLabel]="floatLabel === true"
+  [size]="size"
+  [formControl]="formControl"
+></v-textfield>
+} @if (type === fieldTypes.dropdown) {
+<v-dropdown
+  [label]="!floatLabel ? label : ''"
+  [floatLabel]="floatLabel ? label : ''"
+  [testId]="testId"
+  [options]="options"
+  [optionLabel]="optionLabel"
+  [optionValue]="optionValue ?? optionLabel"
+  [loading]="loading"
+  [formControl]="formControl"
+  (changeEvent)="changed.emit($event)"
+  (clearEvent)="cleared.emit($event)"
+  (lazyLoadEvent)="lazyLoad.emit($any($event))"
+  (showEvent)="showed.emit($event)"
+>
+</v-dropdown>
+} @else if (type === fieldTypes.multiselect) {
+<v-multiselect
+  [label]="!floatLabel ? label : ''"
+  [floatLabel]="floatLabel ? label : ''"
+  [testId]="testId"
+  [options]="options"
+  [optionLabel]="optionLabel"
+  [optionValue]="optionValue ?? optionLabel"
+  [loading]="loading"
+  [formControl]="formControl"
+  (changeEvent)="changed.emit($event)"
+  (clearEvent)="cleared.emit($event)"
+  (lazyLoadEvent)="lazyLoad.emit($any($event))"
+  (showEvent)="showed.emit($event)"
+>
+</v-multiselect>
+} @else if (type === fieldTypes.checkbox) {
+<v-tristatecheckbox
+  [label]="label"
+  [testId]="testId"
+  [formControl]="formControl"
+></v-tristatecheckbox>
+} @else if (type === fieldTypes.calendar) {
+<v-calendar
+  [label]="!floatLabel ? label : ''"
+  [floatLabel]="floatLabel ? label : ''"
+  [testId]="testId"
+  [formControl]="formControl"
+  [icon]="icons.calendar"
+></v-calendar>
+}

package/src/lib/components/shared-components/generic-field/generic-field.component.spec.ts

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

package/src/lib/components/shared-components/generic-field/generic-field.component.ts

@@ -0,0 +1,79 @@
+import {
+  ChangeDetectionStrategy,
+  Component,
+  EventEmitter,
+  Input,
+  Output,
+} from '@angular/core';
+import { ReactiveFormsModule } from '@angular/forms';
+import {
+  FilterEvent,
+  LazyLoadEvent,
+} from '@verisoft/core';
+import {
+  BaseFormInputComponent,
+  FieldSize,
+  FieldSizeType,
+  GENERIC_FIELD_COMPONENT_TOKEN,
+  GenericFieldCore,
+  GenericFieldType,
+  GenericFieldTypeType,
+} from '@verisoft/ui-core';
+import { Icons } from '../../../icons';
+import { CalendarComponent } from '../../calendar';
+import { DropdownComponent } from '../../dropdown';
+import { MultiselectComponent } from '../../multiselect';
+import { TextfieldComponent } from '../../textfield';
+import { TristatecheckboxComponent } from '../../tristatecheckbox';
+
+@Component({
+  selector: 'v-generic-field',
+  standalone: true,
+  imports: [
+    DropdownComponent,
+    CalendarComponent,
+    TristatecheckboxComponent,
+    MultiselectComponent,
+    TextfieldComponent,
+    ReactiveFormsModule,
+  ],
+  providers: [
+    {
+      provide: GENERIC_FIELD_COMPONENT_TOKEN,
+      useExisting: GenericFieldComponent,
+    },
+  ],
+  templateUrl: './generic-field.component.html',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class GenericFieldComponent<T>
+  extends BaseFormInputComponent
+  implements GenericFieldCore<T>
+{
+  @Input() type?: GenericFieldTypeType = GenericFieldType.text;
+
+  @Input() floatLabel?: boolean;
+
+  @Input() optionLabel: string | undefined;
+
+  @Input() optionValue: string | undefined;
+
+  @Input() options: T[] | undefined;
+
+  @Input() size?: FieldSizeType = FieldSize.medium;
+
+  @Input() loading = false;
+
+  @Input() lazy = false;
+
+  @Input() filter = true;
+
+  @Output() changed = new EventEmitter<any>();
+  @Output() showed = new EventEmitter<any>();
+  @Output() cleared = new EventEmitter<any>();
+  @Output() lazyLoad = new EventEmitter<LazyLoadEvent>();
+  @Output() filtered = new EventEmitter<FilterEvent>();
+
+  fieldTypes = GenericFieldType;
+  icons = Icons;
+}

package/src/lib/components/shared-components/generic-field/index.ts

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

package/src/lib/components/shared-components/generic-form/generic-form.component.html

@@ -0,0 +1,33 @@
+@if (formGroupComputed) {
+<div class="v-generic-form row" [formGroup]="formGroupComputed">
+  @for(field of fields; track field){ @if (columnClass) {
+  <div class="v-generic-form__column {{ columnClass }}">
+    <v-generic-field
+      [type]="field.type"
+      [label]="field.label"
+      [floatLabel]="field.floatLabel"
+      [testId]="field.testId"
+      [options]="field.options"
+      [optionLabel]="field.optionLabel"
+      [optionValue]="field.optionValue ?? field.optionLabel"
+      [options]="field.options"
+      [size]="field.size"
+      [formControlName]="field.name"
+    ></v-generic-field>
+  </div>
+  } @else {
+  <v-generic-field
+    [type]="field.type"
+    [label]="field.label"
+    [floatLabel]="field.floatLabel"
+    [testId]="field.testId"
+    [options]="field.options"
+    [optionLabel]="field.optionLabel"
+    [optionValue]="field.optionValue ?? field.optionLabel"
+    [options]="field.options"
+    [size]="field.size"
+    [formControlName]="field.name"
+  ></v-generic-field>
+  } }
+</div>
+}

package/src/lib/components/shared-components/generic-form/generic-form.component.spec.ts

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

package/src/lib/components/shared-components/generic-form/generic-form.component.ts

@@ -0,0 +1,48 @@
+import {
+  ChangeDetectionStrategy,
+  Component,
+  Input,
+  OnChanges,
+  SimpleChanges,
+} from '@angular/core';
+import { ReactiveFormsModule, UntypedFormGroup } from '@angular/forms';
+import { GenericFieldDefinition } from '@verisoft/ui-core';
+import { GenericFieldComponent } from '../generic-field';
+import {
+  generateFormGroup,
+  getColumnClass,
+} from './generic-form.model';
+
+@Component({
+  selector: 'v-generic-form',
+  standalone: true,
+  imports: [GenericFieldComponent, ReactiveFormsModule],
+  templateUrl: './generic-form.component.html',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class GenericFormComponent implements OnChanges {
+  @Input() formGroup?: UntypedFormGroup;
+
+  @Input() fields?: GenericFieldDefinition[];
+
+  @Input() columns?: number;
+
+  formGroupComputed!: UntypedFormGroup;
+
+  columnClass?: string;
+
+  ngOnChanges(changes: SimpleChanges): void {
+    if (changes['fields'] || changes['formGroup']) {
+      this.formGroupComputed = generateFormGroup(
+        this.fields,
+        this.formGroupComputed,
+        this.formGroup,
+        !!changes['formGroup']
+      );
+    }
+
+    if (changes['columns']) {
+      this.columnClass = getColumnClass(this.columns);
+    }
+  }
+}