virtual sample - reorganize files data (add dynamic / static level)

public/site/blueprints/pages/virtual-sample.yml

@@ -16,14 +16,40 @@ options:
 
 tabs:
   contentTab:
-    sections:
-      tracksSection:
-        label: Piste
-        type: pages
-        layout: cards
-        template: track
-      fieldsSection:
-        type: fields
-        fields:
-          stepName:
-            type: hidden
+    columns:
+      - width: 1/2
+        sections:
+          fieldsSection:
+            type: fields
+            fields:
+              staticHeadline:
+                label: Vue statique
+                type: headline
+              rawGlass:
+                label: Verre brut
+                type: files
+                multiple: false
+                accept:
+                  extension: pdf
+              finishedGlass:
+                label: Verre parachevé
+                type: files
+                mutliple: false
+                accept:
+                  extension: pdf
+              stepName:
+                type: hidden
+
+      - width: 1/2
+        sections:
+          rightColFieldsSection:
+            type: fields
+            fields:
+              dynamicHeadline:
+                label: Vue dynamique
+                type: headline
+          tracksSection:
+            label: Pistes
+            type: pages
+            layout: cards
+            template: track

public/site/models/project.php

@@ -66,21 +66,35 @@ class ProjectPage extends Page {
 
   private function handleVirtualSampleStep($child, &$files, &$uri) {
     $uri = $child->parent()->uri() . '?dialog=' . $child->slug();
-    
-    foreach ($child->children() as $key => $track) {
+
+    if ($child->hasChildren()) {
+      $files['dynamic'] = [];
       
-      $trackData = [
-        'title' => (string) $track->title(),
-        'slug' => (string) $track->slug(),
-        'files' => [],
-      ];        
-      
-      foreach ($track->views()->toFiles() as $view) {
-        $trackData['files'][] = getFileData($view);
+      foreach ($child->children() as $key => $track) {
+        $trackData = [
+          'title' => (string) $track->title(),
+          'slug' => (string) $track->slug(),
+          'files' => [],
+        ];        
+        
+        foreach ($track->views()->toFiles() as $view) {
+          $trackData['files'][] = getFileData($view);
+        }
+        
+        $files['dynamic'][] = $trackData;
       }
+    }
 
-      $files[] = $trackData;
+    if ($child->rawGlass()->isNotEmpty() || $child->finishedGlass()->isNotEmpty()) {
+      $files['static'] = [];
+    }
 
+    if ($child->rawGlass()->isNotEmpty()) {
+      $files['static']['rawGlass'] = getFileData($child->rawGlass()->toFile());
+    }
+    
+    if ($child->finishedGlass()->isNotEmpty()) {
+      $files['static']['finishedGlass'] = getFileData($child->finishedGlass()->toFile());
     }
   }
 

src/components/project/ProjectStep.vue

@@ -29,20 +29,21 @@
           "
         >
           <img
-            v-for="image in step.files.slice(0, 3)"
+            v-for="image in step.files.dynamic.slice(0, 3)"
             :key="image.uuid"
             :src="image.url"
             :alt="image.alt"
           />
         </figure>
-        <!-- First image -->
         <figure
           v-if="step.id === 'virtualSample'"
           class="card__images"
-          :data-count="step.files.length > 3 ? step.files.length - 3 : 0"
+          :data-count="
+            step.files.dynamic.length > 3 ? step.files.dynamic.length - 3 : 0
+          "
         >
           <img
-            v-for="track in step.files"
+            v-for="track in step.files.dynamic"
             :key="track.files[0].slug"
             :src="track.files[0].url"
             :alt="track.files[0].alt"
@@ -112,6 +113,7 @@
 import dayjs from "dayjs";
 import "dayjs/locale/fr";
 import { usePageStore } from "../../stores/page";
+import { computed } from "vue";
 
 const { step } = defineProps({
   step: Object,
@@ -127,6 +129,15 @@ const steps = page.steps.map((item) => {
   return item.value;
 });
 
+const mergedFiles = computed(() => {
+  if (step.id !== "virtualSample") return false;
+
+  const staticFiles = step.files?.static ?? [];
+  const dynamicFiles = step.files?.dynamic ?? [];
+
+  return [...staticFiles, ...dynamicFiles];
+});
+
 const status = setStatus();
 
 function setStatus() {

src/components/project/VirtualSample.vue

@@ -143,7 +143,7 @@ const { page } = storeToRefs(usePageStore());
 const { comments } = storeToRefs(useDialogStore());
 
 const tracks = computed(
-  () => page.value.steps[page.value.steps.length - 1].files
+  () => page.value.steps[page.value.steps.length - 1].files.dynamic
 );
 
 const activeTrack = ref(tracks.value[0]);

src/views/Kanban.vue

@@ -5,8 +5,7 @@
     <DialogWrapper v-if="dialog.content" />
 
     <div class="kanban">
-      <ProjectStep v-for="step in page.steps" :key="step" :step="step">
-      </ProjectStep>
+      <ProjectStep v-for="step in page.steps" :key="step" :step="step" />
     </div>
   </main>
 </template>