resolve conflict

src/components/project/ClientBrief/Header.vue

@@ -15,7 +15,7 @@
         rows="3"
         class="border border-grey-200 | rounded-xl | p-16 | w-full"
         v-model="page.content.description"
-        @input="savePage()"
+        @input="saveDescription()"
       ></textarea>
     </div>
     <fieldset class="project-details__filters | flex-1">
@@ -34,12 +34,12 @@
           <input
             class="sr-only"
             type="checkbox"
-            :id="`${tag}-page`"
-            :name="`${tag}-page`"
-            :value="`${tag}-page`"
+            :id="`${tag}`"
+            :name="`${tag}`"
+            :value="`${tag}`"
             v-model="localSelectedTags"
           />
-          <label class="btn btn--sm btn--primary" :for="`${tag}-page`">{{
+          <label class="btn btn--sm btn--primary" :for="`${tag}`">{{
             toPascalCase(tag)
           }}</label>
         </template>
@@ -71,7 +71,7 @@ function updateSelectedTags(tags) {
 
 const isWaitingForSave = ref(false);
 
-const savePage = debounce(() => {
+const saveDescription = debounce(() => {
   if (!isWaitingForSave.value) {
     isWaitingForSave.value = true;
     const headers = {

src/components/project/ClientBrief/Images.vue

@@ -1,12 +1,16 @@
 <template>
   <section class="h-full | flex flex-col" style="--row-gap: var(--space-32)">
-    <Header :selectedTags="selectedTags" />
+    <Header
+      :selectedTags="selectedTags"
+      @update:selectedTags="changeSelectedTags"
+    />
     <div class="h-full | masonry">
       <button
         data-icon="upload"
         class="flex flex-col | bg-white | border border-grey-200 | text-grey-800 | font-medium | rounded-2xl"
         @click="addImages = true"
       >
+<<<<<<< HEAD
         Ajouter une ou plusieurs images
       </button>
       <figure
@@ -17,6 +21,54 @@
         <span class="tag | btn btn--sm">Tag</span>
         <img :src="image.url" alt="" />
       </figure>
+=======
+        <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>
+      <Toast />
+      <template v-for="image in images" :key="image.uuid">
+        <figure
+          v-if="
+            selectedTags.length === 0 ||
+            selectedTags.some((pageSelectedTag) =>
+              image.tags.includes(pageSelectedTag)
+            )
+          "
+          @click="modal = image"
+          class="image"
+        >
+          <span v-for="tag in image.selectedTags" class="tag | btn btn--sm">{{
+            tag
+          }}</span>
+          <img :src="image.url" alt="" />
+        </figure>
+      </template>
+>>>>>>> 5d1403a (client brief - update file tab working)
     </div>
 
     <Dialog
@@ -127,18 +179,21 @@
         <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="(tag, index) in modal.tags" :key="index">
+            <template v-for="(pageTag, index) in page.tags" :key="index">
               <input
                 class="sr-only"
                 type="checkbox"
-                :id="tag + '-image'"
-                :name="tag + '-image'"
-                :value="tag + '-image'"
-                v-model="modal.selectedTags"
+                :id="pageTag + '-image'"
+                :name="pageTag + '-image'"
+                :value="pageTag"
+                @change="saveTags(modal)"
+                v-model="modal.tags"
               />
-              <label class="btn btn--sm btn--primary" :for="tag + '-image'">{{
-                toPascalCase(tag)
-              }}</label>
+              <label
+                class="btn btn--sm btn--primary"
+                :for="pageTag + '-image'"
+                >{{ toPascalCase(pageTag) }}</label
+              >
             </template>
           </div>
         </fieldset>
@@ -172,27 +227,16 @@ 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, watch } from "vue";
+import { ref } from "vue";
 
 const { page } = usePageStore();
 const toast = useToast();
+
 const selectedTags = ref([]);
-
 const modal = ref(null);
-watch(modal, (newValue) => {
-  if (newValue) {
-    newValue.selectedTags = newValue.selectedTags.map((tag) => {
-      if (!tag.includes("image")) {
-        return tag + "-image";
-      } else {
-        return tag;
-      }
-    });
-  }
-});
-
 const images = ref(page.images);
 
 function onAdvancedUpload(event) {
@@ -224,6 +268,34 @@ function beforeSend(event) {
     "projects/miss-dior-blooming-bouquet/client-brief"
   );
 }
+
+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>