@verisoft/ui-primeng 18.0.0 → 18.3.1

package/src/lib/components/{filter → shared-components/filter}/filter.component.ts

@@ -14,15 +14,21 @@ import {
   SimpleChanges,
 } from '@angular/core';
 import {
-  ControlValueAccessor,
   FormGroup,
   NG_VALUE_ACCESSOR,
   ReactiveFormsModule,
 } from '@angular/forms';
 import { BaseHttpService } from '@verisoft/core';
 import {
+  ButtonShortCutDirective,
   DEFAULT_DEBOUNCE_TIME,
+  DialogService,
   FieldSize,
+  FILTER_COMPONENT_TOKEN,
+  FilterCore,
+  GenericFieldDefinition,
+  isFilterEmpty,
+  ScreenSizeService,
   UnsubscribeComponent,
 } from '@verisoft/ui-core';
 import { BadgeModule } from 'primeng/badge';
@@ -30,20 +36,16 @@ import {
   BehaviorSubject,
   combineLatestWith,
   debounceTime,
+  distinctUntilChanged,
   map,
   Observable,
   startWith,
   takeUntil,
 } from 'rxjs';
-import { ScreenSizeService } from '../../services/screen-size.service';
-import { ButtonComponent, ButtonShortCutDirective } from '../button';
-import { DialogService } from '../confirm-dialog';
-import {
-  generateFormGroup,
-  GenericFieldDefinition,
-  GenericFormComponent,
-} from '../generic-form';
-import { TextfieldComponent } from '../textfield';
+import { Icons } from '../../../icons';
+import { ButtonComponent } from '../../button';
+import { TextfieldComponent } from '../../textfield';
+import { generateFormGroup, GenericFormComponent } from '../generic-form';
 import { FilterFieldDirective } from './directives/filter-field.directive';
 import { getFilledControlCount } from './filter.model';
 
@@ -67,6 +69,10 @@ type FilterValueType = { [key: string]: unknown };
       useExisting: forwardRef(() => FilterComponent),
       multi: true,
     },
+    {
+      provide: FILTER_COMPONENT_TOKEN,
+      useExisting: FilterComponent,
+    },
   ],
   templateUrl: './filter.component.html',
   styleUrl: './filter.component.scss',
@@ -74,13 +80,15 @@ type FilterValueType = { [key: string]: unknown };
 })
 export class FilterComponent<T extends object>
   extends UnsubscribeComponent
-  implements OnChanges, OnInit, AfterContentInit, ControlValueAccessor
+  implements OnChanges, OnInit, AfterContentInit, FilterCore
 {
   @ContentChildren(FilterFieldDirective)
   fieldDeclarations!: QueryList<FilterFieldDirective>;
 
   @Input() fields: GenericFieldDefinition[] = [];
 
+  @Input() filters: GenericFieldDefinition[] = [];
+
   @Input() title?: string;
 
   @Input() fulltextFieldName = 'searchField';
@@ -93,9 +101,9 @@ export class FilterComponent<T extends object>
 
   @Input() debounceTime?: number = DEFAULT_DEBOUNCE_TIME;
 
-  fieldDefinitios$?: Observable<GenericFieldDefinition[]>;
+  icons = Icons;
 
-  filledFiltersCount$?: Observable<string>;
+  fieldDefinitios$?: Observable<GenericFieldDefinition[]>;
 
   formGroup$?: Observable<FormGroup>;
 
@@ -107,11 +115,11 @@ export class FilterComponent<T extends object>
 
   private onTouch?: () => void;
 
-  private onChange?: (value: FilterValueType) => void;
+  private onChange?: (value: FilterValueType | undefined) => void;
 
   private inputFields$ = new BehaviorSubject<
     GenericFieldDefinition[] | undefined
-  >(this.fields);
+  >([...this.fields ?? [], ...this.filters ?? []]);
 
   FieldSize = FieldSize;
 
@@ -123,20 +131,27 @@ export class FilterComponent<T extends object>
 
   formGroup = new FormGroup({});
 
+  filledFiltersCount$: Observable<string> = this.formGroup.valueChanges.pipe(
+    startWith(this.formGroup),
+    map(() => getFilledControlCount(this.formGroup).toString())
+  );
+
   private lastFormFields: GenericFieldDefinition[] = [];
 
   ngOnInit(): void {
     this.formGroup.valueChanges
       .pipe(
         takeUntil(this.destroyed$),
-        debounceTime(this.debounceTime ?? DEFAULT_DEBOUNCE_TIME)
+        debounceTime(this.debounceTime ?? DEFAULT_DEBOUNCE_TIME),
+        map((x) => this.convertFilter(x)),
+        distinctUntilChanged()
       )
       .subscribe((value) => this.onChange?.(value));
   }
 
   ngOnChanges(changes: SimpleChanges): void {
-    if (changes['fields']) {
-      this.inputFields$.next(this.fields);
+    if (changes['fields'] || changes['filters']) {
+      this.inputFields$.next([...this.fields ?? [], ...this.filters ?? []]);
     }
   }
 
@@ -170,10 +185,6 @@ export class FilterComponent<T extends object>
       )
     );
 
