Skip to content

Commit

Permalink
feat(combo): implementa uso do listbox
Browse files Browse the repository at this point in the history
implementa o uso do listbox no componente `po-combo`

Fixes DTHFUI-7319
  • Loading branch information
anliben committed Sep 1, 2023
1 parent 7d140e3 commit 191020b
Show file tree
Hide file tree
Showing 22 changed files with 942 additions and 1,204 deletions.
Original file line number Diff line number Diff line change
@@ -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: 'Выберите опцию'
}
};
Original file line number Diff line number Diff line change
Expand Up @@ -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;
}
Original file line number Diff line number Diff line change
Expand Up @@ -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 {
Expand Down Expand Up @@ -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');
});
});

Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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
*
Expand Down Expand Up @@ -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.
Expand All @@ -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() {
Expand Down Expand Up @@ -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() {
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -50,74 +50,29 @@
</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
#contentElement
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>
Loading

0 comments on commit 191020b

Please sign in to comment.