Portal Agendamento Components

Projeto criado para componentes reutilizaveis entre os frontends do portal de agendamento.

Tópicos

• Refresh Button
• Decorators para Salvar Filtro aplicado ao navegar entre telas
  • Premissas para Utilização
  • Implementação Básica
  • Salvar Filtros
  • Aplicar Filtros ao carregar Tela
  • Atualização do Estado do Filtro
  • Limpeza do Estado do Filtro

Refresh Button

O componente refresh-button necessíta de uma chave com o nome "update_grid" no arquivo de translate

Decorators para Salvar Filtro aplicado ao navegar entre telas

Para facilitar o salvamento e recarregamento de filtros aplicados ao component nos projetos de frontend foi criado um serviço que utiliza o sessionStorage do browser para armazenar o filtro e também foram criados decorators para aplicar e manter o estado dos filtros de maneira simplificada. Lembrando que o salvamento é feito propositalmente no sessionStorage do browser para que esta informação esteja acessível somente à janela onde esta foi criada, isto é, ao aplicar e realizado o salvamento de um filtro em uma janela do browser, este não estará disponível em outras instâncias, ficando restrita apenas à janela que foi criada.

Premissas para Utilização

Para a utilização desta funcionalidade de salvamento deve-se respeitar algumas premissas.

• pagendamento-components: Deve-se obrigatóriamente estar utilizando o pacote pagendamento-components
• Aliado à estrutura gerada pelo gerador: Deve utilizar aliado ao gerado pelo gerado de frontends nas telas de listagem bem como os métodos de aplicação de filtros e refresh criados pelo @seniorsistemas/frontend-generator.

Implementação Básica

• Injetar o Component p-table: Derverá ser injetado o component HTML para ser acessível via typescript do component.

<p-table #componentTable [value]="componentGridData" [columns]="componentGridColumns" dataKey="id" [lazy]="true"
    [scrollable]="true" [resizableColumns]="true" sortMode="single" [paginator]="true"
    [totalRecords]="componentTotalRecords" rows="10" [rowsPerPageOptions]="[10, 20, 50, 100]"
    [(selection)]="componentSelection" (onLazyLoad)="componentGridChange($event)" [loading]="componentGridLoading"
    [sortOrder]="1" >

import { ViewChild } from "@angular/core";
import { Table } from "primeng/table";

...

@Component({
    templateUrl: "./component-list.component.html",
    providers: [ConfirmationService],
})
export class ComponentListComponent implements OnInit, OnDestroy {
    ...
    @ViewChild('componentTable') 
    public componentTable: Table;
    ...
}

• Injetar o Serviço SaveScreenFilterService: Injetar o serviço SaveScreenFilterService para que seja fornecido com item da configuração dos decorators

import { SaveScreenFilterService } from "@seniorlogistica/pagendamento-components";

...

@Component({
    templateUrl: "./component-list.component.html",
    providers: [ConfirmationService],
})
export class ComponentListComponent implements OnInit, OnDestroy {
    ...
    constructor(
        private saveScreenFilterService:SaveScreenFilterService
    ) {}
}

• Criar o objeto SaveFilterConfig: No método ngOnInit criar o objeto SaveFilterConfig que é necessário para o funcionamento dos decorators.

import { SaveFilterConfig } from "@seniorlogistica/pagendamento-components";

...

@Component({
    templateUrl: "./component-list.component.html",
    providers: [ConfirmationService],
})
export class ComponentListComponent implements OnInit, OnDestroy {
    //Declaração como Field
    public saveFilterConfig: SaveFilterConfig;
    ...
    
    public ngOnInit() {
        this.saveFilterConfig = {
            environment: environment, //importação dos dados do projeto
            formFilter: this.conponentFiltersForm, //formGroup que agrega os filtros permitidos na listagem
            saveScreenFilterService: this.saveScreenFilterService, //Injeção do serviço que realiza o salvamento
            searchMethodName: "componentSearch", //Método que é chamado a aplicar os filtros
            tableRef: this.componentTable, //@ViewChild do component p-table
            tableCurrentListParams: "componentCurrentListParams"// Objeto ListParams que faz parte do componente e guarda os tokens de consulta
        };
    }

}

• Interface SaveFilterInfoProvider: Implementar a interface SaveFilterInfoProvider no componente para que as informações necessárias ao salvamento/aplicação filtros estejam disponíveis através da chamada do método getSaveFilterConfig() para que os decorators funcionem adequadamente.

