@verisoft/ui-primeng 18.0.0 → 18.3.1

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

@@ -10,27 +10,38 @@ import {
   inject,
   Input,
   OnChanges,
-  OnInit,
   Output,
+  QueryList,
   SimpleChanges,
   TemplateRef,
+  ViewChild,
   ViewEncapsulation,
 } from '@angular/core';
 import { ActivatedRoute, Router, RouterModule } from '@angular/router';
-import { DEFAULT_SEARCH_LIMIT, Page, Sort } from '@verisoft/core';
+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 { TableModule, TablePageEvent } from 'primeng/table';
-import { ScreenSizeService } from '../../services/screen-size.service';
-import { ActionButtonGroupComponent } from '../action-button-group';
+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',
@@ -41,20 +52,30 @@ import { ActionButtonGroupComponent } from '../action-button-group';
     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 OnInit, AfterViewInit, OnChanges {
-  @ContentChildren(TABLE_COLUMN_PROVIDER) viewColumns!: ColumnProvider<T>[];
+export class TableComponent<T>
+  implements AfterViewInit, OnChanges, TableCore<T>
+{
+  @ContentChildren(TABLE_COLUMN_PROVIDER) viewColumns!: QueryList<
+    ColumnProvider<T>
+  >;
 
-  @ContentChild(ActionButtonGroupComponent)
-  actionButtonGroup!: ActionButtonGroupComponent;
+  @ViewChild('table') table: Table | undefined;
 
-  @ContentChild('rowExpansion', { static: false })
-  rowExpansionTemplate!: TemplateRef<any>;
+  @ContentChild('rowDetail', { static: false })
+  rowDetailTemplate!: TemplateRef<any>;
 
   sorters!: Sort[];
 
@@ -62,13 +83,12 @@ export class TableComponent<T> implements OnInit, AfterViewInit, OnChanges {
   data!: T[];
 
   @Input()
-  total!: number;
+  total = 0;
 
-  @Input()
-  loading!: boolean;
+  @Input() filter: Partial<T> | undefined;
 
   @Input()
-  scrollHeight = '100%';
+  loading!: boolean;
 
   @Input()
   scrollable = true;
@@ -86,38 +106,34 @@ export class TableComponent<T> implements OnInit, AfterViewInit, OnChanges {
   sortMultiple = false;
 
   @Input()
-  lazy = true;
+  lazy = false;
 
   @Input()
-  selectionMode: 'single' | 'multiple' | null | undefined;
+  selectionMode: TableSelectionModeType | undefined;
 
   @Input()
-  multipleSelect = false;
+  showPageSizePicker = true;
 
   @Input()
-  autoIndex = false;
+  entityKey: string | undefined;
 
   @Input()
-  showPageSizePicker = true;
+  maximumColumnLength = 0;
 
   @Input()
-  page!: Page<T> | undefined;
+  disableCustomClicks = false;
 
   @Input()
-  entityId!: string;
-
-  @Input()
-  set columnDefinitions(value: ColumnDefinition<T>[]) {
-    this._columnDefinitions = value;
+  set columns(value: ColumnDefinition<T>[]) {
+    this._columns = value;
     this.tableColumns = (value ?? []).map((x) => new ColumnModel(x));
   }
 
-  get columnDefinitions(): ColumnDefinition<T>[] {
-    return this._columnDefinitions;
+  get columns(): ColumnDefinition<T>[] {
+    return this._columns;
   }
 
-  @Input()
-  filter?: Partial<T>;
+  @Input() selection: T[] = [];
 
   @Output()
   pageSizeChange = new EventEmitter<number>();
@@ -131,82 +147,74 @@ export class TableComponent<T> implements OnInit, AfterViewInit, OnChanges {
   @Output()
   sortChange = new EventEmitter<Sort[]>();
 
-  sortColumn: Sort[] = [];
+  @Output()
+  lazyLoad = new EventEmitter<LazyLoadEvent>();
 
   sorted!: boolean;
 
   cdRef = inject(ChangeDetectorRef);
 
-  selection: T[] = [];
-
   tableColumns: ColumnModel<T>[] = [];
 
   tableRows: RowModel<T>[] = [];
 
+  tableSelection: RowModel<T>[] | RowModel<T> | undefined;
+
   expandedRows = {};
 
   expansionTemplate!: { template: TemplateRef<any> };
 
-  protected sortMeta: SortMeta[] | null | undefined;
+  sortMeta: SortMeta[] | undefined;
 
-  protected router = inject(Router);
+  sortSignleColumn: SortMeta | undefined;
 
-  protected route = inject(ActivatedRoute);
+  globalFilterFields: string[] | undefined;
 
-  protected screenSizeService = inject(ScreenSizeService);
+  router = inject(Router);
 
-  protected keyGroup!: any[][];
+  route = inject(ActivatedRoute);
 
-  private _columnDefinitions!: ColumnDefinition<T>[];
+  icons = Icons;
 
-  ngOnInit(): void {
-    this.updateData();
-  }
+  private _columns!: ColumnDefinition<T>[];
 
   ngOnChanges(changes: SimpleChanges): void {
     if (changes['data']) {
-      this.updateData();
+      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) {
-      return;
+    if (this.viewColumns?.length) {
+      const templateColumnModel = this.viewColumns
+        .toArray()
+        .map((provider) => new ColumnModel(provider.getDefinition()));
+      this.tableColumns = [...this.tableColumns, ...templateColumnModel];
     }
 
-    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,
+      template: this.rowDetailTemplate,
     };
     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;
-    }
+  updateRowModels(): void {
+    this.tableRows = (this.data ?? []).map(
+      (x) => new RowModel(x, false, false)
+    );
   }
 
   pageChanged(page: TablePageEvent) {
@@ -218,39 +226,64 @@ export class TableComponent<T> implements OnInit, AfterViewInit, OnChanges {
     this.pageSize = pageSize;
   }
 
-  sortChanged(event: any) {
-    this.sortColumn = event?.multisortmeta?.flatMap((event: any) => [
-      {
-        field: event.field,
-        direction: event.order,
-      } as Sort,
-    ]);
+  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.sortMeta = event?.multisortmeta;
+    this.sortChange.emit(eventEmiterArg);
+  }
 
-    this.sortChange.emit(this.sortColumn);
+  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);
+    }
   }
 
-  toggleSelection(row: any) {
-    const index = this.selection.indexOf(row);
-    if (index === -1) {
-      this.selection.push(row);
-    } else {
-      this.selection.splice(index, 1);
+  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);
     }
-    this.selection = [...this.selection];
   }
 
-  selectionChanged($event: RowModel<any>[]) {
-    const selection = $event.map((x: RowModel<any>) => x.row);
-    this.selectionChange.emit(selection);
+  private removePrefix(input: string, prefix: string): string {
+    return input.startsWith(prefix) ? input.slice(prefix.length) : input;
   }
 
-  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;
+  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/src/lib/components/textarea/textarea.component.html

@@ -2,7 +2,6 @@
   <ng-container *ngIf="!floatLabel">
     <v-form-field
       [label]="label"
-      [ngControl]="ngControl"
       [tooltip]="tooltip"
       [required]="isRequired()"
       [display]="formDisplay"
@@ -19,6 +18,7 @@
         [autoResize]="autoResize"
       ></textarea>
     </v-form-field>
+    <v-validation-message [ngControl]="ngControl"></v-validation-message>
   </ng-container>
   <ng-container *ngIf="floatLabel">
     <p-floatLabel>

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

@@ -14,6 +14,7 @@ import {
 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({
@@ -25,6 +26,7 @@ import { FormFieldComponent } from '../form-field/form-field.component';
     ReactiveFormsModule,
     FormFieldComponent,
     FloatLabelModule,
+    ErrorComponent
   ],
   templateUrl: './textarea.component.html',
   styleUrl: './textarea.component.scss',

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

@@ -5,7 +5,6 @@
       [label]="label"
       [tooltip]="tooltip"
       [required]="isRequired()"
-      [ngControl]="ngControl"
       [testId]="testId"
       [display]="formDisplay"
     >
@@ -43,6 +42,7 @@
         </ng-container>
       </span>
     </v-form-field>
+    <v-validation-message [ngControl]="ngControl"></v-validation-message>
   </ng-container>
   <ng-template #floatLabelInput>
     <span

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

@@ -24,6 +24,8 @@ import {
 } from '@verisoft/ui-core';
 import { FloatLabelModule } from 'primeng/floatlabel';
 import { InputTextModule } from 'primeng/inputtext';
+import { Icons } from '../../icons';
+import { ErrorComponent } from '../errors';
 import { FormFieldComponent } from '../form-field/form-field.component';
 
 @Component({
@@ -35,6 +37,7 @@ import { FormFieldComponent } from '../form-field/form-field.component';
     ReactiveFormsModule,
     FormFieldComponent,
     FloatLabelModule,
+    ErrorComponent
   ],
   templateUrl: './textfield.component.html',
   styleUrl: './textfield.component.scss',
@@ -54,11 +57,13 @@ export class TextfieldComponent
   extends BaseFormInputComponent
   implements ControlValueAccessor, TextfieldCore
 {
+  icons = Icons;
+  
   constructor(@Optional() @Self() ngControl: NgControl) {
     super(ngControl);
   }
 
-  @Input() size?: FieldSizeType = FieldSize.medium;
+  @Input() size: FieldSizeType | undefined = FieldSize.medium;
   @Input() type: FieldTypeType = FieldType.text;
   @Input() floatLabel = false;
 }

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

@@ -4,7 +4,6 @@
     [label]="label"
     [tooltip]="tooltip"
     [required]="isRequired()"
-    [ngControl]="ngControl"
     [testId]="testId"
     [display]="formDisplay"
   >
@@ -17,7 +16,8 @@
       [required]="required"
       [readonly]="readonly"
       [inputId]="testId"
-      checkboxFalseIcon="pi pi-minus"
+      [checkboxFalseIcon]="icons.minus"
     />
+    <v-validation-message [ngControl]="ngControl"></v-validation-message>
   </v-form-field>
 </div>

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

@@ -12,6 +12,8 @@ import {
   TristateCheckboxCore,
 } from '@verisoft/ui-core';
 import { TriStateCheckboxModule } from 'primeng/tristatecheckbox';
+import { Icons } from '../../icons';
+import { ErrorComponent } from '../errors';
 import { FormFieldComponent } from '../form-field';
 
 @Component({
@@ -22,6 +24,7 @@ import { FormFieldComponent } from '../form-field';
     TriStateCheckboxModule,
     ReactiveFormsModule,
     FormFieldComponent,
+    ErrorComponent
   ],
   templateUrl: './tristatecheckbox.component.html',
   styleUrl: './tristatecheckbox.component.scss',
@@ -40,6 +43,7 @@ export class TristatecheckboxComponent
   extends BaseFormInputComponent
   implements ControlValueAccessor, TristateCheckboxCore
 {
+  icons = Icons;
   constructor(@Optional() @Self() ngControl: NgControl) {
     super(ngControl);
   }

package/src/lib/icons.ts

@@ -0,0 +1,36 @@
+import { CommonIcons } from '@verisoft/ui-core';
+
+export const Icons: CommonIcons = {
+  add: 'pi pi-plus',
+  minus: 'pi pi-minus',
+  delete: 'pi pi-trash',
+  filter: 'pi pi-filter',
+  download: 'pi pi-download',
+  save: 'pi pi-save',
+  print: 'pi pi-print',
+  calendar: 'pi pi-calendar',
+  edit: 'pi pi-pencil',
+  settings: 'pi pi-cog',
+  house: 'pi pi-home',
+  chevronRight: 'pi pi-chevron-right',
+  chevronLeft: 'pi pi-chevron-left',
+  chevronDown: 'pi pi-chevron-down',
+  chevronUp: 'pi pi-chevron-up',
+  checkbox: 'pi pi-check',
+  warning: 'pi pi-exclamation-triangle',
+  search: 'pi pi-search',
+  action: 'pi pi-bars',
+  user: 'pi pi-user',
+  logout: 'pi pi-user',
+  crossCircle: 'pi pi-times-circle',
+  infoCircle: 'pi pi-info-circle',
+  cross: 'pi pi-times',
+  arrowLeft: 'pi pi-arrow-left',
+  arrowRight: 'pi pi-arrow-right',
+  questionCircle: 'pi pi-question-circle',
+  checkCircle: 'pi pi-check-circle',
+  sitemap: 'pi pi-sitemap',
+  check: 'pi pi-check',
+  envelope: 'pi pi-envelope',
+  loader: 'pi pi-loader',
+};

package/src/lib/pages/not-found-page/not-found-page.component.html

@@ -2,8 +2,7 @@
   <div class="error-message p-4">
     <h1 class="text-primary">404 - PAGE NOT FOUND</h1>
     <p class="text-default">
-      This is not the page you are looking for.<br />Try searching for something
-      else.
+      Sorry, the page you are looking for does not exist or has been moved.
     </p>
     <v-button
       class="back-button"

package/src/assets/sass/layout/_button.scss

@@ -1,57 +0,0 @@
-.p-button:not(.p-button-outlined) {
-    color: var(--white-color);
-}
-
-.p-button.p-button-danger:not(.p-button-outlined),
-.p-button-group.p-button-danger>.p-button,
-.p-splitbutton.p-button-danger>.p-button {
-    border-color: var(--error-color);
-    background-color: var(--error-color);
-
-    &:hover {
-        border-color: #e60017;
-        background-color: #e60017;
-    }
-}
-
-.p-button.p-button-success:not(.p-button-outlined),
-.p-button-group.p-button-success>.p-button,
-.p-splitbutton.p-button-success>.p-button {
-    border-color: var(--success-color);
-    background-color: var(--success-color);
-    color: var(--white-color);
-
-    &:hover {
-        border-color: #439446;
-        background-color: #439446;
-    }
-}
-
-.p-button-icon-only.p-button-danger:not(.p-button-outlined) {
-    border-color: var(--error-color);
-    background-color: var(--error-color);
-
-    .pi {
-        color: var(--white-color) !important;
-    }
-
-    &:hover {
-        border-color: #e60017;
-        background-color: #e60017;
-    }
-}
-
-.p-button-icon-only.p-button-success:not(.p-button-outlined) {
-    border-color: var(--success-color);
-    background-color: var(--success-color);
-
-    &:hover {
-        border-color: #57b44c;
-        background-color: #57b44c !important;
-    }
-}
-
-.p-button-icon-only.p-button-secondary:not(.p-button-outlined) {
-    border-color: var(--secondary-color);
-    background-color: var(--secondary-color);
-}

package/src/lib/components/action-button-group/components/action-button/action-button.component.ts

@@ -1,36 +0,0 @@
-import {
-  ChangeDetectionStrategy,
-  Component,
-  EventEmitter,
-  Input,
-  Output,
-} from '@angular/core';
-import { ActionButton, ControlSeverityType, FieldSizeType } from '@verisoft/ui-core';
-import { TooltipModule } from 'primeng/tooltip';
-import { ButtonComponent } from '../../../button';
-
-@Component({
-  selector: 'v-action-button',
-  standalone: true,
-  imports: [ButtonComponent, TooltipModule],
-  templateUrl: './action-button.component.html',
-  styleUrl: './action-button.component.scss',
-  changeDetection: ChangeDetectionStrategy.OnPush,
-})
-export class ActionButtonComponent implements ActionButton {
-  @Input() disabled = false;
-  @Input() toolTip?: string;
-  @Input() id?: string;
-  @Input() icon?: string;
-  @Input() outlined = false;
-  @Input() raised = false;
-  @Input() text = true;
-  @Input() severity?: ControlSeverityType;
-  @Input() label?: string;
-  @Input() size?: FieldSizeType;
-  @Output() clickEvent = new EventEmitter<void>();
-
-  handleClick() {
-    this.clickEvent.emit();
-  }
-}