feat: finish crud v1

Author: iCristianoSQL

index.html

@@ -14,11 +14,15 @@
       <section class="bg-black w-[600px] h-[400px] gradient-global rounded-3xl pt-4 pr-3 pb-3 pl-3 section-animation">
         <h1 class='font-bold text-center text-3xl'>LISTA DE TAREFAS</h1>
         <p class="text-center font-semibold text-base">Apenas 3 tarefas restantes, pois já finalizamos 2 das 5 tarefas.</p>
-        <div class="bg-white w-full h-[70%] overflow-auto p-2">
+        <div class="bg-[#181818] rounded-[10px] w-full h-[70%] overflow-auto p-2">
           <ul class="flex flex-col gap-2">
           </ul>
         </div>
+        <div class="flex justify-center">
+          <button class="p-4 rounded-[10px] font-semibold" id="create-task">CRIAR TAREFA</button>
+        </div>
       </section>
+      <!-- Editando uma tarefa -->
       <dialog class="bg-gray-800 m-auto h-96 w-[30rem] rounded-xl p-4" id="task-modal">
         <div class="content-modal relative">
           <button class="p-[0.1rem] absolute right-0" id="close-modal">X</button>
@@ -40,6 +44,29 @@ <h2 class="font-bold text-center">
         </div>
       </dialog>
 
+      <!-- Criando uma tarefa -->
+      <dialog class="bg-gray-800 m-auto h-96 w-[30rem] rounded-xl p-4" id="create-task-modal">
+        <div class="content-modal relative">
+          <button class="p-[0.1rem] absolute right-0" id="create-close-task-modal">X</button>
+          <h2 class="font-bold text-center">
+            Criando uma tarefa
+          </h2>
+          <div class="flex flex-col">
+            <label class="font-semibold" for="title-task">Título:</label>
+            <input class="h-8 rounded-[8px] focus:outline-none text-black pl-2 pr-2" type="text" id="create-title-task" />
+          </div>
+
+          <div class="flex flex-col mt-2">
+            <label class="font-semibold" for="description">Descrição:</label>
+            <textarea class="h-40 rounded-[8px] focus:outline-none resize-none text-black pl-2 pr-2" id="create-description"></textarea>
+          </div>
+          <div class="flex mt-4 justify-center">
+            <button class="bg-black p-4 rounded-[10px] font-semibold" id="create-task-submit">Registrar</button>
+          </div>
+        </div>
+      </dialog>
+
+      <!-- Criando um usuario -->
       <dialog class="bg-gray-800 m-auto h-98 w-[30rem] rounded-xl p-4" id="user-modal">
         <div class="content-modal relative">
           <h2 class="font-bold text-center">

src/javascript/domTasksCrud.ts

@@ -1,15 +1,23 @@
 import { taskApi } from "../service/taskApi"
+
 const taskModal: HTMLDialogElement = document.querySelector("#task-modal")!;
 const taskTitle: HTMLInputElement = document.querySelector("#title-task")!;
 const taskDescrition: HTMLTextAreaElement = document.querySelector("#description")!;
 const closeModal: HTMLButtonElement = document.querySelector("#close-modal")!;
 const buttonSubmit: HTMLButtonElement  = document.querySelector("#button-submit")!;
 
+const createTaskModal: HTMLDialogElement = document.querySelector("#create-task-modal")!;
+const createTaskTitle: HTMLInputElement = document.querySelector("#create-title-task")!;
+const createTaskDescription: HTMLTextAreaElement = document.querySelector("#create-description")!;
+const createTaskButtonSubmit: HTMLButtonElement = document.querySelector("#create-task-submit")!;
+const createTaskButton: HTMLButtonElement = document.querySelector("#create-task")!;
+const createCloseTaskModal: HTMLButtonElement = document.querySelector("#create-close-task-modal")!;
+
 let idForUpdate = 0;
 const userData = JSON.parse(localStorage.getItem('@userData') ?? '');
 
+// Atualizando uma tarefa
 buttonSubmit.addEventListener("click", () => {
-  console.log(idForUpdate);
   taskApi.updateTask(idForUpdate, {
     title: taskTitle.value,
     description: taskDescrition.value
@@ -20,6 +28,32 @@ closeModal.addEventListener("click", () => {
   taskModal.close();
 });
 
+// Criando uma tarefa
+createTaskButton.addEventListener("click", () => {
+  createTaskModal.showModal();
+});
+
+createCloseTaskModal.addEventListener("click", () => {
+  createTaskModal.close();
+});
+
+createTaskButtonSubmit.addEventListener("click", async () => {
+  try {
+    const response = await taskApi.createTask({
+      user: userData[0].name,
+      photo: userData[0].urlImage,
+      title: createTaskTitle.value,
+      description: createTaskDescription.value,
+    });
+
+    console.log("Tarefa criada com sucesso:", response);
+    location.reload()
+  } catch (error) {
+    console.log("Erro ao criar a tarefa:", error);
+  }
+});
+
+
 async function fetchData() {
   try {
     const response = await taskApi.getAllTasks();

src/service/taskApi.ts

@@ -38,6 +38,7 @@ export const taskApi = {
           console.log('Ocorreu um erro na requisição:', error);
         });      
   },
+
   updateTask: (id: number, dataToUpdate: ITaskField) => {
     fetch(`${baseURL}/tasks/${id}`, {
         method: 'PATCH',
@@ -57,6 +58,7 @@ export const taskApi = {
           console.log('Ocorreu um erro na requisição:', error);
         });      
   },
+
   getAllTasks: async () => {
     try {
       const response = await fetch(`${baseURL}/tasks`);
@@ -66,9 +68,10 @@ export const taskApi = {
       console.log("Ocorreu um erro na requisição", error)
    }
   },
+  
   createTask: async (dataToCreate: ITaskField) => {
     try {  
-      const response = await fetch(baseURL, {
+      const response = await fetch(`${baseURL}/tasks`, {
         method: 'POST',
         headers: {
           'Content-Type': 'application/json'