edit panel remembering modifications in other tabs

src/components/project/client-brief/Header.vue

@@ -40,7 +40,7 @@
             v-model="localSelectedTags"
           />
           <label class="btn btn--sm btn--primary" :for="`${tag}`">{{
-            toPascalCase(tag)
+            StringUtils.toPascalCase(tag)
           }}</label>
         </template>
       </div>
@@ -51,7 +51,7 @@
 <script setup>
 import { ref, watch } from "vue";
 import { usePageStore } from "../../../stores/page";
-import { toPascalCase } from "../../../helpers";
+import StringUtils from "../../../utils/string";
 import debounce from "lodash/debounce";
 
 const { selectedTags } = defineProps({

src/components/project/client-brief/ImageDetailsModal.vue

@@ -22,7 +22,7 @@
               v-model="image.tags"
             />
             <label class="btn btn--sm btn--primary" :for="pageTag + '-image'">{{
-              toPascalCase(pageTag)
+              StringUtils.toPascalCase(pageTag)
             }}</label>
           </template>
         </div>
@@ -56,7 +56,7 @@
 <script setup>
 import { ref, watch } from "vue";
 import { usePageStore } from "../../../stores/page";
-import { toPascalCase } from "../../../helpers";
+import StringUtils from "../../../utils/string";
 import Dialog from "primevue/dialog";
 import debounce from "lodash/debounce";
 

src/components/project/client-brief/add-images-modal/AddImagesModal.vue

@@ -11,8 +11,8 @@
         <ul>
           <li
             v-for="tab in tabs"
-            :class="{ active: activeTab.name === tab.name }"
-            @click="activeTab = tab"
+            :class="{ active: activeTabId === tab.id }"
+            @click="activeTabId = tab.id"
           >
             {{ tab.name }}
           </li>
@@ -30,6 +30,7 @@
               :is="tab.component"
               :params="tab.params ? tab.params : {}"
               :class="{ hidden: activeTab.name !== tab.name }"
+              :activeTab="activeTab"
             />
           </template>
         </div>
@@ -60,59 +61,24 @@
 
 <script setup>
 import Dialog from "primevue/dialog";
-import ImagesResources from "./ImagesResources.vue";
 import ImagesEditPanel from "./ImagesEditPanel.vue";
-import MyImages from "./MyImages.vue";
 import { ref, watch } from "vue";
+import { storeToRefs } from "pinia";
+import { useAddImagesModalStore } from "../../../../stores/addImagesModal";
 
 const { isAddImagesModalOpen } = defineProps({
   isAddImagesModalOpen: Boolean,
 });
+
 const emit = defineEmits(["update:isAddImagesModalOpen"]);
+const { activeTab, activeTabId, tabs } = storeToRefs(useAddImagesModalStore());
 
 const isOpen = ref(isAddImagesModalOpen);
-watch(isOpen, (newValue) => {
+watch(isOpen, () => {
   emit("close");
 });
 
-const images = ref([]);
-
 const deleteIsOpen = false;
-
-const tabs = [
-  {
-    name: "Mes images",
-    component: MyImages,
-    params: false,
-  },
-  {
-    name: "Matériauthèque",
-    component: ImagesResources,
-    params: {
-      targetPage: "materials",
-    },
-  },
-  {
-    name: "Réalisations",
-    component: ImagesResources,
-    params: {
-      targetPage: "creations",
-    },
-  },
-  {
-    name: "Inspirations",
-    component: ImagesResources,
-    params: false,
-  },
-];
-
-const activeTab = ref(tabs[0]);
-
-function addImages(newImages) {
-  console.log(newImages);
-  images.value = images.value.concat(newImages);
-  console.log(images.value);
-}
 </script>
 
 <style>

src/components/project/client-brief/add-images-modal/ImagesEditPanel.vue

@@ -8,7 +8,7 @@
       style="--row-gap: var(--space-8)"
     >
       <AccordionPanel
-        v-for="(image, index) in images"
+        v-for="(image, index) in activeTab.selectedImages"
         :key="index + 1"
         :value="index"
         class="w-full | bg-white | rounded-xl | p-12 pt-8"
@@ -49,7 +49,7 @@
                 <label
                   class="btn btn--sm btn--primary"
                   :for="`${tag}-image-edit`"
-                  >{{ toPascalCase(tag) }}</label
+                  >{{ StringUtils.toPascalCase(tag) }}</label
                 >
               </template>
             </div>
@@ -105,15 +105,14 @@ import AccordionPanel from "primevue/accordionpanel";
 import AccordionHeader from "primevue/accordionheader";
 import AccordionContent from "primevue/accordioncontent";
 import { usePageStore } from "../../../../stores/page";
-import { toPascalCase } from "../../../../helpers";
+import StringUtils from "../../../../utils/string";
 import { storeToRefs } from "pinia";
-
-const { images } = defineProps({
-  images: Object,
-});
+import { useAddImagesModalStore } from "../../../../stores/addImagesModal";
 
 const { page } = storeToRefs(usePageStore());
 
+const { activeTab } = storeToRefs(useAddImagesModalStore());
+
 // function saveTags(image) {
 //   const headers = {
 //     method: "POST",
@@ -184,7 +183,7 @@ function addImagesToBrief() {
       body: formData,
     })
       .then((res) => res.json())
-      .then((json) => console.log(json))
+      .then((json) => (page.value.images = json.images))
       .catch((error) => console.error("Error:", error));
   });
 }

src/components/project/client-brief/add-images-modal/ImagesResources.vue

