@verisoft/ui-primeng 18.0.0

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

@@ -0,0 +1,256 @@
+import { CommonModule } from '@angular/common';
+import {
+  AfterViewInit,
+  ChangeDetectionStrategy,
+  ChangeDetectorRef,
+  Component,
+  ContentChild,
+  ContentChildren,
+  EventEmitter,
+  inject,
+  Input,
+  OnChanges,
+  OnInit,
+  Output,
+  SimpleChanges,
+  TemplateRef,
+  ViewEncapsulation,
+} from '@angular/core';
+import { ActivatedRoute, Router, RouterModule } from '@angular/router';
+import { DEFAULT_SEARCH_LIMIT, Page, Sort } from '@verisoft/core';
+import {
+  ColumnDefinition,
+  ColumnModel,
+  ColumnProvider,
+  RowModel,
+  TABLE_COLUMN_PROVIDER,
+} from '@verisoft/ui-core';
+import { SortMeta } from 'primeng/api';
+import { ButtonModule } from 'primeng/button';
+import { RippleModule } from 'primeng/ripple';
+import { TableModule, TablePageEvent } from 'primeng/table';
+import { ScreenSizeService } from '../../services/screen-size.service';
+import { ActionButtonGroupComponent } from '../action-button-group';
+
+@Component({
+  selector: 'v-table',
+  standalone: true,
+  imports: [
+    CommonModule,
+    TableModule,
+    RouterModule,
+    ButtonModule,
+    RippleModule,
+  ],
+  templateUrl: './table.component.html',
+  styleUrl: './table.component.scss',
+  encapsulation: ViewEncapsulation.None,
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class TableComponent<T> implements OnInit, AfterViewInit, OnChanges {
+  @ContentChildren(TABLE_COLUMN_PROVIDER) viewColumns!: ColumnProvider<T>[];
+
+  @ContentChild(ActionButtonGroupComponent)
+  actionButtonGroup!: ActionButtonGroupComponent;
+
+  @ContentChild('rowExpansion', { static: false })
+  rowExpansionTemplate!: TemplateRef<any>;
+
+  sorters!: Sort[];
+
+  @Input()
+  data!: T[];
+
+  @Input()
+  total!: number;
+
+  @Input()
+  loading!: boolean;
+
+  @Input()
+  scrollHeight = '100%';
+
+  @Input()
+  scrollable = true;
+
+  @Input()
+  pageSize = DEFAULT_SEARCH_LIMIT;
+
+  @Input()
+  currentPage!: number;
+
+  @Input()
+  showPaginator = true;
+
+  @Input()
+  sortMultiple = false;
+
+  @Input()
+  lazy = true;
+
+  @Input()
+  selectionMode: 'single' | 'multiple' | null | undefined;
+
+  @Input()
+  multipleSelect = false;
+
+  @Input()
+  autoIndex = false;
+
+  @Input()
+  showPageSizePicker = true;
+
+  @Input()
+  page!: Page<T> | undefined;
+
+  @Input()
+  entityId!: string;
+
+  @Input()
+  set columnDefinitions(value: ColumnDefinition<T>[]) {
+    this._columnDefinitions = value;
+    this.tableColumns = (value ?? []).map((x) => new ColumnModel(x));
+  }
+
+  get columnDefinitions(): ColumnDefinition<T>[] {
+    return this._columnDefinitions;
+  }
+
+  @Input()
+  filter?: Partial<T>;
+
+  @Output()
+  pageSizeChange = new EventEmitter<number>();
+
+  @Output()
+  selectionChange = new EventEmitter<T[]>();
+
+  @Output()
+  pageChange = new EventEmitter<TablePageEvent>();
+
+  @Output()
+  sortChange = new EventEmitter<Sort[]>();
+
+  sortColumn: Sort[] = [];
+
+  sorted!: boolean;
+
+  cdRef = inject(ChangeDetectorRef);
+
+  selection: T[] = [];
+
+  tableColumns: ColumnModel<T>[] = [];
+
+  tableRows: RowModel<T>[] = [];
+
+  expandedRows = {};
+
+  expansionTemplate!: { template: TemplateRef<any> };
+
+  protected sortMeta: SortMeta[] | null | undefined;
+
+  protected router = inject(Router);
+
+  protected route = inject(ActivatedRoute);
+
+  protected screenSizeService = inject(ScreenSizeService);
+
+  protected keyGroup!: any[][];
+
+  private _columnDefinitions!: ColumnDefinition<T>[];
+
+  ngOnInit(): void {
+    this.updateData();
+  }
+
+  ngOnChanges(changes: SimpleChanges): void {
+    if (changes['data']) {
+      this.updateData();
+    }
+  }
+
+  ngAfterViewInit(): void {
+    if (!this.viewColumns?.length) {
+      return;
+    }
+
+    this.viewColumns.forEach((x) => {
+      if (x.index) {
+        this._columnDefinitions.splice(x.index, 0, x.getDefinition());
+        this.columnDefinitions = [...this._columnDefinitions];
+      } else {
+        this.columnDefinitions = [
+          ...this._columnDefinitions,
+          x.getDefinition(),
+        ];
+      }
+    });
+    this.keyGroup = this.groupKeys(this.tableColumns, 3);
+    this.expansionTemplate = {
+      template: this.rowExpansionTemplate,
+    };
+    this.cdRef.detectChanges();
+  }
+
+  updateData(): void {
+    this.getPage(this.page);
+    this.tableRows = (this.data ?? []).map((x) => new RowModel(x, false));
+  }
+
+  getPage(page?: Page<T>) {
+    if (page) {
+      this.total = page.total;
+      this.pageSize = page.limit;
+      this.data = page.data;
+      this.currentPage = Math.round(page.offset / page.limit);
+    }
+    else {
+      this.total = 0;
+    }
+  }
+
+  pageChanged(page: TablePageEvent) {
+    this.pageChange.emit(page);
+  }
+
+  pageSizeChanged(pageSize: number) {
+    this.pageSizeChange.emit(pageSize);
+    this.pageSize = pageSize;
+  }
+
+  sortChanged(event: any) {
+    this.sortColumn = event?.multisortmeta?.flatMap((event: any) => [
+      {
+        field: event.field,
+        direction: event.order,
+      } as Sort,
+    ]);
+
+    this.sortMeta = event?.multisortmeta;
+
+    this.sortChange.emit(this.sortColumn);
+  }
+
+  toggleSelection(row: any) {
+    const index = this.selection.indexOf(row);
+    if (index === -1) {
+      this.selection.push(row);
+    } else {
+      this.selection.splice(index, 1);
+    }
+    this.selection = [...this.selection];
+  }
+
+  selectionChanged($event: RowModel<any>[]) {
+    const selection = $event.map((x: RowModel<any>) => x.row);
+    this.selectionChange.emit(selection);
+  }
+
+  groupKeys(keys: any[], size: number): any[][] {
+    const groups = [];
+    for (let i = 0; i < keys.length; i += size) {
+      groups.push(keys.slice(i, i + size));
+    }
+    return groups;
+  }
+}

package/src/lib/components/table-filter/filter.component.html

@@ -0,0 +1,205 @@
+<div class="v-table-filter w-100 p-3 bg-primary">
+  <form
+    [formGroup]="formGroup"
+    class="d-flex align-items-center justify-content-end gap-4"
+  >
+    <div class="col-2">
+      <h2 class="text-white m-0" [innerText]="title"></h2>
+    </div>
+    <div
+      *ngIf="(screenSizeService.isMobileBlock | async) === false"
+      class="w-50 align-items-center"
+    >
+      <v-textfield
+        *ngIf="!hideSearch"
+        class="w-100 d-none d-lg-block"
+        placeholder="Search"
+        size="large"
+        formControlName="searchField"
+        type="search"
+        [clearable]="true"
+      >
+      </v-textfield>
+    </div>
+    <div class="d-flex w-100 align-items-center justify-content-end">
+      <ng-container *ngIf="(screenSizeService.isMobileBlock | async) === false">
+        <div class="extended-filters d-flex align-items-center gap-3">
+          <i
+            *ngIf="!hideSearch"
+            class="pi pi-search text-white d-block d-lg-none"
+            (click)="openSearch()"
+          ></i>
+          <i
+            class="pi pi-filter text-white"
+            pBadge
+            [value]="activeFilters"
+            (click)="openFilter()"
+          ></i>
+        </div>
+        <div
+          *ngFor="let filter of filterDefinitions; let index = index"
+          class="filters gap-3"
+        >
+          <div
+            *ngIf="!filter.filterType || filter.filterType === 'dropdown'"
+            class="d-none d-sm-block"
+          >
+            <v-dropdown
+              useDatasource
+              [formControlName]="filter.optionLabel"
+              [floatLabel]="filter.label"
+              [optionLabel]="filter.optionLabel"
+              [testId]="filter.optionLabel + index"
+              [optionValue]="filter.optionValue ?? filter.optionLabel"
+              [entityName]="filter.url ?? service.entityName"
+              [datasourceService]="service"
+            >
+            </v-dropdown>
+          </div>
+          <div
+            *ngIf="filter.filterType === 'multiselect'"
+            class="d-none d-sm-block"
+          >
+            <v-multiselect
+              useDatasource
+              [formControlName]="filter.optionLabel"
+              [floatLabel]="filter.label"
+              [optionLabel]="filter.optionLabel"
+              [testId]="filter.optionLabel + index"
+              [optionValue]="filter.optionValue ?? filter.optionLabel"
+              [entityName]="filter.url ?? service.entityName"
+              [datasourceService]="service"
+            >
+            </v-multiselect>
+          </div>
+          <div
+            *ngIf="filter.filterType === 'checkbox'"
+            class="d-none d-sm-block"
+          >
+            <v-tristatecheckbox
+              [formControlName]="filter.optionLabel"
+              [label]="filter.label"
+            ></v-tristatecheckbox>
+          </div>
+          <div
+            *ngIf="filter.filterType === 'calendar'"
+            class="d-none d-sm-block"
+          >
+            <v-calendar
+              [formControlName]="filter.optionLabel"
+              [floatLabel]="filter.label"
+              icon="pi pi-calendar"
+            ></v-calendar>
+          </div>
+        </div>
+      </ng-container>
+      <ng-container *ngIf="screenSizeService.isMobileBlock | async">
+        <div class="extended-filters d-flex gap-2">
+          <i
+            *ngIf="!hideSearch"
+            class="pi pi-search text-white"
+            (click)="openSearch()"
+          ></i>
+          <div class="d-none"></div>
+          <i
+            class="pi pi-filter text-white"
+            pBadge
+            [value]="activeFilters"
+            (click)="openFilter()"
+          ></i>
+        </div>
+      </ng-container>
+    </div>
+    <div class="verisoft-filter-action-buttons d-flex align-items-center gap-3">
+      <ng-container
+        *ngIf="
+          (screenSizeService.isMobileBlock | async) === false &&
+          filterDefinitions.length > 0
+        "
+      >
+        <div class="d-flex gap-2">
+          <v-button
+            useShortCut
+            [shortCutFn]="submit.bind(this)"
+            shortCutKey="Enter"
+            class="text-white"
+            [outlined]="true"
+            size="small"
+            label="Apply"
+            (click)="submit()"
+          ></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-container>
+      <ng-container *ngIf="buttonGroup">
+        <ng-content></ng-content>
+      </ng-container>
+    </div>
+    <div class="d-none">
+      <div class="w-100 p-4" #filter>
+        <div *ngFor="let filter of filterDefinitions; let index = index">
+          <div *ngIf="!filter.filterType || filter.filterType === 'dropdown'">
+            <v-dropdown
+              useDatasource
+              class="mb-4"
+              [formControlName]="filter.optionLabel"
+              [floatLabel]="filter.label"
+              [optionLabel]="filter.optionLabel"
+              [testId]="filter.optionLabel + index"
+              [optionValue]="filter.optionValue ?? filter.optionLabel"
+              [entityName]="filter.url ?? ''"
+              [datasourceService]="service"
+            >
+            </v-dropdown>
+          </div>
+          <div *ngIf="filter.filterType && filter.filterType === 'checkbox'">
+            <v-tristatecheckbox
+              [formControlName]="filter.optionLabel"
+              [label]="filter.label"
+            ></v-tristatecheckbox>
+          </div>
+          <div *ngIf="filter.filterType === 'calendar'" class="w-100">
+            <v-calendar
+              [formControlName]="filter.optionLabel"
+              [floatLabel]="filter.label"
+            ></v-calendar>
+          </div>
+          <div *ngIf="filter.filterType === 'multiselect'">
+            <v-multiselect
+              useDatasource
+              [formControlName]="filter.optionLabel"
+              [floatLabel]="filter.label"
+              [optionLabel]="filter.optionLabel"
+              [testId]="filter.optionLabel + index"
+              [optionValue]="filter.optionValue ?? filter.optionLabel"
+              [entityName]="filter.url ?? service.entityName"
+              [datasourceService]="service"
+            >
+            </v-multiselect>
+          </div>
+          <br />
+        </div>
+      </div>
+      <div class="w-100 py-2" #searchField>
+        <v-textfield
+          class="w-100"
+          placeholder="Search"
+          size="large"
+          formControlName="searchField"
+          type="search"
+          [clearable]="true"
+        >
+        </v-textfield>
+      </div>
+    </div>
+  </form>
+</div>

package/src/lib/components/table-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/table-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/textarea/index.ts

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

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

@@ -0,0 +1,40 @@
+<div class="v-textarea">
+  <ng-container *ngIf="!floatLabel">
+    <v-form-field
+      [label]="label"
+      [ngControl]="ngControl"
+      [tooltip]="tooltip"
+      [required]="isRequired()"
+      [display]="formDisplay"
+    >
+      <textarea
+        class="flex-grow-1"
+        pInputTextarea
+        [rows]="rows"
+        [cols]="cols"
+        [formControl]="formControl"
+        [placeholder]="placeholder"
+        [required]="isRequired()"
+        [readOnly]="readonly"
+        [autoResize]="autoResize"
+      ></textarea>
+    </v-form-field>
+  </ng-container>
+  <ng-container *ngIf="floatLabel">
+    <p-floatLabel>
+      <textarea
+        class="flex-grow-1"
+        pInputTextarea
+        [rows]="rows"
+        [cols]="cols"
+        [id]="inputId"
+        [formControl]="formControl"
+        [placeholder]="placeholder"
+        [required]="isRequired()"
+        [readOnly]="readonly"
+        [autoResize]="autoResize"
+      ></textarea>
+      <label [for]="inputId">{{ floatLabel }}</label>
+    </p-floatLabel>
+  </ng-container>
+</div>

package/src/lib/components/textarea/textarea.component.scss

@@ -0,0 +1,5 @@
+.v-textarea {
+  textarea {
+    line-height: 1.75rem !important;
+  }
+}

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

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

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

@@ -0,0 +1,98 @@
+import { FormControl, FormGroup, ReactiveFormsModule } from '@angular/forms';
+import { moduleMetadata, type Meta, type StoryObj } from '@storybook/angular';
+import { TextareaComponent } from './textarea.component';
+
+const meta: Meta<TextareaComponent> = {
+  component: TextareaComponent,
+  title: 'TextareaComponent',
+  decorators: [
+    moduleMetadata({
+      imports: [ReactiveFormsModule],
+    }),
+  ],
+};
+export default meta;
+type Story = StoryObj<TextareaComponent>;
+const formGroup = new FormGroup({
+  textarea: new FormControl(''),
+});
+
+export const Primary: Story = {
+  render: (args: any) => ({
+    props: {
+      ...args,
+      formGroup,
+    },
+    template: `
+    <form [formGroup]="formGroup">
+      <v-textarea
+        formControlName="textarea"
+        [label]="label"
+        [rows]="rows"
+        [cols]="cols"
+        [disabled]="disabled"
+        [readonly]="readonly"
+        [required]="required"
+        [tooltip]="tooltip"
+        [placeholder]="placeholder"
+        [testId]="testId"
+        [formDisplay]="formDisplay"
+        [autoResize]="autoResize"
+      ></v-textarea>
+    </form>
+    `,
+  }),
+  args: {
+    label: 'Description',
+    rows: 5,
+    cols: 30,
+    formDisplay: 'block',
+    autoResize: false,
+    required: false,
+    disabled: false,
+    readonly: false,
+    placeholder:
+      'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.',
+    testId: 'testId',
+    tooltip: 'This is a tooltip lorem ipsum',
+  },
+  argTypes: {
+    formDisplay: {
+      options: ['block', 'flex'],
+      control: { type: 'radio' },
+      description:
+        'Defines if the **TextareaComponent** is in `flex` or `block` display mode',
+    },
+    label: {
+      description:
+        'Label shown on the (top)left side of the **TextareaComponent** input',
+    },
+    rows: {
+      description: 'Number of `rows` of the **TextareaComponent** input',
+    },
+    cols: {
+      description: 'Number of `columns` of the **TextareaComponent** input',
+    },
+    tooltip: { description: 'Tooltip text of the **TextareaComponent**' },
+    required: {
+      description: 'Defines if the **TextareaComponent** is `required`',
+    },
+    autoResize: {
+      description:
+        'Defines if the **TextareaComponent** should be auto-resized',
+    },
+    disabled: {
+      description: 'Defines if the **TextareaComponent** is `disabled`',
+    },
+    readonly: {
+      description: 'Defines if the **TextareaComponent** is `readonly`',
+    },
+    testId: { description: 'Test ID of the **TextareaComponent**' },
+    placeholder: {
+      description: 'Placeholder text for the **TextareaComponent**',
+    },
+  },
+  parameters: {
+    controls: { expanded: true },
+  },
+};