-    this.filledFiltersCount$ = this.formGroup$.pipe(
-      map((formGroup: FormGroup) => getFilledControlCount(formGroup).toString())
-    );
-
     this.changeDetectorRef.detectChanges();
   }
 
@@ -181,7 +192,7 @@ export class FilterComponent<T extends object>
     const fields = this.lastFormFields.map((x) => ({
       ...x,
       label:
-        x.name === this.fulltextFieldName ? 'Full Text' : x.label || x.name,
+        x.name === this.fulltextFieldName ? 'Fulltext' : x.label ?? x.name,
     }));
 
     const formGroup = generateFormGroup(
@@ -192,7 +203,8 @@ export class FilterComponent<T extends object>
     );
     formGroup.patchValue(this.formGroup.value);
     this.dialogService.showDialog({
-      headerIcon: 'pi pi-filter',
+      title: 'Set filters',
+      headerIcon: this.icons.filter,
       severity: 'primary',
       componentType: GenericFormComponent,
       data: {
@@ -213,7 +225,7 @@ export class FilterComponent<T extends object>
     this.dialogService.showDialog({
       headerIcon: 'pi pi-search',
       severity: 'primary',
-      innerHTML: 'hovno',
+      innerHTML: '<p>Search</p>',
       confirmButtonFn: () => this.submitValue(),
       confirmButtonText: 'Apply',
       cancelButtonFn: () => this.clear(),
@@ -227,7 +239,7 @@ export class FilterComponent<T extends object>
     this.formGroup.patchValue(data);
   }
 
-  registerOnChange(fn: (value: FilterValueType) => void): void {
+  registerOnChange(fn: (value: FilterValueType | undefined) => void): void {
     this.onChange = fn;
   }
 
@@ -254,4 +266,19 @@ export class FilterComponent<T extends object>
     this.formGroup.reset();
     this.submitValue();
   }
+
+  private convertFilter(
+    value: FilterValueType | undefined
+  ): FilterValueType | undefined {
+    if (value == undefined) {
+      return undefined;
+    }
+
+    const isEmpty = isFilterEmpty(value);
+    if (isEmpty) {
+      return undefined;
+    }
+
+    return value;
+  }
 }

package/src/lib/components/shared-components/filter/filter.model.ts

@@ -0,0 +1,18 @@
+import { FormGroup } from '@angular/forms';
+
+export function getFilledControlCount(formGroup: FormGroup): number {
+  let count = 0;
+  Object.keys(formGroup.controls).forEach((key) => {
+    const control = formGroup.get(key);
+    if (control?.value) {
+      if (typeof control.value === 'boolean') {
+        count++;
+      }
+      if (typeof control.value === 'string' && control.value.trim() !== '') {
+        count++;
+      }
+    }
+  });
+
+  return count;
+}

package/src/lib/components/{filter → shared-components/filter}/index.ts

@@ -1,3 +1,2 @@
 export * from './filter.component';
-export * from './directives/table-filter.directive';
 export * from './directives/filter-field.directive';

package/src/lib/components/shared-components/generic-field/generic-field.component.html

@@ -0,0 +1,97 @@
+@if (!type || type === fieldTypes.text) {
+<v-textfield
+  [label]="label"
+  [floatLabel]="floatLabel === true"
+  [size]="size"
+  [formControl]="formControl"
+/>
+} @else if (type === fieldTypes.dropdown && !datasource) {
+<v-dropdown
+  [label]="!floatLabel ? label : ''"
+  [floatLabel]="floatLabel ? label : ''"
+  [testId]="testId"
+  [options]="options"
+  [optionLabel]="optionLabel"
+  [optionValue]="optionValue ?? optionLabel"
+  [loading]="loading"
+  [forceMinWidth]="true"
+  [formControl]="formControl"
+  [showFilter]="showFilter ?? false"
+  [localSearch]="localSearch ?? false"
+  (changeEvent)="changed.emit($event)"
+  (clearEvent)="cleared.emit($event)"
+  (lazyLoadEvent)="lazyLoad.emit($any($event))"
+  (showEvent)="showed.emit($event)"
+/> 
+} @else if (type === fieldTypes.dropdown && datasource) {
+  <v-dropdown
+    useDatasource
+    [forceMinWidth]="true"
+    [datasource]="datasource"
+    [optionLabel]="optionLabel"
+    [optionValue]="optionValue ?? optionLabel"
+    [label]="!floatLabel ? label : ''"
+    [floatLabel]="floatLabel ? label : ''"
+    [testId]="testId"
+    [loading]="loading"
+    [formControl]="formControl"
+    [showFilter]="showFilter ?? false"
+    [filterField]="filterField ?? 'fulltext'"
+    [localSearch]="localSearch ?? false"
+    (changeEvent)="changed.emit($event)"
+    (clearEvent)="cleared.emit($event)"
+    (lazyLoadEvent)="lazyLoad.emit($any($event))"
+    (showEvent)="showed.emit($event)"
+  />
+} @else if (type === fieldTypes.multiselect && !datasource) {
+<v-multiselect
+  [label]="!floatLabel ? label : ''"
+  [floatLabel]="floatLabel ? label : ''"
+  [testId]="testId"
+  [options]="options"
+  [optionLabel]="optionLabel"
+  [optionValue]="optionValue ?? optionLabel"
+  [loading]="loading"
+  [formControl]="formControl"
+  (changeEvent)="changed.emit($event)"
+  (clearEvent)="cleared.emit($event)"
+  (lazyLoadEvent)="lazyLoad.emit($any($event))"
+  (showEvent)="showed.emit($event)"
+/>
+} @else if (type === fieldTypes.multiselect && datasource) {
+<v-multiselect
+  useDatasource
+  [datasource]="datasource"
+  [optionLabel]="optionLabel"
+  [optionValue]="optionValue ?? optionLabel"
+  [label]="!floatLabel ? label : ''"
+  [floatLabel]="floatLabel ? label : ''"
+  [testId]="testId"
+  [loading]="loading"
+  [formControl]="formControl"
+  (changeEvent)="changed.emit($event)"
+  (clearEvent)="cleared.emit($event)"
+  (lazyLoadEvent)="lazyLoad.emit($any($event))"
+  (showEvent)="showed.emit($event)"
+/>
+} @else if (type === fieldTypes.checkbox) {
+<v-tristatecheckbox
+  [label]="label"
+  [testId]="testId"
+  [formControl]="formControl"
+/>
+} @else if (type === fieldTypes.simplecheckbox) {
+<v-checkbox
+  [label]="label"
+  [testId]="testId"
+  [formControl]="formControl"
+/>
+} @else if (type === fieldTypes.calendar) {
+<v-calendar
+  [label]="!floatLabel ? label : ''"
+  [floatLabel]="floatLabel ? label : ''"
+  [testId]="testId"
+  [formControl]="formControl"
+  [icon]="icons.calendar"
+/>
+}

package/src/lib/components/{generic-field → shared-components/generic-field}/generic-field.component.ts

@@ -1,3 +1,4 @@
+import { CommonModule } from '@angular/common';
 import {
   ChangeDetectionStrategy,
   Component,
@@ -7,34 +8,42 @@ import {
 } from '@angular/core';
 import { ReactiveFormsModule } from '@angular/forms';
 import {
+  DatasourceType,
   FilterEvent,
   LazyLoadEvent,
 } from '@verisoft/core';
 import {
   BaseFormInputComponent,
+  DatasourceDirective,
   FieldSize,
   FieldSizeType,
   GENERIC_FIELD_COMPONENT_TOKEN,
   GenericFieldCore,
+  GenericFieldType,
+  GenericFieldTypeType,
 } from '@verisoft/ui-core';
-import { CalendarComponent } from '../calendar/calendar.component';
-import { DropdownComponent } from '../dropdown';
-import { MultiselectComponent } from '../multiselect/multiselect.component';
-import { TextfieldComponent } from '../textfield/textfield.component';
-import { TristatecheckboxComponent } from '../tristatecheckbox';
-import { GenericFieldType, GenericFieldTypeType } from './generic-field.model';
+import { Icons } from '../../../icons';
+import { CalendarComponent } from '../../calendar';
+import { CheckboxComponent } from '../../checkbox';
+import { DropdownComponent } from '../../dropdown';
+import { MultiselectComponent } from '../../multiselect';
+import { TextfieldComponent } from '../../textfield';
+import { TristatecheckboxComponent } from '../../tristatecheckbox';
 
 @Component({
   selector: 'v-generic-field',
   standalone: true,
   imports: [
+    CommonModule,
     DropdownComponent,
     CalendarComponent,
     TristatecheckboxComponent,
     MultiselectComponent,
     TextfieldComponent,
     ReactiveFormsModule,
-  ],
+    CheckboxComponent,
+    DatasourceDirective,
+],
   providers: [
     {
       provide: GENERIC_FIELD_COMPONENT_TOKEN,
@@ -52,11 +61,11 @@ export class GenericFieldComponent<T>
 
   @Input() floatLabel?: boolean;
 
-  @Input() optionLabel?: string;
+  @Input() optionLabel: string | undefined;
 
-  @Input() optionValue?: string;
+  @Input() optionValue: string | undefined;
 
-  @Input() options?: T[];
+  @Input() options: T[] | undefined;
 
   @Input() size?: FieldSizeType = FieldSize.medium;
 
@@ -66,6 +75,14 @@ export class GenericFieldComponent<T>
 
   @Input() filter = true;
 
+  @Input() datasource?: DatasourceType<T>
+
+  @Input() filterField?: string;
+
+  @Input() showFilter?: boolean;
+
+  @Input() localSearch?: boolean;
+
   @Output() changed = new EventEmitter<any>();
   @Output() showed = new EventEmitter<any>();
   @Output() cleared = new EventEmitter<any>();
@@ -73,4 +90,5 @@ export class GenericFieldComponent<T>
   @Output() filtered = new EventEmitter<FilterEvent>();
 
   fieldTypes = GenericFieldType;
+  icons = Icons;
 }

package/src/lib/components/{generic-field → shared-components/generic-field}/index.ts

@@ -1,2 +1 @@
 export * from './generic-field.component';
-export * from './generic-field.model';

package/src/lib/components/shared-components/generic-form/generic-form.component.html

@@ -0,0 +1,46 @@
+@if (formGroupComputed) {
+  <div
+    class="v-generic-form"
+    [ngClass]="showAsRow ? 'd-flex flex-row' : 'row'"
+    [formGroup]="formGroupComputed"
+  >
+    @for(field of fields; track field) { @if (columnClass) {
+    <div class="v-generic-form__column {{ columnClass }}">
+      <v-generic-field
+        [type]="field.type"
+        [label]="field.label ?? 'NOT SET' | translate"
+        [floatLabel]="field.floatLabel"
+        [testId]="field.testId"
+        [options]="field.options"
+        [optionLabel]="field.optionLabel"
+        [optionValue]="field.optionValue ?? field.optionLabel"
+        [options]="field.options"
+        [size]="field.size"
+        [formControlName]="field.name"
+        [datasource]="field.datasource"
+        [showFilter]="field.showFilter"
+        [filterField]="field.filterField"
+        [localSearch]="field.localSearch"
+      ></v-generic-field>
+    </div>
+    } @else {
+    <v-generic-field
+      class="me-4"
+      [type]="field.type"
+      [label]="field.label ?? 'NOT SET' | translate"
+      [floatLabel]="field.floatLabel"
+      [testId]="field.testId"
+      [options]="field.options"
+      [optionLabel]="field.optionLabel"
+      [optionValue]="field.optionValue ?? field.optionLabel"
+      [options]="field.options"
+      [size]="field.size"
+      [formControlName]="field.name"
+      [datasource]="field.datasource"
+      [showFilter]="field.showFilter"
+      [filterField]="field.filterField"
+      [localSearch]="field.localSearch"
+    ></v-generic-field>
+    } }
+  </div>
+  }

package/src/lib/components/{generic-form → shared-components/generic-form}/generic-form.component.ts

@@ -1,3 +1,4 @@
+import { CommonModule } from '@angular/common';
 import {
   ChangeDetectionStrategy,
   Component,
@@ -6,17 +7,23 @@ import {
   SimpleChanges,
 } from '@angular/core';
 import { ReactiveFormsModule, UntypedFormGroup } from '@angular/forms';
+import { TranslateModule } from '@ngx-translate/core';
+import { GenericFieldDefinition } from '@verisoft/ui-core';
 import { GenericFieldComponent } from '../generic-field';
 import {
   generateFormGroup,
-  GenericFieldDefinition,
   getColumnClass,
 } from './generic-form.model';
 
 @Component({
   selector: 'v-generic-form',
   standalone: true,
-  imports: [GenericFieldComponent, ReactiveFormsModule],
+  imports: [
+    CommonModule,
+    GenericFieldComponent,
+    ReactiveFormsModule,
+    TranslateModule,
+  ],
   templateUrl: './generic-form.component.html',
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
@@ -27,6 +34,8 @@ export class GenericFormComponent implements OnChanges {
 
   @Input() columns?: number;
 
+  @Input() showAsRow!: boolean;
+
   formGroupComputed!: UntypedFormGroup;
 
   columnClass?: string;

package/src/lib/components/{generic-form → shared-components/generic-form}/generic-form.model.ts

@@ -1,24 +1,8 @@
 import {
   UntypedFormControl,
   UntypedFormGroup,
-  ValidatorFn,
 } from '@angular/forms';
-import { FieldSizeType } from '@verisoft/ui-core';
-import { GenericFieldTypeType } from '../generic-field';
-
-export interface GenericFieldDefinition {
-  validator?: ValidatorFn[];
-  type?: GenericFieldTypeType;
-  label?: string;
-  floatLabel?: boolean;
-  name: string;
-  optionLabel?: string;
-  optionValue?: string;
-  options?: unknown[];
-  value?: unknown;
-  testId?: string;
-  size?: FieldSizeType;
-}
+import { GenericFieldDefinition } from '@verisoft/ui-core';
 
 export function generateFormGroup(
   fields: GenericFieldDefinition[] | undefined,
@@ -38,9 +22,17 @@ export function generateFormGroup(
         field.name,
         new UntypedFormControl(field.value, field.validator)
       );
-    } else {
+    } else if (control && control.value !== field.value) {
+      control.setValue(field.value);
+      control.setValidators(field.validator ?? null);
+    }
+    else {
       control.setValidators(field.validator ?? null);
     }
+
+    if (field.readonly && (control || formGroup.get(field.name))) {
+      formGroup.get(field.name)?.disable();
+    }
   });
   if (!inputGroupChanged) {
     for (const field in formGroup.controls) {
@@ -71,6 +63,6 @@ export function getColumnClass(value?: number): string | undefined {
     case 6:
       return 'col-12 col-md-2';
   }
-  
+
   return 'col-12 col-md-1';
 }

package/src/lib/components/shared-components/index.ts

@@ -0,0 +1,6 @@
+export * from './action-button-group';
+export * from './filter';
+export * from './feature-list';
+export * from './generic-field';
+export * from './generic-form';
+export * from './dynamic-component';

package/src/lib/components/side-menu/side-menu.component.html

@@ -16,16 +16,14 @@
     </ng-container>
     <div
       [ngClass]="{
-        'v-side-menu-body__mobile':
-          screenSizeService.isMobileBlock | async,
-        'v-side-menu-body':
-          (screenSizeService.isMobileBlock | async) === false
+        'v-side-menu-body__mobile': screenSizeService.isMobileBlock | async,
+        'v-side-menu-body': (screenSizeService.isMobileBlock | async) === false
       }"
       class="text-center"
     >
       <p-tree
         selectionMode="single"
-        [value]="menuService.menuItems$ | async"
+        [value]="items"
         (onNodeExpand)="onSelectionChange($event)"
         (onNodeCollapse)="onSelectionChange($event)"
         (onNodeSelect)="onNodeSelect($event)"
@@ -36,13 +34,12 @@
       class="text-center py-3 d-flex justify-content-end flex-column support"
     >
       <hr class="mx-4 divider" />
-      <p-button
+      <v-button
         class="support-button"
-        label="Support"
-        [text]="true"
+        [label]="isMinimalized ? undefined : 'Support'"
         severity="primary"
-        icon="pi pi-question-circle"
-      ></p-button>
+        [icon]="icons.questionCircle"
+      ></v-button>
     </div>
   </div>
   <div

package/src/lib/components/side-menu/side-menu.component.ts

@@ -12,11 +12,11 @@ import {
 } from '@angular/core';
 import { Router, RouterModule } from '@angular/router';
 import { TranslateModule } from '@ngx-translate/core';
-import { ISideMenu, MenuItem, SideMenuService, UnsubscribeComponent } from '@verisoft/ui-core';
+import { MenuItem, ScreenSizeService, SideMenuCore, SideMenuService, UnsubscribeComponent } from '@verisoft/ui-core';
 import { AvatarModule } from 'primeng/avatar';
-import { ButtonModule } from 'primeng/button';
 import { TreeModule, TreeNodeSelectEvent } from 'primeng/tree';
-import { ScreenSizeService } from '../../services/screen-size.service';
+import { Icons } from '../../icons';
+import { ButtonComponent } from '../button';
 
 @Component({
   selector: 'v-side-menu',
@@ -26,7 +26,7 @@ import { ScreenSizeService } from '../../services/screen-size.service';
     AsyncPipe,
     NgIf,
     TreeModule,
-    ButtonModule,
+    ButtonComponent,
     TranslateModule,
     AvatarModule,
     RouterModule,
@@ -37,9 +37,9 @@ import { ScreenSizeService } from '../../services/screen-size.service';
 })
 export class SideMenuComponent
   extends UnsubscribeComponent
-  implements ISideMenu, AfterContentInit
+  implements SideMenuCore, AfterContentInit
 {
-  @Input() item: MenuItem[] = [];
+  @Input() items: MenuItem[] = [];
   @Input() logoUrl = '';
   @Input() userName!: string;
   @Input() userRole!: any | any[] | undefined;
@@ -50,6 +50,7 @@ export class SideMenuComponent
 
   menuService = inject(SideMenuService);
   router = inject(Router);
+  icons = Icons;
 
   protected screenSizeService = inject(ScreenSizeService);
   protected logoRouterLink!: string;

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

@@ -4,7 +4,6 @@
     [label]="label"
     [tooltip]="tooltip"
     [required]="isRequired()"
-    [ngControl]="ngControl"
     [testId]="testId"
   >
     <p-slider
@@ -15,5 +14,6 @@
       [min]="min"
       [max]="max"
     />
+    <v-validation-message [ngControl]="ngControl"></v-validation-message>
   </v-form-field>
-</div>
+</div>

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

@@ -14,6 +14,7 @@ import {
 } from '@angular/forms';
 import { BaseFormInputComponent, BaseInputControls, SLIDER_COMPONENT_TOKEN, SliderCore } from '@verisoft/ui-core';
 import { SliderModule } from 'primeng/slider';
+import { ErrorComponent } from '../errors';
 import { FormFieldComponent } from '../form-field';
 
 @Component({
@@ -24,6 +25,7 @@ import { FormFieldComponent } from '../form-field';
     SliderModule,
     ReactiveFormsModule,
     FormFieldComponent,
+    ErrorComponent
   ],
   templateUrl: './slider.component.html',
   changeDetection: ChangeDetectionStrategy.OnPush,