@verisoft/ui-primeng 18.6.0 → 18.7.0

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

@@ -0,0 +1,55 @@
+import type { Meta, StoryObj } from '@storybook/angular';
+import { within, expect } from '@storybook/test';
+import { DEFAULT_SEARCH_LIMIT } from '@verisoft/core';
+import { TableComponent } from './table.component';
+
+const meta: Meta<TableComponent<any>> = {
+  component: TableComponent,
+  title: 'TableComponent',
+};
+export default meta;
+type Story = StoryObj<TableComponent<any>>;
+
+export const Primary: Story = {
+  args: {
+    tableRepository: '',
+    total: 0,
+    loading: false,
+    scrollHeight: '100%',
+    scrollable: true,
+    pageSize: DEFAULT_SEARCH_LIMIT,
+    currentPage: 0,
+    showPaginator: true,
+    sortMultiple: false,
+    lazy: true,
+    multipleSelect: false,
+    autoIndex: false,
+    showPageSizePicker: true,
+    entityId: '',
+    columnDefinitions: [],
+  },
+};
+
+export const Heading: Story = {
+  args: {
+    tableRepository: '',
+    total: 0,
+    loading: false,
+    scrollHeight: '100%',
+    scrollable: true,
+    pageSize: DEFAULT_SEARCH_LIMIT,
+    currentPage: 0,
+    showPaginator: true,
+    sortMultiple: false,
+    lazy: true,
+    multipleSelect: false,
+    autoIndex: false,
+    showPageSizePicker: true,
+    entityId: '',
+    columnDefinitions: [],
+  },
+  play: async ({ canvasElement }: any) => {
+    const canvas = within(canvasElement);
+    expect(canvas.getByText(/verisoft-table works!/gi)).toBeTruthy();
+  },
+};

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

