From 0c2a7d0a48032fe904484d0d5bf74863137e0ff7 Mon Sep 17 00:00:00 2001
From: isUnknown <adrien.payet@outlook.com>
Date: Tue, 8 Oct 2024 18:29:28 +0200
Subject: [PATCH] split client brief Images component - create independant
 components for modals

---
 .../3755297649_perfume-2643349_1280.jpg.txt   |   8 +-
 .../project/ClientBrief/AddImagesModal.vue    | 177 ++++++++++++
 .../project/ClientBrief/ImageDetailsModal.vue | 120 ++++++++
 src/components/project/ClientBrief/Images.vue | 268 +-----------------
 4 files changed, 311 insertions(+), 262 deletions(-)
 create mode 100644 src/components/project/ClientBrief/AddImagesModal.vue
 create mode 100644 src/components/project/ClientBrief/ImageDetailsModal.vue

diff --git a/public/content/projects/1_miss-dior-blooming-bouquet/1_client-brief/3755297649_perfume-2643349_1280.jpg.txt b/public/content/projects/1_miss-dior-blooming-bouquet/1_client-brief/3755297649_perfume-2643349_1280.jpg.txt
index aa92faf..a20d7c9 100644
--- a/public/content/projects/1_miss-dior-blooming-bouquet/1_client-brief/3755297649_perfume-2643349_1280.jpg.txt
+++ b/public/content/projects/1_miss-dior-blooming-bouquet/1_client-brief/3755297649_perfume-2643349_1280.jpg.txt
@@ -1,7 +1,3 @@
-Date: 2024-10-02 02:10
-
-----
-
 Description: 
 
 ----
@@ -10,6 +6,10 @@ Tags:
 
 ----
 
+Date: 2024-10-02 02:10
+
+----
+
 Uuid: TCy5v8H96mcAaTc8
 
 ----
