dynamize image details description

public/content/projects/1_miss-dior-blooming-bouquet/1_client-brief/client-brief.txt

@@ -19,6 +19,7 @@ Clientbriefimages:
 - file://BJZhoIKbKAh76NEV
 - file://jGugtGC1EbgJQrYq
 - file://TCy5v8H96mcAaTc8
+- file://AiNBBh9kVEjjmWId
 
 ----
 

public/site/templates/client-brief.json.php

@@ -7,7 +7,8 @@ foreach ($page->clientBriefImages()->toFiles() as $image) {
     'url' => $image->url(),
     'uuid' => (string) $image->uuid(),
     'tags' => $image->tags()->split(),
-    'name' => $image->filename()
+    'name' => $image->filename(),
+    'description' => $image->description()->value(),
   ];
 }
 

src/components/project/ClientBrief/ImageDetailsModal.vue

@@ -1,17 +1,12 @@
 <template>
   <Dialog
-    v-model:visible="localImageDetails"
+    v-model:visible="isOpen"
     id="image-details"
     modal
     header="Détails de l’image"
     class="bg-white | text-grey-800 | rounded-2xl | overflow-hidden"
   >
-    <img
+    <img :src="image.url" alt="" class="bg-grey-200" loading="lazy" />
-      :src="localImageDetails.url"
-      alt=""
-      class="bg-grey-200"
-      loading="lazy"
-    />
     <div class="flex flex-col | p-32" style="--row-gap: var(--space-32)">
       <fieldset class="image__tags">
         <legend class="text-sm text-grey-700 | mb-8">Tags</legend>
@@ -23,8 +18,8 @@
               :id="pageTag + '-image'"
               :name="pageTag + '-image'"
               :value="pageTag"
-              @change="saveTags(localImageDetails)"
+              @change="saveTags()"
-              v-model="localImageDetails.tags"
+              v-model="image.tags"
             />
             <label class="btn btn--sm btn--primary" :for="pageTag + '-image'">{{
               toPascalCase(pageTag)
@@ -43,12 +38,14 @@
           id="image-description"
           placeholder="Ajoutez une description à l’image…"
           class="border border-grey-200 | rounded-xl | p-16 | w-full"
+          v-model="image.description"
+          @input="saveDescription()"
         ></textarea>
       </div>
       <button
         data-icon="delete"
         class="btn btn--black-10 | ml-auto mt-auto"
-        @click="localImageDetails = false"
+        @click="image = false"
       >
         Supprimer cette image
       </button>
@@ -57,29 +54,37 @@
 </template>
 
 <script setup>
-import { ref } from "vue";
+import { ref, watch } from "vue";
 import { usePageStore } from "../../../stores/page";
 import { toPascalCase } from "../../../helpers";
 import Dialog from "primevue/dialog";
+import debounce from "lodash/debounce";
 
 const { imageDetails } = defineProps({
   imageDetails: Object,
 });
 
+const emit = defineEmits(["close"]);
+
+const isOpen = ref(true);
+watch(isOpen, () => {
+  emit("close");
+});
+
 const { page } = usePageStore();
 
-const localImageDetails = ref(imageDetails);
+const image = ref(imageDetails);
 
-function saveTags(image) {
+function saveTags() {
   const headers = {
     method: "POST",
     body: JSON.stringify({
       pageUri: page.uri,
-      fileName: image.name,
+      fileName: image.value.name,
       properties: [
         {
           name: "tags",
-          value: image.tags,
+          value: image.value.tags,
         },
       ],
     }),
@@ -93,6 +98,30 @@ function saveTags(image) {
       console.error("Erreur lors de la sauvegarde :", error);
     });
 }
+
+const saveDescription = debounce(() => {
+  const headers = {
+    method: "POST",
+    body: JSON.stringify({
+      pageUri: page.uri,
+      fileName: image.value.name,
+      properties: [
+        {
+          name: "description",
+          value: image.value.description,
+        },
+      ],
+    }),
+  };
+  fetch("/save-file.json", headers)
+    .then((res) => res.json())
+    .then((json) => {
+      console.log(json);
+    })
+    .catch((error) => {
+      console.error("Erreur lors de la sauvegarde :", error);
+    });
+}, 1000);
 </script>
 
 <style>

src/components/project/ClientBrief/Images.vue

@@ -34,7 +34,11 @@
       :isAddImagesModalOpen="isAddImagesModalOpen"
       @close="isAddImagesModalOpen = false"
     />
-    <ImageDetailsModal v-if="imageDetails" :imageDetails="imageDetails" />
+    <ImageDetailsModal
+      v-if="imageDetails"
+      :imageDetails="imageDetails"
+      @close="imageDetails = null"
+    />
   </section>
 </template>