@@ -0,0 +1,289 @@
+import { CommonModule } from '@angular/common';
+import {
+  AfterViewInit,
+  ChangeDetectionStrategy,
+  ChangeDetectorRef,
+  Component,
+  ContentChild,
+  ContentChildren,
+  EventEmitter,
+  inject,
+  Input,
+  OnChanges,
+  Output,
+  QueryList,
+  SimpleChanges,
+  TemplateRef,
+  ViewChild,
+  ViewEncapsulation,
+} from '@angular/core';
+import { ActivatedRoute, Router, RouterModule } from '@angular/router';
+import {
+  DEFAULT_SEARCH_LIMIT,
+  LazyLoadEvent,
+  Sort,
+  SortDirection,
+  SortDirectionType,
+} from '@verisoft/core';
+import {
+  ColumnDefinition,
+  ColumnModel,
+  ColumnProvider,
+  RowModel,
+  TABLE_COLUMN_PROVIDER,
+  TABLE_COMPONENT_TOKEN,
+  TableCore,
+  TableSelectionModeType,
+} from '@verisoft/ui-core';
+import { SortMeta } from 'primeng/api';
+import { ButtonModule } from 'primeng/button';
+import { RippleModule } from 'primeng/ripple';
+import { Table, TableLazyLoadEvent, TableModule, TablePageEvent } from 'primeng/table';
+import { Icons } from '../../icons';
+import { TableFilterPipe } from './table-filter.pipe';
+import { convertToFilter } from './table.models';
+
+@Component({
+  selector: 'v-table',
+  standalone: true,
+  imports: [
+    CommonModule,
+    TableModule,
+    RouterModule,
+    ButtonModule,
+    RippleModule,
+    TableFilterPipe,
+  ],
+  providers: [
+    {
+      provide: TABLE_COMPONENT_TOKEN,
+      useExisting: TableComponent,
+    },
+  ],
+  templateUrl: './table.component.html',
+  styleUrl: './table.component.scss',
+  encapsulation: ViewEncapsulation.None,
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class TableComponent<T>
+  implements AfterViewInit, OnChanges, TableCore<T>
+{
+  @ContentChildren(TABLE_COLUMN_PROVIDER) viewColumns!: QueryList<
+    ColumnProvider<T>
+  >;
+
+  @ViewChild('table') table: Table | undefined;
+
+  @ContentChild('rowDetail', { static: false })
+  rowDetailTemplate!: TemplateRef<any>;
+
+  sorters!: Sort[];
+
+  @Input()
+  data!: T[];
+
+  @Input()
+  total = 0;
+
+  @Input() filter: Partial<T> | undefined;
+
+  @Input()
+  loading!: boolean;
+
+  @Input()
+  scrollable = true;
+
+  @Input()
+  pageSize = DEFAULT_SEARCH_LIMIT;
+
+  @Input()
+  currentPage!: number;
+
+  @Input()
+  showPaginator = true;
+
+  @Input()
+  sortMultiple = false;
+
+  @Input()
+  lazy = false;
+
+  @Input()
+  selectionMode: TableSelectionModeType | undefined;
+
+  @Input()
+  showPageSizePicker = true;
+
+  @Input()
+  entityKey: string | undefined;
+
+  @Input()
+  maximumColumnLength = 0;
+
+  @Input()
+  disableCustomClicks = false;
+
+  @Input()
+  set columns(value: ColumnDefinition<T>[]) {
+    this._columns = value;
+    this.tableColumns = (value ?? []).map((x) => new ColumnModel(x));
+  }
+
+  get columns(): ColumnDefinition<T>[] {
+    return this._columns;
+  }
+
+  @Input() selection: T[] = [];
+
+  @Output()
+  pageSizeChange = new EventEmitter<number>();
+
+  @Output()
+  selectionChange = new EventEmitter<T[]>();
+
+  @Output()
+  pageChange = new EventEmitter<TablePageEvent>();
+
+  @Output()
+  sortChange = new EventEmitter<Sort[]>();
+
+  @Output()
+  lazyLoad = new EventEmitter<LazyLoadEvent>();
+
+  sorted!: boolean;
+
+  cdRef = inject(ChangeDetectorRef);
+
+  tableColumns: ColumnModel<T>[] = [];
+
+  tableRows: RowModel<T>[] = [];
+
+  tableSelection: RowModel<T>[] | RowModel<T> | undefined;
+
+  expandedRows = {};
+
+  expansionTemplate!: { template: TemplateRef<any> };
+
+  sortMeta: SortMeta[] | undefined;
+
+  sortSignleColumn: SortMeta | undefined;
+
+  globalFilterFields: string[] | undefined;
+
+  router = inject(Router);
+
+  route = inject(ActivatedRoute);
+
+  icons = Icons;
+
+  private _columns!: ColumnDefinition<T>[];
+
+  ngOnChanges(changes: SimpleChanges): void {
+    if (changes['data']) {
+      this.updateRowModels();
+    }
+
+    if (changes['selection'] || changes['data']) {
+      this.tableSelection = this.selection
+        ? this.tableRows.filter((x) => this.selection.includes(x.row))
+        : undefined;
+    }
+
+    if (changes['filter'] && !changes['filter'].isFirstChange()) {
+        this.globalFilterFields = this.columns.filter(x => x.id).map(x => 'row.' + x.id);
+        setTimeout(() => {
+          this.table?._filter();
+        }, 0);
+    }
+  }
+
+  ngAfterViewInit(): void {
+    if (this.viewColumns?.length) {
+      const templateColumnModel = this.viewColumns
+        .toArray()
+        .map((provider) => new ColumnModel(provider.getDefinition()));
+      this.tableColumns = [...this.tableColumns, ...templateColumnModel];
+    }
+
+    this.expansionTemplate = {
+      template: this.rowDetailTemplate,
+    };
+    this.cdRef.detectChanges();
+  }
+
+  updateRowModels(): void {
+    this.tableRows = (this.data ?? []).map(
+      (x) => new RowModel(x, false, false)
+    );
+  }
+
+  pageChanged(page: TablePageEvent) {
+    this.pageChange.emit(page);
+  }
+
+  pageSizeChanged(pageSize: number) {
+    this.pageSizeChange.emit(pageSize);
+    this.pageSize = pageSize;
+  }
+
+  sortChanged(event: SortMeta | { multisortmeta: SortMeta[] }) {
+    let eventEmiterArg: Sort[];
+    if ((<SortMeta>event).field) {
+      const singleEvent = <SortMeta>event;
+      eventEmiterArg = this.getSorts([singleEvent]) as Sort[];
+      this.sortMeta = undefined;
+      this.sortSignleColumn = singleEvent;
+    } else {
+      const multiEvent = <{ multisortmeta: SortMeta[] }>event;
+      eventEmiterArg = this.getSorts(multiEvent.multisortmeta) as Sort[];
+      this.sortMeta = multiEvent.multisortmeta;
+      this.sortSignleColumn = undefined;
+    }
+
+    this.sortChange.emit(eventEmiterArg);
+  }
+
+  selectionChanged(event: RowModel<T>[] | RowModel<T>) {
+    this.tableSelection = event;
+    if (this.selectionMode) {
+      const eventArgArray = Array.isArray(event) ? event : [event];
+      const selection = event ? eventArgArray.map((x) => x.row) : [];
+      this.selectionChange.emit(selection);
+    }
+  }
+
+  fireLazyLoad(event: TableLazyLoadEvent) {
+    if (this.lazy) {
+      const sort = this.sortSignleColumn
+        ? this.getSorts([this.sortSignleColumn])
+        : this.sortMeta
+        ? this.getSorts(this.sortMeta)
+        : undefined;
+      const lazyLoadEvent: LazyLoadEvent = {
+        sort,
+        offset: event.first ?? 0,
+        limit: event.rows ?? this.pageSize,
+        filter: convertToFilter(event.filters),
+      };
+
+      this.lazyLoad.emit(lazyLoadEvent);
+    }
+  }
+
+  private removePrefix(input: string, prefix: string): string {
+    return input.startsWith(prefix) ? input.slice(prefix.length) : input;
+  }
+
+  private convertToSortDirection(value: number): SortDirectionType {
+    return value === 1 ? SortDirection.asc : SortDirection.desc;
+  }
+
+  private getSorts(value: SortMeta[] | undefined) {
+    return value
+      ? value.map((x: SortMeta) => ({
+          field: this.removePrefix(x.field, 'row.'),
+          direction: this.convertToSortDirection(x.order),
+        }))
+      : undefined;
+  }
+}

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

@@ -0,0 +1,26 @@
+import { FilterMetadata } from 'primeng/api';
+
+export function convertToFilter<T>(
+  value:
+    | {
+        [s: string]: FilterMetadata | FilterMetadata[] | undefined;
+      }
+    | Partial<T>
+    | undefined
+): Partial<T> | undefined {
+  if (value == undefined) {
+    return undefined;
+  }
+
+  const filter: { [key: string]: unknown } = {};
+  Object.keys(value).map((key) => {
+    const filterValue = (value as { [s: string]: unknown })[key];
+    if (filterValue != undefined && typeof filterValue === 'object') {
+      filter[key] = (filterValue as FilterMetadata).value;
+    } else {
+      filter[key] = filterValue;
+    }
+  });
+
+  return filter as Partial<T>;
+}

package/{lib/components/textarea/index.d.ts → src/lib/components/textarea/index.ts}

@@ -1 +1 @@
-export * from './textarea.component';
+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"
+      [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>
+    <v-validation-message [ngControl]="ngControl"></v-validation-message>
+  </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 },
+  },
+};

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

