CRUD Finalizado

codigofalado · May 31, 2020 · a2ba86d · a2ba86d
1 parent 29f426c
commit a2ba86d
Show file tree

Hide file tree

Showing 5 changed files with 153 additions and 37 deletions.
diff --git a/README.md b/README.md
@@ -25,7 +25,7 @@ Objetivos a cumprir com o Nest.JS:
 - [x] Configuração (variáveis de ambiente)
 - [x] Banco de Dados - Mongo
 - [x] Testes Unitários Para o MongoDB
-- [ ] Crud Básico
+- [x] Crud Básico
 - [ ] Cache
 - [ ] Autenticação
 - [ ] Upload de Arquivos

diff --git a/src/crud/crud.controller.ts b/src/crud/crud.controller.ts
@@ -43,10 +43,6 @@ export class CrudController {
     // Erro
     return res.redirect("/crud?error=1");
   }
-  @Get("update")
-  update(): string {
-    return `<h1>CRUD UPDATE Vai Aqui</h1>`;
-  }
   @Get("delete/:id")
   @Render("crud-delete")
   async delete(@Param("id") id: string) {
@@ -56,6 +52,32 @@ export class CrudController {
     // 2 - Retornar um Form de Confirmação / Cancelamento
     return { comida };
   }
+  @Get("edit/:id")
+  @Render("crud-edit")
+  async edit(@Param("id") id: string) {
+    // 1 - Certificar-se de que a Comida foi encontrada
+    let comida = await this.crudService.findOne(id);
+    if (!comida) throw new NotFoundException("Comida não encontrada!");
+    // 2 - Retornar um Form de Edição
+    return { comida };
+  }
+  @Post("edit/:id")
+  async update(
+    @Param("id") id: string,
+    @Body() createFoodDto: CreateFoodDto,
+    @Res() res
+  ) {
+    // 1 - Certificar-se de que a Comida foi encontrada
+    let comida = await this.crudService.findOne(id);
+    if (!comida) throw new NotFoundException("Comida não encontrada!");
+    // 2 - Atualiza a comida
+    comida.name = createFoodDto.name;
+    comida.ingredients = createFoodDto.ingredients;
+    comida.emoji = createFoodDto.emoji;
+    comida.price = createFoodDto.price;
+    await this.crudService.save(comida);
+    return res.redirect("/crud?success=1");
+  }
   @Post("delete/:id")
   async confirmDelete(@Param("id") id: string, @Res() res) {
     // 1 - Certificar-se de que a Comida foi encontrada

diff --git a/views/crud-create.hbs b/views/crud-create.hbs
@@ -33,7 +33,7 @@
                     </label>
                 </div>
                 <div class="md:w-2/3">
-                    <input
+                    <input required
                         class="bg-gray-200 appearance-none border-2 border-gray-200 rounded w-full py-2 px-4 text-gray-700 leading-tight focus:outline-none focus:bg-white focus:border-purple-500"
                         id="name" name="name" type="text" placeholder="Digite o Nome da Comida">
                 </div>
@@ -45,7 +45,7 @@
                     </label>
                 </div>
                 <div class="md:w-2/3">
-                    <textarea
+                    <textarea required
                         class="bg-gray-200 appearance-none border-2 border-gray-200 rounded w-full py-2 px-4 text-gray-700 leading-tight focus:outline-none focus:bg-white focus:border-purple-500"
                         name="ingredients" id="ingredients" cols="30" rows="10"
                         placeholder="Digite os Ingredientes"></textarea>
@@ -58,7 +58,7 @@
                     </label>
                 </div>
                 <div class="md:w-2/3">
-                    <input
+                    <input required
                         class="bg-gray-200 appearance-none border-2 border-gray-200 rounded w-full py-2 px-4 text-gray-700 leading-tight focus:outline-none focus:bg-white focus:border-purple-500"
                         id="emoji" name="emoji" type="text" placeholder="Digite o Emoji" maxlength="2">
                 </div>
@@ -70,7 +70,7 @@
                     </label>
                 </div>
                 <div class="md:w-2/3">
-                    <input
+                    <input required
                         class="bg-gray-200 appearance-none border-2 border-gray-200 rounded w-full py-2 px-4 text-gray-700 leading-tight focus:outline-none focus:bg-white focus:border-purple-500"
                         id="price" name="price" type="text" placeholder="Digite o Preço">
                 </div>

diff --git a/views/crud-edit.hbs b/views/crud-edit.hbs
@@ -0,0 +1,94 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Editar {{comida.name}}</title>
+    <link href="https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" rel="stylesheet">
+</head>
+{{#if error}}
+<div class="bg-red-100 border border-red-400 text-red-700 px-4 py-3 rounded relative" role="alert">
+    <strong class="font-bold">Eita Preula!</strong>
+    <span class="block sm:inline">Preencha este formulário direito</span>
+    <span class="absolute top-0 bottom-0 right-0 px-4 py-3" onclick="this.parentNode.classList.add('hidden')">
+        <svg class="fill-current h-6 w-6 text-red-500" role="button" xmlns="http://www.w3.org/2000/svg"
+            viewBox="0 0 20 20">
+            <title>Close</title>
+            <path
+                d="M14.348 14.849a1.2 1.2 0 0 1-1.697 0L10 11.819l-2.651 3.029a1.2 1.2 0 1 1-1.697-1.697l2.758-3.15-2.759-3.152a1.2 1.2 0 1 1 1.697-1.697L10 8.183l2.651-3.031a1.2 1.2 0 1 1 1.697 1.697l-2.758 3.152 2.758 3.15a1.2 1.2 0 0 1 0 1.698z" />
+        </svg>
+    </span>
+</div>
+{{/if}}
+
+<body>
+    <div class="mt-8 container mx-auto">
+        <h1 class="text-4xl mb-8">Editar Comida {{comida.name}} {{comida.emoji}}</h1>
+        <form class="w-full max-w-sm" method="POST">
+            <div class="md:flex md:items-center mb-6">
+                <div class="md:w-1/3">
+                    <label class="block text-gray-500 font-bold md:text-right mb-1 md:mb-0 pr-4" for="name">
+                        Nome
+                    </label>
+                </div>
+                <div class="md:w-2/3">
+                    <input required value="{{comida.name}}"
+                        class="bg-gray-200 appearance-none border-2 border-gray-200 rounded w-full py-2 px-4 text-gray-700 leading-tight focus:outline-none focus:bg-white focus:border-purple-500"
+                        id="name" name="name" type="text" placeholder="Digite o Nome da Comida">
+                </div>
+            </div>
+            <div class="md:flex md:items-center mb-6">
+                <div class="md:w-1/3">
+                    <label class="block text-gray-500 font-bold md:text-right mb-1 md:mb-0 pr-4" for="ingredients">
+                        Ingredientes
+                    </label>
+                </div>
+                <div class="md:w-2/3">
+                    <textarea required
+                        class="bg-gray-200 appearance-none border-2 border-gray-200 rounded w-full py-2 px-4 text-gray-700 leading-tight focus:outline-none focus:bg-white focus:border-purple-500"
+                        name="ingredients" id="ingredients" cols="30" rows="10"
+                        placeholder="Digite os Ingredientes">{{comida.ingredients}}</textarea>
+                </div>
+            </div>
+            <div class="md:flex md:items-center mb-6">
+                <div class="md:w-1/3">
+                    <label class="block text-gray-500 font-bold md:text-right mb-1 md:mb-0 pr-4" for="emoji">
+                        Emoji
+                    </label>
+                </div>
+                <div class="md:w-2/3">
+                    <input required value="{{comida.emoji}}"
+                        class="bg-gray-200 appearance-none border-2 border-gray-200 rounded w-full py-2 px-4 text-gray-700 leading-tight focus:outline-none focus:bg-white focus:border-purple-500"
+                        id="emoji" name="emoji" type="text" placeholder="Digite o Emoji" maxlength="2">
+                </div>
+            </div>
+            <div class="md:flex md:items-center mb-6">
+                <div class="md:w-1/3">
+                    <label class="block text-gray-500 font-bold md:text-right mb-1 md:mb-0 pr-4" for="price">
+                        Preço
+                    </label>
+                </div>
+                <div class="md:w-2/3">
+                    <input required value="{{comida.price}}"
+                        class="bg-gray-200 appearance-none border-2 border-gray-200 rounded w-full py-2 px-4 text-gray-700 leading-tight focus:outline-none focus:bg-white focus:border-purple-500"
+                        id="price" name="price" type="text" placeholder="Digite o Preço">
+                </div>
+            </div>
+            <div class="md:flex md:items-center">
+                <div class="md:w-1/3"></div>
+                <div class="md:w-2/3">
+                    <button
+                        class="shadow bg-purple-500 hover:bg-purple-400 focus:shadow-outline focus:outline-none text-white font-bold py-2 px-4 rounded"
+                        type="submit">
+                        Editar Comida
+                    </button>
+                </div>
+            </div>
+        </form>
+    </div>
+
+
+</body>
+
+</html>
diff --git a/views/crud-list.hbs b/views/crud-list.hbs
@@ -7,36 +7,36 @@
     <title>Nossas Comidas</title>
     <link href="https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" rel="stylesheet">
 </head>
-{{#if error}}
-<div class="bg-red-100 border border-red-400 text-red-700 px-4 py-3 rounded relative" role="alert">
-    <strong class="font-bold">Eita Preula!</strong>
-    <span class="block sm:inline">Deu erro por aí</span>
-    <span class="absolute top-0 bottom-0 right-0 px-4 py-3" onclick="this.parentNode.classList.add('hidden')">
-        <svg class="fill-current h-6 w-6 text-red-500" role="button" xmlns="http://www.w3.org/2000/svg"
-            viewBox="0 0 20 20">
-            <title>Close</title>
-            <path
-                d="M14.348 14.849a1.2 1.2 0 0 1-1.697 0L10 11.819l-2.651 3.029a1.2 1.2 0 1 1-1.697-1.697l2.758-3.15-2.759-3.152a1.2 1.2 0 1 1 1.697-1.697L10 8.183l2.651-3.031a1.2 1.2 0 1 1 1.697 1.697l-2.758 3.152 2.758 3.15a1.2 1.2 0 0 1 0 1.698z" />
-        </svg>
-    </span>
-</div>
-{{/if}}
-{{#if success}}
-<div class="bg-green-100 border border-green-400 text-green-700 px-4 py-3 rounded relative" role="alert">
-    <strong class="font-bold">Minha Nossa!</strong>
-    <span class="block sm:inline">Deu tudo certo!</span>
-    <span class="absolute top-0 bottom-0 right-0 px-4 py-3" onclick="this.parentNode.classList.add('hidden')">
-        <svg class="fill-current h-6 w-6 text-green-500" role="button" xmlns="http://www.w3.org/2000/svg"
-            viewBox="0 0 20 20">
-            <title>Close</title>
-            <path
-                d="M14.348 14.849a1.2 1.2 0 0 1-1.697 0L10 11.819l-2.651 3.029a1.2 1.2 0 1 1-1.697-1.697l2.758-3.15-2.759-3.152a1.2 1.2 0 1 1 1.697-1.697L10 8.183l2.651-3.031a1.2 1.2 0 1 1 1.697 1.697l-2.758 3.152 2.758 3.15a1.2 1.2 0 0 1 0 1.698z" />
-        </svg>
-    </span>
-</div>
-{{/if}}
 
 <body>
+    {{#if error}}
+    <div class="bg-red-100 border border-red-400 text-red-700 px-4 py-3 rounded relative" role="alert">
+        <strong class="font-bold">Eita Preula!</strong>
+        <span class="block sm:inline">Deu erro por aí</span>
+        <span class="absolute top-0 bottom-0 right-0 px-4 py-3" onclick="this.parentNode.classList.add('hidden')">
+            <svg class="fill-current h-6 w-6 text-red-500" role="button" xmlns="http://www.w3.org/2000/svg"
+                viewBox="0 0 20 20">
+                <title>Close</title>
+                <path
+                    d="M14.348 14.849a1.2 1.2 0 0 1-1.697 0L10 11.819l-2.651 3.029a1.2 1.2 0 1 1-1.697-1.697l2.758-3.15-2.759-3.152a1.2 1.2 0 1 1 1.697-1.697L10 8.183l2.651-3.031a1.2 1.2 0 1 1 1.697 1.697l-2.758 3.152 2.758 3.15a1.2 1.2 0 0 1 0 1.698z" />
+            </svg>
+        </span>
+    </div>
+    {{/if}}
+    {{#if success}}
+    <div class="bg-green-100 border border-green-400 text-green-700 px-4 py-3 rounded relative" role="alert">
+        <strong class="font-bold">Minha Nossa!</strong>
+        <span class="block sm:inline">Deu tudo certo!</span>
+        <span class="absolute top-0 bottom-0 right-0 px-4 py-3" onclick="this.parentNode.classList.add('hidden')">
+            <svg class="fill-current h-6 w-6 text-green-500" role="button" xmlns="http://www.w3.org/2000/svg"
+                viewBox="0 0 20 20">
+                <title>Close</title>
+                <path
+                    d="M14.348 14.849a1.2 1.2 0 0 1-1.697 0L10 11.819l-2.651 3.029a1.2 1.2 0 1 1-1.697-1.697l2.758-3.15-2.759-3.152a1.2 1.2 0 1 1 1.697-1.697L10 8.183l2.651-3.031a1.2 1.2 0 1 1 1.697 1.697l-2.758 3.152 2.758 3.15a1.2 1.2 0 0 1 0 1.698z" />
+            </svg>
+        </span>
+    </div>
+    {{/if}}
     <div class="mt-8 container mx-auto">
         <h1 class="text-4xl mb-8">Nossas Comidas</h1>
         <table class="table-fixed">