Progression vue brief client

- l'étape courante est déterminée en fonction des données de la page
- les images sont ajoutées au champ
- les images déjà ajoutées sont affichées directement
- changement donnée briefClient -> clientBrief (cohérence avec le nommage front)

src/components/project/ClientBrief/Images.vue

@@ -4,7 +4,11 @@
       class="project-details | flex items-start | bg-white | rounded-2xl | p-16 | w-full"
     >
       <div class="project-details__description | flex-1">
-        <label for="project-description" class="flex | text-sm text-grey-700 | mb-8">Description du projet</label>
+        <label
+          for="project-description"
+          class="flex | text-sm text-grey-700 | mb-8"
+          >Description du projet</label
+        >
         <textarea
           name="project-description"
           id="project-description"
@@ -16,21 +20,65 @@
       <fieldset class="project-details__filters | flex-1">
         <legend class="text-sm text-grey-700 | mb-8">Filtrer par tags</legend>
         <div class="flex" style="gap: var(--space-8)">
-          <button class="btn btn--sm btn--grey" id="all" aria-pressed="true">Voir tout</button>
-          <input class="sr-only" type="checkbox" id="bouchon" name="bouchon">
+          <button class="btn btn--sm btn--grey" id="all" aria-pressed="true">
+            Voir tout
+          </button>
+          <input class="sr-only" type="checkbox" id="bouchon" name="bouchon" />
           <label class="btn btn--sm btn--primary" for="bouchon">Bouchon</label>
-          <input class="sr-only" type="checkbox" id="bouchon-poussoir" name="bouchon-poussoir">
-          <label class="btn btn--sm btn--primary" for="bouchon-poussoir">Bouton Poussoir</label>
-          <input class="sr-only" type="checkbox" id="coloris-nuances" name="coloris-nuances">
-          <label class="btn btn--sm btn--primary" for="coloris-nuances">Coloris & Nuances</label>
-          <input class="sr-only" type="checkbox" id="da-globale" name="da-globale">
-          <label class="btn btn--sm btn--primary" for="da-globale">DA Globale</label>
-          <input class="sr-only" type="checkbox" id="forme-design" name="forme-design">
-          <label class="btn btn--sm btn--primary" for="forme-design">Forme & Design</label>
-          <input class="sr-only" type="checkbox" id="materiaux-textures" name="materiaux-textures">
-          <label class="btn btn--sm btn--primary" for="materiaux-textures">Matériaux & Textures</label>
-          <input class="sr-only" type="checkbox" id="parachevements" name="parachevements">
-          <label class="btn btn--sm btn--primary" for="parachevements">Parachèvements</label>
+          <input
+            class="sr-only"
+            type="checkbox"
+            id="bouchon-poussoir"
+            name="bouchon-poussoir"
+          />
+          <label class="btn btn--sm btn--primary" for="bouchon-poussoir"
+            >Bouton Poussoir</label
+          >
+          <input
+            class="sr-only"
+            type="checkbox"
+            id="coloris-nuances"
+            name="coloris-nuances"
+          />
+          <label class="btn btn--sm btn--primary" for="coloris-nuances"
+            >Coloris & Nuances</label
+          >
+          <input
+            class="sr-only"
+            type="checkbox"
+            id="da-globale"
+            name="da-globale"
+          />
+          <label class="btn btn--sm btn--primary" for="da-globale"
+            >DA Globale</label
+          >
+          <input
+            class="sr-only"
+            type="checkbox"
+            id="forme-design"
+            name="forme-design"
+          />
+          <label class="btn btn--sm btn--primary" for="forme-design"
+            >Forme & Design</label
+          >
+          <input
+            class="sr-only"
+            type="checkbox"
+            id="materiaux-textures"
+            name="materiaux-textures"
+          />
+          <label class="btn btn--sm btn--primary" for="materiaux-textures"
+            >Matériaux & Textures</label
+          >
+          <input
+            class="sr-only"
+            type="checkbox"
+            id="parachevements"
+            name="parachevements"
+          />
+          <label class="btn btn--sm btn--primary" for="parachevements"
+            >Parachèvements</label
+          >
         </div>
       </fieldset>
     </header>
@@ -38,7 +86,7 @@
       <FileUpload
         mode="basic"
         name="images[]"
-        :url="'/upload.json?pageUri=' + page.uri"
+        :url="'/upload-images.json?pageUri=' + page.uri"
         @upload="onAdvancedUpload($event)"
         :auto="true"
         :multiple="true"
