@verisoft/ui-primeng 20.0.0 → 20.1.0

package/src/lib/components/shared-components/generic-form/generic-form.component.spec.ts

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

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

@@ -0,0 +1,56 @@
+import { CommonModule } from '@angular/common';
+import {
+  ChangeDetectionStrategy,
+  Component,
+  Input,
+  OnChanges,
+  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,
+  getColumnClass,
+} from './generic-form.model';
+
+@Component({
+    selector: 'v-generic-form',
+    imports: [
+        CommonModule,
+        GenericFieldComponent,
+        ReactiveFormsModule,
+        TranslateModule,
+    ],
+    templateUrl: './generic-form.component.html',
+    changeDetection: ChangeDetectionStrategy.OnPush
+})
+export class GenericFormComponent implements OnChanges {
+  @Input() formGroup?: UntypedFormGroup;
+
+  @Input() fields?: GenericFieldDefinition[];
+
+  @Input() columns?: number;
+
+  @Input() showAsRow!: boolean;
+
+  formGroupComputed!: UntypedFormGroup;
+
+  columnClass?: string;
+
+  ngOnChanges(changes: SimpleChanges): void {
+    if (changes['fields'] || changes['formGroup']) {
+      this.formGroupComputed = generateFormGroup(
+        this.fields,
+        this.formGroupComputed,
+        this.formGroup,
+        !!changes['formGroup']
+      );
+    }
+
+    if (changes['columns']) {
+      this.columnClass = getColumnClass(this.columns);
+    }
+  }
+}

package/src/lib/components/shared-components/generic-form/generic-form.model.spec.ts

@@ -0,0 +1,82 @@
+import { UntypedFormControl, UntypedFormGroup } from '@angular/forms';
+import { generateFormGroup, GenericFieldDefinition } from './generic-form.model';
+
+describe('GenericFormModel', () => {
+  describe('generateFormGroup', () => {
+    const fields = [{ name: 'name' }, { name: 'age' }];
+
+    const containsField = (formGroup: UntypedFormGroup, field: GenericFieldDefinition) => expect(formGroup.get(field.name)).toBeDefined();
+
+    test('Should create a new group when no group was provided', () => {
+      const formGroup = generateFormGroup([], undefined, undefined, false);
+
+      expect(formGroup).toBeDefined();
+    });
+
+    test('Should create a new group when no fields are provided', () => {
+      const formGroup = generateFormGroup(
+        undefined,
+        undefined,
+        undefined,
+        false
+      );
+
+      expect(formGroup).toBeDefined();
+    });
+
+    test('Should create a new group with defined control when fields are provided', () => {
+      const formGroup = generateFormGroup(fields, undefined, undefined, false);
+
+      expect(formGroup).toBeDefined();
+      containsField(formGroup, fields[0]);
+      containsField(formGroup, fields[1]);
+    });
+
+    test('Should used input group and creates control when fields are provided and formgroup does not have a controls', () => {
+      const inputGroup = new UntypedFormGroup({});
+
+      const formGroup = generateFormGroup(fields, undefined, inputGroup, false);
+
+      expect(formGroup).toBe(inputGroup);
+      containsField(formGroup, fields[0]);
+    });
+
+    test('Should not remove control from input group when input group is provided and fields does not contain control definition.', () => {
+      const inputGroup = new UntypedFormGroup({
+        student: new UntypedFormControl(),
+      });
+
+      const formGroup = generateFormGroup(fields, undefined, inputGroup, false);
+
+      expect(formGroup.get('student')).toBeDefined();
+    });
+
+    test('Should use existing group when input group is provided but have already defined group.', () => {
+      const inputGroup = new UntypedFormGroup({
+        student: new UntypedFormControl(),
+      });
+
+      const lastGroup = new UntypedFormGroup({
+      });
+
+      const formGroup = generateFormGroup(fields, lastGroup, inputGroup, false);
+
+      expect(formGroup).toBe(lastGroup);
+      containsField(formGroup, fields[0]);
+    });
+
+    test('Should use existing a new input group when last form group exists, but input group was changed.', () => {
+      const inputGroup = new UntypedFormGroup({
+        student: new UntypedFormControl(),
+      });
+
+      const lastGroup = new UntypedFormGroup({
+      });
+
+      const formGroup = generateFormGroup(fields, lastGroup, inputGroup, true);
+
+      expect(formGroup).toBe(inputGroup);
+      containsField(formGroup, fields[0]);
+    });
+  });
+});

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

