Giter VIP home page Giter VIP logo

rdb-frontend's Introduction

Sobre

Projeto frontend para a causa Rueiros do Bem

Pré requisitos

Instalar o angular9 ou superior.

  1. Instalar npm (https://www.npmjs.com/get-npm)

  2. Instalar angular cli:

npm install -g @angular/cli

  1. Instalar node_modules na pasta backend.

npm install -g

Executando projeto

  1. Entrar na pasta do projeto backend

cd backend

  1. Executar o json-server

npm start

  1. Abra outra aba no terminal para executar o frontend

cd frontend

  1. Executar o server

npm start

  1. O serviço estará disponível na URL.

http://localhost:4200

rdb-frontend's People

Contributors

andrebrandaodf avatar kmacedovarela avatar otaviojava avatar

Stargazers

avatar

Watchers

avatar avatar avatar

Forkers

andrebrandaodf leandrorochaadm dearrudam

rdb-frontend's Issues

Refatoração na navegação da aplicação

Necessidade
Refatorar a navegação da aplicação para o 1o. MVP:

  • Redirecionar a página inicial da aplicação para a listagem de eventos;

  • No menu deixar somente os links para:

    • eventos
    • items

Remover relacionamento de um item de um evento

Necessidade

Na tela de exibição do evento, adicionar à uma tabela com seus itens relacionados um botão para remover o relacionamento.

  • Ao clicar no botão, solicitar uma confirmação para a exclusão;
  • Após a ação, atualize os dados da tabela conforme foi desenvolvido no issue #4;
  • Caso retorne 400, exiba uma mensagem dizendo que a requisição está inválida;
  • Caso retorne 404, exiba uma mensagem dizendo que não foi encontrado o relacionamento para executar a exclusão
  • Caso retorne 204, exiba uma mensagem dizendo que excluiu com sucesso o relacionamento;
  • Caso retorne um código não esperado, exiba uma mensagem genérica dizendo que houve problemas na execução da requisição;

Siga a especificação reduzida OpenAPI abaixo para carregar os dados. Caso queira ver a especificação mais completa para esse recurso, clique aqui

paths:
 
  /eventos/{eventoId}/itens/{itemId}:
    delete:
      tags:
      - eventos
      description: Remove um item do evento para o id informado
      parameters:
      - name: eventoId
        in: path
        description: Id do Evento
        required: true
        schema:
          type: number
      - name: itemId
        in: path
        description: Id do item do evento registrado
        required: true
        schema:
          type: number
      responses:
        204:
          description: Informa que removeu o item do evendo informado
          content: {}
        400:
          description: Requisição inválida
          content: {}
        404:
          description: Evento e/ou Item não encontrados
          content: {}

Dicas:
"Disclamer: essas dicas são para estudar e conhecer um pouco mais sobre Angular e sobre os frameworks envolvidos, então não encarem como uma regra, não existe "bala de prata", mas uma ou outra "ferramenta" a mais em nosso cinto de utilidades não faz mal algum, não é ?"

  • Tente utilizar componentes já existentes do Angular Material, como o Dialog

  • Entre em contato com o grupo do projeto em caso de dúvida. Que tal fazer pair programming? Ou quem sabe sessões de coding dojo? (Gostei da idéia)

Refatorar cadastro e edicão de itens para seguir os campos requeridos pela especificação

Necessidade

Refatorar o cadastro e a edição de itens de acordo com a especificação.

Restrições:

  • descrição é requerido;
  • valor de referência é requerido;
  • valor de referência é um número de ponto flutuante, de até 2 casas decimais;
  • valor de referência deve ser maior ou igual à zero;

Caso retorne 200, atualize os dados da tabela conforme foi desenvolvido no issue #9
Caso retorne 400, exiba uma mensagem dizendo que a requisição está inválida;
Caso retorne 404, exiba uma mensagem dizendo que não foi encontrado o item em caso de edição
Caso retorne um código não esperado, exiba uma mensagem genérica dizendo que houve problemas na execução da requisição;

Para o cadastro, siga a reduzida OpenAPI abaixo para carregar os dados. Caso queira ver a especificação mais completa para esse recurso, clique aqui

paths:
  /itens:
    post:
      tags:
      - itens
      description: Adiciona um novo item
      requestBody:
        content:
          application/json:
            schema:
              $ref: '#/components/schemas/NovoItemRequest'
        required: true
      responses:
        200:
          description: novo item registrado
          content:
            application/json:
              schema:
                $ref: '#/components/schemas/NovoItemResponse'
        400:
          description: Requisição inválida
          content: {}
               
components:
  schemas:
    NovoItemRequest:
      type: object
      properties:
        descricao:
          type: string
        valorReferencia:
          type: number
      required:
      - descricao
      - valorReferencia
      
    NovoItemResponse:
      type: object
      properties:
        id:
          type: number
        descricao:
          type: string
        valorReferencia:
          type: number

Para a edição, siga a reduzida OpenAPI abaixo para carregar os dados. Caso queira ver a especificação mais completa para esse recurso, clique aqui

paths:
  /itens/{id}:
    put:
      tags:
      - itens
      description: Atualiza item registrado
      parameters:
      - name: id
        in: path
        required: true
        schema:
          type: number
      requestBody:
        content:
          application/json:
            schema:
              $ref: '#/components/schemas/AtualizarItemRequest'
        required: true
      responses:
        200:
          description: Retorna o item atualizado
          content:
            application/json:
              schema:
                $ref: '#/components/schemas/AtualizarItemResponse'
        400:
          description: Parâmetros inválidos
          content: {}
        404:
          description: Item não encontrado
          content: {}
               
components:
  schemas:
    AtualizarItemRequest:
      type: object
      properties:
        descricao:
          type: string
        valorReferencia:
          type: number
      required:
      - descricao
      - valorReferencia
      
    AtualizarItemResponse:
      type: object
      properties:
        id:
          type: number
        descricao:
          type: string
        valorReferencia:
          type: number

Dicas:
"Disclamer: essas dicas são para estudar e conhecer um pouco mais sobre Angular e sobre os frameworks envolvidos, então não encarem como uma regra, não existe "bala de prata", mas uma ou outra "ferramenta" a mais em nosso cinto de utilidades não faz mal algum, não é ?"

  • Entre em contato com o grupo do projeto em caso de dúvida. Que tal fazer pair programming? Ou quem sabe sessões de coding dojo? (Gostei da idéia)

Refatorar a listagem de Itens para exibir os campos fornecidos pela especificação

Necessidade
Refatorar a listagem de Itens para exibir os campos fornecidos pela especificação. Os campos que devem ser exibidos são:

  • descricao
  • valor de referência

Caso retorne um código não esperado, exiba uma mensagem genérica dizendo que houve problemas na execução da requisição;

Siga a especificação reduzida OpenAPI abaixo para carregar os dados. Caso queira ver a especificação mais completa para esse recurso, clique aqui

paths:
  /itens:
    get:
      tags:
      - itens
      description: Lista todos os itens registrados
      responses:
        200:
          description: Lista de todos os itens registrados
          content:
            application/json:
              schema:
                $ref: '#/components/schemas/ListaDeItens'
                
  
components:
  schemas:
    
    ItemRegistrado:
      type: object
      properties:
        id:
          type: number
        descricao:
          type: string
        valorReferencia:
          type: number
          
    ListaDeItens:
      type: array
      items:
        $ref: '#/components/schemas/ItemRegistrado'

Dicas:
"Disclamer: essas dicas são para estudar e conhecer um pouco mais sobre Angular e sobre os frameworks envolvidos, então não encarem como uma regra, não existe "bala de prata", mas uma ou outra "ferramenta" a mais em nosso cinto de utilidades não faz mal algum, não é ?"

  • Entre em contato com o grupo do projeto em caso de dúvida. Que tal fazer pair programming? Ou quem sabe sessões de coding dojo? (Gostei da idéia)

Deixar o front-end mais responsivo para melhor renderização em dispositivos com baixa resolução

Atualmente o front-end não está renderizando de maneira agradável em dispositivos com baixa resolução, principalmente em modo portrait (retrato ou "em pé");

Já que estamos utilizando o "Angular Material", dêem uma olhada nos exemplos de utilização em: https://material.angular.io/components/sidenav/examples, em especial, há um exemplo responsivo aqui no Stackblitz;

P.S.: Não sou expert em front-end, normalmente utilizo componentes já prontos para os projetos em que eu desenvolvo... eu costumo usar componentes do Ionic, que me ajudam bastante quanto a exibição responsiva, mas talvez poderemos avaliar outras libs de componentes.

Criar componente para exibição de um evento

Necessidade

Criar um componente para exibir os seguintes campos de um evento:

  • nome

  • descrição

  • data inicial

  • data final

  • Caso retorne 404, exiba uma mensagem dizendo que não foi encontrado o evento informado

  • Caso retorne um código não esperado, exiba uma mensagem genérica dizendo que houve problemas na execução da requisição;

Esses dados devem ser oriundos do retorno do recurso especificado OpenAPI de forma reduzida abaixo. Caso queira ver a especificação mais completa para esse recurso, clique aqui

paths:
  /eventos/{id}:
    get:
      tags:
      - eventos
      description: Retorna o evento para o id informado
      parameters:
      - name: id
        in: path
        required: true
        schema:
          type: number
      responses:
        200:
          description: Retorna o evento registrados para o id informado
          content:
            application/json:
              schema:
                $ref: '#/components/schemas/EventoRegistrado'
        404:
          description: Evento não encontrado
          content: {}
    
components:
  schemas:
  
    EventoRegistrado:
      type: object
      properties:
        id:
          type: number
        nome:
          type: string
        descricao:
          type: string
        dataInicio:
          type: string
          format: date
        dataFim:
          type: string
          format: date

Dicas:
"Disclamer: essas dicas são para estudar e conhecer um pouco mais sobre Angular e sobre os frameworks envolvidos, então não encarem como uma regra, não existe "bala de prata", mas uma ou outra "ferramenta" a mais em nosso cinto de utilidades não faz mal algum, não é ?"

  • Sei que esse item está praticamente feito, porém é preciso adequar os campos e a forma de carregamento dos dados de acordo com a especificação.

  • Entre em contato com o grupo do projeto em caso de dúvida. Que tal fazer pair programming? Ou quem sabe sessões de coding dojo? (Gostei da idéia)

Listar relacionamento entre os eventos e itens

Necessidade

Na tela de exibição do evento, exibir uma tebela com seus itens relacionados exibindo somente os campos:

  • descrição do item;
  • valor de referência;

É esperado retornar 200, mas caso retorne um código não esperado, exiba uma mensagem genérica dizendo que houve problemas na execução da requisição;

Siga a especificação reduzida OpenAPI abaixo para carregar os dados. Caso queira ver a especificação mais completa para esse recurso, clique aqui

paths:
  
  /eventos/{eventoId}/itens:
    get:
      tags:
      - eventos
      description: Retorna os itens relacionados ao evento para o id informado
      parameters:
      - name: eventoId
        in: path
        description: Id do evento
        required: true
        schema:
          type: number
      responses:
        200:
          description: Lista de todos os itens relacionados para o evento informado
          content:
            application/json:
              schema:
                $ref: '#/components/schemas/ListaItemEvento'
        400:
          description: Requisição inválida
          content: {}
        404:
          description: Evento não encontrado
          content: {}
               
components:
  schemas:
    
    ItemEventoRegistrado:
      type: object
      properties:
        id:
          type: number
        descricao:
          type: string
        valorReferencia:
          type: number
          
    ListaItemEvento:
      type: array
      items:
        $ref: '#/components/schemas/ItemEventoRegistrado'

Dicas:
"Disclamer: essas dicas são para estudar e conhecer um pouco mais sobre Angular e sobre os frameworks envolvidos, então não encarem como uma regra, não existe "bala de prata", mas uma ou outra "ferramenta" a mais em nosso cinto de utilidades não faz mal algum, não é ?"

  • Tente utilizar componentes já existentes do Angular Material, como o Table

  • Entre em contato com o grupo do projeto em caso de dúvida. Que tal fazer pair programming? Ou quem sabe sessões de coding dojo? (Gostei da idéia)

Refatorar cadastro e edicão de eventos para seguir os campos requeridos pela especificação

Necessidade

Refatorar o cadastro e a edição de eventos de acordo com a especificação.

Restrições:

  • nome é requerido;
  • descrição não é requerido, porém deve ter no máximo 400 caracteres caso for fornecido;
  • data inicial é requerida.
  • data inicial deve seguir o padrão ISO 8601 ( YYYY-MM-DD )
  • data final não é requirida então caso não for informada, assumir a mesa data de início, significando o evento de um dia
  • data final deve seguir o padrão ISO 8601 ( YYYY-MM-DD ) caso for fornecida;
  • data final deve ser igual ou maior que a data inicial caso for fornecida;

Caso retorne 200, atualize os dados da tabela conforme foi desenvolvido no issue #10
Caso retorne 400, exiba uma mensagem dizendo que a requisição está inválida;
Caso retorne 404, exiba uma mensagem dizendo que não foi encontrado o item em caso de edição
Caso retorne um código não esperado, exiba uma mensagem genérica dizendo que houve problemas na execução da requisição;

Para o cadastro, siga a reduzida OpenAPI abaixo para carregar os dados. Caso queira ver a especificação mais completa para esse recurso, clique aqui

paths:
/eventos:
    post:
      tags:
      - eventos
      description: Adiciona um novo evento
      requestBody:
        content:
          application/json:
            schema:
              $ref: '#/components/schemas/NovoEventoRequest'
        required: true
      responses:
        200:
          description: novo evento registrado
          content:
            application/json:
              schema:
                $ref: '#/components/schemas/NovoEventoResponse'
        400:
          description: Requisição inválida
          content: {}
components:
  schemas:    
    NovoEventoRequest:
      type: object
      properties:
        nome:
          type: string
        descricao:
          type: string
        dataInicio:
          type: string
          format: date
        dataFim:
          type: string
          format: date
      required:
      - nome
      - dataInicio
  
    NovoEventoResponse:
      type: object
      properties:
        id:
          type: number
        nome:
          type: string
        descricao:
          type: string
        dataInicio:
          type: string
          format: date
        dataFim:
          type: string
          format: date

Para a edição, siga a reduzida OpenAPI abaixo para carregar os dados. Caso queira ver a especificação mais completa para esse recurso, clique aqui

paths:
  /eventos/{id}:
    put:
      tags:
      - eventos
      description: Atualiza um evento registrado
      parameters:
      - name: id
        in: path
        required: true
        schema:
          type: number
      requestBody:
        content:
          application/json:
            schema:
              $ref: '#/components/schemas/AtualizarEventoRequest'
        required: true
      responses:
        200:
          description: Retorna o evento atualizado
          content:
            application/json:
              schema:
                $ref: '#/components/schemas/AtualizarEventoResponse'
        400:
          description: Requisição inválida
          content: {}
        404:
          description: Evento não encontrado
          content: {}
   
               
components:
  schemas:
    
    AtualizarEventoRequest:
      type: object
      properties:
        nome:
          type: string
        descricao:
          type: string
        dataInicio:
          type: string
          format: date
        dataFim:
          type: string
          format: date
      required:
      - nome
      - dataInicio
      
    AtualizarEventoResponse:
      type: object
      properties:
        id:
          type: number
        nome:
          type: string
        descricao:
          type: string
        dataInicio:
          type: string
          format: date
        dataFim:
          type: string
          format: date

Dicas:
"Disclamer: essas dicas são para estudar e conhecer um pouco mais sobre Angular e sobre os frameworks envolvidos, então não encarem como uma regra, não existe "bala de prata", mas uma ou outra "ferramenta" a mais em nosso cinto de utilidades não faz mal algum, não é ?"

  • Entre em contato com o grupo do projeto em caso de dúvida. Que tal fazer pair programming? Ou quem sabe sessões de coding dojo? (Gostei da idéia)

Adicionar relacionamento entre item e evento

Necessidade

Na exibição do evento, adicionar uma forma para que o usuário forneça um item já cadastrado para ser relacionado ao evento;

  • Após a ação, atualize os dados da tabela conforme foi desenvolvido no issue #4;
  • Caso retorne 400, exiba uma mensagem dizendo que a requisição está inválida;
  • Caso retorne 404, exiba uma mensagem dizendo que não foi encontrado o relacionamento para executar a exclusão
  • Caso retorne 204, exiba uma mensagem dizendo que excluiu com sucesso o relacionamento;
  • Caso retorne um código não esperado, exiba uma mensagem genérica dizendo que houve problemas na execução da requisição;

Siga a especificação reduzida OpenAPI abaixo para carregar os dados. Caso queira ver a especificação mais completa para esse recurso, clique aqui

paths:
  /eventos/{eventoId}/itens:
    post:
      tags:
      - eventos
      description: Registrar um item ao evento para o id informado
      parameters:
      - name: eventoId
        in: path
        description: Id do evento
        required: true
        schema:
          type: number
      requestBody:
        content:
          application/json:
            schema:
              $ref: '#/components/schemas/RegistrarItemEventoRequest'
        required: true
      responses:
        200:
          description: Lista de todos os itens relacionados para o evento informado
          content:
            application/json:
              schema:
                $ref: '#/components/schemas/RegistrarItemEventoResponse'
        400:
          description: Requisição inválida
          content: {}
        404:
          description: Evento não encontrado
          content: {}
               
components:
  schemas:
        
    RegistrarItemEventoRequest:
      type: object
      properties:
        itemId:
          type: number
      required:
      - itemId
      
    RegistrarItemEventoResponse:
      type: object
      properties:
        id:
          type: number
        descricao:
          type: string
        valorReferencia:
          type: number

Dicas:
"Disclamer: essas dicas são para estudar e conhecer um pouco mais sobre Angular e sobre os frameworks envolvidos, então não encarem como uma regra, não existe "bala de prata", mas uma ou outra "ferramenta" a mais em nosso cinto de utilidades não faz mal algum, não é ?"

  • Tente utilizar componentes já existentes do Angular Material, como o Autocomplete para selecionar os itens disponíveis para relacionamento, lembrando de remover os itens já relacionados (um filter deve resolver).

  • Não é um requerimento, mas temos a possibilidade de utilizar o componente Dialog para exibir o autocomplete e o botão para adicionar. Segue um exemplo aqui

  • Entre em contato com o grupo do projeto em caso de dúvida. Que tal fazer pair programming? Ou quem sabe sessões de coding dojo? (Gostei da idéia)

Refatorar a listagem de eventos para exibir os campos fornecidos pela especificação

Necessidade
Refatorar a listagem de eventos para exibir os campos fornecidos pela especificação. Os campos que devem ser exibidos são:

  • nome
  • descricao
  • data inicio
  • data fim

Caso retorne um código não esperado, exiba uma mensagem genérica dizendo que houve problemas na execução da requisição;

Siga a especificação reduzida OpenAPI abaixo para carregar os dados. Caso queira ver a especificação mais completa para esse recurso, clique aqui

paths:
  /eventos:
    get:
      tags:
      - eventos
      description: Lista todos os eventos registrados
      responses:
        200:
          description: Lista de todos os eventos registrados
          content:
            application/json:
              schema:
                $ref: '#/components/schemas/ListaDeEventos'

               
components:
  schemas:
    
    EventoRegistrado:
      type: object
      properties:
        id:
          type: number
        nome:
          type: string
        descricao:
          type: string
        dataInicio:
          type: string
          format: date
        dataFim:
          type: string
          format: date
    
    ListaDeEventos:
      type: array
      items:
        $ref: '#/components/schemas/EventoRegistrado'

Dicas:
"Disclamer: essas dicas são para estudar e conhecer um pouco mais sobre Angular e sobre os frameworks envolvidos, então não encarem como uma regra, não existe "bala de prata", mas uma ou outra "ferramenta" a mais em nosso cinto de utilidades não faz mal algum, não é ?"

  • Entre em contato com o grupo do projeto em caso de dúvida. Que tal fazer pair programming? Ou quem sabe sessões de coding dojo? (Gostei da idéia)

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.