import { SaveFilterInfoProvider, SaveFilterConfig } from "@seniorlogistica/pagendamento-components";

...

@Component({
    templateUrl: "./component-list.component.html",
    providers: [ConfirmationService],
})
export class ComponentListComponent implements OnInit, OnDestroy, SaveFilterInfoProvider {
    ...

    getSaveFilterConfig(): SaveFilterConfig {
        return this.saveFilterConfig;
    }
}

Salvar Filtros

No método onde é aplicado os filtros na tela de listagem deve se adicionado o decorator @StoreFilters() para que seja armazenado o filtro ao ser executado qualquer filtro no grid.

import { StoreFilters } from "@seniorlogistica/pagendamento-components";

...

@Component({
    templateUrl: "./component-list.component.html",
    providers: [ConfirmationService],
})
export class ComponentListComponent implements OnInit, OnDestroy, SaveFilterInfoProvider {
    ...
    @StoreFilters()//Decorator responsável por salvar o filtro aplicado
    public componentSearch(table: any) {
        if (!this.componentFiltersForm.valid) {
            return this.validateAllFormFields(this.componentFiltersForm);
        }

        const filterData = this.componentFiltersForm.getRawValue();
        this.componentFiltersPanelCollapsed = true;
        this.componentResetGrid(table, { filterData });
    }
    ...
}

Aplicar Filtros ao carregar Tela

No método ngOnInit que é executado ao inicializar a tela deve ser adicionado o decorator @ApplyFilterOnInit() ao método ngOnInit() e também adicionar @ApplyFilterOnGridChange() ao método que esteja vinculado ao evento (onLazyLoad) do p-table para que ao abrir a tela e existir um filtro já armazenado, este seja aplicado

import { ApplyFilterOnInit, ApplyFilterOnGridChange } from "@seniorlogistica/pagendamento-components";

...

@Component({
    templateUrl: "./component-list.component.html",
    providers: [ConfirmationService],
})
export class ComponentListComponent implements OnInit, OnDestroy, SaveFilterInfoProvider {
    ...
     @ApplyFilterOnInit()//Decorator que é responsável por localizar filtro salvo e aplicá-lo na abertura da tela
    public ngOnInit() {
       ...
    }
    
     @ApplyFilterOnGridChange()
    public componentGridChange(event: LazyLoadEvent) {
        ...
    }
    ...
}

Atualização do Estado do Filtro

Como é possível remover o filtro token a token que foi aplicado é necessário aplicar o decorator @UpdateStoredFilters() no método de remoção dos tokens para que seja atualizado o filtro salvo assim que removido um token.

import { UpdateStoredFilters } from "@seniorlogistica/pagendamento-components";

...

@Component({
    templateUrl: "./component-list.component.html",
    providers: [ConfirmationService],
})
export class ComponentListComponent implements OnInit, OnDestroy, SaveFilterInfoProvider {
    ...
    @UpdateStoredFilters()//Decoretor responsável por realizar a atualização do filtro salvo
    public componentRemoveToken(table: any, token: CustomIToken) {
        if (token.id == "status") {
            this.componentFiltersForm
                .get(token.id)
                .setValue(this.componentFiltersForm
                              .get(token.id)
                              .value.filter((val: any) => val != token.value));
        } else {
            this.componentFiltersForm.get(token.id).setValue(undefined);
        }        

        const filterData = this.componentFiltersForm.getRawValue();
        this.componentResetGrid(table, { filterData });
    }
    ...
}

Limpeza do Estado do Filtro

Para executar a remoção do filtro salvo ao limpar todos os filtros da tela é necessário aplicar o decorator @ClearStoredFilters() no método de limpeza dos filtros na tela de listagem.

import { ClearStoredFilters } from "@seniorlogistica/pagendamento-components";

...

@Component({
    templateUrl: "./component-list.component.html",
    providers: [ConfirmationService],
})
export class ComponentListComponent implements OnInit, OnDestroy, SaveFilterInfoProvider {
    ...
    @ClearStoredFilters()
    public componentClear(table: any) {
        this.componentFiltersForm.reset();
        const filterData = this.componentFiltersForm.getRawValue();
        this.componentResetGrid(table, { filterData });
    }
    ...
}