project creation request form working

src/App.vue

@@ -4,28 +4,12 @@
     <Menu />
     <RouterView />
   </div>
-  <DTLPanel v-if="isDTLPanelOpen" @close="isDTLPanelOpen = false" />
-  <DTLButton
-    v-if="page?.designToLight?.length > 0"
-    @click="openDTLPanel($event)"
-  />
 </template>
 
 <script setup>
 import { storeToRefs } from "pinia";
 import Menu from "./components/Menu.vue";
 import { usePageStore } from "./stores/page";
-import DTLButton from "./components/design-to-light/DTLButton.vue";
-import DTLPanel from "./components/design-to-light/DTLPanel.vue";
-import { ref } from "vue";
 
 const { page } = storeToRefs(usePageStore());
-
-const isDTLPanelOpen = ref(false);
-
-// Functions
-function openDTLPanel(event) {
-  isDTLPanelOpen.value = true;
-  event.stopImmediatePropagation();
-}
 </script>

src/components/Btn.vue

@@ -1,11 +0,0 @@
-<template>
-  <button :data-size="size">Label</button>
-</template>
-
-<script setup>
-const { size } = defineProps({
-  size: String,
-});
-</script>
-
-<style scoped></style>

src/components/ProjectRequestButton.vue

@@ -0,0 +1,11 @@
+<template>
+  <button class="btn">Demander la création d'un projet</button>
+</template>
+
+<style scoped>
+button {
+  position: fixed;
+  bottom: 0;
+  right: 0;
+}
+</style>

src/components/ProjectRequestDialog.vue

@@ -0,0 +1,61 @@
+<template>
+  <form @submit.prevent="handleSubmit">
+    <input type="text" v-model="title" placeholder="Nom du projet" required />
+    <textarea
+      name="details"
+      v-model="details"
+      cols="30"
+      rows="10"
+      placeholder="Détails du projet"
+      required
+    ></textarea>
+    <input type="checkbox" v-model="isDTLEnabled" />
+    <button type="submit">Soumettre</button>
+  </form>
+</template>
+
+<script setup>
+import { ref } from "vue";
+import { useApiStore } from "../stores/api";
+
+const title = ref("");
+const details = ref("");
+const isDTLEnabled = ref(false);
+const api = useApiStore();
+
+async function handleSubmit() {
+  const formData = {
+    title: title.value,
+    details: details.value,
+    isDTLEnabled: isDTLEnabled.value,
+  };
+
+  const response = await api.requestProjectCreation(formData);
+}
+</script>
+
+<style scoped>
+form {
+  position: fixed;
+  top: 0;
+  bottom: 0;
+  z-index: 999;
+  background-color: #000;
+  color: #fff;
+}
+
+button {
+  color: #fff;
+}
+
+input,
+textarea {
+  background-color: #fff;
+  color: #000;
+}
+
+input[type="checkbox"] {
+  width: 1rem;
+  height: 1rem;
+}
+</style>

src/stores/api.js

@@ -75,6 +75,28 @@ export const useApiStore = defineStore("api", () => {
     }
   }
 
+  async function requestProjectCreation(data) {
+    const headers = {
+      method: "POST",
+      body: JSON.stringify(data),
+    };
+
+    try {
+      const response = await fetch("/request-project-creation.json", headers);
+      if (!response.ok) {
+        throw new Error(`HTTP error! status: ${response.status}`);
+      }
+      const data = await response.json();
+      console.log(data);
+    } catch (error) {
+      console.error(
+        "Une erreur s'est produite lors de l'ajout du commentaire :",
+        error
+      );
+      throw error;
+    }
+  }
+
   async function updateComment(comment) {
     const headers = {
       method: "POST",
@@ -144,12 +166,6 @@ export const useApiStore = defineStore("api", () => {
     }
   }
 
-  /**
-   *
-   * @param {string} comment
-   * @param {string} projectId UUID or URI
-   * @returns status with message if error
-   */
   async function readNotification(notificationId, projectId) {
     const headers = {
       method: "POST",
@@ -233,5 +249,6 @@ export const useApiStore = defineStore("api", () => {
     readNotification,
     readAllNotifications,
     validateBrief,
+    requestProjectCreation,
   };
 });

src/views/Home.vue

@@ -1,9 +1,16 @@
 <template>
   <main class="flex flex-col" style="--row-gap: var(--space-32)">
     <Projects />
+    <ProjectRequestDialog v-if="isProjectRequestDialogOpen" />
+    <ProjectRequestButton @click="isProjectRequestDialogOpen = true" />
   </main>
 </template>
 
 <script setup>
 import Projects from "../components/Projects.vue";
+import ProjectRequestButton from "../components/ProjectRequestButton.vue";
+import ProjectRequestDialog from "../components/ProjectRequestDialog.vue";
+import { ref } from "vue";
+
+const isProjectRequestDialogOpen = ref(false);
 </script>

src/views/Kanban.vue

@@ -7,6 +7,12 @@
     <div class="kanban">
       <ProjectStep v-for="step in page.steps" :key="step" :step="step" />
     </div>
+
+    <DTLPanel v-if="isDTLPanelOpen" @close="isDTLPanelOpen = false" />
+    <DTLButton
+      v-if="page?.designToLight?.length > 0"
+      @click="openDTLPanel($event)"
+    />
   </main>
 </template>
 
@@ -16,9 +22,11 @@ import Header from "../components/project/Header.vue";
 import DialogWrapper from "../components/project/DialogWrapper.vue";
 import { usePageStore } from "../stores/page";
 import { storeToRefs } from "pinia";
-import { watch } from "vue";
+import { watch, ref } from "vue";
 import { useDialogStore } from "../stores/dialog";
 import { useRoute } from "vue-router";
+import DTLButton from "../components/design-to-light/DTLButton.vue";
+import DTLPanel from "../components/design-to-light/DTLPanel.vue";
 
 const { page } = storeToRefs(usePageStore());
 const dialog = useDialogStore();
@@ -29,6 +37,8 @@ if (route.query.dialog) {
   openDialog(route.query.dialog);
 }
 
+const isDTLPanelOpen = ref(false);
+
 watch(
   () => route.query.dialog,
   (targetStepSlug) => {
@@ -43,10 +53,16 @@ watch(
   }
 );
 
+// Functions
 function openDialog(targetStepSlug) {
   const targetStep = page.value.steps.find(
     (step) => step.slug === targetStepSlug
   );
   dialog.content = targetStep;
 }
+
+function openDTLPanel(event) {
+  isDTLPanelOpen.value = true;
+  event.stopImmediatePropagation();
+}
 </script>