se você chegou até aqui, é porque tem os pre requisitos citados aqui
- para qualquer dúvida deverá ser aberta uma issue, afinal sua dúvida pode ser a do próximo
- ao publicar o projeto no github, certifique que o mesmo esteja privado (para nenhum candidato colar do outro) e dê permissão para os usuários ( amarkes e migueljr)
- ative o github pages no projeto (pode ver mais sobre neste link, iremos olhar a parte funcional pelo github pages
- usar o Vue cli
- publicar seu teste no github (Privado) para que seja feita a revisão no código e visual
- usar as boas praticas do Vue js
- criar uma aplicação web component, o candidato pode saber mais sobre web component neste artigo
- criar uma aplicação que possa ser inserida em qualquer pagina web
- criar um novo projeto com nome de wip-angulare
- implementar o bootstrap para os estilos do projeto
- criar uma pagina (amostra) para mostrar os components que serão desenvolvidos
- criar uma estrutura baseada no modelo abaixo conforme nescessidade
│ common
│ ├─ classes
│ ├─ directives
│ ├─ functions
│ └─ mixins
├─ components
├─ plugins
│ └─ validators
└─ stores
- criar um botão na pagina de amostra para abrir um modal (com botão de fechar no footer do modal) ( iremos chamar de modal de cadastro)
- devemos criar um formulário contendo os seguintes campos
- Nome completo
- Email (Validação de email)
- Data de nascimento (mascara para DD/MM/YYYY)
- Telefone (mascara para (99) 99999-9999)
- Sexo (drodown com Masculino e Feminino)
- T-Shirt Masculina/Feminina (mostrar de acordo com o que foi selecionado no sexo)
-
Salvar em cache usando o vuex (ao dar refresh na pagina esses dados não existirão mais caso não sejam gravados)
-
criar um botão na pagina de amostra, este botão irá abrir um outro modal (com botão de fechar no footer do modal), neste modal iremos mostrar em uma tabela, os dados salvos no store do modal de cadastro, a tabela irá exibir os campos Nome, email, data de nascimento, telefone, sexo, t-shirt e ações
- Botoes de ações serão ( Alterar e Deletar )
- ao clicar em alterar deverá abrir o modal de cadastro passando os dados deste item e ao salvar as alterações irá substituir o item no store
- ao clicar em deletar ele irá mostrar um alerta pedindo confirmação, se for confirmado o item deverá ser deletado do store
- fazer a instalação do axios
- criar serviços (pode conferir a documentação aqui
- criar um método para pegar um único post (get)
- criar um método para pegar uma lista (getAll)
- criar um método para fazer um post (post)
- endpoint https://jsonplaceholder.typicode.com/posts
- campos title, body, userId
- criar um método para fazer um put (put)
- endpoint https://jsonplaceholder.typicode.com/posts/ID
- campos id, title, body, userId
- criar um método para fazer um patch (patch)
- endpoint https://jsonplaceholder.typicode.com/posts/ID
- campos title, body, userId
- criar um método para fazer um delete (delete)
- criar um botão que irá abrir uma modal (com botão de cancelar no footer do modal) e nesta modal, termos uma tabela que irá listar os post pegando o método de list (getAll), mostrando os campos title, body, userId, ação, acima desta tabela teremos um botão de adicionar post
- teremos ações de alterar e deletar em cada linha da tabela
- ao clica em alterar envia o item do post para um outro modal com o formulario e botoes de alterar e cancelar
- alterar irá fazer um put
- cancelar irá fechar o modal
- ao clica em alterar envia o item do post para um outro modal com o formulario e botoes de alterar e cancelar
- teremos ação de deletar, irá abrir um alerta perguntando se deseja deletar o item, caso seja confirmado devemos chamar o método de delete
- Botão de adicionar do modal acima, irá abrir um outro modal contendo o formulário (campos title, body e userId tudo texto) com botoes de salvar e cancelar
- ações dos botoes
- ao clicar em salvar irá chamar o método post e salvar os dados
- ao clicar em cancelar fecha o modal