kanban > steps : add dtl indicator

src/components/project/Project.vue

@@ -1,19 +1,22 @@
 <template>
-  <article class="project-item | flex | rounded-2xl | px-32 py-32">
+  <article
+    class="project-item | flex | rounded-2xl | px-32 py-32"
+    :data-dtl="project.isDTLEnabled ? 'true' : undefined"
+  >
     <hgroup>
       <h3>
         <router-link
-          :to="isEmptyBrief(project) ? project.uri + '/client-brief' : project.uri"
+          :to="
+            isEmptyBrief(project) ? project.uri + '/client-brief' : project.uri
+          "
           class="link-full"
         >
-        {{ project.title }}
+          {{ project.title }}
         </router-link>
       </h3>
       <p>
         Dernière mise à jour le
-        <time :datetime="project.modified">{{
-          frenchFormattedModified
-        }}</time>
+        <time :datetime="project.modified">{{ frenchFormattedModified }}</time>
       </p>
     </hgroup>
     <img :src="project.logo" alt="Logo" class="project-logo | rounded-sm" />

src/components/project/cards/Document.vue

@@ -31,12 +31,14 @@
         }}
       </router-link>
     </footer>
+    <div v-if="isDesignToLightStep(step)">Design to light</div>
   </article>
 </template>
 <script setup>
 import { useRoute } from "vue-router";
 import DateTime from "./DateTime.vue";
 import { computed } from "vue";
+import { useDesignToLightStore } from "../../../stores/designToLight";
 
 const { step, pdf, index } = defineProps({
   step: Object,
@@ -48,6 +50,8 @@ const { step, pdf, index } = defineProps({
   },
 });
 
+const { isDesignToLightStep } = useDesignToLightStore();
+
 const route = useRoute();
 
 const uri = computed(() => {

src/components/project/cards/Images.vue

@@ -24,16 +24,18 @@
         images[0].comments.length > 1 ? "s" : ""
       }}
     </footer> -->
+    <div v-if="isDesignToLightStep(step)">Design to light</div>
   </article>
 </template>
 <script setup>
 import DateTime from "./DateTime.vue";
-import { usePageStore } from "../../../stores/page";
+import { useDesignToLightStore } from "../../../stores/designToLight";
 
 const { images, step, uri } = defineProps({
   images: Array,
   step: Object,
   uri: String,
 });
-const { page } = usePageStore();
+
+const { isDesignToLightStep } = useDesignToLightStore();
 </script>

src/stores/designToLight.js

@@ -0,0 +1,18 @@
+import { defineStore, storeToRefs } from "pinia";
+import { usePageStore } from "./page";
+
+export const useDesignToLightStore = defineStore("design-to-light", () => {
+  const { page } = storeToRefs(usePageStore());
+
+  function isDesignToLightStep(step) {
+    const isDTLEnabled = page.value.designToLight;
+    return (
+      isDTLEnabled &&
+      page.value.designToLight.some((proposal) =>
+        proposal.path.includes(step.uri)
+      )
+    );
+  }
+
+  return { isDesignToLightStep };
+});