@verisoft/ui-primeng 18.0.0

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

@@ -0,0 +1,257 @@
+import { AsyncPipe } from '@angular/common';
+import {
+  AfterContentInit,
+  ChangeDetectionStrategy,
+  ChangeDetectorRef,
+  Component,
+  ContentChildren,
+  forwardRef,
+  inject,
+  Input,
+  OnChanges,
+  OnInit,
+  QueryList,
+  SimpleChanges,
+} from '@angular/core';
+import {
+  ControlValueAccessor,
+  FormGroup,
+  NG_VALUE_ACCESSOR,
+  ReactiveFormsModule,
+} from '@angular/forms';
+import { BaseHttpService } from '@verisoft/core';
+import {
+  DEFAULT_DEBOUNCE_TIME,
+  FieldSize,
+  UnsubscribeComponent,
+} from '@verisoft/ui-core';
+import { BadgeModule } from 'primeng/badge';
+import {
+  BehaviorSubject,
+  combineLatestWith,
+  debounceTime,
+  map,
+  Observable,
+  startWith,
+  takeUntil,
+} from 'rxjs';
+import { ScreenSizeService } from '../../services/screen-size.service';
+import { ButtonComponent, ButtonShortCutDirective } from '../button';
+import { DialogService } from '../confirm-dialog';
+import {
+  generateFormGroup,
+  GenericFieldDefinition,
+  GenericFormComponent,
+} from '../generic-form';
+import { TextfieldComponent } from '../textfield';
+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,
+    },
+  ],
+  templateUrl: './filter.component.html',
+  styleUrl: './filter.component.scss',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class FilterComponent<T extends object>
+  extends UnsubscribeComponent
+  implements OnChanges, OnInit, AfterContentInit, ControlValueAccessor
+{
+  @ContentChildren(FilterFieldDirective)
+  fieldDeclarations!: QueryList<FilterFieldDirective>;
+
+  @Input() fields: GenericFieldDefinition[] = [];
+
+  @Input() title?: string;
+
+  @Input() fulltextFieldName = 'searchField';
+
+  @Input() showFulltext = true;
+
+  @Input() showFilters = true;
+
+  @Input() autoBind = true;
+
+  @Input() debounceTime?: number = DEFAULT_DEBOUNCE_TIME;
+
+  fieldDefinitios$?: Observable<GenericFieldDefinition[]>;
+
+  filledFiltersCount$?: Observable<string>;
+
+  formGroup$?: Observable<FormGroup>;
+
+  simpleFormFieldDefinitions$?: Observable<GenericFieldDefinition[]>;
+
+  private searchField: GenericFieldDefinition = {
+    name: this.fulltextFieldName,
+  };
+
+  private onTouch?: () => void;
+
+  private onChange?: (value: FilterValueType) => void;
+
+  private inputFields$ = new BehaviorSubject<
+    GenericFieldDefinition[] | undefined
+  >(this.fields);
+
+  FieldSize = FieldSize;
+
+  protected screenSizeService = inject(ScreenSizeService);
+  protected changeDetectorRef = inject(ChangeDetectorRef);
+  protected dialogService = inject(DialogService);
+
+  service!: BaseHttpService<T>;
+
+  formGroup = new FormGroup({});
+
+  private lastFormFields: GenericFieldDefinition[] = [];
+
+  ngOnInit(): void {
+    this.formGroup.valueChanges
+      .pipe(
+        takeUntil(this.destroyed$),
+        debounceTime(this.debounceTime ?? DEFAULT_DEBOUNCE_TIME)
+      )
+      .subscribe((value) => this.onChange?.(value));
+  }
+
+  ngOnChanges(changes: SimpleChanges): void {
+    if (changes['fields']) {
+      this.inputFields$.next(this.fields);
+    }
+  }
+
+  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.filledFiltersCount$ = this.formGroup$.pipe(
+      map((formGroup: FormGroup) => getFilledControlCount(formGroup).toString())
+    );
+
+    this.changeDetectorRef.detectChanges();
+  }
+
+  protected openFilter() {
+    const fields = this.lastFormFields.map((x) => ({
+      ...x,
+      label:
+        x.name === this.fulltextFieldName ? 'Full Text' : x.label || x.name,
+    }));
+
+    const formGroup = generateFormGroup(
+      this.lastFormFields,
+      undefined,
+      undefined,
+      false
+    );
+    formGroup.patchValue(this.formGroup.value);
+    this.dialogService.showDialog({
+      headerIcon: 'pi pi-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: 'hovno',
+      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) => 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();
+  }
+}

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

@@ -0,0 +1,18 @@
+import { FormGroup } from "@angular/forms";
+
+export function getFilledControlCount(formGroup: FormGroup){
+    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/filter/index.ts

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

package/src/lib/components/form-field/form-field.component.html

@@ -0,0 +1,41 @@
+<div class="v-form-field mt-3" [attr.data-testId]="testId">
+  <div [ngClass]="{ 'd-block d-md-flex': display === 'flex', 'd-lg-flex': display === 'block' }">
+      <div class="col-12 col-md-4 d-flex align-items-center">
+        <label
+          class="v-formfield-label d-flex align-items-center"
+          [ngClass]="{
+            'pb-2': display === 'block',
+            'text-error': (ngControl?.errors | error) && ngControl?.dirty, 
+            'text-warning': (ngControl?.errors | warning) && ngControl?.dirty,
+            'text-default': !ngControl?.invalid && !ngControl?.dirty,
+            'text-secondary': !ngControl?.invalid && ngControl?.dirty
+          }"
+        >{{ label }}<span *ngIf="label">:</span>
+          <span *ngIf="required" class="text-error ps-1">*</span>
+        </label>
+        <i *ngIf="tooltip"
+          [pTooltip]="tooltip"
+          class="ps-2 text-default v-tooltip pi pi-info-circle"
+        ></i>
+      </div>
+      <div 
+        class="col-sm-12 col-md-8 col-lg-8"
+      >
+        <div 
+          class="v-form-field-content align-items-center w-100"
+          [ngClass]="{ 'd-flex': display === 'flex', 'd-block': display === 'block', 'input-warning': ngControl?.errors | warning }"
+        >
+          <ng-content></ng-content>
+        </div>
+      </div>
+      <div class="align-content-center">
+        <ng-container *ngIf="ngControl?.invalid && ngControl?.dirty">
+          <i
+            [pTooltip]="(ngControl?.errors | error) || (ngControl?.errors | warning)"
+            [ngClass]="{ 'text-error': ngControl?.errors | error, 'text-warning': ngControl?.errors | warning }"
+            class="pi pi-times-circle"
+          ></i>
+        </ng-container>
+      </div>
+  </div>
+</div>

