design to light button and panel working without indicators

public/site/blueprints/files/pdf.yml

@@ -1,17 +1,21 @@
 title: PDF
 
 focus: false
-fields:
-  comments:
-    type: hidden
-  cover:
-    label: Image de couverture
-    type: files
-    multiple: false
-    width: 1/3
-    layout: cards
-    uploads: pdf-cover
-  label:
-    label: Nom
-    type: text
-    width: 1/3
+
+tabs:
+  presentation:
+    label: Présentation
+    fields:
+      comments:
+        type: hidden
+      cover:
+        label: Image de couverture
+        type: files
+        multiple: false
+        width: 1/3
+        layout: cards
+        uploads: pdf-cover
+      label:
+        label: Nom
+        type: text
+        width: 1/3

public/site/blueprints/pages/project.yml

@@ -50,6 +50,8 @@ tabs:
               - virtual-sample
               - physical-sample
 
+  designToLight: tabs/design-to-light
+
   files: tabs/files
 
   notificationsTab:

public/site/blueprints/pages/proposal.yml

@@ -28,5 +28,6 @@ tabs:
         type: files
         uploads: pdf
       stepName:
-        type: hidden
+        type: hidden  
+
   files: tabs/files

public/site/blueprints/pages/track.yml

@@ -8,3 +8,5 @@ tabs:
         label: Rendu
         type: files
         required: true
+
+  files: tabs/files

public/site/blueprints/tabs/design-to-light.yml

@@ -0,0 +1,66 @@
+designToLight:
+label: Design to light
+icon: leaf
+
+columns:
+  - width: 2/10
+    fields:
+      isDTLEnabled:
+        label: Actif
+        type: toggle
+        default: false
+  - width: 8/10
+    fields:
+      DTLProposalLocation:
+        label: Localisation de la proposition Design to light
+        type: radio
+        options:
+          proposal: Proposition commerciale
+          industrialIdeation: Idéation industrielle
+          virtualSampleDynamicTrack: Échantillon virtuel - piste dynamique
+          virtualSampleStaticTrack: Échantillon virtuel - piste statique
+        when:
+          isDTLEnabled: true
+        width: 1/2
+
+      DTLproposal:
+        label: Fichier
+        type: files
+        multiple: false
+        query: page.find('proposal').pdf.toFiles
+        width: 1/2
+        when:
+          DTLProposalLocation: proposal
+
+      DTLindustrialIdeation:
+        label: Fichier
+        type: files
+        multiple: false
+        query: page.find('industrial-ideation').files
+        width: 1/2
+        when:
+          DTLProposalLocation: industrialIdeation
+
+      DTLVirtualSampleDynamicTrack:
+        label: Piste dynamique
+        type: pages
+        multiple: false
+        query: page.find('virtual-sample').children
+        width: 1/2
+        when:
+          DTLProposalLocation: virtualSampleDynamicTrack
+
+      DTLVirtualSampleStaticTrack:
+        label: Piste statique
+        type: files
+        multiple: false
+        query: page.find('virtual-sample').rawGlass.toFiles.add(page.find('virtual-sample').finishedGlass.toFile)
+        width: 1/2
+        when:
+          DTLProposalLocation: virtualSampleStaticTrack
+
+      DTLGrade:
+        label: Note globale
+        type: text
+        when:
+          isDTLEnabled: true

public/site/config/menu.php

