From 8e12988961a72a705a9f826dfa79b8244e1e2464 Mon Sep 17 00:00:00 2001
From: isUnknown <adrien.payet@outlook.com>
Date: Mon, 27 Jan 2025 15:39:13 +0100
Subject: [PATCH] DTL page : fix dynamic background

---
 .../site/blueprints/pages/design-to-light.yml |  2 +-
 .../site/templates/design-to-light.json.php   |  3 +-
 src/views/DesignToLight.vue                   | 54 ++++++++++++++-----
 3 files changed, 45 insertions(+), 14 deletions(-)

diff --git a/public/site/blueprints/pages/design-to-light.yml b/public/site/blueprints/pages/design-to-light.yml
index baa43c1..493e32c 100644
--- a/public/site/blueprints/pages/design-to-light.yml
+++ b/public/site/blueprints/pages/design-to-light.yml
@@ -11,7 +11,7 @@ tabs:
             width: 2/3
             required: true
           background:
-            label: Background image
+            label: Image d'arrière-plan
             type: files
             multiple: false
             width: 1/3
diff --git a/public/site/templates/design-to-light.json.php b/public/site/templates/design-to-light.json.php
index 3f7cabe..87f3993 100644
--- a/public/site/templates/design-to-light.json.php
+++ b/public/site/templates/design-to-light.json.php
@@ -29,7 +29,8 @@ foreach ($page->presentation()->toLayouts() as $layout) {
 }
 
 $specificData = [
-  "presentation" => $presentation
+  "presentation" => $presentation,
+  "background" => $page->background()->isNotEmpty() ? getFileData($page->background()->toFile()) : null
 ];
 
 $pageData = array_merge($genericData, $specificData);
diff --git a/src/views/DesignToLight.vue b/src/views/DesignToLight.vue
index 0c53cc1..a668461 100644
--- a/src/views/DesignToLight.vue
+++ b/src/views/DesignToLight.vue
@@ -1,25 +1,48 @@
 <template>
-  <!-- TODO: remplacer style par :style="'--background: url(\'"+page.content.background.url+'\')'" -->
-  <article id="dtl-page" class="bg-black rounded-xl p-64" style="--background: url('https://plus.unsplash.com/premium_photo-1675355675464-2deabb1f893b?q=80&w=2070&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D')">
-    <header class="flex flex-col justify-center | text-center text-white | flow" style="--flow-space: 2rem">
+  <article
+    id="dtl-page"
+    class="bg-black rounded-xl p-64"
+    :style="'--background: url(' + background + ')'"
+  >
+    <header
+      class="flex flex-col justify-center | text-center text-white | flow"
+      style="--flow-space: 2rem"
+    >
       <hgroup class="flow" data-icon="leaf-thin">
         <h1 class="text-xl font-serif">{{ page.content.sectiontitle }}</h1>
         <p class="intro" v-html="page.content.introduction"></p>
       </hgroup>
       <div class="ctas | flex" style="--column-gap: 1rem">
-        <button class="btn btn--white-10" @click="isDialogOpen = true">Optimiser un projet existant</button>
+        <button class="btn btn--white-10" @click="isDialogOpen = true">
+          Optimiser un projet existant
+        </button>
         <button class="btn btn--white">Créer un nouveau projet avec DTL</button>
       </div>
     </header>
     <div class="presentation | mt-64 flow">
       <div v-for="row in page.presentation" :key="row.id" class="flex">
-        <div v-for="column in row.columns" :key="column.id" class="flex-1 | flex flex-col" style="min-width: 16.5rem">
-          <div v-for="block in column.blocks" :key="block.id" class="card w-full | bg-white-10 text-grey-200">
-            <img :src="block.content.cover.url" alt="" width="" height="" class="rounded-md" />
-              <h2 class="font-serif text-lg text-white">
-                {{ block.content.title }}
-              </h2>
-              <div v-html="block.content.text"></div>
+        <div
+          v-for="column in row.columns"
+          :key="column.id"
+          class="flex-1 | flex flex-col"
+          style="min-width: 16.5rem"
+        >
+          <div
+            v-for="block in column.blocks"
+            :key="block.id"
+            class="card w-full | bg-white-10 text-grey-200"
+          >
+            <img
+              :src="block.content.cover.url"
+              alt=""
+              width=""
+              height=""
+              class="rounded-md"
+            />
+            <h2 class="font-serif text-lg text-white">
+              {{ block.content.title }}
+            </h2>
+            <div v-html="block.content.text"></div>
           </div>
         </div>
       </div>
@@ -35,9 +58,16 @@
 import { storeToRefs } from "pinia";
 import { usePageStore } from "../stores/page";
 import OptimizationRequestDialog from "../components/design-to-light/OptimizationRequestDialog.vue";
-import { ref } from "vue";
+import { computed, ref } from "vue";
 
 const { page } = storeToRefs(usePageStore());
 
 const isOptimizationDialogOpen = ref(false);
+
+const background = computed(() => {
+  return (
+    page.value.background ??
+    "https://plus.unsplash.com/premium_photo-1675355675464-2deabb1f893b?q=80&w=2070&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
+  );
+});
 </script>