feat(dynamic-form): adiciona escolha entre po-switch ou po-checkbox

O usuário pode escolher entre um `po-checkbox` ou um `po-switch` para exibição dentro de um `po-dynamic-form`. Fixes #1420, DTHFUI-5286
po-ui · Nov 17, 2023 · 1b91e50 · 1b91e50
1 parent cbb93e8
commit 1b91e50
Show file tree

Hide file tree

Showing 7 changed files with 73 additions and 9 deletions.
diff --git a/projects/ui/src/lib/components/po-dynamic/po-dynamic-field-force-component.enum.ts b/projects/ui/src/lib/components/po-dynamic/po-dynamic-field-force-component.enum.ts
@@ -1,3 +1,18 @@
+/**
+ * @usedBy PoDynamicFormComponent
+ *
+ * @description
+ *
+ * Enum para definição do tipo de componente a ser renderizado.
+ */
+export enum ForceBooleanComponentEnum {
+  /** Força a renderização de um po-switch */
+  switch = 'switch',
+
+  /** Força a renderização de um po-checkbox */
+  checkbox = 'checkbox'
+}
+
 /**
  * @usedBy PoDynamicFormComponent
  *

diff --git a/projects/ui/src/lib/components/po-dynamic/po-dynamic-form/po-dynamic-form-field.interface.ts b/projects/ui/src/lib/components/po-dynamic/po-dynamic-form/po-dynamic-form-field.interface.ts
@@ -17,7 +17,7 @@ import { PoLookupAdvancedFilter } from '../../po-field/po-lookup/interfaces/po-l
 import { PoLookupColumn } from '../../po-field/po-lookup/interfaces/po-lookup-column.interface';
 import { PoMultiselectOption } from '../../po-field/po-multiselect/po-multiselect-option.interface';
 import { PoSelectOption } from '../../po-field/po-select/po-select-option.interface';
-import { ForceOptionComponentEnum } from '../po-dynamic-field-force-component.enum';
+import { ForceBooleanComponentEnum, ForceOptionComponentEnum } from '../po-dynamic-field-force-component.enum';
 
 import { PoDynamicField } from '../po-dynamic-field.interface';
 
@@ -507,6 +507,15 @@ export interface PoDynamicFormField extends PoDynamicField {
    * `url + ?page=1&pageSize=20&name=Tony%20Stark,Peter%20Parker,Gohan`
    */
   advancedFilters?: Array<PoLookupAdvancedFilter>;
