test

src/components/project/ProjectStep.vue

@@ -4,37 +4,34 @@
     aria-labelledby="votre-brief-label"
     :data-status="status"
   >
-    <h2 id="votre-brief-label">
-      <span data-icon="votre-brief">{{ step.text }}</span>
-    </h2>
-    <div class="cards | flow">
-      <article class="card">
-        <hgroup class="order-last">
-          <h3 class="card__title | font-serif | text-lg">{{ step.text }}</h3>
-        </hgroup>
-        <div class="card__meta | flex">
-          <time class="card__date | text-grey-700" datetime="2024-06-12">{{
-            dayjs(step.modified).format("DD MMMM YYYY")
-          }}</time>
-        </div>
-        <router-link :to="'/' + step.uri">
-          <figure class="card__images" data-count="13">
-            <img
-              src="http://localhost:8888/media/pages/inspirations/shape-of-the-nature/6ed93d6950-1725442486/d82f18573c439d6edd434ffca62471a7.png"
-              alt=""
-            />
-            <img
-              src="http://localhost:8888/media/pages/inspirations/shape-of-the-nature/7b0fcc5012-1725442486/37a038883c87973036232aa0e43f6da2.png"
-              alt=""
-            />
-            <img
-              src="http://localhost:8888/media/pages/inspirations/shape-of-the-nature/1bbe051c5a-1725442486/0c41d3266e9ce2872f30608cceb28239.png"
-              alt=""
-            />
-          </figure>
-        </router-link>
-      </article>
-    </div>
+    <router-link :to="'/' + step.uri">
+      <h2 id="votre-brief-label">
+        <span data-icon="votre-brief">{{ step.text }}</span>
+      </h2>
+      <div class="cards | flow">
+        <article class="card">
+          <hgroup class="order-last">
+            <h3 class="card__title | font-serif | text-lg">{{ step.text }}</h3>
+          </hgroup>
+          <div class="card__meta | flex">
+            <time class="card__date | text-grey-700" datetime="2024-06-12">{{
+              dayjs(step.modified).format("DD MMMM YYYY")
+            }}</time>
+          </div>
+
+          <template v-if="step.value === 'clientBrief'">
+            <figure class="card__images" :data-count="step.files.length - 3">
+              <img
+                v-for="image in step.files.slice(0, 3)"
+                :key="image.uuid"
+                :src="image.url"
+                :alt="image.alt"
+              />
+            </figure>
+          </template>
+        </article>
+      </div>
+    </router-link>
   </section>
 </template>
 
@@ -51,14 +48,9 @@ dayjs.locale("fr");
 
 const { page } = usePageStore();
 
-const steps = [
-  "clientBrief",
-  "proposal",
-  "extended-brief",
-  "industrialIdeation",
-  "virtualSample",
-  "physicalSample",
-];
+const steps = page.steps.map((item) => {
+  return item.value;
+});
 
 const status = setStatus();
 

src/components/project/client-brief/Images.vue

@@ -12,7 +12,7 @@
       >
         Ajouter une ou plusieurs images
       </button>
-      <template v-for="image in page.images" :key="image.uri">
+      <template v-for="image in page.moodboard" :key="image.uri">
         <figure
           v-if="
             selectedTags.length === 0 ||
@@ -66,7 +66,7 @@ function changeSelectedTags(newTags) {
 
 function removeImage(target) {
   console.log("remove", target);
-  page.value.images = page.value.images.filter(
+  page.value.moodboard = page.value.moodboard.filter(
     (image) => image.uuid !== target.uuid
   );
 }

src/components/project/client-brief/add-images-modal/ImagesEditPanel.vue

@@ -198,7 +198,7 @@ function addImagesToBrief() {
     })
       .then((res) => res.json())
       .then((json) => {
-        page.value.images = json.images;
+        page.value.moodboard = json.images;
         console.log(json);
       })
       .catch((error) => console.error("Error:", error));

src/views/ClientBrief.vue

@@ -1,7 +1,11 @@
 <template>
   <main class="flex flex-col items-stretch | w-full" style="--row-gap: 2rem">
     <header class="flex | bg-white | rounded-2xl | p-8">
-      <router-link :to="'/' + page.parent" class="btn btn--white" data-icon="arrow-left">
+      <router-link
+        :to="'/' + page.parent"
+        class="btn btn--white"
+        data-icon="arrow-left"
+      >
         <span>Retour au projet</span>
       </router-link>
       <button class="btn | ml-auto">Valider et envoyer le brief</button>