@@ -0,0 +1,64 @@
+import { CommonModule } from '@angular/common';
+import {
+  ChangeDetectionStrategy,
+  Component,
+  Input,
+  Optional,
+  Self,
+} from '@angular/core';
+import {
+  ControlValueAccessor,
+  NgControl,
+  ReactiveFormsModule,
+} from '@angular/forms';
+import { BaseFormInputComponent, BaseInputControls, TEXTAREA_COMPONENT_TOKEN, TextareaCore } from '@verisoft/ui-core';
+import { FloatLabelModule } from 'primeng/floatlabel';
+import { InputTextareaModule } from 'primeng/inputtextarea';
+import { ErrorComponent } from '../errors';
+import { FormFieldComponent } from '../form-field/form-field.component';
+
+@Component({
+  selector: 'v-textarea',
+  standalone: true,
+  imports: [
+    CommonModule,
+    InputTextareaModule,
+    ReactiveFormsModule,
+    FormFieldComponent,
+    FloatLabelModule,
+    ErrorComponent
+  ],
+  templateUrl: './textarea.component.html',
+  styleUrl: './textarea.component.scss',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  providers: [
+    {
+      provide: BaseInputControls,
+      useExisting: TextareaComponent,
+    },
+    {
+      provide: TEXTAREA_COMPONENT_TOKEN,
+      useExisting: TextareaComponent,
+    },
+  ],
+})
+export class TextareaComponent
+  extends BaseFormInputComponent
+  implements ControlValueAccessor, TextareaCore
+{
+  @Input()
+  rows = 5;
+
+  @Input()
+  cols = 30;
+
+  @Input()
+  autoResize = false;
+
+  @Input()
+  floatLabel: string | undefined;
+
+  constructor(@Optional() @Self() ngControl: NgControl) {
+    super(ngControl);
+  }
+}

