feat(combo): implementa uso do listbox

implementa o uso do listbox no componente `po-combo` Fixes DTHFUI-7319
po-ui · Aug 29, 2023 · 46924eb · 46924eb
1 parent 7d140e3
commit 46924eb
Show file tree

Hide file tree

Showing 20 changed files with 825 additions and 1,194 deletions.
diff --git a/...ui/src/lib/components/po-field/po-combo/interfaces/po-combo-literals-default.interface.ts b/...ui/src/lib/components/po-field/po-combo/interfaces/po-combo-literals-default.interface.ts
@@ -0,0 +1,20 @@
+import { PoComboLiterals } from './po-combo-literals.interface';
+
+export const poComboLiteralsDefault = {
+  en: <PoComboLiterals>{
+    noData: 'No data found',
+    chooseOption: 'Choose an option'
+  },
+  es: <PoComboLiterals>{
+    noData: 'Datos no encontrados',
+    chooseOption: 'Elija una opción'
+  },
+  pt: <PoComboLiterals>{
+    noData: 'Nenhum dado encontrado',
+    chooseOption: 'Escolha uma opção'
+  },
+  ru: <PoComboLiterals>{
+    noData: 'Данные не найдены',
+    chooseOption: 'Выберите опцию'
+  }
+};
diff --git a/projects/ui/src/lib/components/po-field/po-combo/interfaces/po-combo-literals.interface.ts b/projects/ui/src/lib/components/po-field/po-combo/interfaces/po-combo-literals.interface.ts
@@ -8,4 +8,7 @@
 export interface PoComboLiterals {
   /** Texto exibido quando não houver itens na lista ou se, a pesquisa do filtro não retornar nenhum item. */
   noData?: string;
+
+  /** Texto exibido quando o combo estiver vazio. */
+  chooseOption?: string;
 }
diff --git a/projects/ui/src/lib/components/po-field/po-combo/po-combo-base.component.spec.ts b/projects/ui/src/lib/components/po-field/po-combo/po-combo-base.component.spec.ts
@@ -10,10 +10,11 @@ import { expectPropertiesValues, expectSettersMethod } from '../../../util-test/
 import { PoLanguageService } from '../../../services/po-language/po-language.service';
 import { poLocaleDefault } from '../../../services/po-language/po-language.constant';
 
-import { PoComboBaseComponent, poComboLiteralsDefault } from './po-combo-base.component';
+import { PoComboBaseComponent } from './po-combo-base.component';
 import { PoComboFilter } from './interfaces/po-combo-filter.interface';
 import { PoComboFilterMode } from './po-combo-filter-mode.enum';
 import { PoComboOption } from './interfaces/po-combo-option.interface';
+import { poComboLiteralsDefault } from './interfaces/po-combo-literals-default.interface';
 
 @Directive()
 class PoComboTest extends PoComboBaseComponent {
@@ -223,8 +224,9 @@ describe('PoComboBaseComponent:', () => {
     });
 
     it('p-placeholder: should update property p-placeholder with empty value if set with invalid values.', () => {
+      component['language'] = 'pt';
       const invalidValues = [null, undefined, '', 0, false];
-      expectPropertiesValues(component, 'placeholder', invalidValues, '');
+      expectPropertiesValues(component, 'placeholder', invalidValues, 'Escolha uma opção');
     });
   });
 

diff --git a/projects/ui/src/lib/components/po-field/po-combo/po-combo-base.component.ts b/projects/ui/src/lib/components/po-field/po-combo/po-combo-base.component.ts
@@ -14,26 +14,12 @@ import { PoComboGroup } from './interfaces/po-combo-group.interface';
 import { PoComboLiterals } from './interfaces/po-combo-literals.interface';
 import { PoComboOption } from './interfaces/po-combo-option.interface';
 import { PoComboOptionGroup } from './interfaces/po-combo-option-group.interface';
+import { poComboLiteralsDefault } from './interfaces/po-combo-literals-default.interface';
 
 const PO_COMBO_DEBOUNCE_TIME_DEFAULT = 400;
 const PO_COMBO_FIELD_LABEL_DEFAULT = 'label';
 const PO_COMBO_FIELD_VALUE_DEFAULT = 'value';
 
