@verisoft/ui-govcz 20.0.1 → 20.1.0

package/src/lib/components/dropdown-button/dropdown-button.component.html

@@ -0,0 +1,31 @@
+<gov-dropdown position="left">
+    <v-button
+      [label]="label()"
+      [icon]="icon()"
+      [rounded]="rounded() ?? false"
+      [outlined]="outlined() ?? false"
+      [raised]="raised() ?? false"
+      [severity]="severity()"
+      [type]="type()"
+      [size]="size()"
+    />
+  
+    @if (items()?.length) {
+      <ul slot="list">
+        @for (item of items(); track item.id) {
+          <li>
+            <v-button
+              class="w-100"
+              [label]="item.label"
+              [icon]="item.icon"
+              [severity]="$any('normal')"
+              [size]="'medium'"
+              [type]="type()"
+              (click)="fireClickItem(item)"
+            />
+          </li>
+        }
+      </ul>
+    }
+  </gov-dropdown>
+  

package/src/lib/components/dropdown-button/dropdown-button.component.ts

@@ -0,0 +1,34 @@
+import { Component, input, output } from "@angular/core";
+import { GovDesignSystemModule } from "@gov-design-system-ce/angular";
+import { DropdownButtonCore, DROPDOWN_BUTTON_COMPONENT_TOKEN, ButtonCore, ControlSeverityType, ControlSeverity, FieldSizeType, MenuItem, GovButtonTypeType, GovButtonType } from "@verisoft/ui-core";
+import { ButtonComponent } from "../button";
+
+@Component({
+    selector: 'v-dropdown-button',
+    templateUrl: './dropdown-button.component.html',
+    imports: [ GovDesignSystemModule, ButtonComponent],
+    providers: [
+        { provide: DROPDOWN_BUTTON_COMPONENT_TOKEN, useExisting: DropdownButtonComponent }
+    ]
+})
+ export class DropdownButtonComponent implements DropdownButtonCore {
+    label = input<string | undefined>();
+    icon = input<string | undefined>();
+    rounded = input<boolean | undefined>(false);
+    raised = input<boolean | undefined>(false);
+    outlined = input<boolean | undefined>(false);
+    severity = input<ControlSeverityType | undefined>(ControlSeverity.primary);
+    size = input<FieldSizeType | undefined>();
+    type = input<GovButtonTypeType>(GovButtonType.solid);
+    items = input<MenuItem[] | undefined>(undefined);
+
+    fireClick = output<MenuItem>();
+
+    fireClickItem(item: MenuItem): void {
+        if (item.command) {
+            item.command();
+        } else {
+            this.fireClick.emit(item);
+        }
+      }
+ }

package/src/lib/components/dropdown-button/index.ts

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

package/src/lib/components/errors/error.component.html

@@ -0,0 +1,11 @@
+@if (ngControl && ngControl.errors) {
+<gov-form-message 
+    [slot]="errorSlot" 
+    color="error"
+>
+    {{ getErrorMessage(ngControl.errors) | async }}
+  <gov-icon 
+    [name]="icons.warning" 
+    slot="validation-icon" />
+</gov-form-message>
+}

package/src/lib/components/errors/error.component.spec.ts

@@ -0,0 +1,19 @@
+describe('Extract first key from errors object', () => {
+    it('should return the first key from an object with multiple keys', () => {
+      const errors = { name: 'Required', email: 'Invalid' };
+      const key = Object.keys(errors)[0];
+      expect(key).toBe('name');
+    });
+  
+    it('should return undefined for an empty object', () => {
+      const errors = {};
+      const key = Object.keys(errors)[0];
+      expect(key).toBeUndefined();
+    });
+  
+    it('should return the only key in a single-key object', () => {
+      const errors = { password: 'Too short' };
+      const key = Object.keys(errors)[0];
+      expect(key).toBe('password');
+    });
+  });

package/src/lib/components/errors/error.component.ts

