@verisoft/ui-govcz 18.0.0 → 18.3.1

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

@@ -0,0 +1,387 @@
+import { CommonModule, NgTemplateOutlet } from '@angular/common';
+import {
+  AfterViewInit,
+  ChangeDetectionStrategy,
+  ChangeDetectorRef,
+  Component,
+  ContentChild,
+  ContentChildren,
+  effect,
+  EventEmitter,
+  inject,
+  Input,
+  OnChanges,
+  Output,
+  QueryList,
+  SimpleChanges,
+  TemplateRef,
+} from '@angular/core';
+import { ActivatedRoute, Router, RouterModule } from '@angular/router';
+import { GovDesignSystemModule } from '@gov-design-system-ce/angular';
+import {
+  FormCheckboxEvent,
+  FormSelectEvent,
+} from '@gov-design-system-ce/components';
+import { TranslateModule } from '@ngx-translate/core';
+import {
+  DEFAULT_SEARCH_LIMIT,
+  LazyLoadEvent,
+  multiSort,
+  Sort,
+  SortDirectionType,
+} from '@verisoft/core';
+import {
+  ColumnDefinition,
+  ColumnModel,
+  ColumnProvider,
+  DEFAULT_PAGINATION,
+  FieldSize,
+  FieldSizeType,
+  MAX_COLUMN_CHAR_COUNT,
+  RowModel,
+  TABLE_COLUMN_PROVIDER,
+  TABLE_COMPONENT_TOKEN,
+  TableCore,
+  TableSelectionMode,
+  TableService,
+} from '@verisoft/ui-core';
+import { Icons } from '../../icons';
+import { GovSizePipe } from '../../pipes';
+import { LoaderComponent } from '../loader';
+import { TablePaginationInfoComponent } from './table-pagination-info.component';
+import { getNextSortDirection } from './table.model';
+
+@Component({
+  selector: 'v-table',
+  standalone: true,
+  imports: [
+    CommonModule,
+    RouterModule,
+    GovDesignSystemModule,
+    NgTemplateOutlet,
+    TranslateModule,
+    GovSizePipe,
+    LoaderComponent,
+    TablePaginationInfoComponent,
+  ],
+  templateUrl: './table.component.html',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  styleUrl: './table.component.scss',
+  providers: [
+    {
+      provide: TABLE_COMPONENT_TOKEN,
+      useExisting: TableComponent,
+    },
+  ],
+})
+export class TableComponent<T>
+  implements OnChanges, AfterViewInit, TableCore<T>
+{
+  @ContentChildren(TABLE_COLUMN_PROVIDER)
+  viewColumns!: QueryList<ColumnProvider<T>>;
+
+  @ContentChild('rowDetail', { static: false })
+  rowDetailTemplate!: TemplateRef<{ $implicit: T }>;
+
+  @ContentChild('rowDetailButton', { static: false })
+  rowDetailButtonTemplate!: TemplateRef<{ $implicit: T }>;
+
+  @Input() sorters!: Sort[];
+  @Input() data!: T[];
+  @Input() total = 0;
+  @Input() filter: Partial<T> | undefined;
+  @Input() extraFilter: Partial<T> | undefined;
+  @Input() loading = false;
+  @Input() scrollable = true;
+  @Input() pageSize = DEFAULT_SEARCH_LIMIT;
+  @Input() currentPage = 1;
+  @Input() showPaginator = true;
+  @Input() userTableWrapper = true;
+  @Input() sortMultiple = false;
+  @Input() lazy = false;
+  @Input() selectionMode: 'single' | 'multiple' | undefined;
+  @Input() selection: T[] = [];
+  @Input() showPageSizePicker = true;
+  @Input() entityKey: string | undefined;
+  @Input() customRoute: string | undefined;
+  @Input() disableCustomClicks = false;
+  @Input() tableName?: string;
+  @Input() size: FieldSizeType = FieldSize.medium;
+  @Input() showActionButtons = false;
+  @Input() maximumColumnLength = MAX_COLUMN_CHAR_COUNT;
+
+  @Input()
+  set columns(value: ColumnDefinition<T>[]) {
+    this._columns = value;
+    this.updateColumnModels();
+  }
+
+  get columns(): ColumnDefinition<T>[] {
+    return this._columns;
+  }
+
+  @Output() selectionChange = new EventEmitter<T[]>();
+  @Output() lazyLoad = new EventEmitter<LazyLoadEvent>();
+  @Output() download = new EventEmitter<RowModel<T>[]>();
+  @Output() delete = new EventEmitter<RowModel<T>[]>();
+  @Output() save = new EventEmitter<RowModel<T>[]>();
+
+  private readonly cdRef = inject(ChangeDetectorRef);
+  private readonly router = inject(Router);
+  private readonly route = inject(ActivatedRoute);
+  private readonly service = inject(TableService);
+  private _columns: ColumnDefinition<T, keyof T>[] = [];
+
+  tableColumns: ColumnModel<T>[] = [];
+  tableRows: RowModel<T>[] = [];
+  pageSizeOptions = DEFAULT_PAGINATION.map((x: number) => ({ value: x.toString() }));
+  allSelected = false;
+  icons = Icons;
+
+  get govPageSize() {
+    return this.pageSize.toString();
+  }
+
+  get tableRowView(): RowModel<T>[] {
+    if (this.lazy) {
+      return this.tableRows;
+    } else {
+      const start = (this.currentPage - 1) * this.pageSize;
+      const end = start + this.pageSize;
+      return this.tableRows.slice(start, end);
+    }
+  }
+
+  get selected(): RowModel<T>[] {
+    return this.tableRows.filter(r => r.selected);
+  }
+
+  get selectedCount(): number {
+    return this.selected.length;
+  }
+
+  constructor() {
+    effect(() => {
+      this.reactToSignals();
+    })
+  }
+
+  ngOnChanges(changes: SimpleChanges): void {
+    if (changes['data']) {
+      this.updateRowModels();
+      if (!this.lazy && this.data) {
+        this.total = this.data.length;
+      }
+    }
+
+    if (changes['selection']) {
+      this.selectSelected();
+    }
+
+    if (changes['filter']) {
+      this.updateFilter();
+    }
+  }
+
+  ngAfterViewInit(): void {
+    if (this.viewColumns?.length) {
+      this.updateColumnModels();
+      this.cdRef.detectChanges();
+    }
+  }
+
+  protected sortColumn(column: ColumnModel<T>) {
+    if (column.sortable) {
+      column.sortDirection = getNextSortDirection(
+        column.sortDirection,
+        this.sortMultiple
+      );
+
+      if (!this.sortMultiple) {
+        this.tableColumns
+          .filter((x) => x !== column)
+          .forEach((x) => {
+            x.sortDirection = undefined;
+          });
+      }
+
+      const sorts: Sort[] = this.getSorts().map((x) => ({
+        field: 'row.' + x.field,
+        direction: x.direction,
+      }));
+
+      if (!this.lazy) {
+        this.tableRows = multiSort(this.tableRows, sorts);
+      } else {
+        this.fireLazyLoad();
+      }
+    }
+  }
+
+  protected changePage(event: { detail: { pagination: { currentPage: number } } }) {
+    this.currentPage = event.detail.pagination.currentPage;
+    this.fireLazyLoad();
+  }
+
+  protected changePageSize(event: CustomEvent<FormSelectEvent>) {
+    this.pageSize = parseInt(event.detail.value);
+    this.currentPage = 1;
+    this.fireLazyLoad();
+  }
+
+  protected selectRow(row: RowModel<T>, event: MouseEvent) {
+    if (event.ctrlKey || event.metaKey) {
+      this.navigate(row, event);
+      return;
+    }
+
+    if (this.selectionMode === 'single') {
+      row.selected = !row.selected;
+      this.tableRows.forEach((x) => (x !== row ? (x.selected = false) : null));
+      this.fireSelectionChange();
+    } else if (this.selectionMode === 'multiple') {
+      row.selected = !row.selected;
+      this.fireSelectionChange();
+    }
+  }
+
+  protected navigate(row: RowModel<T>, event: MouseEvent) {
+    if (this.disableCustomClicks) {
+      return;
+    }
+
+    event.preventDefault();
+    const targetUrl = this.createUrl(row);
+
+    if (event.ctrlKey || event.metaKey) {
+      setTimeout(() => {
+        window.open(
+          this.router.serializeUrl(this.router.createUrlTree([targetUrl], { relativeTo: this.route })),
+          '_blank'
+        );
+      }, 0);
+    } else {
+      this.router.navigate([targetUrl], { relativeTo: this.route });
+    }
+  }
+
+  protected navigateNewWindow(row: RowModel<T>, event: MouseEvent) {
+  if (this.disableCustomClicks || event.button !== 1) {
+    return;
+  }
+
+    event.preventDefault();
+    const targetUrl = this.createUrl(row);
+
+    window.open(this.router.serializeUrl(this.router.createUrlTree([targetUrl], { relativeTo: this.route })), '_blank');
+  }
+
+  protected toggleAll(event: CustomEvent<FormCheckboxEvent>) {
+    this.allSelected = event.detail.checked;
+    this.tableRows.forEach((x) => (x.selected = this.allSelected));
+    this.fireSelectionChange();
+  }
+
+  protected toggleDetail(row: RowModel<T>) {
+    row.expanded = !row.expanded;
+    this.cdRef.detectChanges();
+  }
+
+  protected selectRowCheckbox(row: RowModel<T>, event: CustomEvent<FormCheckboxEvent>) {
+    row.selected = event.detail.checked;
+    this.allSelected = this.tableRows.every((x) => x.selected);
+    this.fireSelectionChange();
+  }
+
+  protected truncate(text: string): string {
+    return text.length > this.maximumColumnLength
+      ? text.slice(0, this.maximumColumnLength) + '...'
+      : text;
+  }
+
+  protected deselectAll() {
+    this.allSelected = false;
+    this.tableRows.forEach(x => (x.selected = this.allSelected));
+  }
+
+  private createUrl(row: RowModel<T>): string {
+    if (row.customRoute) {
+      return row.customRoute;
+    }
+
+    return row.id.toString();
+  }
+
+  private reactToSignals(): void {
+    const reload = this.service.reload();
+
+    if (typeof reload === 'symbol') {
+      this.fireLazyLoad();
+    } else if (reload.name === this.tableName) {
+      this.fireLazyLoad()
+    }
+
+    this.deselectAll();
+  }
+
+  private updateColumnModels() {
+    const viewColumns = this.viewColumns
+      ?.toArray()
+      .map((x) => x.getDefinition());
+    this.tableColumns = [...(this._columns ?? []), ...(viewColumns ?? [])].map(
+      (x) => new ColumnModel(x)
+    );
+  }
+
+  private updateRowModels(): void {
+    this.tableRows = (this.data ?? []).map(
+      (x) => new RowModel(x, false, false, undefined, undefined, undefined, this.customRoute, this.entityKey)
+    );
+  }
+
+  private fireSelectionChange() {
+    const selectedRows = this.tableRows
+      .filter((x) => x.selected)
+      .map((x) => x.row);
+    this.selectionChange.emit(selectedRows);
+  }
+
+  private selectSelected() {
+    if (this.selection?.length && this.selectionMode) {
+      const selection =
+        this.selectionMode === TableSelectionMode.single
+          ? [this.selection[0]]
+          : this.selection;
+      const selectionSet = new Set(selection);
+      this.tableRows.forEach((item) => {
+        item.selected = selectionSet.has(item.row);
+      });
+
+      this.allSelected = this.tableRows.every((x) => x.selected);
+    }
+  }
+
+  private fireLazyLoad() {
+    const lazyLoadEvent: LazyLoadEvent = {
+      sort: this.getSorts(),
+      offset: (this.currentPage - 1) * this.pageSize,
+      limit: this.pageSize,
+      filter: this.filter,
+    };
+
+    this.lazyLoad.emit(lazyLoadEvent);
+  }
+
+  private updateFilter() {
+    this.fireLazyLoad();
+  }
+
+  private getSorts(): Sort[] {
+    return this.tableColumns
+      .filter((x) => x.sortable && x.sortDirection)
+      .map((x) => ({
+        field: x.id,
+        direction: <SortDirectionType>x.sortDirection,
+      }));
+  }
+}

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

