@verisoft/ui-govcz 20.1.0 → 20.1.1

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

@@ -0,0 +1,90 @@
+
+import {
+  ChangeDetectionStrategy,
+  Component,
+  EventEmitter,
+  Input,
+  Output,
+} 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 { Icons } from '../../../icons';
+import { CalendarComponent } from '../../calendar';
+import { CheckboxComponent } from '../../checkbox';
+import { DropdownComponent } from '../../dropdown';
+import { MultiselectComponent } from '../../multiselect';
+import { TextfieldComponent } from '../../textfield';
+
+@Component({
+    selector: 'v-generic-field',
+    imports: [
+    DropdownComponent,
+    CalendarComponent,
+    MultiselectComponent,
+    TextfieldComponent,
+    ReactiveFormsModule,
+    CheckboxComponent,
+    DatasourceDirective
+],
+    providers: [
+        {
+            provide: GENERIC_FIELD_COMPONENT_TOKEN,
+            useExisting: GenericFieldComponent,
+        },
+    ],
+    templateUrl: './generic-field.component.html',
+    changeDetection: ChangeDetectionStrategy.OnPush
+})
+export class GenericFieldComponent<T>
+  extends BaseFormInputComponent
+  implements GenericFieldCore<T>
+{
+  @Input() type?: GenericFieldTypeType = GenericFieldType.text;
+
+  @Input() floatLabel?: boolean;
+
+  @Input() optionLabel: string | undefined;
+
+  @Input() optionValue: string | undefined;
+
+  @Input() options: T[] | undefined;
+
+  @Input() size?: FieldSizeType = FieldSize.medium;
+
+  @Input() loading = false;
+
+  @Input() lazy = false;
+
+  @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>();
+  @Output() lazyLoad = new EventEmitter<LazyLoadEvent>();
+  @Output() filtered = new EventEmitter<FilterEvent>();
+
+  fieldTypes = GenericFieldType;
+  icons = Icons;
+}

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

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

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/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';