@verisoft/ui-primeng 19.0.1-1 → 20.1.0

package/src/lib/components/confirm-dialog/confirm-dialog.component.ts

@@ -0,0 +1,73 @@
+import { CommonModule } from '@angular/common';
+import { ChangeDetectorRef, Component, OnInit } from '@angular/core';
+import {
+  CONFIRM_DIALOG_COMPONENT_TOKEN,
+  ConfirmDialogCore,
+  DialogData,
+  DialogService,
+  UnsubscribeComponent,
+} from '@verisoft/ui-core';
+import { AvatarModule } from 'primeng/avatar';
+import { DialogModule } from 'primeng/dialog';
+import { takeUntil } from 'rxjs';
+import { ButtonComponent } from '../button';
+import { DynamicComponent } from '../shared-components';
+
+@Component({
+    selector: 'v-confirm-dialog',
+    imports: [
+        CommonModule,
+        DialogModule,
+        ButtonComponent,
+        AvatarModule,
+        DynamicComponent,
+    ],
+    templateUrl: './confirm-dialog.component.html',
+    styleUrl: './confirm-dialog.component.scss',
+    providers: [
+        {
+            provide: CONFIRM_DIALOG_COMPONENT_TOKEN,
+            useExisting: ConfirmDialogComponent,
+        },
+    ]
+})
+export class ConfirmDialogComponent
+  extends UnsubscribeComponent
+  implements OnInit, ConfirmDialogCore
+{
+  constructor(
+    private readonly dialogService: DialogService,
+    private readonly cdr: ChangeDetectorRef
+  ) {
+    super();
+  }
+
+  visible = false;
+  protected closable = false;
+  data!: DialogData;
+
+  ngOnInit(): void {
+    this.dialogService.showEvent
+      .pipe(takeUntil(this.destroyed$))
+      .subscribe((x: DialogData) => {
+        this.data = x;
+        this.visible = true;
+        this.cdr.detectChanges();
+      });
+  }
+
+  protected dialogClick(confirm: boolean) {
+    const { confirmButtonFn, cancelButtonFn } = this.data;
+
+    if (confirm && confirmButtonFn) {
+      confirmButtonFn();
+    }
+
+    if (!confirm && cancelButtonFn) {
+      cancelButtonFn();
+    }
+
+    this.visible = false;
+    this.cdr.detectChanges();
+  }
+}

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

@@ -0,0 +1,93 @@
+<div class="v-dropdown">
+  @if (label && !floatLabel) {
+    <v-form-field
+      [label]="label"
+      [tooltip]="tooltip"
+      [required]="isRequired()"
+      [testId]="testId"
+      [display]="formDisplay"
+      >
+      <p-select
+        class="w-100"
+        appendTo="body"
+        [formControl]="formControl"
+        [filter]="filter"
+        [title]="label"
+        [options]="options"
+        [optionLabel]="optionLabel"
+        [optionValue]="optionValue"
+        [loading]="loading"
+        [placeholder]="placeholder ?? ''"
+        [virtualScroll]="lazy"
+        [virtualScrollItemSize]="virtualOptionSize"
+        [virtualScrollOptions]="virtualScrollOptions"
+        [tooltip]="tooltip"
+        [required]="isRequired()"
+        [showClear]="formControl && clearable && !readonly"
+        [editable]="editable"
+        [dataKey]="optionValue"
+        (showEvent)="onDropdownShow()"
+        (clearEvent)="onDropdownClear()"
+        (onFilter)="filterChange($event)"
+        >
+      </p-select>
+    </v-form-field>
+    <v-validation-message [ngControl]="ngControl"></v-validation-message>
+  }
+  @if (!label && !floatLabel) {
+    <p-select
+      class="w-100"
+      appendTo="body"
+      [formControl]="formControl"
+      [filter]="filter"
+      [title]="label"
+      [options]="options"
+      [optionLabel]="optionLabel"
+      [optionValue]="optionValue"
+      [loading]="loading"
+      [placeholder]="placeholder ? placeholder : label"
+      [tooltip]="tooltip"
+      [required]="isRequired()"
+      [showClear]="formControl && clearable && !readonly"
+      [editable]="editable"
+      [dataKey]="optionValue"
+      [virtualScroll]="lazy"
+      [virtualScrollItemSize]="virtualOptionSize"
+      [virtualScrollOptions]="virtualScrollOptions"
+      (showEvent)="onDropdownShow()"
+      (clearEvent)="onDropdownClear()"
+      (onFilter)="filterChange($event)"
+      >
+    </p-select>
+  }
+  @if (floatLabel && !label) {
+    <p-floatLabel>
+      <p-select
+        class="w-100"
+        appendTo="body"
+        [formControl]="formControl"
+        [title]="label"
+        [options]="options"
+        [optionLabel]="optionLabel"
+        [optionValue]="optionValue"
+        [loading]="loading"
+        [placeholder]="placeholder ? placeholder : label"
+        [filter]="filter"
+        [tooltip]="tooltip"
+        [required]="isRequired()"
+        [showClear]="formControl && clearable && !readonly"
+        [editable]="editable"
+        [dataKey]="optionValue"
+        [virtualScroll]="lazy"
+        [virtualScrollItemSize]="virtualOptionSize"
+        [virtualScrollOptions]="virtualScrollOptions"
+        (showEvent)="onDropdownShow()"
+        (clearEvent)="onDropdownClear()"
+        (onFilter)="filterChange($event)"
+        (lazyLoad)="onLazyLoad($any($event))"
+        >
+      </p-select>
+      <label [for]="inputId">{{ floatLabel }}</label>
+    </p-floatLabel>
+  }
+</div>