diff --git a/src/components/project/ClientBrief/AddImagesModal.vue b/src/components/project/ClientBrief/AddImagesModal.vue
new file mode 100644
index 0000000..0dac680
--- /dev/null
+++ b/src/components/project/ClientBrief/AddImagesModal.vue
@@ -0,0 +1,177 @@
+<template>
+  <Dialog
+    id="add-images"
+    v-model:visible="isOpen"
+    modal
+    header="Ajouter des images"
+    class="bg-white | text-grey-800 | rounded-2xl | overflow-hidden | p-32"
+  >
+    <div class="with-sidebar | h-full">
+      <nav>
+        <ul>
+          <li class="active">Mes Images</li>
+          <li>Matériauthèque</li>
+          <li>Réalisations</li>
+          <li>Inspirations</li>
+        </ul>
+      </nav>
+      <div
+        class="auto-grid | bg-grey-50 | border border-grey-200 | rounded-2xl | w-full | p-8"
+        style="--min: 15rem; --gap: 0.5rem"
+      >
+        <FileUpload
+          mode="basic"
+          name="images[]"
+          :url="'/upload-images.json?pageUri=' + page.uri"
+          @upload="onAdvancedUpload($event)"
+          :auto="true"
+          :multiple="true"
+          accept="image/*"
+          :maxFileSize="1000000"
+          invalidFileSizeMessage="Fichier trop lourd"
+          chooseLabel="Ajouter une ou plusieurs images"
+          class="flex flex-col justify-center | bg-white | border border-grey-200 | text-grey-800 | font-medium | rounded-xl"
+        >
+          <template #chooseicon>
+            <svg
+              width="20"
+              height="20"
+              viewBox="0 0 20 20"
+              fill="none"
+              xmlns="http://www.w3.org/2000/svg"
+            >
+              <path
+                d="M0.714355 15.0001V16.4286C0.714355 17.1864 1.01538 17.9131 1.55119 18.4489C2.08701 18.9848 2.81374 19.2858 3.5715 19.2858H16.4286C17.1864 19.2858 17.9131 18.9848 18.4489 18.4489C18.9848 17.9131 19.2858 17.1864 19.2858 16.4286V15.0001M5.71436 5.71436L10.0001 0.714355M10.0001 0.714355L14.2858 5.71436M10.0001 0.714355V13.5715"
+                stroke="currentColor"
+                stroke-width="1.25"
+                stroke-linecap="round"
+                stroke-linejoin="round"
+              />
+            </svg>
+          </template>
+          <template
+            #content="{
+              files,
+              uploadedFiles,
+              removeUploadedFileCallback,
+              removeFileCallback,
+            }"
+          >
+            <div v-if="files.length > 0">Fichiers importés</div>
+          </template>
+        </FileUpload>
+        <figure class="image">
+          <img
+            src="https://images.unsplash.com/photo-1541643600914-78b084683601?q=80&w=2008&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
+            alt=""
+          />
+        </figure>
+        <figure class="image">
+          <img
+            src="https://images.unsplash.com/photo-1541643600914-78b084683601?q=80&w=2008&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
+            alt=""
+          />
+        </figure>
+        <figure class="image">
+          <img
+            src="https://images.unsplash.com/photo-1541643600914-78b084683601?q=80&w=2008&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
+            alt=""
+          />
+        </figure>
+        <figure class="image">
+          <img
+            src="https://images.unsplash.com/photo-1541643600914-78b084683601?q=80&w=2008&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
+            alt=""
+          />
+        </figure>
+        <figure class="image">
+          <img
+            src="https://images.unsplash.com/photo-1541643600914-78b084683601?q=80&w=2008&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
+            alt=""
+          />
+        </figure>
+        <Toast />
+      </div>
+    </div>
+  </Dialog>
+</template>
+
+<script setup>
+import Dialog from "primevue/dialog";
+import Toast from "primevue/toast";
+import { useToast } from "primevue/usetoast";
+import FileUpload from "primevue/fileupload";
+import { usePageStore } from "../../../stores/page";
+import { ref, watch } from "vue";
+
+const { page } = usePageStore();
+const toast = useToast();
+
+const { isAddImagesModalOpen } = defineProps({
+  isAddImagesModalOpen: Boolean,
+});
+const emit = defineEmits(["update:isAddImagesModalOpen"]);
+
+const isOpen = ref(isAddImagesModalOpen);
+watch(isOpen, (newValue) => {
+  emit("close");
+});
+</script>
+
+<style>
+#add-images {
+  --sidebar-width: 12.5rem;
+  counter-set: selected-images;
+  width: min(100vw - var(--gutter) * 2, 100rem);
+  height: min(100vh - var(--gutter) * 2, 60rem);
+  padding-top: var(--space-16);
+  row-gap: var(--space-32);
+}
+#add-images nav li {
+  position: relative;
+  height: var(--space-48);
+  border-left: 1px solid var(--color-grey-400);
+  padding: var(--space-12) var(--space-16);
+  color: var(--color-grey-400);
+  font-weight: 500;
+  cursor: pointer;
+}
+#add-images nav li:hover,
+#add-images nav li.active {
+  color: var(--color-grey-800);
+  border-left-color: var(--color-grey-800);
+}
+#add-images nav li.active::before {
+  content: "";
+  width: 2px;
+  position: absolute;
+  top: 0;
+  left: -1px;
+  bottom: 0;
+  background: var(--color-grey-800);
+}
+#add-images [data-pc-name="fileupload"] button {
+  padding: 3rem;
+  aspect-ratio: 1/1;
+}
+#add-images .image {
+  counter-increment: selected-images;
+  aspect-ratio: 1/1;
+  border-radius: var(--rounded-xl);
+}
+#add-images .image::after {
+  content: counter(selected-images);
+  top: var(--space-12);
+  right: var(--space-12);
+  border-radius: 50%;
+  color: var(--color-white);
+  font-weight: 700;
+  background: var(--color-grey-800);
+  mask: none;
+  display: grid;
+  place-items: center;
+  text-align: center;
+  width: 1.5rem;
+  height: 1.5rem;
+}
+</style>
diff --git a/src/components/project/ClientBrief/ImageDetailsModal.vue b/src/components/project/ClientBrief/ImageDetailsModal.vue
new file mode 100644
index 0000000..982cf14
--- /dev/null
+++ b/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>
diff --git a/src/components/project/ClientBrief/Images.vue b/src/components/project/ClientBrief/Images.vue
index ec466a4..14650f2 100644
--- a/src/components/project/ClientBrief/Images.vue
+++ b/src/components/project/ClientBrief/Images.vue
@@ -8,7 +8,7 @@
       <button
         data-icon="upload"
         class="flex flex-col | bg-white | border border-grey-200 | text-grey-800 | font-medium | rounded-2xl"