+
+  /**
+   * Valores aceitos:
+   * - ForceBooleanComponentEnum.switch
+   * - ForceBooleanComponentEnum.checkbox
+   *
+   */
+  forceBooleanComponentType?: ForceBooleanComponentEnum;
+
   /**
    * pode ser utilizada em conjunto com a propriedade `options` forçando o componente a renderizar um `po-select` ou `po-radio-group`.
    *

diff --git a/...amic/po-dynamic-form/po-dynamic-form-fields/po-dynamic-form-fields-base.component.spec.ts b/...amic/po-dynamic-form/po-dynamic-form-fields/po-dynamic-form-fields-base.component.spec.ts
@@ -7,7 +7,7 @@ import * as PoDynamicUtil from '../../po-dynamic.util';
 import { PoDynamicFieldType } from '../../po-dynamic-field-type.enum';
 import { PoDynamicFormFieldsBaseComponent } from './po-dynamic-form-fields-base.component';
 import { PoDynamicFormField } from '../po-dynamic-form-field.interface';
-import { ForceOptionComponentEnum } from '../../po-dynamic-field-force-component.enum';
+import { ForceBooleanComponentEnum, ForceOptionComponentEnum } from '../../po-dynamic-field-force-component.enum';
 
 describe('PoDynamicFormFieldsBaseComponent:', () => {
   let component: PoDynamicFormFieldsBaseComponent;
@@ -629,6 +629,16 @@ describe('PoDynamicFormFieldsBaseComponent:', () => {
         expect(component['getComponentControl'](field)).toBe(expectedValue);
       });
 
+      it('should return checkbox if `forceBooleanComponentType` is checkbox', () => {
+        const expectedValue = ForceBooleanComponentEnum.checkbox;
+        const field: PoDynamicFormField = {
+          property: 'test',
+          forceBooleanComponentType: ForceBooleanComponentEnum.checkbox
+        };
+
+        expect(component['getComponentControl'](field)).toBe(expectedValue);
+      });
+
       it('should return select if `forceOptionsComponentType` is select', () => {
         const expectedValue = ForceOptionComponentEnum.select;
         const field: PoDynamicFormField = {
@@ -650,10 +660,10 @@ describe('PoDynamicFormFieldsBaseComponent:', () => {
           ]
         };
 
-        spyOn(component, <any>'verifyforceOptionComponent').and.callThrough();
+        spyOn(component, <any>'verifyForceOptionComponent').and.callThrough();
 
         expect(component['getComponentControl'](field)).toBe(expectedValue);
-        expect(component['verifyforceOptionComponent']).toHaveBeenCalled();
+        expect(component['verifyForceOptionComponent']).toHaveBeenCalled();
       });
 
       it('shouldn`t return select if `forceOptionsComponentType` is select but optionsMulti is true', () => {
@@ -682,10 +692,10 @@ describe('PoDynamicFormFieldsBaseComponent:', () => {
           ]
         };
 
-        spyOn(component, <any>'verifyforceOptionComponent').and.callThrough();
+        spyOn(component, <any>'verifyForceOptionComponent').and.callThrough();
 
         expect(component['getComponentControl'](field)).toBe(expectedValue);
-        expect(component['verifyforceOptionComponent']).toHaveBeenCalled();
+        expect(component['verifyForceOptionComponent']).toHaveBeenCalled();
       });
 
       it('should return `upload` if type is `upload` and has a `url`', () => {

diff --git a/...o-dynamic/po-dynamic-form/po-dynamic-form-fields/po-dynamic-form-fields-base.component.ts b/...o-dynamic/po-dynamic-form/po-dynamic-form-fields/po-dynamic-form-fields-base.component.ts
@@ -150,7 +150,13 @@ export class PoDynamicFormFieldsBaseComponent {
   private getComponentControl(field: PoDynamicFormField = <any>{}) {
     const type = field && field.type ? field.type.toLocaleLowerCase() : 'string';
 
-    const forceOptionComponent = this.verifyforceOptionComponent(field);
+    const { forceBooleanComponentType } = field;
+    const forceOptionComponent = this.verifyForceOptionComponent(field);
+
+    if (forceBooleanComponentType) {
+      return forceBooleanComponentType;
+    }
+
     if (forceOptionComponent) {
       const { forceOptionsComponentType } = field;
       return forceOptionsComponentType;
@@ -257,7 +263,7 @@ export class PoDynamicFormFieldsBaseComponent {
     return url && type === 'upload';
   }
 
-  private verifyforceOptionComponent(field: PoDynamicFormField) {
+  private verifyForceOptionComponent(field: PoDynamicFormField) {
     const { optionsMulti, optionsService, forceOptionsComponentType } = field;
 
     if (forceOptionsComponentType && !optionsMulti && !optionsService) {

diff --git a/...s/po-dynamic/po-dynamic-form/po-dynamic-form-fields/po-dynamic-form-fields.component.html b/...s/po-dynamic/po-dynamic-form/po-dynamic-form-fields/po-dynamic-form-fields.component.html
@@ -198,6 +198,20 @@
     >
     </po-switch>
 
+    <po-checkbox
+      #component
+      *ngIf="compareTo(field.control, 'checkbox')"
+      [name]="field.property"
+      [(ngModel)]="value[field.property]"
+      [ngClass]="field.componentClass"
+      [p-auto-focus]="field.focus"
+      [p-disabled]="isDisabled(field)"
+      [p-label]="field.label"
+      [p-size]="field.size"
+      (p-change)="onChangeField(field)"
+    >
+    </po-checkbox>
+
     <po-combo
       #component
       *ngIf="compareTo(field.control, 'combo')"

diff --git a/...rm/samples/sample-po-dynamic-form-register/sample-po-dynamic-form-register.component.html b/...rm/samples/sample-po-dynamic-form-register/sample-po-dynamic-form-register.component.html
@@ -9,6 +9,8 @@
 >
 </po-dynamic-form>
 
+<br />
+
 <div class="po-row">
   <po-button
     class="po-md-3"

diff --git a/...form/samples/sample-po-dynamic-form-register/sample-po-dynamic-form-register.component.ts b/...form/samples/sample-po-dynamic-form-register/sample-po-dynamic-form-register.component.ts
@@ -4,7 +4,8 @@ import {
   PoDynamicFormField,
   PoDynamicFormFieldChanged,
   PoDynamicFormValidation,
-  PoNotificationService
+  PoNotificationService,
+  ForceBooleanComponentEnum
 } from '@po-ui/ng-components';
 import { PoDynamicFormRegisterService } from './sample-po-dynamic-form-register.service';
 
@@ -178,6 +179,13 @@ export class SamplePoDynamicFormRegisterComponent implements OnInit {
       ],
       optionsMulti: true
     },
+    {
+      property: 'agree',
+      gridColumns: 12,
+      label: 'Do you agree?',
+      type: 'boolean',
+      forceBooleanComponentType: ForceBooleanComponentEnum.checkbox
+    },
     {
       property: 'image',
       type: 'upload',