feat(multiselect): implementa as definições do AnimaliaDS

Implementar as definições do handoff do multiselect no PoMultiselect. Fixes DTHFUI-7684
po-ui · Oct 24, 2023 · 4ab8a0e · 4ab8a0e
1 parent f08dfad
commit 4ab8a0e
Show file tree

Hide file tree

Showing 5 changed files with 74 additions and 53 deletions.
diff --git a/projects/ui/src/lib/components/po-field/po-field.module.ts b/projects/ui/src/lib/components/po-field/po-field.module.ts
@@ -55,6 +55,7 @@ import { PoUrlComponent } from './po-url/po-url.component';
 import { PoCheckboxModule } from './po-checkbox/po-checkbox.module';
 import { PoSwitchModule } from './po-switch/po-switch.module';
 import { PoLabelModule } from '../po-label';
+import { PoTagComponent, PoTagModule } from '../po-tag';
 
 /**
  * @description
@@ -96,7 +97,8 @@ import { PoLabelModule } from '../po-label';
     PoRadioModule,
     PoLabelModule,
     PoListBoxModule,
-    PoSwitchModule
+    PoSwitchModule,
+    PoTagModule
   ],
   exports: [
     PoCheckboxGroupModule,
@@ -125,7 +127,8 @@ import { PoLabelModule } from '../po-label';
     PoCheckboxModule,
     PoRadioModule,
     PoLabelModule,
-    PoSwitchModule
+    PoSwitchModule,
+    PoTagModule
   ],
   declarations: [
     PoComboComponent,

diff --git a/projects/ui/src/lib/components/po-field/po-multiselect/po-multiselect.component.html b/projects/ui/src/lib/components/po-field/po-multiselect/po-multiselect.component.html
@@ -6,6 +6,7 @@
   [p-required]="required"
   [p-show-required]="showRequired"
 >
+  {{ initializedOnKeyDown }}
   <div class="po-field-container-content" [class.po-multiselect-show]="dropdownOpen">
     <div
       #inputElement
@@ -25,16 +26,16 @@
         {{ placeholder ? placeholder : literals.selectItem }}
       </span>
 
-      <po-disclaimer
+      <po-tag
+        #poTag
         *ngFor="let disclaimer of visibleDisclaimers"
-        [p-label]="disclaimer[fieldLabel]"
-        [p-value]="disclaimer[fieldValue]"
-        [p-hide-close]="disclaimer[fieldValue] === '' || disabled"
+        [p-value]="disclaimer[fieldLabel]"
+        [p-removable]="true"
         [class.po-clickable]="disclaimer[fieldValue] === '' && !disabled"
-        (click)="openDropdown(disclaimer[fieldValue] === '')"
-        (p-close-action)="closeDisclaimer(disclaimer[fieldValue])"
-      >
-      </po-disclaimer>
+        [p-disabled]="disabled"
+        (p-close)="closeDisclaimer(disclaimer[fieldValue])"
+        (p-click)="closeDisclaimer(disclaimer[fieldValue])"
+      ></po-tag>
 
       <div class="po-field-icon-container-right">
         <span

diff --git a/projects/ui/src/lib/components/po-field/po-multiselect/po-multiselect.component.ts b/projects/ui/src/lib/components/po-field/po-multiselect/po-multiselect.component.ts
@@ -117,7 +117,7 @@ export class PoMultiselectComponent
   positionDisclaimerExtra;
   timeoutResize;
   visibleElement = false;
-
+  initializedOnKeyDown: boolean = false;
   private isCalculateVisibleItems: boolean = true;
   private cacheOptions: Array<PoMultiselectOption | any>;
 
@@ -137,6 +137,28 @@ export class PoMultiselectComponent
       this.focus();
     }
     this.initialized = true;
+
+    setTimeout(() => {
+      const tagRemoveElements = this.el.nativeElement.querySelectorAll('.po-tag-remove');
+      console.log(tagRemoveElements);
+      tagRemoveElements.forEach((tagRemoveElement, index) => {
+        console.log(tagRemoveElement);
+        this.renderer.setProperty(tagRemoveElement, 'tabindex', 0);
+
+        this.renderer.listen(tagRemoveElement, 'keydown', event => {
+          this.initializedOnKeyDown = true;
+          if (event.key === 'ArrowLeft') {
+            if (index > 0) {
+              tagRemoveElements[index - 1].focus();
+            }
+          } else if (event.key === 'ArrowRight') {
+            if (index < tagRemoveElements.length - 1) {
+              tagRemoveElements[index + 1].focus();
+            }
+          }
+        });
+      });
+    }, 0);
   }
 
   ngOnChanges(changes: SimpleChanges) {
@@ -189,7 +211,7 @@ export class PoMultiselectComponent
   }
 
   getDisclaimersWidth() {
-    const disclaimers = this.el.nativeElement.querySelectorAll('po-disclaimer');
+    const disclaimers = this.el.nativeElement.querySelectorAll('po-tag');
     return Array.from(disclaimers).map(disclaimer => disclaimer['offsetWidth']);
   }
 
@@ -273,16 +295,16 @@ export class PoMultiselectComponent
   }
 
   onKeyDown(event?: any) {
-    if (event.keyCode === PoKeyCodeEnum.left || event.keyCode === PoKeyCodeEnum.right) {
-      const disclaimers = this.el.nativeElement.querySelectorAll('po-disclaimer');
-      disclaimers.forEach((disclaimer, index) => {
-        const spanElement = disclaimer.querySelector(':scope .po-disclaimer-remove');
-        if (spanElement) {
-          this.addKeyListener(spanElement, disclaimers, index, event);
-        }
-      });
-      return;
-    }
+    // if (event.keyCode === PoKeyCodeEnum.left || event.keyCode === PoKeyCodeEnum.right) {
+    //   const disclaimers = this.el.nativeElement.querySelectorAll('po-disclaimer');
+    //   disclaimers.forEach((disclaimer, index) => {
+    //     const spanElement = disclaimer.querySelector(':scope .po-disclaimer-remove');
+    //     if (spanElement) {
+    //       this.addKeyListener(spanElement, disclaimers, index, event);
+    //     }
+    //   });
+    //   return;
+    // }
 
     if (
       (event.keyCode === PoKeyCodeEnum.tab && this.visibleDisclaimers.length > 1) ||
@@ -322,23 +344,6 @@ export class PoMultiselectComponent
     }
   }
 
-  private addKeyListener(spanElement: any, disclaimers: any, index: number, event: any) {
-    this.renderer.listen(spanElement, 'keydown', eventKey => {
-      switch (eventKey.keyCode) {
-        case PoKeyCodeEnum.left:
-          this.focusPreviousDisclaimer(disclaimers, index);
-          break;
-        case PoKeyCodeEnum.right:
-          this.focusNextDisclaimer(disclaimers, index);
-          break;
-        case PoKeyCodeEnum.arrowDown:
-          event.preventDefault();
-          this.controlDropdownVisibility(true);
-          break;
-      }
-    });
-  }
-
   private focusPreviousDisclaimer(disclaimers: any, index: number) {
     const prevDisclaimer = disclaimers[index - 1];
     if (prevDisclaimer) {
@@ -409,11 +414,25 @@ export class PoMultiselectComponent
   }
 
   closeDisclaimer(value) {
-    const index = this.selectedOptions.findIndex(option => option[this.fieldValue] === value);
-    this.selectedOptions.splice(index, 1);
-
-    this.updateVisibleItems();
-    this.callOnChange(this.selectedOptions);
+    console.log(value);
+    console.log(this.selectedOptions);
+    console.log(this.visibleDisclaimers);
+    // criar funcao que se value estiver vazio remover de visubleOptionsDropdown todos os que nao estao em visibleDisclaimers
+    if (!value) {
+      console.log('veio vazio');
+      for (let option of this.visibleDisclaimers) {
+        if (!this.selectedOptions.includes(option)) {
+          this.selectedOptions.splice(this.selectedOptions.indexOf(option), 1);
+          this.updateVisibleItems();
+          this.callOnChange(this.selectedOptions);
+        }
+      }
+    } else {
+      const index = this.selectedOptions.findIndex(option => option[this.fieldValue] === value);
+      this.selectedOptions.splice(index, 1);
+      this.updateVisibleItems();
+      this.callOnChange(this.selectedOptions);
+    }
   }
 
   wasClickedOnToggle(event: MouseEvent): void {

diff --git a/projects/ui/src/lib/components/po-tag/po-tag.component.html b/projects/ui/src/lib/components/po-tag/po-tag.component.html
@@ -1,16 +1,11 @@
-<div
-  #tagContainer
-  class="po-tag-container"
-  [class.po-tag-container-horizontal]="tagOrientation"
-  [p-tooltip]="getWidthTag() ? value : ''"
-  p-tooltip-position="top"
->
+<div #tagContainer class="po-tag-container" [class.po-tag-container-horizontal]="tagOrientation">
   <div *ngIf="label" class="po-tag-title po-text-nowrap">
     <span class="po-tag-label">{{ tagOrientation ? label + ':' : label }}</span>
   </div>
 
   <div class="po-tag-sub-container">
     <div
+      #poTag
       class="po-tag"
       [attr.role]="isClickable && !disabled ? 'button' : ''"
       [class.po-clickable]="isClickable && !disabled && !removable"
@@ -39,7 +34,7 @@
       >
       </po-icon>
 
-      <div class="po-tag-value">
+      <div class="po-tag-value" p-tooltip-position="top" [p-tooltip]="getWidthTag() && !removable ? value : ''">
         <span
           [ngStyle]="
             !tagColor && inverse && !customTextColor
@@ -54,6 +49,8 @@
 
       <span
         *ngIf="removable"
+        p-tooltip-position="top"
+        p-tooltip="close"
         [attr.aria-label]="setAriaLabel()"
         class="po-tag-remove po-icon po-icon-close"
         [class.po-clickable]="!disabled"

diff --git a/projects/ui/src/lib/components/po-tag/po-tag.component.ts b/projects/ui/src/lib/components/po-tag/po-tag.component.ts
@@ -36,6 +36,7 @@ const poTagTypeDefault = 'po-tag-' + PoTagType.Info;
 })
 export class PoTagComponent extends PoTagBaseComponent implements OnInit {
   @ViewChild('tagContainer', { static: true }) tagContainer: ElementRef;
+  @ViewChild('poTag', { static: true }) poTag: ElementRef;
 
   isClickable: boolean;
   literals: any;
@@ -119,7 +120,7 @@ export class PoTagComponent extends PoTagBaseComponent implements OnInit {
   }
 
   getWidthTag() {
-    return this.tagContainer.nativeElement.offsetWidth > 155;
+    return this.poTag.nativeElement.offsetWidth > 155;
   }
 
   setAriaLabel() {