designtopack/src/stores/addImagesModal.js
2024-12-17 16:20:57 +01:00

73 lines
1.8 KiB
JavaScript

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