@verisoft/ui-primeng 20.1.0 → 20.1.2

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

@@ -1,281 +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 {
-  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

@@ -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/filter/index.ts

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

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

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

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

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

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

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

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

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

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

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