user role client : give access to panel account

src/components/Menu.vue

@@ -94,7 +94,7 @@
     </nav>
     <footer class="w-full">
       <ul class="flex">
-        <li data-icon="user" v-if="user?.role !== 'client'">
+        <li data-icon="user">
           <a href="/panel/account" @click="collapse()">Profil</a>
         </li>
         <li data-icon="logout">

src/components/ProjectRequestDialog.vue

@@ -13,17 +13,20 @@
       <h2 class="font-serif text-lg">Demander la création d’un projet</h2>
     </template>
 
-    <form @submit.prevent="handleSubmit" class="w-full h-full p-16 flex flex-col" style="--row-gap: 1rem">
-
+    <form
+      @submit.prevent="handleSubmit"
+      class="w-full h-full p-16 flex flex-col"
+      style="--row-gap: 1rem"
+    >
       <label for="project-title" class="sr-only">Nom du projet</label>
-      <input 
-        type="text" 
-        v-model="title" 
-        id="project-title" 
-        placeholder="Nom du projet" 
-        class="w-full rounded-md border border-grey-200 px-16 py-12" 
+      <input
+        type="text"
+        v-model="title"
+        id="project-title"
+        placeholder="Nom du projet"
+        class="w-full rounded-md border border-grey-200 px-16 py-12"
         required
-      >
+      />
 
       <label for="project-details" class="sr-only">Détails du projet</label>
       <textarea
@@ -37,29 +40,45 @@
         required
       ></textarea>
 
-      <div id="project-dtl" class="w-full text-left rounded-md border border-grey-200 text-grey-800 p-12" style="align-self: flex-start">
-        <input id="dtl" type="checkbox" v-model="isDTLEnabled">
-        <label for="dtl" class="flex font-medium mt-4" style="--column-gap: var(--space-4)">
-          Créer avec <span class="flex justify-center text-sm" data-icon="leaf">Design to Light</span>
+      <div
+        id="project-dtl"
+        class="w-full text-left rounded-md border border-grey-200 text-grey-800 p-12"
+        style="align-self: flex-start"
+      >
+        <input id="dtl" type="checkbox" v-model="isDTLEnabled" />
+        <label
+          for="dtl"
+          class="flex font-medium mt-4"
+          style="--column-gap: var(--space-4)"
+        >
+          Créer avec
+          <span class="flex justify-center text-sm" data-icon="leaf"
+            >Design to Light</span
+          >
         </label>
         <p class="text-sm mt-8 mb-4">
-          Découvrez la note environnementale de votre projet et allégez l’impact de votre projet grâce à nos expertises d’optimisation du poids de flacon.
+          Découvrez la note environnementale de votre projet et allégez l’impact
+          de votre projet grâce à nos expertises d’optimisation du poids de
+          flacon.
         </p>
-        <router-link to="/design-to-light" class="text-sm font-medium">En savoir plus</router-link>
+        <router-link to="/design-to-light" class="text-sm font-medium"
+          >En savoir plus</router-link
+        >
       </div>
 
-      <footer class="flex-columns w-full mt-auto" style="column-gap: .5rem">
-        <button class="btn btn--black-10" @click="emits('close')">Annuler</button>
+      <footer class="flex-columns w-full mt-auto" style="column-gap: 0.5rem">
+        <button class="btn btn--black-10" @click="emits('close')">
+          Annuler
+        </button>
         <button class="btn" type="submit">Soumettre</button>
       </footer>
-
     </form>
   </Dialog>
 </template>
 
 <script setup>
 import Dialog from "primevue/dialog";
-import { ref } from "vue";
+import { ref, watch } from "vue";
 import { useApiStore } from "../stores/api";
 
 const title = ref("");
@@ -69,6 +88,12 @@ const api = useApiStore();
 const isOpen = ref(true);
 const emits = defineEmits("close");
 
+watch(isOpen, (newValue) => {
+  if (!newValue) {
+    emits("close");
+  }
+});
+
 async function handleSubmit() {
   const formData = {
     title: title.value,

src/views/Home.vue

@@ -1,8 +1,14 @@
 <template>
   <main class="flex flex-col" style="--row-gap: var(--space-32)">
     <Projects />
-    <ProjectRequestDialog v-if="isProjectRequestDialogOpen" @close="isProjectRequestDialogOpen = false" />
-    <ProjectRequestButton @click="isProjectRequestDialogOpen = true" />
+    <ProjectRequestDialog
+      v-if="isProjectRequestDialogOpen"
+      @close="isProjectRequestDialogOpen = false"
+    />
+    <ProjectRequestButton
+      v-if="user.role === 'client'"
+      @click="isProjectRequestDialogOpen = true"
+    />
   </main>
 </template>
 
@@ -11,6 +17,8 @@ import Projects from "../components/Projects.vue";
 import ProjectRequestButton from "../components/ProjectRequestButton.vue";
 import ProjectRequestDialog from "../components/ProjectRequestDialog.vue";
 import { ref } from "vue";
+import { useUserStore } from "../stores/user";
 
 const isProjectRequestDialogOpen = ref(false);
+const { user } = useUserStore();
 </script>