From 1b91e50a90647aa7e8406ae906cf1a3f7a48158f Mon Sep 17 00:00:00 2001
From: Wanderley Santos Teixeira <wsteixeira@yahoo.com.br>
Date: Thu, 27 Oct 2022 16:28:57 -0300
Subject: [PATCH] feat(dynamic-form): adiciona escolha entre `po-switch` ou
 `po-checkbox`
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

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-dynamic-field-force-component.enum.ts  | 15 ++++++++++++++
 .../po-dynamic-form-field.interface.ts        | 11 +++++++++-
 ...dynamic-form-fields-base.component.spec.ts | 20 ++++++++++++++-----
 .../po-dynamic-form-fields-base.component.ts  | 10 ++++++++--
 .../po-dynamic-form-fields.component.html     | 14 +++++++++++++
 ...le-po-dynamic-form-register.component.html |  2 ++
 ...mple-po-dynamic-form-register.component.ts | 10 +++++++++-
 7 files changed, 73 insertions(+), 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
index db89e8666..b3749c85c 100644
--- 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
index f0702d3ce..c9c60ca28 100644
--- 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/projects/ui/src/lib/components/po-dynamic/po-dynamic-form/po-dynamic-form-fields/po-dynamic-form-fields-base.component.spec.ts b/projects/ui/src/lib/components/po-dynamic/po-dynamic-form/po-dynamic-form-fields/po-dynamic-form-fields-base.component.spec.ts
index 6df657f10..37f23e66b 100644
--- a/projects/ui/src/lib/components/po-dynamic/po-dynamic-form/po-dynamic-form-fields/po-dynamic-form-fields-base.component.spec.ts
+++ b/projects/ui/src/lib/components/po-dynamic/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/projects/ui/src/lib/components/po-dynamic/po-dynamic-form/po-dynamic-form-fields/po-dynamic-form-fields-base.component.ts b/projects/ui/src/lib/components/po-dynamic/po-dynamic-form/po-dynamic-form-fields/po-dynamic-form-fields-base.component.ts
index 04d1dd0e6..25220260e 100644
--- a/projects/ui/src/lib/components/po-dynamic/po-dynamic-form/po-dynamic-form-fields/po-dynamic-form-fields-base.component.ts
+++ b/projects/ui/src/lib/components/po-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/projects/ui/src/lib/components/po-dynamic/po-dynamic-form/po-dynamic-form-fields/po-dynamic-form-fields.component.html b/projects/ui/src/lib/components/po-dynamic/po-dynamic-form/po-dynamic-form-fields/po-dynamic-form-fields.component.html
index 39c3bc808..f50f9fce8 100644
--- a/projects/ui/src/lib/components/po-dynamic/po-dynamic-form/po-dynamic-form-fields/po-dynamic-form-fields.component.html
+++ b/projects/ui/src/lib/components/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/projects/ui/src/lib/components/po-dynamic/po-dynamic-form/samples/sample-po-dynamic-form-register/sample-po-dynamic-form-register.component.html b/projects/ui/src/lib/components/po-dynamic/po-dynamic-form/samples/sample-po-dynamic-form-register/sample-po-dynamic-form-register.component.html
index f737eff0d..0f1dc7505 100644
--- a/projects/ui/src/lib/components/po-dynamic/po-dynamic-form/samples/sample-po-dynamic-form-register/sample-po-dynamic-form-register.component.html
+++ b/projects/ui/src/lib/components/po-dynamic/po-dynamic-form/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/projects/ui/src/lib/components/po-dynamic/po-dynamic-form/samples/sample-po-dynamic-form-register/sample-po-dynamic-form-register.component.ts b/projects/ui/src/lib/components/po-dynamic/po-dynamic-form/samples/sample-po-dynamic-form-register/sample-po-dynamic-form-register.component.ts
index 4fbb54721..1aedd943d 100644
--- a/projects/ui/src/lib/components/po-dynamic/po-dynamic-form/samples/sample-po-dynamic-form-register/sample-po-dynamic-form-register.component.ts
+++ b/projects/ui/src/lib/components/po-dynamic/po-dynamic-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',