edit panel remembering modifications in other tabs

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 };
+});