edit panel remembering modifications in other tabs

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>