create clientBrief header component. add debounce process for page save

package-lock.json

@@ -10,6 +10,7 @@
       "dependencies": {
         "@vue/compiler-sfc": "^3.5.6",
         "dayjs": "^1.11.13",
+        "lodash": "^4.17.21",
         "pinia": "^2.1.7",
         "primevue": "^4.0.6",
         "slugify": "^1.6.6",
@@ -889,6 +890,11 @@
         "node": "^8.16.0 || ^10.6.0 || >=11.0.0"
       }
     },
+    "node_modules/lodash": {
+      "version": "4.17.21",
+      "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.21.tgz",
+      "integrity": "sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg=="
+    },
     "node_modules/magic-string": {
       "version": "0.30.11",
       "resolved": "https://registry.npmjs.org/magic-string/-/magic-string-0.30.11.tgz",

package.json

@@ -11,6 +11,7 @@
   "dependencies": {
     "@vue/compiler-sfc": "^3.5.6",
     "dayjs": "^1.11.13",
+    "lodash": "^4.17.21",
     "pinia": "^2.1.7",
     "primevue": "^4.0.6",
     "slugify": "^1.6.6",

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

@@ -10,7 +10,7 @@ Clientbriefpdf:
 
 ----
 
-Description: 
+Description: Bon voilà ça marche
 
 ----
 

src/components/project/ClientBrief/Header.vue

@@ -0,0 +1,105 @@
+<template>
+  <header
+    class="project-details | flex items-start | bg-white | rounded-2xl | p-16 | w-full"
+  >
+    <div class="project-details__description | flex-1">
+      <label
+        for="project-description"
+        class="flex | text-sm text-grey-700 | mb-8"
+        >Description du projet</label
+      >
+      <textarea
+        name="project-description"
+        id="project-description"
+        placeholder="Ajoutez une description générale de votre projet…"
+        rows="3"
+        class="border border-grey-200 | rounded-xl | p-16 | w-full"
+        v-model="page.content.description"
+        @input="savePage()"
+      ></textarea>
+    </div>
+    <fieldset class="project-details__filters | flex-1">
+      <legend class="text-sm text-grey-700 | mb-8">Filtrer par tags</legend>
+      <div class="flex" style="gap: var(--space-8)">
+        <button
+          class="btn btn--sm btn--grey"
+          id="all"
+          :aria-pressed="selectedTags.length === 0"
+          role="switch"
+          @click="clearTags()"
+        >
+          Voir tout
+        </button>
+        <template v-for="tag in page.tags" :key="tag">
+          <input
+            class="sr-only"
+            type="checkbox"
+            :id="`${tag}-page`"
+            :name="`${tag}-page`"
+            :value="`${tag}-page`"
+            v-model="localSelectedTags"
+          />
+          <label class="btn btn--sm btn--primary" :for="`${tag}-page`">{{
+            toPascalCase(tag)
+          }}</label>
+        </template>
+      </div>
+    </fieldset>
+  </header>
+</template>
+
+<script setup>
+import { ref, watch } from "vue";
+import { usePageStore } from "../../../stores/page";
+import { toPascalCase } from "../../../helpers";
+import debounce from "lodash/debounce";
+
+const { selectedTags } = defineProps({
+  selectedTags: Array,
+});
+
+const { page } = usePageStore();
+const emit = defineEmits(["update:selectedTags"]);
+
+const localSelectedTags = ref([...selectedTags]);
+
+watch(localSelectedTags, updateSelectedTags);
+
+function updateSelectedTags(tags) {
+  emit("update:selectedTags", tags);
+}
+
+const isWaitingForSave = ref(false);
+
+const savePage = debounce(() => {
+  if (!isWaitingForSave.value) {
+    isWaitingForSave.value = true;
+    const headers = {
+      method: "POST",
+      body: JSON.stringify({
+        pageUri: page.uri,
+        properties: [
+          {
+            name: "description",
+            value: page.content.description,
+          },
+        ],
+      }),
+    };
+    fetch("/save-page.json", headers)
+      .then((res) => res.json())
+      .then((json) => {
+        isWaitingForSave.value = false;
+        console.log(json);
+      })
+      .catch((error) => {
+        console.error("Erreur lors de la sauvegarde :", error);
+        isWaitingForSave.value = false;
+      });
+  }
+}, 1000);
+
+function clearTags() {
+  localSelectedTags.value = [];
+}
+</script>

src/components/project/ClientBrief/Images.vue

@@ -1,51 +1,6 @@
 <template>
   <section class="h-full | flex flex-col" style="--row-gap: var(--space-32)">
-    <header
+    <Header :selectedTags="selectedTags" />
-      class="project-details | flex items-start | bg-white | rounded-2xl | p-16 | w-full"
-    >
-      <div class="project-details__description | flex-1">
-        <label
-          for="project-description"
-          class="flex | text-sm text-grey-700 | mb-8"
-          >Description du projet</label
-        >
-        <textarea
-          name="project-description"
-          id="project-description"
-          placeholder="Ajoutez une description générale de votre projet…"
-          rows="3"
-          class="border border-grey-200 | rounded-xl | p-16 | w-full"
-          v-model="page.content.description"
-          @input="savePage()"
-        ></textarea>
-      </div>
-      <fieldset class="project-details__filters | flex-1">
-        <legend class="text-sm text-grey-700 | mb-8">Filtrer par tags</legend>
-        <div class="flex" style="gap: var(--space-8)">
-          <button
-            class="btn btn--sm btn--grey"
-            id="all"
-            :aria-pressed="selectedTags.length === 0"
-            @click="selectedTags = []"
-          >
-            Voir tout
-          </button>
-          <template v-for="(tag, index) in page.tags" :key="index">
-            <input
-              class="sr-only"
-              type="checkbox"
-              :id="tag + '-page'"
-              :name="tag + '-page'"
-              :value="tag + '-page'"
-              v-model="selectedTags"
-            />
-            <label class="btn btn--sm btn--primary" :for="tag + '-page'">{{
-              toPascalCase(tag)
-            }}</label>
-          </template>
-        </div>
-      </fieldset>
-    </header>
     <div class="h-full | masonry">
       <button
         data-icon="upload"
@@ -216,10 +171,10 @@
 import Toast from "primevue/toast";
 import FileUpload from "primevue/fileupload";
 import Dialog from "primevue/dialog";
+import Header from "./Header.vue";
 import { useToast } from "primevue/usetoast";
 import { usePageStore } from "../../../stores/page";
 import { ref, watch } from "vue";
-import { toPascalCase } from "../../../helpers";
 
 const { page } = usePageStore();
 const toast = useToast();
@@ -240,33 +195,6 @@ watch(modal, (newValue) => {
 
 const images = ref(page.images);
 
-const isWaitingForSave = ref(false);
-function savePage() {
-  if (!isWaitingForSave.value) {
-    isWaitingForSave.value = true;
-    setTimeout(() => {
-      const headers = {
-        method: "POST",
-        body: JSON.stringify({
-          pageUri: page.uri,
-          properties: [
-            {
-              name: "description",
-              value: page.content.description,
-            },
-          ],
-        }),
-      };
-      fetch("/save-page.json", headers)
-        .then((res) => res.json())
-        .then((json) => {
-          isWaitingForSave.value = false;
-          console.log(json);
-        });
-    }, 3000);
-  }
-}
-
 function onAdvancedUpload(event) {
   if (event.xhr.status === 200) {
     toast.add({