@@ -0,0 +1,68 @@
+import {
+  UntypedFormControl,
+  UntypedFormGroup,
+} from '@angular/forms';
+import { GenericFieldDefinition } from '@verisoft/ui-core';
+
+export function generateFormGroup(
+  fields: GenericFieldDefinition[] | undefined,
+  lastGroupValue: UntypedFormGroup | undefined,
+  inputGroup: UntypedFormGroup | undefined,
+  inputGroupChanged = false
+): UntypedFormGroup {
+  const formGroup =
+    (inputGroupChanged
+      ? inputGroup ?? lastGroupValue
+      : lastGroupValue ?? inputGroup) ?? new UntypedFormGroup({});
+
+  fields?.forEach((field) => {
+    const control = formGroup.get(field.name);
+    if (!control) {
+      formGroup.addControl(
+        field.name,
+        new UntypedFormControl(field.value, field.validator)
+      );
+    } 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) {
+      const control = fields?.find((x) => x.name == field);
+      if (!control) {
+        formGroup.removeControl(field);
+      }
+    }
+  }
+
+  return formGroup;
+}
+
+export function getColumnClass(value?: number): string | undefined {
+  if (!value) {
+    return undefined;
+  }
+
+  switch (value) {
+    case 1:
+      return 'col-12';
+    case 2:
+      return 'col-12 col-md-6';
+    case 3:
+      return 'col-12 col-md-4';
+    case 4:
+      return 'col-12 col-md-3';
+    case 6:
+      return 'col-12 col-md-2';
+  }
+
+  return 'col-12 col-md-1';
+}

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

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

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

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

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

@@ -0,0 +1,2 @@
+export * from './side-menu.module';
+export * from './side-menu.component';

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

@@ -0,0 +1,53 @@
+<div class="v-side-menu" #sidemenu>
+  <div
+    [ngClass]="
+      (screenSizeService.isMobileBlock | async)
+        ? 'v-side-menu-container__mobile'
+        : 'v-side-menu-container'
+    "
+    >
+    @if ((screenSizeService.isMobileBlock | async) === false) {
+      <div class="v-side-menu-header pb-3 text-center">
+        <div class="logo" [routerLink]="[logoRouterLink]">
+          <img [src]="logoUrl" alt="" />
+        </div>
+        <hr />
+      </div>
+    }
+    <div
+      [ngClass]="{
+        'v-side-menu-body__mobile': screenSizeService.isMobileBlock | async,
+        'v-side-menu-body': (screenSizeService.isMobileBlock | async) === false
+      }"
+      class="text-center"
+      >
+      <p-tree
+        selectionMode="single"
+        [value]="items"
+        (onNodeExpand)="onSelectionChange($event)"
+        (onNodeCollapse)="onSelectionChange($event)"
+        (onNodeSelect)="onNodeSelect($event)"
+        >
+      </p-tree>
+    </div>
+    <div
+      class="text-center py-3 d-flex justify-content-end flex-column support"
+      >
+      <hr class="mx-4 divider" />
+      <v-button
+        class="support-button"
+        [label]="isMinimalized ? undefined : 'Support'"
+        severity="primary"
+        [icon]="icons.questionCircle"
+      ></v-button>
+    </div>
+  </div>
+  @if ((screenSizeService.isMobileBlock | async) === false) {
+    <div
+      class="close-button"
+      (click)="menuMinimalize(sidemenu)"
+      >
+      <i class="pi pi-chevron-left text-white close-icon"></i>
+    </div>
+  }
+</div>

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

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

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