@@ -49,8 +97,20 @@
         class="flex flex-col | bg-white | border border-grey-200 | text-grey-800 | font-medium | rounded-2xl"
       >
         <template #chooseicon>
-          <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
-            <path d="M0.714355 15.0001V16.4286C0.714355 17.1864 1.01538 17.9131 1.55119 18.4489C2.08701 18.9848 2.81374 19.2858 3.5715 19.2858H16.4286C17.1864 19.2858 17.9131 18.9848 18.4489 18.4489C18.9848 17.9131 19.2858 17.1864 19.2858 16.4286V15.0001M5.71436 5.71436L10.0001 0.714355M10.0001 0.714355L14.2858 5.71436M10.0001 0.714355V13.5715" stroke="currentColor" stroke-width="1.25" stroke-linecap="round" stroke-linejoin="round"/>
+          <svg
+            width="20"
+            height="20"
+            viewBox="0 0 20 20"
+            fill="none"
+            xmlns="http://www.w3.org/2000/svg"
+          >
+            <path
+              d="M0.714355 15.0001V16.4286C0.714355 17.1864 1.01538 17.9131 1.55119 18.4489C2.08701 18.9848 2.81374 19.2858 3.5715 19.2858H16.4286C17.1864 19.2858 17.9131 18.9848 18.4489 18.4489C18.9848 17.9131 19.2858 17.1864 19.2858 16.4286V15.0001M5.71436 5.71436L10.0001 0.714355M10.0001 0.714355L14.2858 5.71436M10.0001 0.714355V13.5715"
+              stroke="currentColor"
+              stroke-width="1.25"
+              stroke-linecap="round"
+              stroke-linejoin="round"
+            />
           </svg>
         </template>
         <template
@@ -58,7 +118,7 @@
             files,
             uploadedFiles,
             removeUploadedFileCallback,
-            removeFileCallback
+            removeFileCallback,
           }"
         >
           <div v-if="files.length > 0">Fichiers importés</div>
@@ -67,44 +127,92 @@
       <Toast />
       <figure v-for="image in images" class="image" @click="visible = true">
         <span class="tag | btn btn--sm">Tag</span>
-        <img :src="image" alt="" />
+        <img :src="image.url" alt="" />
       </figure>
     </div>
-    <Dialog 
+    <Dialog
       v-model:visible="visible"
-      modal 
-      header="Détails de l’image" 
+      modal
+      header="Détails de l’image"
       :style="{ width: '62.5rem', height: '50rem' }"
       class="bg-white | text-grey-800 | rounded-2xl | overflow-hidden"
     >
-      <img 
-        :src="image"
-        alt=""
-        class="bg-grey-200"
-        loading="lazy" 
-      >
+      <img :src="image" alt="" class="bg-grey-200" loading="lazy" />
       <div class="flex flex-col | p-32" style="--row-gap: var(--space-32)">
         <fieldset class="image__tags">
           <legend class="text-sm text-grey-700 | mb-8">Tags</legend>
           <div class="flex" style="gap: var(--space-8)">
-            <input class="sr-only" type="checkbox" id="bouchon" name="bouchon">
-            <label class="btn btn--sm btn--primary" for="bouchon">Bouchon</label>
-            <input class="sr-only" type="checkbox" id="bouchon-poussoir" name="bouchon-poussoir">
-            <label class="btn btn--sm btn--primary" for="bouchon-poussoir">Bouton Poussoir</label>
-            <input class="sr-only" type="checkbox" id="coloris-nuances" name="coloris-nuances">
-            <label class="btn btn--sm btn--primary" for="coloris-nuances">Coloris & Nuances</label>
-            <input class="sr-only" type="checkbox" id="da-globale" name="da-globale">
-            <label class="btn btn--sm btn--primary" for="da-globale">DA Globale</label>
-            <input class="sr-only" type="checkbox" id="forme-design" name="forme-design">
-            <label class="btn btn--sm btn--primary" for="forme-design">Forme & Design</label>
-            <input class="sr-only" type="checkbox" id="materiaux-textures" name="materiaux-textures">
-            <label class="btn btn--sm btn--primary" for="materiaux-textures">Matériaux & Textures</label>
-            <input class="sr-only" type="checkbox" id="parachevements" name="parachevements">
-            <label class="btn btn--sm btn--primary" for="parachevements">Parachèvements</label>
+            <input
+              class="sr-only"
+              type="checkbox"
+              id="bouchon"
+              name="bouchon"
+            />
+            <label class="btn btn--sm btn--primary" for="bouchon"
+              >Bouchon</label
+            >
+            <input
+              class="sr-only"
+              type="checkbox"
+              id="bouchon-poussoir"
+              name="bouchon-poussoir"
+            />
+            <label class="btn btn--sm btn--primary" for="bouchon-poussoir"
+              >Bouton Poussoir</label
+            >
+            <input
+              class="sr-only"
+              type="checkbox"
+              id="coloris-nuances"
+              name="coloris-nuances"
+            />
+            <label class="btn btn--sm btn--primary" for="coloris-nuances"
+              >Coloris & Nuances</label
+            >
+            <input
+              class="sr-only"
+              type="checkbox"
+              id="da-globale"
+              name="da-globale"
+            />
+            <label class="btn btn--sm btn--primary" for="da-globale"
+              >DA Globale</label
+            >
+            <input
+              class="sr-only"
+              type="checkbox"
+              id="forme-design"
+              name="forme-design"
+            />
+            <label class="btn btn--sm btn--primary" for="forme-design"
+              >Forme & Design</label
+            >
+            <input
+              class="sr-only"
+              type="checkbox"
+              id="materiaux-textures"
+              name="materiaux-textures"
+            />
+            <label class="btn btn--sm btn--primary" for="materiaux-textures"
+              >Matériaux & Textures</label
+            >
+            <input
+              class="sr-only"
+              type="checkbox"
+              id="parachevements"
+              name="parachevements"
+            />
+            <label class="btn btn--sm btn--primary" for="parachevements"
+              >Parachèvements</label
+            >
           </div>
         </fieldset>
         <div class="image__description | w-full">
