Solucionado (ver solução)
Solucionado
(ver solução)
3
respostas

Como implementar um template de mensagens diferente

Eu quero um modelo de template para mensagens de erro usando a seguinte classe: <p class="alert alert-error">${model}</p>

ou seja quando der uma mensagem de erro vai ser vermelha o fundo e nao verdinho como da classe alert-info para isso eu devo implementar um novo arquivo mensagensViewError.ts? ou eu posso simplesmente criar uma novo metodo dentro de mensagensView.ts? assim:

protected templateError(model: string): string {
    return `
      <p class="alert alert-error">${model}</p>
    `;
  }
}

veja que mudei somente a classe css para alert-error.

3 respostas

Grande Jefferson.

Você pode implementar uma interface que representa a mensagem:

interface Mensagem {
    tipo: 'success' | 'error' | 'warning';
    texto: string
}

E o método ficaria mais ou menos assim:

protected template(model: Mensagem): string { 
    return <p class="alert alert-${model.tipo}">${model.texto}</p>; 
} 
solução!

Gostei da dica. Implementei aqui e funcionou certinho.

Quando o professor implementou a mensagem de validação, eu pensei na hora que poderia ser uma mensagem "vermelha", até implementei, mas com a utilização da interface fica mais bonito.

Eu deixei minha /view.ts assim:

import { View } from "./view.js";

enum MessageType {
  INFO = "info",
  SUCCESS = "success",
  DANGER = "danger",
  WARNING = "warning",
}

export interface Mensagem {
  tipo: MessageType;
  texto: string;
}

export class MensagemView extends View<Mensagem> {
  protected template(model: Mensagem): string {
    return `
      <p class="alert alert-${model.tipo}">${model.texto}</p>
    `;
  }

  public updateError(message: string): void {
    this.updateMessage(MessageType.DANGER, message);
  }

  public updateSuccess(message: string): void {
    this.updateMessage(MessageType.SUCCESS, message);
  }

  private updateMessage(type: MessageType, message: string): void {
    const mensagem: Mensagem = {
      tipo: type,
      texto: message,
    };
    this.update(mensagem);
  }
}

E no controller eu chamo de duas formas:

Quando for mensagem de erro/validação:

 this.mensagemView.updateError("Apenas negociações em dias úteis são aceitas.");

Quando for mensagem de sucesso:

this.mensagemView.updateSuccess("Negociação adicionada com sucesso.");

Valeu pela dica, acrescentei mais algumas coisas, caso seja útil.

Wilson Cabral Paiva , valeu pela dica deu certinho!