@@ -0,0 +1,96 @@
+import { AsyncPipe, NgClass } from '@angular/common';
+import {
+  AfterContentInit,
+  ChangeDetectionStrategy,
+  Component,
+  ElementRef,
+  EventEmitter,
+  inject,
+  Input,
+  Output,
+  ViewChild,
+} from '@angular/core';
+import { Router, RouterModule } from '@angular/router';
+import { TranslateModule } from '@ngx-translate/core';
+import { MenuItem, ScreenSizeService, SideMenuCore, SideMenuService, UnsubscribeComponent } from '@verisoft/ui-core';
+import { AvatarModule } from 'primeng/avatar';
+import { TreeModule, TreeNodeSelectEvent } from 'primeng/tree';
+import { Icons } from '../../icons';
+import { ButtonComponent } from '../button';
+
+@Component({
+    selector: 'v-side-menu',
+    imports: [
+    NgClass,
+    AsyncPipe,
+    TreeModule,
+    ButtonComponent,
+    TranslateModule,
+    AvatarModule,
+    RouterModule
+],
+    templateUrl: './side-menu.component.html',
+    styleUrl: './side-menu.component.scss',
+    changeDetection: ChangeDetectionStrategy.OnPush
+})
+export class SideMenuComponent
+  extends UnsubscribeComponent
+  implements SideMenuCore, AfterContentInit
+{
+  @Input() items: MenuItem[] = [];
+  @Input() logoUrl = '';
+  @Input() userName!: string;
+  @Input() userRole!: any | any[] | undefined;
+  @Output() minimalized = new EventEmitter<boolean>();
+  @Output() itemSelected = new EventEmitter<MenuItem>();
+  
+  @ViewChild ('sidemenu', { static: true }) menu!: ElementRef<HTMLDivElement>;
+
+  menuService = inject(SideMenuService);
+  router = inject(Router);
+  icons = Icons;
+
+  protected screenSizeService = inject(ScreenSizeService);
+  protected logoRouterLink!: string;
+  protected isMinimalized = false;
+
+  ngAfterContentInit(): void {
+    if (this.menuService.menuMinimalized) {
+      this.setMenuMinimalized(this.menu);
+    }
+  }
+  
+  protected menuMinimalize(menu: HTMLDivElement): void {
+    const audit = document.getElementsByClassName('detail-audit');
+    if (audit.length > 0) {
+      audit.item(0)?.classList.toggle('menu-close__audit');
+    }
+    if (menu) {
+      menu.classList.toggle('menu-closed');
+      this.isMinimalized = menu.classList.contains('menu-closed');
+      this.menuService.saveMinimalizedState(this.isMinimalized);
+      this.minimalized.emit(this.isMinimalized);
+    }
+  }
+
+  onSelectionChange(event: any) {
+    const item = event.node;
+    if (item.label) {
+      this.menuService.saveExpandedState(item);
+    }
+  }
+
+  onNodeSelect(event: TreeNodeSelectEvent): void {
+    const item = event.node as MenuItem;
+    if (item.url) {
+      this.router.navigateByUrl(item.url);
+    }
+  }
+
+  private setMenuMinimalized(menu: ElementRef<HTMLDivElement>): void {
+    if(menu) {
+      menu.nativeElement.classList.add("menu-closed");
+      this.minimalized.emit(true);
+    }
+  }
+}

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

@@ -0,0 +1,66 @@
+import { NgModule, ModuleWithProviders } from '@angular/core';
+import {
+  MENU_TOKEN,
+  MenuItem,
+  SIDE_MENU_COMPONENT_TOKEN,
+  SIDE_MENU_STATE_TOKEN,
+  SideMenuModuleConfig,
+  SideMenuProviderService,
+  UnsubscribeComponent,
+} from '@verisoft/ui-core';
+import { SideMenuComponent } from './side-menu.component';
+
+@NgModule({
+  imports: [SideMenuComponent],
+  exports: [SideMenuComponent],
+  providers: [
+    SideMenuProviderService,
+    {
+      provide: SIDE_MENU_COMPONENT_TOKEN,
+      useExisting: SideMenuComponent,
+    },
+    {
+      provide: SIDE_MENU_STATE_TOKEN,
+      useValue: localStorage.getItem('SideMenuStateToken') ?? {
+        expanded: [],
+        minimalized: false,
+      },
+    },
+  ],
+})
+export class SideMenuModule extends UnsubscribeComponent {
+  constructor(private readonly service: SideMenuProviderService) {
+    super();
+  }
+
+  static forRoot(
+    config?: SideMenuModuleConfig
+  ): ModuleWithProviders<SideMenuModule> {
+    const moduleWithProvider: ModuleWithProviders<SideMenuModule> = {
+      ngModule: SideMenuModule,
+    };
+
+    if (config?.items) {
+      moduleWithProvider.providers = [
+        {
+          provide: MENU_TOKEN,
+          useValue: config.items,
+        },
+      ];
+    }
+
+    return moduleWithProvider;
+  }
+
+  static forChild(menu: MenuItem[]): ModuleWithProviders<SideMenuModule> {
+    return {
+      ngModule: SideMenuModule,
+      providers: [
+        {
+          provide: MENU_TOKEN,
+          useValue: menu,
+        },
+      ],
+    };
+  }
+}

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

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

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