-          <label for="image-description" class="flex | text-sm text-grey-700 | mb-8">Description de l’image</label>
+          <label
+            for="image-description"
+            class="flex | text-sm text-grey-700 | mb-8"
+            >Description de l’image</label
+          >
           <textarea
             name="image-description"
             id="image-description"
@@ -112,7 +220,13 @@
             class="border border-grey-200 | rounded-xl | p-16 | w-full"
           ></textarea>
         </div>
-        <button data-icon="delete" class="btn btn--black-10 | ml-auto mt-auto" @click="visible = false">Supprimer cette image</button>
+        <button
+          data-icon="delete"
+          class="btn btn--black-10 | ml-auto mt-auto"
+          @click="visible = false"
+        >
+          Supprimer cette image
+        </button>
       </div>
     </Dialog>
   </section>
@@ -121,7 +235,7 @@
 <script setup>
 import Toast from "primevue/toast";
 import FileUpload from "primevue/fileupload";
-import Dialog from 'primevue/dialog';
+import Dialog from "primevue/dialog";
 import { useToast } from "primevue/usetoast";
 import { usePageStore } from "../../../stores/page";
 import { ref } from "vue";
@@ -137,7 +251,7 @@ const beforeSend = (event) => {
   );
 };
 
-const images = ref([]);
+const images = ref(page.images);
 
 const onAdvancedUpload = (event) => {
   if (event.xhr.status === 200) {

src/views/ClientBrief.vue

@@ -9,17 +9,29 @@ import { ref } from "vue";
 import Header from "../components/project/Header.vue";
 import Intro from "../components/project/ClientBrief/Intro.vue";
 import ModeSelection from "../components/project/ClientBrief/ModeSelection.vue";
-import AddImages from "../components/project/ClientBrief/AddImages.vue";
+import Images from "../components/project/ClientBrief/Images.vue";
+import { usePageStore } from "../stores/page";
 
 const stepsComponents = {
   Intro,
   ModeSelection,
-  AddImages,
+  Images,
 };
 
-const currentStep = ref("AddImages");
+const { page } = usePageStore();
+
+const currentStep = ref(setInitialStep());
 
 function changeStep(stepName) {
   currentStep.value = stepName;
 }
+
+function setInitialStep() {
+  const hasPDF = page.content.clientbriefpdf.length !== 0;
+  const hasImages = page.content.clientbriefimages.length !== 0;
+  const isEmpty = !hasPDF && !hasImages;
+  if (isEmpty) return "Intro";
+  if (hasPDF) return "PDF";
+  if (hasImages) return "Images";
+}
 </script>

src/views/Project.vue

@@ -4,7 +4,8 @@
     <!-- Kanban: Status Brief Enrichi -->
 
     <div class="kanban">
-      <ProjectStep v-for="step in page.steps" :key="step" :step="step" />
+      <ProjectStep v-for="step in page.steps" :key="step" :step="step">
+      </ProjectStep>
       <!-- <section
         class="flex-1"
         aria-labelledby="votre-brief-label"