package/{lib/components/textfield/index.d.ts → src/lib/components/textfield/index.ts}

@@ -1 +1 @@
-export * from './textfield.component';
+export * from './textfield.component';

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

@@ -0,0 +1,83 @@
+<div class="v-text-field">
+  <ng-container *ngIf="!floatLabel && label; else floatLabelInput">
+    <v-form-field
+      class="w-100"
+      [label]="label"
+      [tooltip]="tooltip"
+      [required]="isRequired()"
+      [testId]="testId"
+      [display]="formDisplay"
+    >
+      <span
+        class="w-100 flex-grow-1"
+        [ngClass]="{ 'p-input-icon-right': type === 'search' }"
+      >
+        <input
+          pInputText
+          [id]="inputId"
+          [formControl]="formControl"
+          [type]="type === 'search' ? 'text' : type"
+          class="w-100 flex-grow-1 v-text-field"
+          [required]="isRequired()"
+          [readOnly]="readonly"
+          [title]="label"
+          [placeholder]="placeholder ? placeholder : ''"
+          [ngClass]="{
+            'p-inputtext-sm': size === 'small',
+            'p-inputtext-lg': size === 'large'
+          }"
+        />
+        <ng-container *ngIf="type === 'search'">
+          <i
+            class="pi ms-2 v-text-field__icon"
+            [ngStyle]="{
+              cursor: ngControl && ngControl.value ? 'pointer' : 'default'
+            }"
+            [ngClass]="{
+              'pi-search': ngControl && !ngControl.value,
+              'pi-times': ngControl && ngControl.value,
+            }"
+            (click)="ngControl && ngControl.value ? ngControl.reset() : null"
+          ></i>
+        </ng-container>
+      </span>
+    </v-form-field>
+    <v-validation-message [ngControl]="ngControl"></v-validation-message>
+  </ng-container>
+  <ng-template #floatLabelInput>
+    <span
+      class="w-100 flex-grow-1"
+      [ngClass]="{ 'p-input-icon-right': type === 'search' }"
+    >
+      <p-floatLabel>
+        <input
+          pInputText
+          type="text"
+          [id]="inputId"
+          class="w-100 flex-grow-1"
+          [required]="isRequired()"
+          [formControl]="formControl"
+          [placeholder]="placeholder ? placeholder : ''"
+          [ngClass]="{
+            'p-inputtext-sm': size === 'small',
+            'p-inputtext-lg': size === 'large'
+          }"
+        />
+        <label [for]="inputId" class="v-text-field__label">{{ label }}</label>
+      </p-floatLabel>
+      <ng-container *ngIf="type === 'search'">
+        <i
+          class="pi ms-2 v-text-field__icon"
+          [ngStyle]="{
+            cursor: ngControl && ngControl.value ? 'pointer' : 'default'
+          }"
+          [ngClass]="{
+            'pi-search': ngControl && !ngControl.value,
+            'pi-times': ngControl && ngControl.value,
+          }"
+          (click)="ngControl && ngControl.value ? ngControl.reset() : null"
+        ></i>
+      </ng-container>
+    </span>
+  </ng-template>
+</div>