72 lines
2.8 KiB
Vue
72 lines
2.8 KiB
Vue
|
<!--
|
||
|
|
Ported from legacy henza_pwa/src/views/search/collection/index.vue.
|
||
|
|
Filters the one flat product list client-side by collection id (route
|
||
|
|
param) — no server-side ciny_id query param exists; consistent with the
|
||
|
|
rest of this port's "small catalog, client-side filtering" approach.
|
||
|
|
-->
|
||
|
|
<template>
|
||
|
|
<div>
|
||
|
|
<AppHeader>
|
||
|
|
<nav class="grid grid-cols-10 justify-center items-center">
|
||
|
|
<div class="w-full col-span-1" @click="router.push({ name: 'search' })">
|
||
|
|
<Icon icon="vuesax-linear:arrow-right-1" class="ml-2 text-white" size="19" />
|
||
|
|
</div>
|
||
|
|
<div class="w-full col-span-8 flex mb-0 justify-center items-center h-[19px]">
|
||
|
|
<Icon icon="vuesax-linear:money-2" class="ml-2 text-white" size="19" />
|
||
|
|
<h4 class="bold mb-0 text-white">{{ route.query.page }}</h4>
|
||
|
|
</div>
|
||
|
|
<div class="w-full col-span-1"></div>
|
||
|
|
</nav>
|
||
|
|
</AppHeader>
|
||
|
|
<div class="flex flex-col gap-4 m-4 p-2 bg-gray-50 h-[90vh] rounded-lg">
|
||
|
|
<span class="text-center font-bold mt-2">برای مشاهده جزئیات محصول روی آیتم ضربه بزنید</span>
|
||
|
|
<Spin :spinning="loadingPage">
|
||
|
|
<div class="grid grid-cols-4 gap-8 overflow-y-auto mx-4 max-h-[85vh] pb-10">
|
||
|
|
<CollectionCard v-for="item in collectionProducts" :key="item.id" @click="openDrawer(item.id)" :item="item" />
|
||
|
|
</div>
|
||
|
|
</Spin>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<Drawer v-model:visible="visible" placement="bottom" :closable="false" class="rtl" height="100vh" :bodyStyle="{ padding: 0, position: 'relative' }">
|
||
|
|
<SingleProduct v-if="activeProductId" :id="activeProductId" @closeDrawer="closeDrawer" :key="activeProductId" />
|
||
|
|
</Drawer>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<script setup lang="ts">
|
||
|
|
import { computed, onMounted, ref } from 'vue'
|
||
|
|
import { useRoute, useRouter } from 'vue-router'
|
||
|
|
import { Drawer, Spin } from 'ant-design-vue'
|
||
|
|
import Icon from '../../components/icon/Icon.vue'
|
||
|
|
import AppHeader from '../../components/AppHeader.vue'
|
||
|
|
import CollectionCard from '../../components/product/CollectionCard.vue'
|
||
|
|
import SingleProduct from '../../components/product/SingleProduct.vue'
|
||
|
|
import { api, type ProductSummary } from '../../api/client'
|
||
|
|
|
||
|
|
const route = useRoute()
|
||
|
|
const router = useRouter()
|
||
|
|
|
||
|
|
const visible = ref(false)
|
||
|
|
const activeProductId = ref<string | null>(null)
|
||
|
|
const loadingPage = ref(false)
|
||
|
|
const allProducts = ref<ProductSummary[]>([])
|
||
|
|
|
||
|
|
const collectionProducts = computed(() => allProducts.value.filter((p) => p.collections.some((c) => c.collectionId === route.params.id)))
|
||
|
|
|
||
|
|
onMounted(async () => {
|
||
|
|
loadingPage.value = true
|
||
|
|
try {
|
||
|
|
allProducts.value = await api.listProducts()
|
||
|
|
} finally {
|
||
|
|
loadingPage.value = false
|
||
|
|
}
|
||
|
|
})
|
||
|
|
|
||
|
|
function openDrawer(id: string) {
|
||
|
|
activeProductId.value = id
|
||
|
|
visible.value = true
|
||
|
|
}
|
||
|
|
function closeDrawer() {
|
||
|
|
visible.value = false
|
||
|
|
}
|
||
|
|
</script>
|