@verisoft/ui-govcz 18.6.1 → 18.6.3

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/textarea/textarea.component.html

@@ -0,0 +1,50 @@
+<gov-form-control class="mb-3">
+    @if (label) {
+    <gov-form-label 
+        [slot]="labelSlot"
+        [size]="size | govSize"
+    >
+        {{ label | translate }}
+    </gov-form-label>
+    }
+    <gov-form-group>
+        <gov-form-input [type]="type"
+            [formControl]="formControl"
+            [minlength]="minlength" 
+            [maxlength]="maxlength" 
+            [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
+                [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>
+    </gov-form-group>
+    <v-validation-message [ngControl]="ngControl"></v-validation-message>
+    @if (message) {
+    <gov-form-message 
+        [slot]="messageSlot" 
+        color="neutral"
+        >
+        {{ message | translate }}
+    </gov-form-message>
+    }
+</gov-form-control>

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

@@ -0,0 +1,78 @@
+import { CommonModule } from '@angular/common';
+import {
+  ChangeDetectionStrategy,
+  Component,
+  Input,
+  Optional,
+  Self,
+} from '@angular/core';
+import {
+  ControlValueAccessor,
+  NgControl,
+  ReactiveFormsModule,
+} from '@angular/forms';
+import { GovDesignSystemModule } from '@gov-design-system-ce/angular';
+import { TranslateModule } from '@ngx-translate/core';
+import {
+  TextfieldCore,
+  FieldType,
+  BaseFormInputComponent,
+  FieldSizeType,
+  FieldSize,
+  IconPositionType,
+  IconPosition,
+  SlotPositionType,
+  SlotPosition,
+  TEXTAREA_COMPONENT_TOKEN,
+} from '@verisoft/ui-core';
+import { Icons } from '../../icons';
+import { GovSizePipe } from '../../pipes';
+import { ErrorComponent } from '../errors';
+@Component({
+  selector: 'v-textarea',
+  standalone: true,
+  imports: [
+    CommonModule,
+    ReactiveFormsModule,
+    GovDesignSystemModule,
+    GovSizePipe,
+    ErrorComponent,
+    TranslateModule,
+  ],
+  templateUrl: './textarea.component.html',
+  styleUrl: './textarea.component.scss',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  providers: [
+    {
+      provide: TEXTAREA_COMPONENT_TOKEN,
+      useExisting: TextareaComponent,
+    },
+  ],
+})
+export class TextareaComponent
+  extends BaseFormInputComponent
+  implements ControlValueAccessor, TextfieldCore
+{
+  @Input() floatLabel!: boolean;
+  @Input() type = FieldType.text;
+  @Input() minlength = 0;
+  @Input() maxlength = 524288;
+  @Input() prefix!: string;
+  @Input() sufix!: string;
+  @Input() message!: string;
+  @Input() name! : string;
+  @Input() role! : string;
+  @Input() size: FieldSizeType = FieldSize.medium;
+  @Input() icon!: string;
+  @Input() iconPos: IconPositionType = IconPosition.right;
+  @Input() labelSlot: SlotPositionType = SlotPosition.top;
+  @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>