@verisoft/ui-primeng 18.6.0 → 18.7.0

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/{lib/components/shared-components/generic-form/index.d.ts → src/lib/components/shared-components/generic-form/index.ts}

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

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

@@ -1,6 +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';
+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/{lib/components/side-menu/index.d.ts → src/lib/components/side-menu/index.ts}

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

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

@@ -0,0 +1,52 @@
+<div class="v-side-menu" #sidemenu>
+  <div
+    [ngClass]="
+      (screenSizeService.isMobileBlock | async)
+        ? 'v-side-menu-container__mobile'
+        : 'v-side-menu-container'
+    "
+  >
+    <ng-container *ngIf="(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>
+    </ng-container>
+    <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>
+  <div
+    *ngIf="(screenSizeService.isMobileBlock | async) === false"
+    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,98 @@
+import { AsyncPipe, NgClass, NgIf } 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',
+  standalone: true,
+  imports: [
+    NgClass,
+    AsyncPipe,
+    NgIf,
+    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/{lib/components/slider/index.d.ts → src/lib/components/slider/index.ts}

@@ -1 +1 @@
-export * from './slider.component';
+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,58 @@
+import { CommonModule } from '@angular/common';
+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',
+  standalone: true,
+  imports: [
+    CommonModule,
+    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/{lib/components/snackbar/index.d.ts → src/lib/components/snackbar/index.ts}

@@ -1,2 +1,2 @@
-export * from './services/snackbar.service';
-export * from './snackbar.component';
+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();
+  });
+});

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

@@ -0,0 +1,70 @@
+import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
+import { ActivatedRoute } from '@angular/router';
+import { moduleMetadata, type Meta, type StoryObj } from '@storybook/angular';
+import { MessageService } from 'primeng/api';
+import { ToastModule } from 'primeng/toast';
+import { ButtonComponent } from '../button/button.component';
+import { SnackbarService } from './services/snackbar.service';
+import { SnackbarComponent } from './snackbar.component';
+
+const meta: Meta<SnackbarComponent> = {
+  component: SnackbarComponent,
+  title: 'SnackbarComponent',
+  decorators: [
+    moduleMetadata({
+      imports: [ButtonComponent, BrowserAnimationsModule, ToastModule],
+      providers: [
+        MessageService,
+        SnackbarService,
+        {
+          provide: ActivatedRoute,
+          useValue: {},
+        },
+      ],
+    }),
+  ],
+};
+
+export default meta;
+type Story = StoryObj<SnackbarComponent>;
+const messageService = new MessageService();
+const snackbarService = new SnackbarService(messageService);
+
+export const Primary: Story = {
+  render: () => {
+    return {
+      props: {
+        showSuccess: () => snackbarService.showSuccess('Snackbar works!'),
+        showInfo: () => snackbarService.showInfo('Snackbar works!'),
+        showWarn: () => snackbarService.showWarn('Snackbar works!'),
+        showError: () => snackbarService.showError('Snackbar works!'),
+      },
+      template: `
+      <v-snackbar class="mt-2" />
+        <div class="d-flex gap-3 mt-2">
+          <v-button
+            label="Show Success"
+            severity="success"
+            (click)='showSuccess()'
+          ></v-button>
+          <v-button
+            label="Show Info"
+            severity="info"
+            (click)='showInfo()'
+          ></v-button>
+          <v-button
+            label="Show Warn"
+            severity="warn"
+            (click)='showWarn()'
+          ></v-button>
+          <v-button
+            label="Show Error"
+            severity="danger"
+            (click)='showError()'
+          ></v-button>
+        </div>
+      `,
+    };
+  },
+  args: {},
+};