-        @click="isAddImagesOpen = true"
+        @click="isAddImagesModalOpen = true"
       >
         Ajouter une ou plusieurs images
       </button>
@@ -29,174 +29,28 @@
       </template>
     </div>
 
-    <Dialog
-      id="add-images"
-      v-model:visible="isAddImagesOpen"
-      modal
-      header="Ajouter des images"
-      class="bg-white | text-grey-800 | rounded-2xl | overflow-hidden | p-32"
-    >
-      <div class="with-sidebar | h-full">
-        <nav>
-          <ul>
-            <li class="active">Mes Images</li>
-            <li>Matériauthèque</li>
-            <li>Réalisations</li>
-            <li>Inspirations</li>
-          </ul>
-        </nav>
-        <div
-          class="auto-grid | bg-grey-50 | border border-grey-200 | rounded-2xl | w-full | p-8"
-          style="--min: 15rem; --gap: 0.5rem"
-        >
-          <FileUpload
-            mode="basic"
-            name="images[]"
-            :url="'/upload-images.json?pageUri=' + page.uri"
-            @upload="onAdvancedUpload($event)"
-            :auto="true"
-            :multiple="true"
-            accept="image/*"
-            :maxFileSize="1000000"
-            invalidFileSizeMessage="Fichier trop lourd"
-            chooseLabel="Ajouter une ou plusieurs images"
-            class="flex flex-col justify-center | bg-white | border border-grey-200 | text-grey-800 | font-medium | rounded-xl"
-          >
-            <template #chooseicon>
-              <svg
-                width="20"
-                height="20"
-                viewBox="0 0 20 20"
-                fill="none"
-                xmlns="http://www.w3.org/2000/svg"
-              >
-                <path
-                  d="M0.714355 15.0001V16.4286C0.714355 17.1864 1.01538 17.9131 1.55119 18.4489C2.08701 18.9848 2.81374 19.2858 3.5715 19.2858H16.4286C17.1864 19.2858 17.9131 18.9848 18.4489 18.4489C18.9848 17.9131 19.2858 17.1864 19.2858 16.4286V15.0001M5.71436 5.71436L10.0001 0.714355M10.0001 0.714355L14.2858 5.71436M10.0001 0.714355V13.5715"
-                  stroke="currentColor"
-                  stroke-width="1.25"
-                  stroke-linecap="round"
-                  stroke-linejoin="round"
-                />
-              </svg>
-            </template>
-            <template
-              #content="{
-                files,
-                uploadedFiles,
-                removeUploadedFileCallback,
-                removeFileCallback,
-              }"
-            >
-              <div v-if="files.length > 0">Fichiers importés</div>
-            </template>
-          </FileUpload>
-          <figure class="image">
-            <img
-              src="https://images.unsplash.com/photo-1541643600914-78b084683601?q=80&w=2008&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
-              alt=""
-            />
-          </figure>
-          <figure class="image">
-            <img
-              src="https://images.unsplash.com/photo-1541643600914-78b084683601?q=80&w=2008&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
-              alt=""
-            />
-          </figure>
-          <figure class="image">
-            <img
-              src="https://images.unsplash.com/photo-1541643600914-78b084683601?q=80&w=2008&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
-              alt=""
-            />
-          </figure>
-          <figure class="image">
-            <img
-              src="https://images.unsplash.com/photo-1541643600914-78b084683601?q=80&w=2008&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
-              alt=""
-            />
-          </figure>
-          <figure class="image">
-            <img
-              src="https://images.unsplash.com/photo-1541643600914-78b084683601?q=80&w=2008&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
-              alt=""
-            />
-          </figure>
-          <Toast />
-        </div>
-      </div>
-    </Dialog>
-
-    <Dialog
-      id="image-details"
-      v-model:visible="imageDetails"
-      modal
-      header="Détails de l’image"
-      class="bg-white | text-grey-800 | rounded-2xl | overflow-hidden"
-    >
-      <img :src="imageDetails.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(imageDetails)"
-                v-model="imageDetails.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="imageDetails = false"
-        >
-          Supprimer cette image
-        </button>
-      </div>
-    </Dialog>
+    <AddImagesModal
+      v-if="isAddImagesModalOpen"
+      :isAddImagesModalOpen="isAddImagesModalOpen"
+      @close="isAddImagesModalOpen = false"
+    />
+    <ImageDetailsModal v-if="imageDetails" :imageDetails="imageDetails" />
   </section>
 </template>
 
 <script setup>