package/src/lib/components/dropdown/dropdown.component.scss

@@ -0,0 +1,16 @@
+.v-dropdown {
+  justify-content: center;
+  width: 100%;
+}
+
+.p-dropdown-items-wrapper,
+.p-scroller-viewport,
+.p-scroller {
+  min-width: 8rem !important;
+  overflow-x: hidden;
+  overflow-y: auto;
+}
+
+.p-dropdown {
+  width: 100%;
+}

package/src/lib/components/dropdown/dropdown.component.spec.ts

@@ -0,0 +1,21 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { DropdownComponent } from './dropdown.component';
+
+describe('DropdownComponent', () => {
+  let component: DropdownComponent<any>;
+  let fixture: ComponentFixture<DropdownComponent<any>>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [DropdownComponent],
+    }).compileComponents();
+
+    fixture = TestBed.createComponent(DropdownComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

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

@@ -0,0 +1,139 @@
+
+import {
+  ChangeDetectionStrategy,
+  Component,
+  EventEmitter,
+  forwardRef,
+  Input,
+  OnChanges,
+  OnDestroy,
+  Optional,
+  Output,
+  Self,
+  SimpleChanges,
+  ViewEncapsulation,
+  OnInit,
+} from '@angular/core';
+import {
+  ControlValueAccessor,
+  NgControl,
+  ReactiveFormsModule,
+} from '@angular/forms';
+import { FilterEvent, LazyLoadEvent } from '@verisoft/core';
+import {
+  BaseFormInputComponent,
+  BaseInputControls,
+  DROPDOWN_COMPONENT_TOKEN,
+  DropdownCore
+} from '@verisoft/ui-core';
+import { ScrollerOptions } from 'primeng/api';
+import { FloatLabelModule } from 'primeng/floatlabel';
+import { MessageModule } from 'primeng/message';
+import { ScrollerLazyLoadEvent } from 'primeng/scroller';
+import { SelectModule, SelectFilterEvent } from 'primeng/select';
+import { TooltipModule } from 'primeng/tooltip';
+import { Subject } from 'rxjs';
+import { ErrorComponent } from '../errors';
+import { FormFieldComponent } from '../form-field';
+
+@Component({
+    selector: 'v-dropdown',
+    imports: [
+    ReactiveFormsModule,
+    SelectModule,
+    TooltipModule,
+    FormFieldComponent,
+    MessageModule,
+    FloatLabelModule,
+    ErrorComponent
+],
+    templateUrl: './dropdown.component.html',
+    styleUrls: ['./dropdown.component.scss'],
+    changeDetection: ChangeDetectionStrategy.OnPush,
+    encapsulation: ViewEncapsulation.None,
+    providers: [
+        {
+            provide: BaseInputControls,
+            useExisting: forwardRef(() => DropdownComponent),
+            multi: true,
+        },
+        {
+            provide: DROPDOWN_COMPONENT_TOKEN,
+            useExisting: DropdownComponent,
+        },
+    ]
+})
+export class DropdownComponent<T>
+  extends BaseFormInputComponent
+  implements
+    ControlValueAccessor,
+    OnChanges,
+    OnDestroy,
+    OnInit,
+    DropdownCore<T>
+{
+  constructor(@Optional() @Self() ngControl: NgControl) {
+    super(ngControl);
+  }
+
+  @Input() options: T[] | undefined = [];
+  @Input() optionLabel: string | undefined;
+  @Input() optionValue: string | undefined;
+  @Input() dropdownIcon?: string;
+  @Input() floatLabel?: string;
+  @Input() editable = false;
+  @Input() loading = false;
+  @Input() lazy = false;
+  @Input() filter = true;
+  @Input() forceMinWidth = false;
+  @Input() showFilter = false;
+  @Input() localSearch = false;
+
+  @Output() showed = new EventEmitter<any>();
+  @Output() cleared = new EventEmitter<any>();
+  @Output() lazyLoad = new EventEmitter<LazyLoadEvent>();
+  @Output() filtered = new EventEmitter<FilterEvent>();
+
+  private destroy$ = new Subject<void>();
+
+  virtualScrollOptions!: ScrollerOptions | undefined;
+  virtualOptionSize = 37.5;
+
+  ngOnChanges(changes: SimpleChanges): void {
+    if (changes['lazy'] || changes['loading']) {
+      this.virtualScrollOptions = this.lazy
+        ? {
+            showLoader: this.loading,
+            lazy: true,
+            onLazyLoad: this.onLazyLoad.bind(this),
+          }
+        : undefined;
+    }
+  }
+
+  ngOnDestroy(): void {
+    this.destroy$.next();
+    this.destroy$.complete();
+  }
+
+  onLazyLoad(event: ScrollerLazyLoadEvent): void {
+    this.lazyLoad.emit({
+      offset: event.first,
+      limit: event.last - event.first,
+    });
+  }
+
+  filterChange(event: SelectFilterEvent): void {
+    this.filtered.emit({
+      filter: event.filter,
+    });
+  }
+
+  onDropdownShow(): void {
+    this.showed.emit();
+  }
+
+  onDropdownClear(): void {
+    this.cleared.emit();
+  }
+}

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

@@ -0,0 +1 @@
+<p>NOT implemented </p>

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

@@ -0,0 +1,20 @@
+import { Component, input } from "@angular/core";
+import { DropdownButtonCore, DROPDOWN_BUTTON_COMPONENT_TOKEN, ControlSeverityType, ControlSeverity, FieldSizeType, MenuItem } from "@verisoft/ui-core";
+
+@Component({
+    selector: 'v-dropdown-button',
+    templateUrl: './dropdown-button.component.html',
+    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>();
+    items = input<MenuItem[] | undefined>(undefined);
+ }

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,7 @@
+
+@if (ngControl && ngControl.errors) {
+  <p-message
+    [severity]="severity"
+    text="{{ getErrorMessage(ngControl.errors) | async }}">
+  </p-message>
+}

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

@@ -0,0 +1,3 @@
+.p-message-content {
+    color: #e60017;
+}

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

@@ -0,0 +1,34 @@
+import { CommonModule } from "@angular/common";
+import { Component, inject, Input, } from "@angular/core";
+import { NgControl, ValidationErrors } from "@angular/forms";
+import { ERROR_PROVIDER_TOKEN } from "@verisoft/core";
+import { SlotPosition, SlotPositionType } from "@verisoft/ui-core";
+import { MessageModule } from "primeng/message";
+import { Observable } from "rxjs";
+import { Icons } from "../../icons";
+
+@Component({
+  selector: "v-validation-message",
+  templateUrl: "./error.component.html",
+  styleUrl: "./error.component.scss",
+  imports: [CommonModule, MessageModule]
+})
+export class ErrorComponent {
+  @Input({ required: true }) ngControl?: NgControl;
+
+  @Input() errorSlot: SlotPositionType = SlotPosition.bottom
+
+  @Input() messageSlot: SlotPositionType = SlotPosition.bottom
+
+  @Input() variant = 'simple';
+
+  @Input() severity = 'error';
+
+  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',
+  standalone: true,
+})
+export class FeatureListFilterFieldDirective extends FilterFieldDirective {}

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

@@ -0,0 +1,21 @@
+import { Pipe, PipeTransform } from "@angular/core";
+import { GenericFieldDefinition, GenericFieldType } from "@verisoft/ui-core";
+import { FeatureListColumnDefinition } from "./feature-list-page.model";
+
+@Pipe({
+    name: 'featureListColumn',
+    standalone: true,
+})
+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,32 @@
+import { Component, inject } 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;
+
+  private readonly activatedRoute = inject(ActivatedRoute);
+
+  constructor() {
+    this.config =
+      this.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,59 @@
+<div class="feature-list__container full-height-container">
+  <v-filter
+    #filter
+    [title]="title"
+    [fields]="columns | featureListColumn"
+    [filters]="filters"
+    [fulltextFieldName]="fulltextFieldName"
+    [showFulltext]="showFulltext"
+    [showFilters]="showExtendedFilter"
+  >
+    <v-action-button-group
+      [maxItems]="maxVisibleActions"
+      [maxItemsMobile]="maxVisibleMobileActions"
+    >
+      @if (showAdd) {
+      <v-action-button
+        [icon]="icons.add"
+        label="Add"
+        [disabled]="!canAdd"
+        (click)="addClick.emit()"
+      ></v-action-button>
+      } @if (showDelete){
+      <v-action-button
+        [icon]="icons.delete"
+        label="Delete"
+        [disabled]="!canDelete || !selection.length"
+        (click)="startDeleteItems()"
+      ></v-action-button>
+      } @if (showDownload){
+      <v-action-button
+        [icon]="icons.download"
+        label="Download"
+        [disabled]="!canDownload"
+        (click)="startDownload()"
+      ></v-action-button>
+      }
+    </v-action-button-group>
+  </v-filter>
+  <div class="feature-list__table-container full-height-container">
+    <div class="full-height-container">
+      <v-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)"
+      >
+      </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;
+}