images resources component - support dynamic images depending on tab id

This commit is contained in:
isUnknown 2024-10-16 18:12:06 +02:00
parent c062c40b31
commit 09eb3e1969
3 changed files with 8 additions and 5 deletions

View file

@ -28,7 +28,7 @@
<component <component
@add-images="addImages" @add-images="addImages"
:is="tab.component" :is="tab.component"
:params="tab.params ? tab.params : {}" :id="tab.id"
:class="{ hidden: activeTab.name !== tab.name }" :class="{ hidden: activeTab.name !== tab.name }"
/> />
</template> </template>

View file

@ -28,10 +28,13 @@ import { useAddImagesModalStore } from "../../../../stores/addImagesModal";
import { computed } from "vue"; import { computed } from "vue";
import ArrayUtils from "../../../../utils/array"; import ArrayUtils from "../../../../utils/array";
const { id } = defineProps({
id: String,
});
const { tabs } = storeToRefs(useAddImagesModalStore()); const { tabs } = storeToRefs(useAddImagesModalStore());
const tab = computed(() => { const tab = computed(() => {
return tabs.value.find((tab) => tab.id === "materials"); return tabs.value.find((tab) => tab.id === id);
}); });
function isSelected(image) { function isSelected(image) {

View file

@ -58,9 +58,9 @@ export const useAddImagesModalStore = defineStore("add-images-modal", () => {
.fetchPageData("materials") .fetchPageData("materials")
.then((json) => (images.value = tabs.value[1].images = json.images)); .then((json) => (images.value = tabs.value[1].images = json.images));
api api.fetchPageData("creations").then((json) => {
.fetchPageData("creations") images.value = tabs.value[2].images = json.images;
.then((json) => (images.value = tabs.value[2].images = json.images)); });
return { images, activeTabId, tabs, activeTab }; return { images, activeTabId, tabs, activeTab };
}); });