Selector Component

O Selector Component dá a possibilidade de seleccionar um elemento, proveniente de um serviço.

Quando o serviço delvover mais do que N registos, aparece o link "ver mais" que abre um modal com todas as opções de escolha.

A directiva Selector Component tem os seguintes parâmetros:

Propriedade	Tipo	Valor por defeito	Descrição
module	string	null	Module para o qual será feito o pedido (ex: corepatterns).
service	string	null	Serviço para o qual será feito o pedido (ex: companies).
getservice	string	null	Rota final do serviço (ex: getusercompanies).
getSearchService	string	null	Serviço do search.
keyAttribute	string	null	Chaves dos registos.
descriptionAttribute	string	null	Descrição dos registos.
serviceFields	string[]	[]	Lista de atributos necessários no retorno do serviço.
lastItemUsedTag	string	null	Tag para guardar o último registo usado.
isSubscriptionDependent	boolean	true	Flag que indica se os usersettings dependem, ou não, da subscrição.
lastItemsUsedTag	string	null	Tag para guardar os últimos registos usados.
searchModalDefinition	SearchModalDefinition	new SearchModalDefinition()	Definição necessária para apresentação do modal (título, colunas, etc).
menuDefinition	MenuDefinition	new MenuDefinition()	Evento para fechar o menu.

Implementação do componente

Exemplo da definição do componente SelectorComponent:

export class SelectorComponent implements OnInit {

    @Input()
    module: string = "";

    @Input()
    service: string = "";

    @Input()
    getservice: string;

    @Input()
    getSearchService: string;

    @Input()
    keyAttribute: string;

    @Input()
    descriptionAttribute: string;

    @Input()
    fallbackDescriptionAttribute: string;

    @Input()
    serviceFields:string[] = [];

    @Input()
    lastItemUsedTag: string;

    @Input()
    isSubscriptionDependent: boolean = true;

    @Input()
    lastItemsUsedTag: string;

    @Input()
    searchModalDefinition: SearchModalDefinition = new SearchModalDefinition();

    @Input()
    menuDefinition: MenuDefinition = new MenuDefinition();

Exemplo da configuração que permite abrir o modal, quando o serviço devolve mais que N resultados:

        if (this.totalItems > this.menuDefinition.maxItems) {
            let self = this;
            let seeMore = {
                title: this.i18nService.get('ngcore.components.RES_SelectorComponent_SeeMore'),
                iconClass:"icon-search_b",
                class:"pri-btn-link-drop-down",
                isDisabled: () => {
                    return false;
                },
                action: function () {
                    let modalConfig = {
                        class : `${self.searchModalDefinition.modalSize} popup-selector`,
                    }

                    // init modal
                    let bsModalRef: BsModalRef = self.modalService.show(SelectorModalContentComponent, modalConfig);
                    bsModalRef.content.initModal(self.searchModalDefinition.title, self.searchModalDefinition.placeholder,self.module, self.service, self.getservice, self.getSearchService, self.searchModalDefinition.columnsDefinition, line => {
                        let item:SelectorBase = new Selector(line[self.keyAttribute], line[self.descriptionAttribute] ? line[self.descriptionAttribute] : line[self.fallbackDescriptionAttribute] );
                        self.serviceFields.forEach(o => {
                            item[o] = line[o];
                        });

                        self.selectCurrentItem(item);
                    });
                },
            }

            menuItems.push(seeMore);
        }

Exemplo #1:

Utilização do componente para criação do Subscriptions Selector.

Exemplo #2:

Utilização do componente para criação Company Selector.