@@ -0,0 +1,17 @@
+import { SortDirection, SortDirectionType } from '@verisoft/core';
+
+export function getNextSortDirection(
+  sortDirection: SortDirectionType | undefined,
+  isNullable = false
+): SortDirectionType | undefined {
+  return isNullable && sortDirection === SortDirection.desc
+    ? undefined
+    : !sortDirection || sortDirection === SortDirection.desc
+    ? SortDirection.asc
+    : SortDirection.desc;
+}
+export function createCustomRoute<T>(row: T, entityKey?: string, customRoute?: string) {
+  return customRoute && entityKey
+    ? customRoute + (row as { [key: string]: string })[entityKey]
+    : undefined;
+}

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

@@ -0,0 +1,12 @@
+import { SortDirection, SortDirectionType } from '@verisoft/core';
+
+export function getNextSortDirection(
+  sortDirection: SortDirectionType | undefined,
+  isNullable = false
+): SortDirectionType | undefined {
+  return isNullable && sortDirection === SortDirection.desc
+    ? undefined
+    : !sortDirection || sortDirection === SortDirection.desc
+    ? SortDirection.asc
+    : SortDirection.desc;
+}

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

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

package/src/lib/components/{gov-text-field/gov-text-field.component.html → textarea/textarea.component.html}