-import Toast from "primevue/toast";
-import FileUpload from "primevue/fileupload";
-import Dialog from "primevue/dialog";
 import Header from "./Header.vue";
-import { toPascalCase } from "../../../helpers";
-import { useToast } from "primevue/usetoast";
 import { usePageStore } from "../../../stores/page";
 import { ref } from "vue";
+import ImageDetailsModal from "./ImageDetailsModal.vue";
+import AddImagesModal from "./AddImagesModal.vue";
 
 const { page } = usePageStore();
-const toast = useToast();
 
 const selectedTags = ref([]);
 const imageDetails = ref(null);
 const images = ref(page.images);
-const isAddImagesOpen = ref(false);
+const isAddImagesModalOpen = ref(false);
 
 function onAdvancedUpload(event) {
   if (event.xhr.status === 200) {
@@ -231,30 +85,6 @@ function beforeSend(event) {
 function changeSelectedTags(newTags) {
   selectedTags.value = newTags;
 }
-
-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>
@@ -308,82 +138,4 @@ input[type="file"] {
 [data-pc-section="content"] {
   flex-grow: 1;
 }
-
-#add-images {
-  --sidebar-width: 12.5rem;
-  counter-set: selected-images;
-  width: min(100vw - var(--gutter) * 2, 100rem);
-  height: min(100vh - var(--gutter) * 2, 60rem);
-  padding-top: var(--space-16);
-  row-gap: var(--space-32);
-}
-#add-images nav li {
-  position: relative;
-  height: var(--space-48);
-  border-left: 1px solid var(--color-grey-400);
-  padding: var(--space-12) var(--space-16);
-  color: var(--color-grey-400);
-  font-weight: 500;
-  cursor: pointer;
-}
-#add-images nav li:hover,
-#add-images nav li.active {
-  color: var(--color-grey-800);
-  border-left-color: var(--color-grey-800);
-}
-#add-images nav li.active::before {
-  content: "";
-  width: 2px;
-  position: absolute;
-  top: 0;
-  left: -1px;
-  bottom: 0;
-  background: var(--color-grey-800);
-}
-#add-images [data-pc-name="fileupload"] button {
-  padding: 3rem;
-  aspect-ratio: 1/1;
-}
-#add-images .image {
-  counter-increment: selected-images;
-  aspect-ratio: 1/1;
-  border-radius: var(--rounded-xl);
-}
-#add-images .image::after {
-  content: counter(selected-images);
-  top: var(--space-12);
-  right: var(--space-12);
-  border-radius: 50%;
-  color: var(--color-white);
-  font-weight: 700;
-  background: var(--color-grey-800);
-  mask: none;
-  display: grid;
-  place-items: center;
-  text-align: center;
-  width: 1.5rem;
-  height: 1.5rem;
-}
-
-#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>