# Definições Estruturais

## Organização de Pastas

Estrutura básica do projeto:

src
├── Components
│   ├── Api
│   ├── Formatter
│   ├── History
│   ├── Input
│   ├── Loading
│   ├── Menu
│   ├── Messages
│   └── PainelErros
└── Pages
    ├── Bem
    ├── Generica
    └── ...

[](https://)

## Pacotes
### Components
Encapsula todo o código centralizado de componentes da aplicação utilizados pelas páginas. O objetivo é ter o mínimo possível de código repetido sem uso de componentes dentro da aplicação

#### - Api
Código que diz respeito às chamadas de Api do front-end.
A ApiGenerica encapsula as chamadas à API feitas pela aplicação (listagem, consulta por id e consulta com filtros) e para cada serviço REST associado, é criado um componente que centralize as chamadas.
#### - Formatter
Possui os métodos de formatação (CPF, CNPJ, valor monetário e outros).
Expõe os métodos para utilização direta nas páginas.

Formatter.boolean(dadoBooleano)

#### - History
Inclui os métodos de manipulação de histórico. Centraliza a chamada à lib externa de manipulação de histórico.
#### - Input
Componentes de entrada de dados e mascaramento. Centraliza o uso e comportamento dos componentes de entrada.
#### - Loading
Componente que exibe barra de carregamento. Centraliza o componente de carregamento para padronização nas telas.
#### - Menu
Centraliza os tratamentos de rotas e criação do menu da aplicação. Hoje usa um array de dados para listar em forma de menu (basta adicionar a rota desejada neste array que ela será adicionada ao menu):

export const routesMap = [
  { path: '/bem/consulta', component: PageConsultaBem, title: 'Consulta de Bens' },
  { path: '/bem/detalhar/:id', component: PageDetalhar, title: 'Detalhamento de Bem', hidden: true, },
];

#### - Messages
Componentes de exibição de mensagens e redirecionamento com adição de mensagem. Estrutura de adição de mensagem:

    Messages.mensagemSucesso(msg);
    Messages.mensagemErro(msg);
    Messages.mensagemAviso(msg);
    Messages.mensagemInfo(msg);

Estrutura de adição de mensagem com redirecionamento para a página inicial:

    RedirectMessage.redirectHome(history, msgSucesso, res);

#### - PainelErros
Componente para mostrar erros (à princípio apenas para dev).

### Pages
Contém as páginas do sistema.

#### - Generica
Páginas genéricas para serem usadas como base para outras páginas.

Pages
└── Generica
    ├── NaoEncontrado
    ├── PageDetalharAccordionGenerica
    └── PageDetalharGenerica

#####       > NaoEncontrado
Página genérica de caminho não encontrado. Rota padrão definida no arquivo Routes.jsx conforme código a seguir:

  <Switch>
    -- rotas --
    <Route component={NaoEncontrado} />
  </Switch>

#####       > PageDetalharGenerica
Página genérica de detalhamento de dados. Apresenta as informações tabuladas de 2 em 2, com a possibilidade de recebimento de um conjunto de botões de ação, a serem mostrados no fim da tela.
Uso conforme códigos a seguir:

const botaoVoltar = (
  <Link to={url}>
    <DtpButton
      title="Voltar"
      className="pull-left dtp-secondary"
      accessibilityName="Voltar"
    />
  </Link>
);

const botaoAcao = (
  <Link to={urlAcao}>
    <DtpButton
      title="Ação"
      className="pull-left dtp-primary"
      accessibilityName="Ação"
    />
  </Link>
);
  
const botoes = (
  <div className="col-lg-12 col-md-12 col-sm-12 col-xs-12">
    {botaoVoltar}
    {botaoAcao}
  </div>
);

const formatacao: [
    { label: 'Campo 1', campo: 'campo1' },
    { label: 'Campo 2 Formatado', campo: 'campoFormatado', metodoFormatacao: Formatter.cnpj }
];

<PageDetalharGenerica
  titulo="Detalhamento do Bem"
  id={id}
  formatacao={formatacao}
  metodoDeBusca={ApiBem.consultarBemPorId}
  botoes={botoes}
/>

#####       > PageDetalharAccordionGenerica
Página genérica de detalhamento de dados com componente accordion de separação. Estrutura semelhante a do detalhamento genérico, com mudança apenas no array recebido, para a estrutura a seguir:

const formatacao = [
    {
      titulo: 'Título Accordion 1',
      icone: 'ico-escolha1',
      headingId: 'accordion1',
      aberto: true,
      dados: [
        { label: 'Campo 1', campo: 'campo1' },
        { label: 'Campo 2 Formatado', campo: 'campoFormatado', metodoFormatacao: Formatter.cnpj }
      ],
    },
    {
      titulo: 'Título Accordion 2',
      icone: 'ico-escolha2',
      headingId: 'accordion2',
      dados: [
          { label: 'Campo 3', campo: 'campo3' },
          { label: 'Campo 4', campo: 'campo4' },
      ],
    },
];

#### - Bem
Páginas dos casos de uso relativos ao bem (demonstração do uso das páginas genéricas e componentes pré-definidos).

Pages
└── Bem
    ├── PageConsulta
    ├── PageDetalhar
    └── PageFeedback

#####       > PageConsulta
Página de consulta de bens por filtros. Centraliza o estado da consulta entre os componentes de filtragem e resultados, armazenando apenas os dados utilizados na filtragem e chamando o serviço para buscar as informações.
Para cada consulta realizada, o sistema registra no histórico do navegador os valores dos filtros utilizados, garantindo suporte à navegação de consulta pelos botões de avançar e voltar do navegador e facilitando o retorno das ações partidas da consulta para a referida consulta previamente feita.

Tem como estrutura básica:
- estado para armazenar filtros e dados de paginação
- estados para tratar as possíveis respostas do serviço de busca
- método para recuperar filtros da URL
- controle de busca (caso os filtros venham preenchidos, a tela já é carregada com uma busca efetuada)
- chamada ao serviço de busca
- PanelFiltros (recebe método de busca, estado com filtros e dados de paginação)

<PanelFiltros
    onClickBusca={buscar}
    filtros={filtros}
    setFiltros={setFiltros}
    pageNumberPadrao={pageNumberPadrao}
    pageSizePadrao={pageSizePadrao}
/>

- PanelResultados (recebe resposta da busca, possíveis erros da busca, os filtros utilizados, método de busca para realizar paginação e URL de consulta para controle do histórico com os filtros digitados)

<PanelResultados
    resposta={response}
    erros={error}
    filtros={filtros}
    buscar={buscar}
    urlConsulta={getUrl(filtros)}
/>

#####       > PageDetalhar
Página de detalhamento do bem por id. O id é passado via URL (garantindo acesso e compartilhamento da página direto do navegador) e é feita consulta no serviço para buscar as informações de detalhe daquele bem.
A estrutura de chamada segue como no exemplo:

const { id } = props.match.params;

<PageDetalharAccordionGenerica
    titulo="Detalhamento do Bem"
    id={id}
    formatacao={formatacao}
    metodoDeBusca={ApiBem.consultarBemPorId}
    botoes={botoes}
/>

#####       > PageFeedback
Página de cadastro de feedback por bem. O id, neste caso de cadastro, não é passado via URL e força o fluxo a ser executado via sistema.
A estrutura da página contém os as seguintes definições:
- estados para armazenar os dados digitados
- constante que monta os dados digitados em um objeto que possa ser reconhecido pelo serviço
- métodos de validação
- controle de chamada ao serviço de cadastro
- formulário

## Outras definições
O projeto foi configurado para permitir imports absolutos (tomando como base a pasta src) para evitar imports no formato "../../../" e tornar o import uniforme independente da localização da dependência.

Sendo assim, para importar "Components/Formatter/index.jsx", basta escrever:

`import Formatter from 'Components/Formatter';`

As pastas superiores contém todos os imports internos, então também é possível fazer:

`import { Formatter } from 'Components';`

Por isso as pastas do projeto, por padrão, começam com letra maiúscula, para que o desenvolvedor não confunda a importação de componentes internos com a importação de componentes de dependências.