@@ -1,28 +1,26 @@
 <template>
   <div class="auto-grid" style="--min: 15rem; --gap: 0.5rem">
-    <figure v-for="image in images" class="image" @click="addImage(image)">
-      <img :src="image.url" alt="" />
+    <figure v-for="image in tab.images" class="image">
+      <img
+        :src="image.url"
+        alt=""
+        @click="ArrayUtils.toggle(tab.selectedImages, image)"
+      />
     </figure>
   </div>
 </template>
 
 <script setup>
-import { ref } from "vue";
-import { useApiStore } from "../../../../stores/api";
+import { storeToRefs } from "pinia";
+import { useAddImagesModalStore } from "../../../../stores/addImagesModal";
+import { computed } from "vue";
+import ArrayUtils from "../../../../utils/array";
 
-const { params } = defineProps({
-  params: Object,
+const { tabs } = storeToRefs(useAddImagesModalStore());
+
+const tab = computed(() => {
+  return tabs.value.find((tab) => tab.id === "materials");
 });
-const emit = defineEmits(["add-images"]);
 
-const api = useApiStore();
-const images = ref([]);
-
-api
-  .fetchPageData(params.targetPage)
-  .then((json) => (images.value = json.images));
-
-function addImage(image) {
-  emit("add-images", [image]);
-}
+console.log(ArrayUtils);
 </script>

src/components/project/client-brief/add-images-modal/MyImages.vue

@@ -41,8 +41,12 @@
         <div v-if="files.length > 0">Fichiers importés</div>
       </template>
     </FileUpload>
-    <figure v-for="image in images" class="image">
-      <img :src="image.url" alt="" />
+    <figure v-for="image in tab.images" class="image">
+      <img
+        :src="image.url"
+        alt=""
+        @click="ArrayUtils.toggle(tab.selectedImages, image)"
+      />
     </figure>
     <Toast />
   </div>
@@ -54,7 +58,9 @@ import Toast from "primevue/toast";
 import { useToast } from "primevue/usetoast";
 import FileUpload from "primevue/fileupload";
 import { storeToRefs } from "pinia";
-import { ref } from "vue";
+import { computed, ref } from "vue";
+import { useAddImagesModalStore } from "../../../../stores/addImagesModal";
+import ArrayUtils from "../../../../utils/array";
 
 const { page } = storeToRefs(usePageStore());
 const toast = useToast();
@@ -62,9 +68,13 @@ const toast = useToast();
 const emit = defineEmits(["add-images"]);
 const uploadBtn = ref(null);
 
-const images = ref([]);
+const { tabs } = storeToRefs(useAddImagesModalStore());
 
-function addImages(event) {
+const tab = computed(() => {
+  return tabs.value.find((tab) => tab.id === "my-images");
+});
+
+function addImages() {
   const newImages = uploadBtn.value.files.map((file) => {
     return {
       url: URL.createObjectURL(file),
@@ -73,7 +83,7 @@ function addImages(event) {
       name: file.name,
     };
   });
-  images.value = images.value.concat(newImages);
-  emit("add-images", newImages);
+  tab.value.images = [...tab.value.images, ...newImages];
+  tab.value.selectedImages = [...tab.value.selectedImages, ...newImages];
 }
 </script>

src/stores/addImagesModal.js

@@ -0,0 +1,66 @@
+import { defineStore } from "pinia";
+import { ref, computed } from "vue";
+import { useApiStore } from "./api";
+import MyImages from "../components/project/client-brief/add-images-modal/MyImages.vue";
+import ImagesResources from "../components/project/client-brief/add-images-modal/ImagesResources.vue";
+
+export const useAddImagesModalStore = defineStore("add-images-modal", () => {
+  const tabs = ref([
+    {
+      name: "Mes images",
+      id: "my-images",
+      component: MyImages,
+      params: false,
+      images: [],
+      selectedImages: [],
+    },
+    {
+      name: "Matériauthèque",
+      id: "materials",
+      component: ImagesResources,
+      params: {
+        targetPage: "materials",
+      },
+      images: [],
+      selectedImages: [],
+    },
+    {
+      name: "Réalisations",
+      id: "creations",
+      component: ImagesResources,
+      images: [],
+      selectedImages: [],
+    },
+    {
+      name: "Inspirations",
+      id: "inspirations",
+      component: ImagesResources,
+      params: false,
+      images: [],
+      selectedImages: [],
+    },
+  ]);
+
+  const activeTabId = ref("my-images");
+
+  const activeTab = computed(() => {
+    return tabs.value.find((tab) => tab.id === activeTabId.value);
+  });
+
+  const images = ref({
+    myImages: [],
+    materials: [],
+    inspirations: [],
+  });
+
+  const api = useApiStore();
+  api
+    .fetchPageData("materials")
+    .then((json) => (images.value = tabs.value[1].images = json.images));
+
+  api
+    .fetchPageData("creations")
+    .then((json) => (images.value = tabs.value[2].images = json.images));
+
+  return { images, activeTabId, tabs, activeTab };
+});

src/utils/array.js

@@ -0,0 +1,13 @@
+function toggle(array, element) {
+  const index = array.indexOf(element);
+
+  if (index === -1) {
+    array.push(element);
+  } else {
+    array.splice(index, 1);
+  }
+}
+
+const ArrayUtils = { toggle };
+
+export default ArrayUtils;

src/utils/string.js

@@ -6,4 +6,6 @@ function toPascalCase(string) {
   });
 }
 
-export { toPascalCase };
+const StringUtils = { toPascalCase };
+
+export default StringUtils;