accordions data linked to kirby

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

@@ -14,7 +14,14 @@ Description: test
 
 ----
 
-Clientbriefimages: - file://b4Ywx4ProE0Smc0Q
+Clientbriefimages:
+
+- file://b4Ywx4ProE0Smc0Q
+- file://aCuD18YBmLHg6YaS
+- file://Ke2XIraa5jlvtOdb
+- file://QBax5c69DcENi2rt
+- file://nqa5cCGHGoWQXulB
+- file://FWKdZwxSimGOaO2x
 
 ----
 

public/content/projects/1_miss-dior-blooming-bouquet/1_client-brief/perfume-1042715_1280.jpg.txt

@@ -0,0 +1,13 @@
+Description: 
+
+----
+
+Tags: forme & design, coloris & nuances
+
+----
+
+Uuid: QBax5c69DcENi2rt
+
+----
+
+Template: image

public/content/projects/1_miss-dior-blooming-bouquet/1_client-brief/perfume-144546_1280.jpg.txt

@@ -0,0 +1,13 @@
+Description: 
+
+----
+
+Tags: 
+
+----
+
+Uuid: Ke2XIraa5jlvtOdb
+
+----
+
+Template: image

public/content/projects/1_miss-dior-blooming-bouquet/1_client-brief/perfume-2643349_1280.jpg.txt

@@ -0,0 +1,13 @@
+Description: 
+
+----
+
+Tags: 
+
+----
+
+Uuid: nqa5cCGHGoWQXulB
+
+----
+
+Template: image

public/content/projects/1_miss-dior-blooming-bouquet/1_client-brief/perfume-2721147_1280.jpg.txt

@@ -1,8 +1,8 @@
-Description: test de description
+Description: test de description mais
 
 ----
 
-Tags: forme & design, coloris & nuances, parachèvements
+Tags: parachèvements
 
 ----
 

public/content/projects/1_miss-dior-blooming-bouquet/1_client-brief/perfume-4718455_1280.jpg.txt

@@ -0,0 +1,13 @@
+Description: 
+
+----
+
+Tags: 
+
+----
+
+Uuid: FWKdZwxSimGOaO2x
+
+----
+
+Template: image

src/components/project/ClientBrief/ImagesEditPanel.vue

@@ -29,7 +29,8 @@
               placeholder="Ajoutez une description à cette image…"
               rows="3"
               class="border border-grey-200 | rounded-xl | p-16 | w-full"
-              @input="saveDescription()"
+              v-model="image.description"
+              @input="saveDescription(image)"
             ></textarea>
           </div>
           <fieldset class="image-details__filters | flex-1">
@@ -41,14 +42,17 @@
                 <input
                   class="sr-only"
                   type="checkbox"
-                  :id="`${tag}`"
+                  :id="`${tag}-image-edit`"
-                  :name="`${tag}`"
+                  :name="`${tag}-image-edit`"
                   :value="`${tag}`"
-                  v-model="localSelectedTags"
+                  @change="saveTags(image)"
+                  v-model="image.tags"
                 />
-                <label class="btn btn--sm btn--primary" :for="`${tag}`">{{
+                <label
-                  toPascalCase(tag)
+                  class="btn btn--sm btn--primary"
-                }}</label>
+                  :for="`${tag}-image-edit`"
+                  >{{ toPascalCase(tag) }}</label
+                >
               </template>
             </div>
           </fieldset>
@@ -104,12 +108,61 @@ import AccordionHeader from "primevue/accordionheader";
 import AccordionContent from "primevue/accordioncontent";
 import { usePageStore } from "../../../stores/page";
 import { toPascalCase } from "../../../helpers";
+import debounce from "lodash/debounce";
 
 const { images } = defineProps({
   images: Array,
 });
 
 const { page } = usePageStore();
+
+function saveTags(image) {
+  const headers = {
+    method: "POST",
+    body: JSON.stringify({
+      pageUri: page.uri,
+      fileName: image.name,
+      properties: [
+        {
+          name: "tags",
+          value: image.tags,
+        },
+      ],
+    }),
+  };
+  fetch("/save-file.json", headers)
+    .then((res) => res.json())
+    .then((json) => {
+      console.log(json);
+    })
+    .catch((error) => {
+      console.error("Erreur lors de la sauvegarde :", error);
+    });
+}
+
+const saveDescription = debounce((image) => {
+  const headers = {
+    method: "POST",
+    body: JSON.stringify({
+      pageUri: page.uri,
+      fileName: image.name,
+      properties: [
+        {
+          name: "description",
+          value: image.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>