From 80e63eb529db389ab682eb2f412fd89c5abbf664 Mon Sep 17 00:00:00 2001
From: isUnknown <adrien.payet@outlook.com>
Date: Tue, 8 Oct 2024 17:49:11 +0200
Subject: [PATCH] restore filters

---
 .../2846277834_perfume-1042715_1280.jpg.txt   |  2 +-
 src/components/project/ClientBrief/Images.vue | 36 +++++++++++--------
 2 files changed, 23 insertions(+), 15 deletions(-)

diff --git a/public/content/projects/1_miss-dior-blooming-bouquet/1_client-brief/2846277834_perfume-1042715_1280.jpg.txt b/public/content/projects/1_miss-dior-blooming-bouquet/1_client-brief/2846277834_perfume-1042715_1280.jpg.txt
index 645bf08..d8af60a 100644
--- a/public/content/projects/1_miss-dior-blooming-bouquet/1_client-brief/2846277834_perfume-1042715_1280.jpg.txt
+++ b/public/content/projects/1_miss-dior-blooming-bouquet/1_client-brief/2846277834_perfume-1042715_1280.jpg.txt
@@ -2,7 +2,7 @@ Description:
 
 ----
 
-Tags: bouton poussoir, coloris & nuances
+Tags: bouton poussoir, coloris & nuances, matériaux & textures
 
 ----
 
diff --git a/src/components/project/ClientBrief/Images.vue b/src/components/project/ClientBrief/Images.vue
index f4d57ef..ec466a4 100644
--- a/src/components/project/ClientBrief/Images.vue
+++ b/src/components/project/ClientBrief/Images.vue
@@ -8,23 +8,30 @@
       <button
         data-icon="upload"
         class="flex flex-col | bg-white | border border-grey-200 | text-grey-800 | font-medium | rounded-2xl"
-        @click="addImages = true"
+        @click="isAddImagesOpen = true"
       >
         Ajouter une ou plusieurs images
       </button>
-      <figure
-        v-for="image in images"
-        class="image"
-        @click="imageDetails = true"
-      >
-        <span class="tag | btn btn--sm">Tag</span>
-        <img :src="image.url" alt="" />
-      </figure>
+      <template v-for="image in images" :key="image.uri">
+        <figure
+          v-if="
+            selectedTags.length === 0 ||
+            selectedTags.some((pageSelectedTag) =>
+              image.tags.includes(pageSelectedTag)
+            )
+          "
+          class="image"
+          @click="imageDetails = image"
+        >
+          <span class="tag | btn btn--sm">Tag</span>
+          <img :src="image.url" alt="" />
+        </figure>
+      </template>
     </div>
 
     <Dialog
       id="add-images"
-      v-model:visible="addImages"
+      v-model:visible="isAddImagesOpen"
       modal
       header="Ajouter des images"
       class="bg-white | text-grey-800 | rounded-2xl | overflow-hidden | p-32"
@@ -125,7 +132,7 @@
       header="Détails de l’image"
       class="bg-white | text-grey-800 | rounded-2xl | overflow-hidden"
     >
-      <img :src="modal.url" alt="" class="bg-grey-200" loading="lazy" />
+      <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>
@@ -137,8 +144,8 @@
                 :id="pageTag + '-image'"
                 :name="pageTag + '-image'"
                 :value="pageTag"
-                @change="saveTags(modal)"
-                v-model="modal.tags"
+                @change="saveTags(imageDetails)"
+                v-model="imageDetails.tags"
               />
               <label
                 class="btn btn--sm btn--primary"
@@ -187,8 +194,9 @@ const { page } = usePageStore();
 const toast = useToast();
 
 const selectedTags = ref([]);
-const modal = ref(null);
+const imageDetails = ref(null);
 const images = ref(page.images);
+const isAddImagesOpen = ref(false);
 
 function onAdvancedUpload(event) {
   if (event.xhr.status === 200) {