@@ -0,0 +1,29 @@
+import { CommonModule } from "@angular/common";
+import { Component, inject, Input, } from "@angular/core";
+import { NgControl, ValidationErrors } from "@angular/forms";
+import { GovDesignSystemModule } from '@gov-design-system-ce/angular';
+import { ERROR_PROVIDER_TOKEN } from "@verisoft/core";
+import { SlotPosition, SlotPositionType } from "@verisoft/ui-core";
+import { Observable } from "rxjs";
+import { Icons } from "../../icons";
+
+@Component({
+  selector: "v-validation-message",
+  templateUrl: "./error.component.html",
+  styleUrl: "./error.component.scss",
+  imports: [CommonModule, GovDesignSystemModule]
+})
+export class ErrorComponent {
+  @Input({ required: true }) ngControl?: NgControl;
+
+  @Input() errorSlot: SlotPositionType = SlotPosition.bottom
+
+  @Input() messageSlot: SlotPositionType = SlotPosition.bottom
+
+  readonly errorService = inject(ERROR_PROVIDER_TOKEN);
+  icons = Icons
+
+  getErrorMessage(errors: ValidationErrors): Observable<string | undefined> {
+    return this.errorService.mapError(errors);
+  }
+}

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

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

package/src/lib/components/feature-list/directives/feature-list-column.directive.ts

@@ -0,0 +1,32 @@
+import { Directive, Input } from '@angular/core';
+import { GenericFieldType, GenericFieldTypeType, TableColumnDirective } from '@verisoft/ui-core';
+import { FEATURE_LIST_COLUMN_PROVIDER, FeatureListColumnDefinition, FeatureListColumnProvider } from '../feature-list-page.model';
+
+@Directive({
+  // eslint-disable-next-line @angular-eslint/directive-selector
+  selector: 'v-feature-list-column',
+  standalone: true,
+  providers: [
+    {
+      provide: FEATURE_LIST_COLUMN_PROVIDER,
+      useExisting: FeatureListColumnDirective,
+      multi: true,
+    },
+  ],
+})
+export class FeatureListColumnDirective<T>
+  extends TableColumnDirective<T>
+  implements FeatureListColumnProvider<T>
+{
+  @Input() filter = false;
+
+  @Input() type: GenericFieldTypeType = GenericFieldType.text;
+
+  override getDefinition(): FeatureListColumnDefinition<T> {
+    const definition = super.getDefinition() as FeatureListColumnDefinition<T>;
+    definition.filter = this.filter;
+    definition.type = this.type;
+    definition.format = this.format;
+    return definition;
+  }
+}

package/src/lib/components/feature-list/directives/feature-list-filter-field.directive.ts

@@ -0,0 +1,8 @@
+import { Directive } from '@angular/core';
+import { FilterFieldDirective } from '../../filter';
+
+@Directive({
+  // eslint-disable-next-line @angular-eslint/directive-selector
+  selector: 'v-feature-list-filter-field',
+})
+export class FeatureListFilterFieldDirective extends FilterFieldDirective {}

package/src/lib/components/feature-list/feature-list-filter.pipe.ts

@@ -0,0 +1,20 @@
+import { Pipe, PipeTransform } from "@angular/core";
+import { GenericFieldDefinition, GenericFieldType } from "@verisoft/ui-core";
+import { FeatureListColumnDefinition } from "./feature-list-page.model";
+
+@Pipe({
+    name: 'featureListColumn',
+})
+export class FeatureListFilterPipe<T> implements PipeTransform {
+    transform(value: FeatureListColumnDefinition<T>[] | undefined): GenericFieldDefinition[] | undefined {
+        if (!value){
+            return undefined;
+        }
+
+        return value.filter(x => x.filter).map((x, index) => ({
+            name: x.id,
+            label: typeof x.headerName === 'function'? x.headerName(x.id, index) : x.headerName ?? '',
+            type: x.type as GenericFieldType,
+        }));
+    }
+}

package/src/lib/components/feature-list/feature-list-page.component.ts

@@ -0,0 +1,30 @@
+import { Component } from '@angular/core';
+import { ActivatedRoute } from '@angular/router';
+import {
+  FEATURE_LIST_PAGE_CONFIG_PROPERTY,
+  FeatureListPageConfig,
+} from './feature-list-page.model';
+import { FeatureListComponent } from './feature-list.component';
+
+@Component({
+    selector: 'v-feature-list-page',
+    imports: [FeatureListComponent],
+    template: `
+    <v-feature-list
+      [title]="config.title"
+      [tableName]="config.tableName"
+      [showAdd]="config.showAdd ?? true"
+      [showDownload]="config.showDownload ?? true"
+      [showDelete]="config.showDelete ?? true"
+    >
+    </v-feature-list>
+  `
+})
+export class FeatureListPageComponent {
+  config!: FeatureListPageConfig;
+
+  constructor(activatedRoute: ActivatedRoute) {
+    this.config =
+      activatedRoute.snapshot.data[FEATURE_LIST_PAGE_CONFIG_PROPERTY];
+  }
+}

