designtopack/src/stores/addImagesModal.js

import { defineStore } from "pinia";
import { ref, computed } from "vue";
import { useApiStore } from "./api";
import MyImages from "../components/project/brief/add-images-modal/MyImages.vue";
import ImagesResources from "../components/project/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,
      collections: [],
      selectedImages: [],
    },
  ]);

  const activeTabId = ref("my-images");

  const activeTab = computed(() => {
    return tabs.value.find((tab) => tab.id === activeTabId.value);
  });

  const selectedImages = ref({
    myImages: [],
    materials: [],
    inspirations: [],
  });

  const api = useApiStore();
  api
    .fetchData("materials")
    .then((json) => (tabs.value[1].images = json.page.images));

  api.fetchData("creations").then((json) => {
    tabs.value[2].images = json.page.images;
  });

  api.fetchData("inspirations").then((json) => {
    console.log(json);
    tabs.value[3].collections = json.page.inspirations;
    tabs.value[3].collections[0].isActive = true;
    tabs.value[3].images = json.page.inspirations[0].media;
  });

  return { activeTabId, tabs, activeTab };
});