package/src/lib/components/form-field/form-field.component.spec.ts

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

package/src/lib/components/form-field/form-field.component.stories.ts

@@ -0,0 +1,69 @@
+import { NgControl } from '@angular/forms';
+import type { Meta, StoryObj } from '@storybook/angular';
+import { within, expect } from '@storybook/test';
+import { FormFieldComponent } from './form-field.component';
+
+const meta: Meta<FormFieldComponent> = {
+  component: FormFieldComponent,
+  title: 'FormFieldComponent',
+};
+export default meta;
+type Story = StoryObj<FormFieldComponent>;
+
+export const Primary: Story = {
+  parameters: {
+    controls: { expanded: true },
+  },
+  args: {
+    label: 'Label showcase',
+    tooltip: 'This is a tooltip lorem ipsum',
+    required: false,
+    testId: '123',
+    display: 'flex',
+    ngControl: {} as NgControl,
+  },
+  argTypes: {
+    ngControl: {
+      control: false,
+      description: 'NgControl which is provided from a form component',
+    },
+    display: {
+      options: ['flex', 'block'],
+      control: {
+        type: 'radio',
+      },
+      description:
+        'Defines if the **FormFieldComponent** is in `flex` or `block` display mode',
+    },
+    required: {
+      control: {
+        type: 'boolean',
+      },
+      description: 'Defines if the **FormFieldComponent** is `required`',
+    },
+    testId: {
+      control: {
+        type: 'text',
+      },
+      description: 'Sets the **FormFieldComponent** `test id`',
+    },
+    label: {
+      control: {
+        type: 'text',
+      },
+      description: 'Sets the **FormFieldComponent** `label`',
+    },
+    tooltip: {
+      control: {
+        type: 'text',
+      },
+      description: 'Sets the **FormFieldComponent** `tooltip`',
+    },
+  },
+  play: async ({ canvasElement }: any) => {
+    const canvas = within(canvasElement);
+    expect(canvas.getByText('Label showcase')).toBeTruthy();
+    expect(canvas.queryAllByText('This is a tooltip lorem ipsum')).toBeTruthy();
+    expect(canvas.findByTestId('123')).toBeTruthy();
+  },
+};

package/src/lib/components/form-field/form-field.component.ts

@@ -0,0 +1,34 @@
+import { CommonModule } from '@angular/common';
+import { Component, Input } from '@angular/core';
+import { NgControl, ReactiveFormsModule } from '@angular/forms';
+import { ErrorPipe, FormFieldCore, WarningPipe } from '@verisoft/ui-core';
+import { MessageModule } from 'primeng/message';
+import { TooltipModule } from 'primeng/tooltip';
+
+@Component({
+  selector: 'v-form-field',
+  standalone: true,
+  imports: [
+    CommonModule,
+    ErrorPipe,
+    WarningPipe,
+    ReactiveFormsModule,
+    MessageModule,
+    TooltipModule,
+  ],
+  templateUrl: './form-field.component.html',
+  styleUrl: './form-field.component.scss',
+})
+export class FormFieldComponent implements FormFieldCore {
+  @Input() ngControl?: NgControl;
+
+  @Input() label?: string;
+
+  @Input() tooltip?: string;
+
+  @Input() required = false;
+
+  @Input() testId?: string;
+
+  @Input() display: 'flex' | 'block' = 'flex';
+}

package/src/lib/components/form-field/index.ts

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

package/src/lib/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="pi pi-calendar"
+></v-calendar>
+}

package/src/lib/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/generic-field/generic-field.component.ts

@@ -0,0 +1,76 @@
+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,
+} from '@verisoft/ui-core';
+import { CalendarComponent } from '../calendar/calendar.component';
+import { DropdownComponent } from '../dropdown';
+import { MultiselectComponent } from '../multiselect/multiselect.component';
+import { TextfieldComponent } from '../textfield/textfield.component';
+import { TristatecheckboxComponent } from '../tristatecheckbox';
+import { GenericFieldType, GenericFieldTypeType } from './generic-field.model';
+
+@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;
+
+  @Input() optionValue?: string;
+
+  @Input() options?: T[];
+
+  @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;
+}

package/src/lib/components/generic-field/generic-field.model.ts

@@ -0,0 +1,9 @@
+export enum GenericFieldType {
+  'dropdown' = 'dropdown',
+  'checkbox' = 'checkbox',
+  'calendar' = 'calendar',
+  'multiselect' = 'multiselect',
+  'text' = 'text',
+}
+
+export type GenericFieldTypeType = keyof typeof GenericFieldType;

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

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

package/src/lib/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/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();
+  });
+});