@@ -0,0 +1,19 @@
+<div class="v-slider">
+  <v-form-field
+    class="w-100"
+    [label]="label"
+    [tooltip]="tooltip"
+    [required]="isRequired()"
+    [testId]="testId"
+  >
+    <p-slider
+      class="w-100"
+      [formControl]="formControl"
+      [step]="step"
+      [range]="range"
+      [min]="min"
+      [max]="max"
+    />
+    <v-validation-message [ngControl]="ngControl"></v-validation-message>
+  </v-form-field>
+</div>

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

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

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

@@ -0,0 +1,56 @@
+
+import {
+  ChangeDetectionStrategy,
+  Component,
+  forwardRef,
+  Input,
+  Optional,
+  Self,
+} from '@angular/core';
+import {
+  ControlValueAccessor,
+  NgControl,
+  ReactiveFormsModule,
+} 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({
+    selector: 'v-slider',
+    imports: [
+    SliderModule,
+    ReactiveFormsModule,
+    FormFieldComponent,
+    ErrorComponent
+],
+    templateUrl: './slider.component.html',
+    changeDetection: ChangeDetectionStrategy.OnPush,
+    providers: [
+        {
+            provide: BaseInputControls,
+            useExisting: forwardRef(() => SliderComponent),
+        },
+        {
+            provide: SLIDER_COMPONENT_TOKEN,
+            useExisting: SliderComponent,
+        },
+    ]
+})
+export class SliderComponent
+  extends BaseFormInputComponent
+  implements ControlValueAccessor, SliderCore
+{
+  @Input() step = 1;
+
+  @Input() min = 0;
+
+  @Input() max = 100;
+
+  @Input() range = false;
+
+  constructor(@Optional() @Self() ngControl: NgControl) {
+    super(ngControl);
+  }
+}

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

@@ -0,0 +1,2 @@
+export * from './services/snackbar.service';
+export * from './snackbar.component';

package/src/lib/components/snackbar/services/snackbar.service.ts

@@ -0,0 +1,45 @@
+import { Injectable } from '@angular/core';
+import { MessageService } from 'primeng/api';
+
+@Injectable({
+  providedIn: 'root',
+})
+export class SnackbarService {
+  constructor(readonly messageService: MessageService) {}
+
+  showSuccess(message: string, icon?: string) {
+    this.messageService.add({
+      severity: 'success',
+      summary: 'Success',
+      detail: message,
+      icon: icon,
+    });
+  }
+
+  showInfo(message: string, icon?: string) {
+    this.messageService.add({
+      severity: 'info',
+      summary: 'Info',
+      detail: message,
+      icon: icon,
+    });
+  }
+
+  showWarn(message: string, icon?: string) {
+    this.messageService.add({
+      severity: 'warn',
+      summary: 'Warn',
+      detail: message,
+      icon: icon,
+    });
+  }
+
+  showError(message: string, icon?: string) {
+    this.messageService.add({
+      severity: 'error',
+      summary: 'Error',
+      detail: message,
+      icon: icon,
+    });
+  }
+}

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

@@ -0,0 +1,3 @@
+<div class="v-snackbar">
+    <p-toast />
+</div>

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

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