147 lines
4.0 KiB
Vue
147 lines
4.0 KiB
Vue
<script setup lang="ts">
|
|
import productCard from "./productCard.vue"
|
|
import productDetails from "./productDetails.vue"
|
|
import filterBar from "./filterBar.vue"
|
|
import axios from "axios";
|
|
import { Ref, ref, watch } from "vue";
|
|
import { ProductModel } from "@/data/models/productModel";
|
|
import { CategoryModel } from "@/data/models/categoryModel";
|
|
import { FilterModel } from "@/data/models/filterModel";
|
|
|
|
const products: Ref<Array<ProductModel>> = ref<Array<ProductModel>>([])
|
|
const filteredProducts: Ref<Array<ProductModel>> = ref<Array<ProductModel>>([])
|
|
const categories: Ref<Array<CategoryModel>> = ref<Array<CategoryModel>>([new CategoryModel()])
|
|
const selectedCategory: Ref<CategoryModel> = ref<CategoryModel>(new CategoryModel())
|
|
const sortedBy: Ref<FilterModel> = ref<FilterModel>()
|
|
const onlyDiscounts: Ref<boolean> = ref(false)
|
|
const showProductDetails = ref(false)
|
|
const dialogProduct = ref(new ProductModel())
|
|
|
|
const sortBy: Array<FilterModel> = [
|
|
{ icon: "mdi-sort-ascending", name: "Price: Low to high" },
|
|
{ icon: "mdi-sort-descending", name: "Price: High to low" },
|
|
{ icon: "mdi-sort-alphabetical-ascending", name: "Name: A to Z" },
|
|
{ icon: "mdi-sort-alphabetical-descending", name: "Name: Z to A" },
|
|
]
|
|
|
|
sortedBy.value = sortBy[0]
|
|
|
|
axios.get("http://127.0.0.1:3000/categories")
|
|
.then(function (response) {
|
|
for (let category of response.data) {
|
|
categories.value.push(category)
|
|
}
|
|
})
|
|
|
|
axios.get("http://127.0.0.1:3000/products")
|
|
.then(function (response) {
|
|
products.value = response.data
|
|
filteredProducts.value = response.data
|
|
|
|
sortProducts()
|
|
})
|
|
|
|
function getCategoryById(id: number) {
|
|
return categories.value.find(category =>
|
|
category.id === id
|
|
)
|
|
}
|
|
|
|
|
|
function sortProducts() {
|
|
switch (sortedBy.value.name) {
|
|
case sortBy[0].name: {
|
|
filteredProducts.value.sort((a, b) =>
|
|
a.price - b.price
|
|
)
|
|
break;
|
|
}
|
|
case sortBy[1].name: {
|
|
filteredProducts.value.sort((a, b) =>
|
|
b.price - a.price
|
|
)
|
|
break;
|
|
}
|
|
case sortBy[2].name: {
|
|
filteredProducts.value.sort((a, b) => {
|
|
if (b.name > a.name) {
|
|
return -1
|
|
}
|
|
else {
|
|
return 1
|
|
}
|
|
})
|
|
break;
|
|
}
|
|
case sortBy[3].name: {
|
|
filteredProducts.value.sort((a, b) => {
|
|
if (b.name < a.name) {
|
|
return -1
|
|
}
|
|
else {
|
|
return 1
|
|
}
|
|
})
|
|
break;
|
|
}
|
|
}
|
|
}
|
|
|
|
function filterProducts() {
|
|
if (selectedCategory.value.id == -1) {
|
|
filteredProducts.value = products.value
|
|
} else {
|
|
filteredProducts.value = products.value.filter(product =>
|
|
product.categoryId == selectedCategory.value.id
|
|
)
|
|
}
|
|
|
|
if (onlyDiscounts.value) {
|
|
filteredProducts.value = filteredProducts.value.filter(product =>
|
|
product.discount > 0
|
|
)
|
|
}
|
|
}
|
|
|
|
function showProductDialog(product: ProductModel) {
|
|
dialogProduct.value = product
|
|
showProductDetails.value = true
|
|
}
|
|
|
|
watch(() => selectedCategory.value, () => { filterProducts() })
|
|
watch(() => sortedBy.value, () => { sortProducts() })
|
|
watch(() => onlyDiscounts.value, () => { filterProducts() })
|
|
</script>
|
|
|
|
<template>
|
|
<v-row>
|
|
<v-col>
|
|
<filter-bar
|
|
:number-of-items="filteredProducts.length"
|
|
:categories="categories"
|
|
:sort-by="sortBy"
|
|
v-model:selected-category="selectedCategory"
|
|
v-model:sorted-by="sortedBy"
|
|
v-model:only-discounts="onlyDiscounts"
|
|
/>
|
|
</v-col>
|
|
</v-row>
|
|
<v-row dense>
|
|
<v-col v-if="filteredProducts.length > 0" v-for="product in filteredProducts" cols="6" lg="4" xl="3">
|
|
<product-card
|
|
:product="product"
|
|
:category="getCategoryById(product.categoryId)"
|
|
@click="showProductDialog(product)"
|
|
/>
|
|
</v-col>
|
|
|
|
<v-col v-else>
|
|
<v-empty-state
|
|
icon="mdi-magnify"
|
|
headline="Keine Artikel gefunden"
|
|
/>
|
|
</v-col>
|
|
</v-row>
|
|
|
|
<product-details v-model="showProductDetails" :product="dialogProduct" :productCategory="getCategoryById(dialogProduct.categoryId)" />
|
|
</template> |