split client brief Images component - create independant components for modals

src/components/project/ClientBrief/ImageDetailsModal.vue

@@ -0,0 +1,120 @@
+<template>
+  <Dialog
+    v-model:visible="localImageDetails"
+    id="image-details"
+    modal
+    header="Détails de l’image"
+    class="bg-white | text-grey-800 | rounded-2xl | overflow-hidden"
+  >
+    <img
+      :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>
+        <div class="flex" style="gap: var(--space-8)">
+          <template v-for="(pageTag, index) in page.tags" :key="index">
+            <input
+              class="sr-only"
+              type="checkbox"
+              :id="pageTag + '-image'"
+              :name="pageTag + '-image'"
+              :value="pageTag"
+              @change="saveTags(localImageDetails)"
+              v-model="localImageDetails.tags"
+            />
+            <label class="btn btn--sm btn--primary" :for="pageTag + '-image'">{{
+              toPascalCase(pageTag)
+            }}</label>
+          </template>
+        </div>
+      </fieldset>
+      <div class="image__description | w-full">
+        <label
+          for="image-description"
+          class="flex | text-sm text-grey-700 | mb-8"
+          >Description de l’image</label
+        >
+        <textarea
+          name="image-description"
+          id="image-description"
+          placeholder="Ajoutez une description à l’image…"
+          class="border border-grey-200 | rounded-xl | p-16 | w-full"
+        ></textarea>
+      </div>
+      <button
+        data-icon="delete"
+        class="btn btn--black-10 | ml-auto mt-auto"
+        @click="localImageDetails = false"
+      >
+        Supprimer cette image
+      </button>
+    </div>
+  </Dialog>
+</template>
+
+<script setup>
+import { ref } from "vue";
+import { usePageStore } from "../../../stores/page";
+import { toPascalCase } from "../../../helpers";
+import Dialog from "primevue/dialog";
+
+const { imageDetails } = defineProps({
+  imageDetails: Object,
+});
+
+const { page } = usePageStore();
+
+const localImageDetails = ref(imageDetails);
+
+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);
+    });
+}
+</script>
+
+<style>
+#image-details {
+  width: min(100vw - var(--gutter) * 2, 62.5rem);
+  height: min(100vh - var(--gutter) * 2, 50rem);
+  flex-direction: row !important;
+}
+#image-details [data-pc-section="header"] {
+  position: absolute;
+  left: 50%;
+  right: 0;
+  z-index: 1102;
+  padding: 1.5rem var(--space-32);
+}
+#image-details [data-pc-section="content"] {
+  display: flex;
+}
+#image-details [data-pc-section="content"] > * {
+  width: 50%;
+}
+#image-details [data-pc-section="content"] > div {
+  padding-top: 5rem;
+}
+</style>