manager de projet (create_delete)

js/index.js

@@ -2,7 +2,8 @@
 function display_projects() {
   // Get data from API and then generate HTML code to display the data in a table
   const table = document.getElementById("table-projects");
-  const formContainer=document.getElementById('form-container')
+  const formContainer = document.getElementById('form-container');
+
   function showForm() {
     formContainer.style.display = 'flex';
   }
@@ -10,28 +11,28 @@ function display_projects() {
   function hideForm() {
     formContainer.style.display = 'none';
   }
+
   document.getElementById('show-form-button').addEventListener('click', showForm);
   document.getElementById('close-form-button').addEventListener('click', hideForm);
   document.getElementById('submit').addEventListener('click', handleFormSubmit);
 
-
   async function handleFormSubmit() {
     const nameProject = document.getElementById('name').value;
     const description = document.getElementById('description').value;
-    if(nameProject.length==0 || !checkName(global_project_list, nameProject)){
+    if (nameProject.length === 0 || !checkName(global_project_list, nameProject)) {
       alert('Le nom : " ' + nameProject + ' " est déjà pris ou vide ! \n' +
         'veuillez en trouver un autre');
       return 0;
     }
-    PostNewProject(nameProject,description);
+    PostNewProject(nameProject, description);
   }
 
   function checkName(Projects, name) {
     let res = true;
     Projects.forEach(project => {
-        const ProjectName = project.name;
-        if(ProjectName==name)
-          res=false;
+      const ProjectName = project.name;
+      if (ProjectName === name)
+        res = false;
     });
     return res;
   }
@@ -51,27 +52,47 @@ function display_projects() {
                 <th>${formatDate(global_project_list[i].start_date)}</th>
                 <th>${global_project_list[i].status}</th>
                 <th><button class="project_detail btn btn-primary">détails de ${
-                  global_project_list[i].name
-                }</button></th>
-                <th>test</th>
+      global_project_list[i].name
+    }</button></th>
+                <th><button name="${i}" class="project_delete btn btn-primary">Delete</button></th>
                 </tr>`;
   }
   table.innerHTML = datas;
 
-  // Select all the buttons with the class button_project
-  const buttons = document.getElementsByClassName("project_detail");
+  // Select all the buttons_access with the class button_project
+  const buttons_access = document.getElementsByClassName("project_detail");
+  const buttons_delete = document.getElementsByClassName("project_delete");
   // Add an event listener to each button
-  for (let i = 0; i < buttons.length; i++) {
-    buttons[i].addEventListener("click", (event) => {
+  for (let i = 0; i < buttons_access.length; i++) {
+    buttons_access[i].addEventListener("click", (event) => {
       // Send data to API and then navigate to projet_detail.html page
       window.location.href = `html/projet_detail.html?id=${global_project_list[i].id}`;
     });
-    buttons[i].addEventListener("onclick", (event) => {
+    buttons_access[i].addEventListener("click", (event) => {
       // Send data to API and then navigate to projet_detail.html page
       current_project = change_current_project(i);
     });
   }
+
+  for (let i = 0; i < buttons_delete.length; i++) {
+    buttons_delete[i].addEventListener("click", (event) => {
+      const projectName = global_project_list[i].name;
+      document.getElementById('alertMessage').textContent = `Veux-tu vraiment supprimer le projet : ${projectName} ?`;
+      document.getElementById('customAlert').style.display = 'block';
+
+      document.getElementById('okBtn').onclick = function() {
+        document.getElementById('customAlert').style.display = 'none';
+        // Call your delete function here
+        deleteProject(global_project_list[i].id);
+      };
+
+      document.getElementById('cancelBtn').onclick = function() {
+        document.getElementById('customAlert').style.display = 'none';
+      };
+    });
+  }
 }
+
 getAllProject()
   .then((project_list) => {
     global_project_list = project_list;