From 60290956ecca2e7e8d5f9809240be6f720ddc50e Mon Sep 17 00:00:00 2001
From: Mohamed Maoulainine Maoulainine
 <Mohamed_Maoulainine.Maoulainine@enseirb-matmeca.fr>
Date: Wed, 9 Apr 2025 00:46:44 +0200
Subject: [PATCH] feat: added form to add project and pending project section
 for admin, i forgot to push them

---
 .../src/components/AddProjectForm.vue         | 102 ++++++++++++
 .../components/PendingProjectComponent.vue    | 149 ++++++++++++++++++
 front/MyINPulse-front/src/views/AdminMain.vue |  41 +++--
 3 files changed, 282 insertions(+), 10 deletions(-)
 create mode 100644 front/MyINPulse-front/src/components/AddProjectForm.vue
 create mode 100644 front/MyINPulse-front/src/components/PendingProjectComponent.vue

diff --git a/front/MyINPulse-front/src/components/AddProjectForm.vue b/front/MyINPulse-front/src/components/AddProjectForm.vue
new file mode 100644
index 0000000..7b59104
--- /dev/null
+++ b/front/MyINPulse-front/src/components/AddProjectForm.vue
@@ -0,0 +1,102 @@
+<template>
+    <form class="add-project-form" @submit.prevent="submitProject">
+      <h2>Ajouter un projet</h2>
+  
+      <div class="form-group">
+        <label for="projectName">Nom du projet</label>
+        <input
+          id="projectName"
+          v-model="project.projectName"
+          type="text"
+          required
+        />
+      </div>
+  
+      <div class="form-group">
+        <label for="creationDate">Date de création</label>
+        <input
+          id="creationDate"
+          v-model="project.creationDate"
+          type="text"
+          placeholder="JJ-MM-AAAA"
+          required
+        />
+      </div>
+  
+      <div class="form-group">
+        <label for="logo">Logo</label>
+        <input
+          id="logo"
+          v-model="project.logo"
+          type="text"
+          placeholder="(à discuter)"
+        />
+      </div>
+  
+      <button type="submit">Ajouter</button>
+    </form>
+  </template>
+  
+  <script setup lang="ts">
+  import { ref } from "vue";
+  import { postApi } from "@/services/api.ts"; 
+  
+  const project = ref({
+    idProject: 0,
+    projectName: "",
+    creationDate: "",
+    logo: "to be discussed not yet fixed",
+  });
+  
+  function submitProject() {
+    postApi("/admin/projects/add", project.value);
+  }
+  </script>
+  
+  <style scoped>
+  .add-project-form {
+    max-width: 500px;
+    margin: 0 auto;
+    padding: 20px;
+    background: #fff;
+    border-radius: 10px;
+    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+  }
+  
+  h2 {
+    margin-bottom: 20px;
+    font-size: 24px;
+    color: #333;
+  }
+  
+  .form-group {
+    margin-bottom: 15px;
+    display: flex;
+    flex-direction: column;
+  }
+  
+  label {
+    font-weight: bold;
+    margin-bottom: 5px;
+  }
+  
+  input {
+    padding: 8px;
+    border-radius: 5px;
+    border: 1px solid #ccc;
+  }
+  
+  button {
+    background-color: #4caf50;
+    color: white;
+    padding: 10px 15px;
+    border: none;
+    border-radius: 5px;
+    cursor: pointer;
+  }
+  
+  button:hover {
+    background-color: #45a049;
+  }
+  </style>
+  
\ No newline at end of file
diff --git a/front/MyINPulse-front/src/components/PendingProjectComponent.vue b/front/MyINPulse-front/src/components/PendingProjectComponent.vue
new file mode 100644
index 0000000..8c8c250
--- /dev/null
+++ b/front/MyINPulse-front/src/components/PendingProjectComponent.vue
@@ -0,0 +1,149 @@
+<template>
+    <div class="project">
+        <div class="project-header">
+            <div class="project-title">
+                <h2>{{ projectName }}</h2>
+                <p>projet mis le: {{ creationDate }}</p>
+            </div>
+        <div class="project-button">
+            <button id="accept" @click="acceptProject">Accepter</button>
+            <button id="refus" @click="refuseProject">Refuser</button>
+        </div>
+    </div>
+    </div>
+
+</template>
+
+
+
+<script setup lang="ts">
+import { defineProps } from "vue";
+import { postApi } from "@/services/api";
+import { addNewMessage, color } from "@/services/popupDisplayer";
+
+const props = defineProps<{
+  projectName: string;
+  creationDate: string;
+}>();
+
+const URI = "/admin/projects/pending/decision";
+
+const sendDecision = (decision: "true" | "false") => {
+  postApi(
+    URI,
+    {
+      projectName: props.projectName,
+      decision,
+    },
+    () => {
+      addNewMessage(
+        `Projet ${props.projectName} ${decision === "true" ? "accepté" : "refusé"}`,
+        color.Green
+      );
+    },
+    (err) => {
+      addNewMessage(`Erreur lors de la décision`, color.Red);
+      console.error(err);
+    }
+  );
+};
+
+const acceptProject = () => sendDecision("true");
+const refuseProject = () => sendDecision("false");
+</script>
+
+
+
+<style scoped>
+.project {
+  background: linear-gradient(to right, #f4f4f4, #ffffff);
+  border: 1px solid #ddd;
+  border-radius: 10px;
+  padding: 20px;
+  margin: 20px 0;
+  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+  font-family: Arial, sans-serif;
+}
+
+/* Header Styling */
+.project-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: flex-start;
+}
+
+.project-title {
+  display: flex;
+  flex-direction: column;
+}
+
+.project-title h2 {
+  font-size: 20px;
+  color: #333;
+  margin: 0;
+}
+
+.project-title p {
+  font-size: 14px;
+  color: #777;
+  margin-top: 4px;
+}
+
+/* Button Container */
+.project-buttons {
+  display: flex;
+  gap: 10px;
+}
+
+#accept {
+  background-color: #45a049;
+}
+
+#refus {
+  background-color: red;
+}
+
+button {
+  padding: 10px 15px;
+  color: white;
+  border: none;
+  cursor: pointer;
+  border-radius: 5px;
+}
+
+button:hover {
+  transform: scale(1.05);
+}
+
+#accept:hover {
+  background-color: #3e8e41;
+}
+
+#refus:hover {
+  background-color: darkred;
+}
+
+/* Project Body (unchanged) */
+.project-body {
+  margin-top: 15px;
+}
+
+.project-body p {
+  font-size: 16px;
+  color: #555;
+  margin-bottom: 10px;
+}
+
+.project-body ul {
+  list-style-type: disc;
+  margin: 0;
+  padding-left: 20px;
+}
+
+.project-body ul li {
+  font-size: 14px;
+  color: #666;
+  line-height: 1.6;
+}
+
+</style>
\ No newline at end of file
diff --git a/front/MyINPulse-front/src/views/AdminMain.vue b/front/MyINPulse-front/src/views/AdminMain.vue
index 0e37829..eacccd2 100644
--- a/front/MyINPulse-front/src/views/AdminMain.vue
+++ b/front/MyINPulse-front/src/views/AdminMain.vue
@@ -1,8 +1,9 @@
 <template>
     <Header />
     <error-wrapper></error-wrapper>
