@verisoft/ui-primeng 20.0.0 → 20.1.1

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

@@ -0,0 +1,281 @@
+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 {
+  BehaviorSubject,
+  combineLatestWith,
+  debounceTime,
+  distinctUntilChanged,
+  map,
+  Observable,
+  startWith,
+  takeUntil,
+} from 'rxjs';
+import { Icons } from '../../icons';
+import { ButtonComponent } from '../button';
+import { generateFormGroup, GenericFormComponent } from '../shared-components/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',
+    imports: [
+        AsyncPipe,
+        ReactiveFormsModule,
+        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/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/filter/index.ts

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

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

@@ -0,0 +1,42 @@
+<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': (errorProvider.mapError(ngControl?.errors ?? [])) && ngControl?.dirty, 
+            'text-warning': (ngControl?.errors | warning) && ngControl?.dirty,
+            'text-default': !ngControl?.invalid && !ngControl?.dirty,
+            'text-secondary': !ngControl?.invalid && ngControl?.dirty
+          }"
+        >{{ label }}@if (label) {
+        <span>:</span>
+      }
+      @if (required) {
+        <span class="text-error ps-1">*</span>
+      }
+    </label>
+    @if (tooltip) {
+      <i
+        [pTooltip]="tooltip"
+        class="ps-2 text-default v-tooltip {{ icons.infoCircle }}"
+      ></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>
+    </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,37 @@
+import { CommonModule } from '@angular/common';
+import { Component, inject, Input, Optional, Self } from '@angular/core';
+import { NgControl, ReactiveFormsModule } from '@angular/forms';
+import { ERROR_PROVIDER_TOKEN } from '@verisoft/core';
+import { BaseFormInputComponent, FormFieldCore, WarningPipe } from '@verisoft/ui-core';
+import { MessageModule } from 'primeng/message';
+import { TooltipModule } from 'primeng/tooltip';
+import { Icons } from '../../icons';
+
+@Component({
+    selector: 'v-form-field',
+    imports: [
+        CommonModule,
+        WarningPipe,
+        ReactiveFormsModule,
+        MessageModule,
+        TooltipModule,
+    ],
+    templateUrl: './form-field.component.html',
+    styleUrl: './form-field.component.scss'
+})
+export class FormFieldComponent
+  extends BaseFormInputComponent
+  implements FormFieldCore
+{
+  @Input() display: 'flex' | 'block' = 'block';
+  
+  @Input() variant!: 'simple';
+
+  protected readonly errorProvider = inject(ERROR_PROVIDER_TOKEN)
+  
+  icons = Icons;
+
+  constructor(@Optional() @Self() ngControl: NgControl) {
+    super(ngControl);
+  }
+}

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

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

package/src/lib/components/header/header.component.html

@@ -0,0 +1,84 @@
+<div
+  class="v-header d-flex w-100 text-align-end"
+  [ngStyle]="{ position: exampleHeader ? 'relative' : 'fixed' }"
+  >
+  @if (screenSizeService.isMobileBlock | async) {
+    <div class="burger-menu">
+      <v-button
+        [icon]="menuVisible ? icons.cross : icons.action"
+        (click)="toggleMenu()"
+        />
+      <div class="logo mt-3" [routerLink]="[logoRouterLink]">
+        <img [src]="logoUrl" alt=""/>
+      </div>
+    </div>
+  }
+  <div class="v-header-title col-auto">
+    <p class="text-primary text-nowrap d-none d-md-block ps-3 m-0 w-100">
+      {{ title }}
+    </p>
+    <div class="col-8 col-md-auto ps-3 m-0 w-100">
+      <ng-content select="[module]"></ng-content>
+    </div>
+  </div>
+  @if ((screenSizeService.isMobileBlock | async) === false) {
+    <div class="w-100 text-start justify-content-start align-content-center">
+      <ng-content select="[breadcrumbs]"></ng-content>
+    </div>
+    <div class="col-auto d-flex align-items-center justify-content-end p-4">
+      <div class="d-flex aling-items-center">
+        <p-avatar
+          image="assets/primeng/images/_global/jara.png"
+          styleClass="me-2"
+          size="large"
+          shape="circle"
+          />
+        <div class="card align-content-center pe-3">
+          <p
+            class="text-primary m-0 header-username"
+            [innerHTML]="userName"
+          ></p>
+          <p
+            class="text-default m-0 header-userrole"
+            [innerHTML]="userRole"
+          ></p>
+        </div>
+      </div>
+      <div class="d-flex gap-4 align-items-center">
+        <ng-content select="[useractions]"/>
+      </div>
+    </div>
+  }
+  @if (screenSizeService.isMobileBlock | async) {
+    <div class="user-info-container d-flex align-items-center">
+      <div class="d-flex">
+        <div class="card pe-3 align-content-center">
+          <p-avatar
+            image="assets/images/_global/jara.png"
+            styleClass="mr-2"
+            size="large"
+            shape="circle"
+          ></p-avatar>
+        </div>
+        <div class="card align-content-center pe-3 d-flex">
+          <div class="user-info">
+            <p
+              class="text-default m-0 header-username"
+              [innerHTML]="userName"
+            ></p>
+            <p
+              class="text-default m-0 header-userrole"
+              [innerHTML]="userRole"
+            ></p>
+          </div>
+          <div class="user-actions">
+            <ng-content select="[useractions]"></ng-content>
+          </div>
+        </div>
+      </div>
+      <div class="d-flex gap-4 align-items-center justify-content-center">
+        <ng-content select="[dbcontext]" />
+      </div>
+    </div>
+  }
+</div>

package/src/lib/components/header/header.component.spec.ts

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

package/src/lib/components/header/header.component.stories.ts

@@ -0,0 +1,24 @@
+import type { Meta, StoryObj } from '@storybook/angular';
+import { within, expect } from '@storybook/test';
+import { HeaderComponent } from './header.component';
+
+const meta: Meta<HeaderComponent> = {
+  component: HeaderComponent,
+  title: 'HeaderComponent',
+};
+export default meta;
+type Story = StoryObj<HeaderComponent>;
+
+export const Primary: Story = {
+  args: {
+    title: 'verisoft',
+    userName: 'Elon Musk',
+    userRole: 'Mars Owner',
+  },
+  play: async ({ canvasElement }: any) => {
+    const canvas = within(canvasElement);
+    expect(canvas.getByText('verisoft')).toBeTruthy();
+    expect(canvas.findByText('Elon Musk')).toBeTruthy();
+    expect(canvas.findByText('Mars Owner')).toBeTruthy();
+  },
+};