package/src/lib/components/feature-list/feature-list-page.model.ts

@@ -0,0 +1,42 @@
+import { InjectionToken } from '@angular/core';
+import { Route } from '@angular/router';
+import { ColumnDefinition, GenericFieldTypeType } from '@verisoft/ui-core';
+import { FeatureListPageComponent } from './feature-list-page.component';
+
+export interface FeatureListPageConfig {
+  title: string;
+  datasource: string;
+  tableName: string;
+  showAdd?: boolean;
+  showDownload?: boolean;
+  showDelete?: boolean;
+}
+
+export const FEATURE_LIST_PAGE_CONFIG_PROPERTY = 'feature_list_config';
+
+export function addFeatureListPage(
+  value: Partial<Route> & { config: FeatureListPageConfig }
+): Route {
+  const { config, ...route } = value;
+  return {
+    component: FeatureListPageComponent,
+    ...route,
+    data: {
+      [FEATURE_LIST_PAGE_CONFIG_PROPERTY]: config,
+      ...(route.data ?? {}),
+    },
+  };
+}
+
+export interface FeatureListColumnDefinition<T> extends ColumnDefinition<T> {
+  filter?: boolean;
+  type?: GenericFieldTypeType;
+}
+
+export const FEATURE_LIST_COLUMN_PROVIDER = new InjectionToken(
+  'FEATURE_LIST_COLUMN_PROVIDER'
+);
+
+export interface FeatureListColumnProvider<T> {
+  getDefinition: () => FeatureListColumnDefinition<T>;
+}

package/src/lib/components/feature-list/feature-list.component.html

@@ -0,0 +1,67 @@
+<div class="feature-list__container full-height-container">
+  <v-filter
+    #filter
+    [title]="title"
+    [total]="tableTotal"
+    [recordsText]="recordsText"
+    [fields]="columns | featureListColumn"
+    [filters]="filters"
+    [fulltextFieldName]="fulltextFieldName"
+    [showFulltext]="showFulltext"
+    [showFilters]="showExtendedFilter"
+    [applyLabel]="applyLabel"
+    [clearLabel]="clearLabel"
+    [buttonType]="buttonType"
+    [buttonOutlined]="buttonOutlined"
+  >
+    <v-action-button-group
+      [maxItems]="maxVisibleActions"
+      [maxItemsMobile]="maxVisibleMobileActions"
+    >
+      @if (showAdd) {
+      <v-action-button
+        [icon]="icons.add"
+        label="Add"
+        [disabled]="!canAdd"
+        (click)="addClick.emit()"
+      />
+      } @if (showDelete){
+      <v-action-button
+        [icon]="icons.delete"
+        label="Delete"
+        [disabled]="!canDelete || !selection.length"
+        (click)="startDeleteItems()"
+      />
+      } @if (showDownload){
+      <v-action-button
+        [icon]="icons.download"
+        label="Download"
+        [disabled]="!canDownload"
+        (click)="startDownload()"
+      />
+      }
+    </v-action-button-group>
+  </v-filter>
+  <div class="feature-list__table-container full-height-container">
+    <div class="full-height-container">
+      <v-table
+        #table
+        useDatasource
+        useFilter
+        [filterComponent]="filter"
+        class="full-height-container"
+        [selectionMode]="selectionMode"
+        [tableName]="tableName"
+        [autoBind]="true"
+        [datasource]="datasource"
+        [columns]="columns"
+        [extraFilter]="extraFilter"
+        [maximumColumnLength]="maximumColumnLength"
+        [disableCustomClicks]="disableCustomClicks"
+        (selectionChange)="selectItems($event)"
+      >
+        <ng-content />
+      </v-table>
+    </div>
+  </div>
+</div>

package/src/lib/components/feature-list/feature-list.component.scss

@@ -0,0 +1,10 @@
+.full-height-container {
+    display: flex;
+    flex-direction: column;
+    flex-grow: 1;
+    height: 100%;
+}
+
+:host {
+    @extend .full-height-container;
+}