home (projects) : dynamize steps

public/site/templates/projects.json.php

@@ -10,6 +10,7 @@ $children = $page->children()->filter(function ($child) {
     'currentStep' => $child->currentStep()->value(),
     'status' => $child->status(),
     'logo' => $child->client()->toPage()->logo()->toFile()->url(),
+    'steps' => $child->getSteps()
   ];
 })->values();
 

src/components/project/Project.vue

@@ -11,20 +11,16 @@
         </p>
       </hgroup>
       <img :src="project.logo" alt="Logo" class="project-logo | rounded-sm" />
-      <ol class="project-steps" data-steps="1">
+      <ol class="project-steps" :data-steps="project.steps.length">
-        <li class="project-step" data-status="in-progress">
+        <li
-          <span class="pill" data-icon="Brief">{{
+          v-for="step in project.steps"
+          class="project-step"
+          :data-status="setStatus(project.steps, step)"
+        >
+          <span class="pill" :data-icon="step.id">{{
             stepsLabels[project.currentStep]
           }}</span>
         </li>
-        <!--
-        <li class="project-step" data-status="in-progress">
-          <span class="pill" data-icon="extendedBrief">Brief enrichi</span>
-        </li>
-        <li class="project-step" data-status="uncompleted">
-          <span class="pill" data-icon="proposal">Proposition commerciales</span>
-        </li>
-        -->
       </ol>
     </article>
   </router-link>
@@ -43,7 +39,7 @@ const frenchFormattedModified = dayjs(project.modified).format(
   "dddd D MMMM YYYY"
 );
 
-const { stepsLabels } = useProjectStore();
+const { stepsLabels, setStatus } = useProjectStore();
 </script>
 
 <style scoped>

src/components/project/ProjectStep.vue

@@ -1,5 +1,9 @@
 <template>
-  <section class="flex-1" :aria-labelledby="step.id" :data-status="status">
+  <section
+    class="flex-1"
+    :aria-labelledby="step.id"
+    :data-status="setStatus(page.steps, step)"
+  >
     <h2 :id="step.id">
       <!-- ADRIEN / TIMOTHÉE : DYNAMISER L'ICONE -->
       <span :data-icon="step.id">{{ step.label }}</span>
@@ -25,7 +29,11 @@
           v-if="step.id.includes('Brief') && step.files[0]?.type === 'image'"
           class="card__images"
           :data-count="step.files.dynamic.length"
-          :data-plus="step.files.dynamic.length > 3 ? step.files.dynamic.length - 3 : undefined"
+          :data-plus="
+            step.files.dynamic.length > 3
+              ? step.files.dynamic.length - 3
+              : undefined
+          "
         >
           <img
             v-for="image in step.files.dynamic.slice(0, 3)"
@@ -38,7 +46,11 @@
           v-if="step.id === 'virtualSample'"
           class="card__images"
           :data-count="step.files.dynamic.length"
-          :data-plus="step.files.dynamic.length > 3 ? step.files.dynamic.length - 3 : undefined"
+          :data-plus="
+            step.files.dynamic.length > 3
+              ? step.files.dynamic.length - 3
+              : undefined
+          "
         >
           <img
             v-for="track in step.files.dynamic"
@@ -112,6 +124,7 @@ import dayjs from "dayjs";
 import "dayjs/locale/fr";
 import { usePageStore } from "../../stores/page";
 import { computed } from "vue";
+import { useProjectStore } from "../../stores/project";
 
 const { step } = defineProps({
   step: Object,
@@ -122,6 +135,7 @@ const emit = defineEmits(["update:file"]);
 dayjs.locale("fr");
 
 const { page } = usePageStore();
+const { setStatus } = useProjectStore();
 
 const steps = page.steps.map((item) => {
   return item.value;
@@ -135,27 +149,6 @@ const mergedFiles = computed(() => {
 
   return [...staticFiles, ...dynamicFiles];
 });
-
-const status = setStatus();
-
-function setStatus() {
-  const currentStepId = page.content.currentstep;
-
-  const currentStepIndex = page.steps.findIndex(
-    (item) => item.id === currentStepId
-  );
-  const stepIndex = page.steps.findIndex((item) => item.id === step.id);
-
-  if (currentStepIndex === stepIndex) {
-    return "in-progress";
-  }
-  if (currentStepIndex > stepIndex) {
-    return "done";
-  }
-  if (currentStepIndex < stepIndex) {
-    return "uncompleted";
-  }
-}
 </script>
 
 <style scoped>

src/stores/project.js

@@ -1,6 +1,9 @@
 import { defineStore } from "pinia";
+import { usePageStore } from "./page";
 
 export const useProjectStore = defineStore("project", () => {
+  const { page } = usePageStore();
+
   const stepsLabels = {
     Brief: "Votre brief",
     proposal: "Proposition commerciale",
@@ -10,5 +13,24 @@ export const useProjectStore = defineStore("project", () => {
     physicalSample: "Échantillon physique",
   };
 
-  return { stepsLabels };
+  function setStatus(steps, step) {
+    const currentStepId = page.content.currentstep;
+
+    const currentStepIndex = steps.findIndex(
+      (item) => item.id === currentStepId
+    );
+    const stepIndex = steps.findIndex((item) => item.id === step.id);
+
+    if (currentStepIndex === stepIndex) {
+      return "in-progress";
+    }
+    if (currentStepIndex > stepIndex) {
+      return "done";
+    }
+    if (currentStepIndex < stepIndex) {
+      return "uncompleted";
+    }
+  }
+
+  return { stepsLabels, setStatus };
 });