@verisoft/ui-primeng 18.6.0 → 18.7.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/{lib/components/shared-components/filter/index.d.ts → src/lib/components/shared-components/filter/index.ts}

@@ -1,2 +1,2 @@
-export * from './filter.component';
-export * from './directives/filter-field.directive';
+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,97 @@
+@if (!type || type === fieldTypes.text) {
+<v-textfield
+  [label]="label"
+  [floatLabel]="floatLabel === true"
+  [size]="size"
+  [formControl]="formControl"
+/>
+} @else if (type === fieldTypes.dropdown && !datasource) {
+<v-dropdown
+  [label]="!floatLabel ? label : ''"
+  [floatLabel]="floatLabel ? label : ''"
+  [testId]="testId"
+  [options]="options"
+  [optionLabel]="optionLabel"
+  [optionValue]="optionValue ?? optionLabel"
+  [loading]="loading"
+  [forceMinWidth]="true"
+  [formControl]="formControl"
+  [showFilter]="showFilter ?? false"
+  [localSearch]="localSearch ?? false"
+  (changeEvent)="changed.emit($event)"
+  (clearEvent)="cleared.emit($event)"
+  (lazyLoadEvent)="lazyLoad.emit($any($event))"
+  (showEvent)="showed.emit($event)"
+/> 
+} @else if (type === fieldTypes.dropdown && datasource) {
+  <v-dropdown
+    useDatasource
+    [forceMinWidth]="true"
+    [datasource]="datasource"
+    [optionLabel]="optionLabel"
+    [optionValue]="optionValue ?? optionLabel"
+    [label]="!floatLabel ? label : ''"
+    [floatLabel]="floatLabel ? label : ''"
+    [testId]="testId"
+    [loading]="loading"
+    [formControl]="formControl"
+    [showFilter]="showFilter ?? false"
+    [filterField]="filterField ?? 'fulltext'"
+    [localSearch]="localSearch ?? false"
+    (changeEvent)="changed.emit($event)"
+    (clearEvent)="cleared.emit($event)"
+    (lazyLoadEvent)="lazyLoad.emit($any($event))"
+    (showEvent)="showed.emit($event)"
+  />
+} @else if (type === fieldTypes.multiselect && !datasource) {
+<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)"
+/>
+} @else if (type === fieldTypes.multiselect && datasource) {
+<v-multiselect
+  useDatasource
+  [datasource]="datasource"
+  [optionLabel]="optionLabel"
+  [optionValue]="optionValue ?? optionLabel"
+  [label]="!floatLabel ? label : ''"
+  [floatLabel]="floatLabel ? label : ''"
+  [testId]="testId"
+  [loading]="loading"
+  [formControl]="formControl"
+  (changeEvent)="changed.emit($event)"
+  (clearEvent)="cleared.emit($event)"
+  (lazyLoadEvent)="lazyLoad.emit($any($event))"
+  (showEvent)="showed.emit($event)"
+/>
+} @else if (type === fieldTypes.checkbox) {
+<v-tristatecheckbox
+  [label]="label"
+  [testId]="testId"
+  [formControl]="formControl"
+/>
+} @else if (type === fieldTypes.simplecheckbox) {
+<v-checkbox
+  [label]="label"
+  [testId]="testId"
+  [formControl]="formControl"
+/>
+} @else if (type === fieldTypes.calendar) {
+<v-calendar
+  [label]="!floatLabel ? label : ''"
+  [floatLabel]="floatLabel ? label : ''"
+  [testId]="testId"
+  [formControl]="formControl"
+  [icon]="icons.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,94 @@
+import { CommonModule } from '@angular/common';
+import {
+  ChangeDetectionStrategy,
+  Component,
+  EventEmitter,
+  Input,
+  Output,
+} from '@angular/core';
+import { ReactiveFormsModule } from '@angular/forms';
+import {
+  DatasourceType,
+  FilterEvent,
+  LazyLoadEvent,
+} from '@verisoft/core';
+import {
+  BaseFormInputComponent,
+  DatasourceDirective,
+  FieldSize,
+  FieldSizeType,
+  GENERIC_FIELD_COMPONENT_TOKEN,
+  GenericFieldCore,
+  GenericFieldType,
+  GenericFieldTypeType,
+} from '@verisoft/ui-core';
+import { Icons } from '../../../icons';
+import { CalendarComponent } from '../../calendar';
+import { CheckboxComponent } from '../../checkbox';
+import { DropdownComponent } from '../../dropdown';
+import { MultiselectComponent } from '../../multiselect';
+import { TextfieldComponent } from '../../textfield';
+import { TristatecheckboxComponent } from '../../tristatecheckbox';
+
+@Component({
+  selector: 'v-generic-field',
+  standalone: true,
+  imports: [
+    CommonModule,
+    DropdownComponent,
+    CalendarComponent,
+    TristatecheckboxComponent,
+    MultiselectComponent,
+    TextfieldComponent,
+    ReactiveFormsModule,
+    CheckboxComponent,
+    DatasourceDirective,
+],
+  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;
+
+  @Input() datasource?: DatasourceType<T>
+
+  @Input() filterField?: string;
+
+  @Input() showFilter?: boolean;
+
+  @Input() localSearch?: boolean;
+
+  @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/{lib/components/shared-components/generic-field/index.d.ts → src/lib/components/shared-components/generic-field/index.ts}

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

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

@@ -0,0 +1,46 @@
+@if (formGroupComputed) {
+  <div
+    class="v-generic-form"
+    [ngClass]="showAsRow ? 'd-flex flex-row' : '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 ?? 'NOT SET' | translate"
+        [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"
+        [datasource]="field.datasource"
+        [showFilter]="field.showFilter"
+        [filterField]="field.filterField"
+        [localSearch]="field.localSearch"
+      ></v-generic-field>
+    </div>
+    } @else {
+    <v-generic-field
+      class="me-4"
+      [type]="field.type"
+      [label]="field.label ?? 'NOT SET' | translate"
+      [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"
+      [datasource]="field.datasource"
+      [showFilter]="field.showFilter"
+      [filterField]="field.filterField"
+      [localSearch]="field.localSearch"
+    ></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,57 @@
+import { CommonModule } from '@angular/common';
+import {
+  ChangeDetectionStrategy,
+  Component,
+  Input,
+  OnChanges,
+  SimpleChanges,
+} from '@angular/core';
+import { ReactiveFormsModule, UntypedFormGroup } from '@angular/forms';
+import { TranslateModule } from '@ngx-translate/core';
+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: [
+    CommonModule,
+    GenericFieldComponent,
+    ReactiveFormsModule,
+    TranslateModule,
+  ],
+  templateUrl: './generic-form.component.html',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class GenericFormComponent implements OnChanges {
+  @Input() formGroup?: UntypedFormGroup;
+
+  @Input() fields?: GenericFieldDefinition[];
+
+  @Input() columns?: number;
+
+  @Input() showAsRow!: boolean;
+
+  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);
+    }
+  }
+}