-export const poComboLiteralsDefault = {
-  en: <PoComboLiterals>{
-    noData: 'No data found'
-  },
-  es: <PoComboLiterals>{
-    noData: 'Datos no encontrados'
-  },
-  pt: <PoComboLiterals>{
-    noData: 'Nenhum dado encontrado'
-  },
-  ru: <PoComboLiterals>{
-    noData: 'Данные не найдены'
-  }
-};
-
 /**
  * @description
  *
@@ -294,7 +280,6 @@ export abstract class PoComboBaseComponent implements ControlValueAccessor, OnIn
   private language: string;
   private _infiniteScrollDistance?: number = 100;
   private _infiniteScroll?: boolean = false;
-  private _height?: number;
 
   // utilizado para fazer o controle de atualizar o model.
   // não deve forçar a atualização se o gatilho for o writeValue para não deixar o campo dirty.
@@ -304,7 +289,7 @@ export abstract class PoComboBaseComponent implements ControlValueAccessor, OnIn
 
   /** Mensagem apresentada enquanto o campo estiver vazio. */
   @Input('p-placeholder') set placeholder(value: string) {
-    this._placeholder = value || '';
+    this._placeholder = value || this.literals.chooseOption;
   }
 
   get placeholder() {
@@ -623,7 +608,7 @@ export abstract class PoComboBaseComponent implements ControlValueAccessor, OnIn
   }
 
   get isOptionGroupList(): boolean {
-    return this._options.length && this._options[0].hasOwnProperty('options');
+    return this._options.length && this._options.some(item => item.hasOwnProperty('options'));
   }
 
   ngOnInit() {

diff --git a/projects/ui/src/lib/components/po-field/po-combo/po-combo.component.html b/projects/ui/src/lib/components/po-field/po-combo/po-combo.component.html
@@ -50,74 +50,28 @@
   </div>
 
   <div #containerElement class="po-combo-container" [hidden]="!comboOpen && !isServerSearching">
-    <ng-container *ngIf="checkTemplate(); then visibleOptionsTemplate; else noDataTemplate"> </ng-container>
-    <div *ngIf="isServerSearching">
-      <ng-container *ngIf="infiniteLoading; then infiniteLoadingTemplate; else normalLoadingTemplate"></ng-container>
-    </div>
+    <po-listbox
+      #poListbox
+      p-type="option"
+      [p-items]="visibleOptions"
+      [p-field-value]="dynamicValue"
+      [p-field-label]="dynamicLabel"
+      [p-template]="comboOptionTemplate"
+      [p-search-value]="getInputValue()"
+      [p-infinite-loading]="infiniteLoading"
+      [p-infinite-scroll]="infiniteScroll"
+      [p-filtering]="isFiltering"
+      [p-cache]="cache"
+      (p-selectcombo-item)="onOptionClick($event, $event.event)"
+      [p-filter-mode]="filterMode"
+      [p-visible]="comboOpen"
+      [p-is-searching]="isServerSearching"
+      [p-should-mark-letter]="shouldMarkLetters"
+      [p-compare-cache]="compareObjects(cacheOptions, visibleOptions)"
+      [p-combo-service]="service"
+      [p-infinite-scroll-distance]="infiniteScrollDistance"
+      (p-update-infinite-scroll)="showMoreInfiniteScroll()"
+    ></po-listbox>
   </div>
-
   <po-field-container-bottom [p-help]="help" [p-disabled]="disabled"></po-field-container-bottom>
 </po-field-container>
-
-<ng-template #normalLoadingTemplate>
-  <po-loading class="po-combo-container-loading"> </po-loading>
-</ng-template>
-
-<ng-template #infiniteLoadingTemplate>
-  <po-loading-overlay class="po-combo-container-loading"> </po-loading-overlay>
-</ng-template>
-
-<ng-template #visibleOptionsTemplate>
-  <ul #contentElement #poComboBody class="po-combo-container-content">
-    <li
-      *ngFor="let option of visibleOptions"
-      [class.po-combo-item-selected]="compareObjects(selectedView, option)"
-      (click)="option?.options ? undefined : onOptionClick(option, $event)"
-    >
-      <ng-container *ngIf="comboOptionTemplate; then optionTemplate; else defaultOptionTemplate"></ng-container>
-
-      <ng-template #defaultOptionTemplate>
-        <label *ngIf="option?.options; else optionLink" class="po-combo-item-title">{{
-          option[this.dynamicLabel]
-        }}</label>
-        <ng-template #optionLink>
-          <a class="po-combo-item">
-            <span style="pointer-events: none" [innerHTML]="getLabelFormatted(option?.[this.dynamicLabel])"></span>
-          </a>
-        </ng-template>
-      </ng-template>
-
-      <ng-template #optionTemplate>
-        <ng-container *ngIf="isOptionGroupList; then optionsGroupTemplate; else defaultOptionsTemplate"></ng-container>
-
-        <ng-template #optionsGroupTemplate>
-          <ng-template
-            [ngTemplateOutlet]="comboOptionTemplate?.templateRef"
-            [ngTemplateOutletContext]="{ $implicit: option, selected: compareObjects(selectedView, option) }"
-          >
-          </ng-template>
-        </ng-template>
-
-        <ng-template #defaultOptionsTemplate>
-          <a class="po-combo-item">
-            <ng-template
-              [ngTemplateOutlet]="comboOptionTemplate?.templateRef"
-              [ngTemplateOutletContext]="{ $implicit: option }"
-            >
-            </ng-template>
-          </a>
-        </ng-template>
-      </ng-template>
-    </li>
-  </ul>
-</ng-template>
-
-<ng-template #noDataTemplate>
-  <div class="po-combo-container-no-data">
-    <div class="po-combo-no-data po-text-center">
-      <span *ngIf="!isServerSearching">
-        {{ literals.noData }}
-      </span>
-    </div>
-  </div>
-</ng-template>