60 lines
1.6 KiB
Vue
60 lines
1.6 KiB
Vue
<script setup lang="ts">
|
|
import productCard from "./productCard.vue"
|
|
import productDetails from "./productDetailsDialog.vue"
|
|
import { ref, watch } from "vue";
|
|
import { useProductStore } from "@/data/stores/productStore";
|
|
import { ProductWithCategoryModel } from "@/data/models/productWithCategoryModel";
|
|
import alertBanner from "@/components/alertBanner.vue";
|
|
import filterNavDrawer from "./filterNavDrawer.vue";
|
|
|
|
const productStore = useProductStore()
|
|
|
|
const showProductDetails = ref(false)
|
|
const dialogProduct = ref(new ProductWithCategoryModel())
|
|
|
|
function showProductDialog(product: ProductWithCategoryModel) {
|
|
dialogProduct.value = product
|
|
showProductDetails.value = true
|
|
}
|
|
|
|
watch(() => productStore.filteredCategory, async () => { productStore.filterProducts() })
|
|
watch(() => productStore.sortOrder, async () => { productStore.sortProducts() })
|
|
watch(() => productStore.onlyDiscounts, async () => { productStore.filterProducts() })
|
|
</script>
|
|
|
|
<template>
|
|
<v-container max-width="1000">
|
|
<v-row>
|
|
<v-col>
|
|
<alert-banner />
|
|
</v-col>
|
|
</v-row>
|
|
|
|
<v-row dense>
|
|
<v-col
|
|
v-if="productStore.filteredProducts.length > 0"
|
|
v-for="product in productStore.filteredProducts"
|
|
cols="12"
|
|
>
|
|
<product-card
|
|
:product="product"
|
|
@click="showProductDialog(product)"
|
|
/>
|
|
</v-col>
|
|
|
|
<v-col v-else>
|
|
<v-empty-state
|
|
icon="mdi-magnify"
|
|
headline="Keine Artikel gefunden"
|
|
/>
|
|
</v-col>
|
|
</v-row>
|
|
</v-container>
|
|
|
|
<filter-nav-drawer />
|
|
|
|
<product-details
|
|
v-model="showProductDetails"
|
|
:product="dialogProduct"
|
|
/>
|
|
</template> |