@@ -40,7 +40,7 @@ return [
   '-',
   'design-to-light' => [
     'label' => 'Design to light',
-    'icon'  => 'circle',
+    'icon'  => 'leaf',
     'link'  => 'pages/design-to-light',
     'current' => function (string $current): bool {
       $path = Kirby\Cms\App::instance()->path();

public/site/plugins/icons/index.js

@@ -2,5 +2,6 @@ panel.plugin("my/icons", {
   icons: {
     "light-bulb":
       '<path d="M9.97308 18H14.0269C14.1589 16.7984 14.7721 15.8065 15.7676 14.7226C15.8797 14.6006 16.5988 13.8564 16.6841 13.7501C17.5318 12.6931 18 11.385 18 10C18 6.68629 15.3137 4 12 4C8.68629 4 6 6.68629 6 10C6 11.3843 6.46774 12.6917 7.31462 13.7484C7.40004 13.855 8.12081 14.6012 8.23154 14.7218C9.22766 15.8064 9.84103 16.7984 9.97308 18ZM14 20H10V21H14V20ZM5.75395 14.9992C4.65645 13.6297 4 11.8915 4 10C4 5.58172 7.58172 2 12 2C16.4183 2 20 5.58172 20 10C20 11.8925 19.3428 13.6315 18.2443 15.0014C17.624 15.7748 16 17 16 18.5V21C16 22.1046 15.1046 23 14 23H10C8.89543 23 8 22.1046 8 21V18.5C8 17 6.37458 15.7736 5.75395 14.9992ZM13 10.0048H15.5L11 16.0048V12.0048H8.5L13 6V10.0048Z"></path>',
+    leaf: '<path fill="none" d="M5.66667 13.9999C15.6292 13.9999 16.4308 5.52489 16.495 1.49739C16.4956 1.38783 16.4742 1.27927 16.4321 1.17813C16.39 1.07698 16.328 0.985318 16.2498 0.908551C16.1717 0.831785 16.0789 0.771477 15.977 0.731198C15.8751 0.69092 15.7662 0.671488 15.6567 0.674053C1.5 0.934053 1.5 7.79739 1.5 13.9999M1.5 13.9999V17.3332M1.5 13.9999C1.5 13.9999 1.5 8.99989 8.16667 8.16655" stroke="#191919" stroke-width="1.25" stroke-linecap="round" stroke-linejoin="round"/>',
   },
 });

public/site/templates/project.json.php

@@ -1,13 +1,84 @@
 <?php
 $project = [
-  'title' => $page->title()->value(),
-  'url' => $page->url(),
-  'modified' => $page->modified('Y-MM-d'),
-  'status' => $page->status(),
-  'logo' => $page->client()->isNotEmpty() && $page->client()->toPage() ? $page->client()->toPage()->logo()->toFile()->url() : null,
-  'steps' => $page->getSteps(),
+  "title" => $page->title()->value(),
+  "url" => $page->url(),
+  "modified" => $page->modified("Y-MM-d"),
+  "status" => $page->status(),
+  "logo" => $page->client()->isNotEmpty() && $page->client()->toPage() ? $page->client()->toPage()->logo()->toFile()->url() : null,
+  "steps" => $page->getSteps(),
+  "designToLight" => null
 ];
 
+  if ($page->isDTLEnabled()) {
+    $DTLProposal = null;
+    $proposalLocation = $page->DTLProposalLocation()->value();
+
+    switch ($proposalLocation) {
+        case 'proposal':
+            $proposalPage = $page->find('proposal');
+            $proposalFile = $page->DTLProposal()->toFile();
+
+            if ($proposalPage && $proposalFile) {
+                $index = $proposalPage->pdf()->toFiles()->indexOf($proposalFile);
+                $DTLProposal = [
+                    "location" => "proposal",
+                    "path" => "/projects/" . $page->slug() . "?dialog=proposal&fileIndex=" . $index,
+                    "date" => $proposalFile->modified("Y-MM-d"),
+                    "stepLabel" => "Proposition commerciale",
+                ];
+            }
+            break;
+
+        case 'industrialIdeation':
+          $proposalPage = $page->find('industrial-ideation');
+          $proposalFile = $page->DTLindustrialIdeation()->toFile();
+
+          if ($proposalPage && $proposalFile) {
+              $index = $proposalPage->pdf()->toFiles()->indexOf($proposalFile);
+              $DTLProposal = [
+                  "location" => "proposal",
+                  "path" => "/projects/" . $page->slug() . "?dialog=industrial-ideation&fileIndex=" . $index,
+                  "date" => $proposalFile->modified("Y-MM-d"),
+                  "stepLabel" => "Idéation industrielle"
+              ];
+          }
+          break;
+
+        case 'virtualSampleDynamicTrack':
+          $proposalPage = $page->DTLVirtualSampleDynamicTrack()->toPage();
+
+          if ($proposalPage) {
+              $DTLProposal = [
+                  "location" => "proposal",
+                  "path" => "/projects/" . $page->slug() . "?dialog=virtual-sample",
+                  "date" => $proposalPage->modified("Y-MM-d"),
+                  "stepLabel" => "Échantillon virtuel"
+              ];
+          }
+          break;
+
+        case 'virtualSampleStaticTrack':
+          $proposalPage = $page->find('virtual-sample');
+          $proposalFile = $page->DTLVirtualSampleStaticTrack()->toFile();
+
+          if ($proposalPage && $proposalFile) {
+              $DTLProposal = [
+                  "location" => "proposal",
+                  "path" => "/projects/" . $page->slug() . "?dialog=virtual-sample",
+                  "date" => $proposalFile->modified("Y-MM-d"),
+                  "stepLabel" => "Échantillon virtuel"
+              ];
+          }
+          break;
+    }
+
+    if ($page->DTLGrade()->isNotEmpty()) {
+      $DTLProposal["grade"] = $page->DTLGrade()->value();
+    }
+    $project["designToLight"] = $DTLProposal;
+  }
+
+
 $pageData = array_merge($genericData, $project);
 
 echo json_encode([

src/App.vue

@@ -4,13 +4,19 @@
     <Menu />
     <RouterView />
   </div>
+  <DTLPanel v-if="isDTLPanelOpen" />
+  <DTLButton @click="isDTLPanelOpen = !isDTLPanelOpen" />
 </template>
 
 <script setup>
-import { useUserStore } from "./stores/user";
 import { storeToRefs } from "pinia";
 import Menu from "./components/Menu.vue";
 import { usePageStore } from "./stores/page";
+import DTLButton from "./components/design-to-light/DTLButton.vue";
+import DTLPanel from "./components/design-to-light/DTLPanel.vue";
+import { ref } from "vue";
 
 const { page } = storeToRefs(usePageStore());
+
+const isDTLPanelOpen = ref(false);
 </script>

src/components/design-to-light/DTLButton.vue

@@ -0,0 +1,11 @@
+<template>
+  <button v-if="page?.designToLight?.grade">
+    {{ page.designToLight.grade }}
+  </button>
+</template>
+<script setup>
+import { storeToRefs } from "pinia";
+import { usePageStore } from "../../stores/page";
+
+const { page } = storeToRefs(usePageStore());
+</script>

src/components/design-to-light/DTLPanel.vue

@@ -0,0 +1,34 @@
+<template>
+  <aside>
+    <p>Données basées sur la proposition du {{ frenchFormattedModified }}</p>
+    <p>{{ page.designToLight.stepLabel }}</p>
+  </aside>
+</template>
+<script setup>
+import { storeToRefs } from "pinia";
+import { usePageStore } from "../../stores/page";
+import dayjs from "dayjs";
+import "dayjs/locale/fr";
+
+dayjs.locale("fr");
+
+const { page } = storeToRefs(usePageStore());
+
+const frenchFormattedModified = dayjs(page.value.designToLight.date).format(
+  "dddd D MMMM YYYY"
+);
+</script>
+
+<style scoped>
+aside {
+  position: fixed;
+  right: 1rem;
+  top: 1rem;
+  bottom: 1rem;
+  padding: 0.7rem;
+  width: 30vw;
+  border-radius: 1rem;
+  background-color: #191919;
+  color: #fff;
+}
+</style>