101 lines
2.3 KiB
Vue
101 lines
2.3 KiB
Vue
<template>
|
|
<main>
|
|
<h2 id="tabslist" class="sr-only">Inspirations</h2>
|
|
<Tabs :tabs="tabs" @update:currentTab="changeTab" />
|
|
<Selector
|
|
:all="page.inspirations"
|
|
@update:currentInspiration="changeInspiration"
|
|
/>
|
|
<section :id="currentTab" class="inspiration">
|
|
<Header
|
|
v-if="currentTab !== 'favorites'"
|
|
:inspiration="currentInspiration"
|
|
/>
|
|
<div class="masonry flow">
|
|
<template
|
|
v-for="(item, index) in currentInspiration.media"
|
|
:key="item.id"
|
|
>
|
|
<Image
|
|
:item="item"
|
|
:inspirationUri="currentInspiration.uri"
|
|
:currentTab="currentTab"
|
|
/>
|
|
</template>
|
|
</div>
|
|
</section>
|
|
</main>
|
|
</template>
|
|
|
|
<script setup>
|
|
import Selector from "../components/inspirations/Selector.vue";
|
|
import Header from "../components/inspirations/Header.vue";
|
|
import Tabs from "../components/Tabs.vue";
|
|
import Image from "../components/inspirations/Image.vue";
|
|
import { useUserStore } from "../stores/user";
|
|
import { ref, computed } from "vue";
|
|
import { usePageStore } from "../stores/page";
|
|
import { storeToRefs } from "pinia";
|
|
|
|
const { page } = storeToRefs(usePageStore());
|
|
const user = useUserStore().user;
|
|
const currentTab = ref("all");
|
|
const tabs = computed(() => {
|
|
return [
|
|
{
|
|
label: "Les Inspirations",
|
|
id: "all",
|
|
icon: null,
|
|
count: currentInspiration.value.media.length,
|
|
isActive: currentTab.value === "all",
|
|
},
|
|
{
|
|
label: "Mes Favoris",
|
|
id: "favorites",
|
|
icon: "favorite",
|
|
count: favoriteImages.value.length,
|
|
isActive: currentTab.value === "favorites",
|
|
},
|
|
];
|
|
});
|
|
|
|
const currentInspiration = ref(page.value.inspirations[0]);
|
|
const favoriteImages = computed(() => {
|
|
return currentInspiration.value.media.filter(
|
|
(image) => image.favoriteForUsers?.includes(user.uuid) ?? false
|
|
);
|
|
});
|
|
|
|
function changeTab(newValue) {
|
|
currentTab.value = newValue;
|
|
}
|
|
|
|
function changeInspiration(newValue) {
|
|
console.log(newValue);
|
|
currentInspiration.value = newValue;
|
|
}
|
|
</script>
|
|
|
|
<style scoped>
|
|
/* Tabs */
|
|
[role="tablist"] {
|
|
margin-left: 0;
|
|
}
|
|
|
|
/* Masonry */
|
|
@media (min-width: 40rem) {
|
|
.masonry {
|
|
column-count: 2;
|
|
}
|
|
}
|
|
@media (min-width: 65rem) {
|
|
.masonry {
|
|
column-count: 3;
|
|
}
|
|
}
|
|
@media (min-width: 90rem) {
|
|
.masonry {
|
|
column-count: 4;
|
|
}
|
|
}
|
|
</style>
|