Inline Alert Message

Última atualização: 09/04/2021

Inspirado no componente "Alerts" do Bootstrap, este componente permite, por configuração, apresentar um determinado estilo de mensagem com um título, uma descrição e, opcionalmente, um ou mais botões de ação.

Configuração do componente

A configuração deste componente pode ser feita por uma de três opções disponíveis:

Configuração

Modo

À data da última atualização deste doc existe apenas um modo disponível, "NoCompanies":

private async getNoCompaniesMode(): Promise<any> {
    let createCompanyOperation = 'corepatterns/companies/createcompany';
    const generalSettings = await this.settingsService.getShellGeneralSettings();
    if (generalSettings && generalSettings.createCompanyOperation && generalSettings.createCompanyOperation.trim() !== '') {
        createCompanyOperation = generalSettings.createCompanyOperation;
    }
    return {
        messageType: 'warning',
        title: 'RES_Inline_Alert_Title_No_Companies',
        htmlMessage: 'RES_Inline_Alert_Message_No_Companies',
        actions: [
            {
                title: 'RES_Inline_Alert_Action_No_Companies',
                operation: createCompanyOperation,
                class: 'pri-btn-primary',
                visible: false
            }
        ],
        closeable: false,
        resourcesLocation: 'ngcore.components'
    };
}

Serviço

Qualquer uma das opções deverá servir ao componente a seguinte estrutura de dados:

export interface IInlineAlertMessageConfiguration {
    messageType: string;
    title: string;
    htmlMessage: string;
    actions: IInlineAlertMessageAction[];
    closeable: boolean;
    resourcesLocation: string;
    loadOnModelLoaded?: boolean;
    updateOnModelChanged?: boolean;
    viewModeOnly?: boolean;
}

export interface IInlineAlertMessageAction {
    title: string;
    operation: string;
    event: any;
    class: string;
    type: string;
    openInPopup?: boolean;
    visible?: boolean;
}

messageType - indica o estilo do componente (ver opções disponíves abaixo, em "Estilos de mensagem").
title - indica o título.
htmlMessage - indica a descrição, em HTML, acrescentando ainda mais flexibilidade ao componente com a possibilidade de, por exemplo, incluir links diretamente no texto da descrição.
actions - compõe o conjunto de botãos de ação.
closeable - indica se o componente pode ser fechado, ie, eliminado da DOM.
resourcesLocation - indica o caminho onde serão procurados os resources para tradução.
loadOnModelLoaded - indica se o componente deve ser carregado apenas quando o modelo está carregado (true) ou logo no desenho da view (false). Sendo opcional, este valor é por defeito false e, portanto, carregado no momento de desenho da view.
updateOnModelChanged - indica se o componente deve ser carregado sempre que haja um update ao modelo. Sendo opcional, este valor é por defeito false.
viewModeOnly - indica se o componente deve ser carregado apenas quando o formState está em modo view.

Estilos de mensagem

À semelhança do componente que serviu de inspiração, existem disponíveis quatro estilos de apresentação (informação/sucesso/aviso/erro):

export interface IInlineAlertMessageState {
    information?: IInlineAlertMessageType;
    success?: IInlineAlertMessageType;
    warning?: IInlineAlertMessageType;
    error?: IInlineAlertMessageType;
}

private types: IInlineAlertMessageState = {
    information: {
        icon: 'glyphicon icon-info_k',
        class: 'info',
    },
    success: {
        // UX team is developing a success icon
        icon: 'glyphicon icon-check_1',
        class: 'success',
    },
    warning: {
        icon: 'glyphicon icon-warning_z',
        class: "warning",
    },
    error: {
        icon: 'glyphicon icon-warning_z',
        class: 'error',
    },
};