@verisoft/ui-primeng 18.5.0 → 18.6.0

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

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

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

@@ -1,18 +0,0 @@
-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/generic-field/generic-field.component.html

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

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

@@ -1,94 +0,0 @@
-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/src/lib/components/shared-components/generic-form/generic-form.component.html

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

@@ -1,21 +0,0 @@
-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();
-  });
-});