@@ -1,10 +1,10 @@
-<gov-form-control>
+<gov-form-control class="mb-3">
     @if (label) {
     <gov-form-label 
         [slot]="labelSlot"
-        [size]="size"
+        [size]="size | govSize"
     >
-        {{ label }}
+        {{ label | translate }}
     </gov-form-label>
     }
     <gov-form-group>
@@ -12,12 +12,15 @@
             [formControl]="formControl"
             [minlength]="minlength" 
             [maxlength]="maxlength" 
-            [size]='size'  
+            [size]='size | govSize'  
             [name]='name' 
             [role]='role'
             [required]="required"
             [readonly]="readonly"
             [invalid]="ngControl?.errors ? true : false"
+            [multiline]="true"
+            [rows]="rows"
+            [cols]="cols"
         >
             @if (icon) {
             <gov-icon
@@ -35,24 +38,13 @@
             }
         </gov-form-input>
     </gov-form-group>
-    @if (ngControl && ngControl.errors) {
-    <gov-form-message
-        [slot]="errorSlot"
-        color="error"
-    >
-        {{ngControl.errors | error}}
-        <gov-icon 
-            type="components"
-            name="exclamation-triangle-fill"
-            slot="icon"
-        />
-    </gov-form-message>
-    } @if (message) {
-    <gov-form-message
-        [slot]="messageSlot"
+    <v-validation-message [ngControl]="ngControl"></v-validation-message>
+    @if (message) {
+    <gov-form-message 
+        [slot]="messageSlot" 
         color="neutral"
-    >
-        {{ message }}
+        >
+        {{ message | translate }}
     </gov-form-message>
     }
 </gov-form-control>

package/src/lib/components/{gov-text-field/gov-text-field.component.ts → textarea/textarea.component.ts}

@@ -12,39 +12,44 @@ import {
   ReactiveFormsModule,
 } from '@angular/forms';
 import { GovDesignSystemModule } from '@gov-design-system-ce/angular';
+import { TranslateModule } from '@ngx-translate/core';
 import {
   TextfieldCore,
-  TEXTFIELD_COMPONENT_TOKEN,
   FieldType,
   BaseFormInputComponent,
-  ErrorPipe,
   FieldSizeType,
   FieldSize,
   IconPositionType,
   IconPosition,
   SlotPositionType,
-  SlotPosition
+  SlotPosition,
+  TEXTAREA_COMPONENT_TOKEN,
 } from '@verisoft/ui-core';
+import { Icons } from '../../icons';
+import { GovSizePipe } from '../../pipes';
+import { ErrorComponent } from '../errors';
 @Component({
-  selector: 'v-textfield',
+  selector: 'v-textarea',
   standalone: true,
   imports: [
     CommonModule,
     ReactiveFormsModule,
     GovDesignSystemModule,
-    ErrorPipe,
+    GovSizePipe,
+    ErrorComponent,
+    TranslateModule,
   ],
-  templateUrl: './gov-text-field.component.html',
-  styleUrl: './gov-text-field.component.scss',
+  templateUrl: './textarea.component.html',
+  styleUrl: './textarea.component.scss',
   changeDetection: ChangeDetectionStrategy.OnPush,
   providers: [
     {
-      provide: TEXTFIELD_COMPONENT_TOKEN,
-      useExisting: TextfieldComponent,
+      provide: TEXTAREA_COMPONENT_TOKEN,
+      useExisting: TextareaComponent,
     },
   ],
 })
-export class TextfieldComponent
+export class TextareaComponent
   extends BaseFormInputComponent
   implements ControlValueAccessor, TextfieldCore
 {
@@ -61,8 +66,11 @@ export class TextfieldComponent
   @Input() icon!: string;
   @Input() iconPos: IconPositionType = IconPosition.right;
   @Input() labelSlot: SlotPositionType = SlotPosition.top;
-  @Input() errorSlot: SlotPositionType = SlotPosition.bottom;
   @Input() messageSlot: SlotPositionType = SlotPosition.bottom;
+  @Input() rows = 0;
+  @Input() cols = 0;
+
+  icons = Icons;
 
   constructor(@Optional() @Self() ngControl: NgControl) {
     super(ngControl);

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

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

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

@@ -0,0 +1,56 @@
+<gov-form-control class="mb-3">
+    @if (label) {
+    <gov-form-label
+        [slot]="labelSlot"
+        [size]="size | govSize"
+    >
+        <div class="d-flex">
+            {{ label | translate }}
+            @if (tooltip) {
+            <v-tooltip [message]="tooltip | translate" />
+            }
+        </div>
+    </gov-form-label>
+    }
+    <gov-form-group>
+        <gov-form-input
+            [inputType]="type"
+            [formControl]="formControl"
+            [minlength]="minlength"
+            [maxlength]="maxlength"
+            [min]="min"
+            [max]="max"
+            [size]='size | govSize'
+            [name]='name'
+            [role]='role'
+            [required]="required"
+            [attr.disabled]="disabled ? 'true' : 'false'"
+            [invalid]="ngControl?.errors ? true : false"
+            [placeholder]="placeholder"
+        >
+            @if (icon) {
+            <gov-icon
+                [name]="icon"
+                [slot]="iconPos === 'left' ? 'icon-start' : 'icon-end'"
+            />
+            } @if (prefix) {
+            <p slot="prefix">
+                {{ prefix }}
+            </p>
+            } @if (sufix) {
+            <p slot="sufix">
+                {{ sufix }}
+            </p>
+            }
+        </gov-form-input>
+        <v-validation-message [ngControl]="ngControl"></v-validation-message>
+        @if (message) {
+        <gov-form-message
+            [slot]="messageSlot"
+            color="neutral"
+        >
+            {{ message }}
+        </gov-form-message>
+        }
+    </gov-form-group>
+</gov-form-control>