joelpmonteiro / facilitatask

FacilitaTask

FacilitaTask

FacilitaTask

Sumário

• Rodando APP
• Bibliotecas usadas
• FacilitaTask
• FacilitaTask - Construção do app
• Desafio - todoList
• Plus Nivel 1 e Nivel 2
• Explicando Codigo

Como Rodar aplicação

• Instale as dependencias com npm install
  • npm install
• Rodando app, ele vai ser rodado na porta 8080
  • npm run serve

Bibliotecas usadas

• Vue - 2.6.2
• Vuex - 3.6.2
• Vue Router - 3.2.0
• Stylus - pré-processador CSS

FacilitaTask - (Explicação do codigo,Construção do codigo e Plus)

• Projeto Foi Dividido na seguinte estrutura de pastas:
  • View - Paginas de visualização.
  • Components - Todos os items para montagem da tela.
  • Component/Modal - Modal para criar tarefa e de excluir tarefa.
  • Component/Content - montagem do texto no meio da tela de "você possui tantas tarefas".
  • assets - onde são colocados os css, imagens e fonts e etc.
  • router - montagem das rotas da aplicação.
  • store - para o uso do vuex na aplicação.

FacilitaTask - Construção do app

Bom a construção do app se deu primeiro no layout primeiramente. E logo apois isso construi as funções basicas do crud que foi dado no Desafio

Desafio - todoList

• Listar tarefas
• Adicionar tarefa
• Excluir tarefa
• Marcar tarefa como concluída
• Buscar tarefas pelo título
• Uso do LocalStorage

Plus Nivel 1 e Nivel 2

• Nivel 1.

  • Responsividade das telas - (Obs.: Foi feito somente a responsividade com mais detalhes da pagina de Login)
  • Comente o código criando uma mini documentação
  • Hospede o projeto em um servidor e nos mande a URL para visualização.

• Nivel 2

  • Crie o recurso de edição da tarefa
  • Implemente uma busca que utiliza os campos título e descrição juntos.
  • Ao listar todas as tarefas, ordene a lista de acordo com a prioridade: Urgentes, Importantes, Outras
  • Utilize o Vuex

Explicando Codigo

• MyTasks.vue

  • Bom aqui eu estou criando a NavBar que contém as informações do Dashboard,Tarefas e Configurações, logo depois disso, eu creio o LayoutContent, pois é onde crio o content do app e também o outro Navbar de categorias e também o header do app, que contém a informação do Usuario que logou no sistema

• LayoutContent.vue

  • Aqui estamos criando os componentes que mencionei logo acima na primeira imagem, que são Header,Leftbar que e o Navbar a direito, e o Content, onde tem a lista de tarefas. Bom e dentro do Componente Header também chamo outro component chamado CardUser que é onde está escrito o nome do "usuario e front-end Developer"

• CardUser.vue

  • Nesse arquivo para puxar o nome do usuario eu puxo diretamente do Localstorage.

• Header.vue

  • Chamada do Arquivo CardUser.vue

• Content.vue

  • Nesse arquivo é onde ele irá criar o content da listagem das tarefas, e o compponente que chama "MyTasks" estou chamando ele nesse arquivo, enviando algumas props que ele irá receber os dados, como a props ":listJobs", bom aqui é eu envio toda a lista de tarefas para o component "MyTasks", e também envio outras props que são "msg e valor", bom aqui é para caso eu obtenha algum erro para adicionar a tarefa e para não chamar o component modal de exclusão aqui ou para criar outro component para isso, eu so envio essas props para o proprio component que chamo de "ConfirmTask.vue" e esse componente fica por conta de confirmar se será um component de msg de erro, ou um component de exclusão.

• MyTasks.vue

  • Nesse local da imagem eu estou fazendo a verificação que mencionei na imagem acima, onde que ele faz o teste se é ou nao um erro, e envia ao component

• MyTasks.vue

  • Nesse arquivo é onde contém a renderização de toda a lista, e aqui eu estou mostrando a parte onde ele irá abrir a modal de exclução e a modal de alteração caso seja clicado

• MyTasks.vue

  • Nesse local aqui, é onde eu faço a checagem para ver se a tarefa foi concluida ou nao, e quando for marcada como concluida irá alterar uma variavel no localstorage e no VUEX para determinar que está tarefa foi concluida

• LefBar.vue - Imagem do component montado no navegador
  • aqui esse menu ele está funcionando - Clicavel, e irá redirecionar para a mesma pagina porém irá filtrar de acordo com (urgentes, importante, outras e etc)