-    <div id="container"> 
+    <div id="container">  
       <div id="main">
+        <h3> Projet en cours </h3>
           <ProjectComp 
             v-for="(project, index) in projects" 
             :key="index"
@@ -10,11 +11,24 @@
             :listName="project.members"
             :projectLink="project.link"
           />
-      </div>
-  
+
+        <div id ="main">
+          <h3> Projet en attente </h3>
+          
+          <PendingProjectComponent
+            v-for="( project, index) in pendingProjects"
+            :key="index"
+            :projectName="project.name"
+            :creationDate="project.creationDate"
+          />
+        </div> 
+
+        
+      </div>  
+      
       <Agenda :projectRDV="rendezVous" />
     </div>
-    
+    <AddProjectForm/>
 </template>
 
 <script setup lang="ts">
@@ -24,14 +38,15 @@ import { callApi } from "@/services/api";
 import Header from "../components/HeaderComponent.vue";
 import Agenda from "../components/Agenda.vue";
 import ProjectComp from "../components/ProjectComponent.vue";
-
+import PendingProjectComponent from "@/components/PendingProjectComponent.vue";
+import AddProjectForm from "@/components/AddProjectForm.vue";
 
 const PORT = "8081";
 const URI = `http://localhost:${PORT}`;
 
-const projects = ref<{ name: string; link: string; members: string[] }[]>([]);
+//const projects = ref<{ name: string; link: string; members: string[] }[]>([]);
 
-const fetchProjects = () => {
+/* const fetchProjects = () => {
   callApi(
     `${URI}/admin/projects`,
     async (response) => {
@@ -71,10 +86,10 @@ const fetchProjects = () => {
 };
 
 onMounted(fetchProjects);
+ */
 
 
-
-/*const projects = ref([
+const projects = ref([
   {
     name: "Projet Alpha",
     link: "/canvas", // to test
@@ -86,7 +101,13 @@ onMounted(fetchProjects);
     members: ["David", "Eve", "Frank"],
   },
 ]);
-*/
+
+
+const pendingProjects = ref ([
+  { name: "l'eau", creationDate: "26-02-2024" },
+  { name: "l'air", creationDate: "09-03-2023" },
+])
+
 const rendezVous = ref([
   { projectName: "Projet Alpha", date: "2025-03-10", lieu: "P106" },
   { projectName: "Projet Beta", date: "2025-04-15", lieu: "Td10" },