added filter products
This commit is contained in:
Mamalizz
@@ -0,0 +1,187 @@
|
||||
<script setup lang="ts">
|
||||
// imports
|
||||
|
||||
import { PRODUCT_RANGE } from "~/constants";
|
||||
|
||||
// state
|
||||
|
||||
const params = useUrlSearchParams("history");
|
||||
|
||||
const sort_filter = ref(["جدیدترین ها", "گران ترین ها", "ارزان ترین ها"]);
|
||||
|
||||
const options = [
|
||||
{
|
||||
name: "میوه",
|
||||
children: [
|
||||
{ name: "سیب" },
|
||||
{ name: "موز" },
|
||||
{ name: "پرتقال" },
|
||||
{ name: "طالبی" },
|
||||
{ name: "انگور" },
|
||||
{ name: "هندوانه" },
|
||||
{ name: "خربزه" },
|
||||
{ name: "گلابی" },
|
||||
],
|
||||
},
|
||||
{
|
||||
name: "سبزیجات",
|
||||
children: [
|
||||
{ name: "کلم" },
|
||||
{ name: "بروکلی" },
|
||||
{ name: "هویج" },
|
||||
{ name: "کاهو" },
|
||||
{ name: "اسفناج" },
|
||||
{ name: "چوی بوک" },
|
||||
{ name: "گل کلم" },
|
||||
{ name: "سیب زمینی" },
|
||||
],
|
||||
},
|
||||
];
|
||||
|
||||
// methods
|
||||
|
||||
const resetFilters = () => {
|
||||
params.sort = null;
|
||||
params.categories = [];
|
||||
params.range = [PRODUCT_RANGE.min, PRODUCT_RANGE.max];
|
||||
params.has_discount = false;
|
||||
params.in_stock = false;
|
||||
};
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="size-full flex flex-col gap-14 justify-between">
|
||||
<div class="w-full flex flex-col gap-10">
|
||||
<div class="flex items-center justify-between w-full gap-5">
|
||||
<div
|
||||
class="flex items-center justify-start gap-2 text-lg w-full"
|
||||
>
|
||||
<Icon name="ci:filter-list" size="24" />
|
||||
ترتیب بر اساس
|
||||
</div>
|
||||
<div class="w-full flex items-start justify-end gap-2">
|
||||
<button
|
||||
v-for="(sort, index) in sort_filter"
|
||||
:key="index"
|
||||
@click="params.sort = sort"
|
||||
:class="
|
||||
params.sort == sort
|
||||
? 'bg-black text-white'
|
||||
: 'bg-slate-100'
|
||||
"
|
||||
class="py-1 px-3 cursor-pointer text-nowrap transition-all rounded-full text-sm"
|
||||
>
|
||||
{{ sort }}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="flex flex-col w-full gap-5">
|
||||
<div
|
||||
class="flex items-center justify-start gap-2 text-lg w-full"
|
||||
>
|
||||
<Icon name="ci:grid" size="24" />
|
||||
دسته بندی
|
||||
</div>
|
||||
<ComboBox :options="options" v-model="params.categories" />
|
||||
<div class="w-full flex flex-wrap gap-2 px-[1rem]">
|
||||
<span
|
||||
v-for="(sort_param, index) in params.categories"
|
||||
:key="index"
|
||||
class="py-1 px-3 cursor-pointer text-nowrap bg-slate-100 rounded-full text-sm"
|
||||
>
|
||||
{{ sort_param }}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="flex flex-col w-full gap-5">
|
||||
<div
|
||||
class="flex items-center justify-start gap-2 text-lg w-full"
|
||||
>
|
||||
<Icon name="ci:scan-box" size="24" />
|
||||
محدوده قیمت
|
||||
</div>
|
||||
<SliderRoot
|
||||
v-model="params.range"
|
||||
class="relative flex items-center select-none touch-none h-5"
|
||||
dir="rtl"
|
||||
:min="PRODUCT_RANGE.min"
|
||||
:max="PRODUCT_RANGE.max"
|
||||
:step="1"
|
||||
>
|
||||
<SliderTrack
|
||||
class="bg-black/10 relative grow rounded-full h-[3px]"
|
||||
>
|
||||
<SliderRange
|
||||
class="absolute bg-black rounded-full h-full"
|
||||
/>
|
||||
</SliderTrack>
|
||||
<SliderThumb
|
||||
v-for="thumb in Object.keys(PRODUCT_RANGE)"
|
||||
:key="thumb"
|
||||
class="block w-5 h-5 bg-white border-2 border-slate-400 rounded-[10px] hover:bg-slate-100 focus:outline-none focus:shadow-[0_0_0_5px] focus:shadow-black/60"
|
||||
/>
|
||||
</SliderRoot>
|
||||
<div class="flex items-center justify-between">
|
||||
<div class="flex-center gap-2">
|
||||
<span class="text-sm text-black">حداقل</span>
|
||||
<span class="text-sm text-black">
|
||||
{{
|
||||
"range" in params
|
||||
? params.range[0].toLocaleString()
|
||||
: PRODUCT_RANGE.min
|
||||
}}
|
||||
</span>
|
||||
</div>
|
||||
<div class="flex-center gap-2">
|
||||
<span class="text-sm text-black">حداکثر</span>
|
||||
<span class="text-sm text-black">
|
||||
{{
|
||||
"range" in params
|
||||
? params.range[1].toLocaleString()
|
||||
: PRODUCT_RANGE.max
|
||||
}}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="flex items-center justify-between w-full gap-5">
|
||||
<span class="text-black">فقط کالاهای تخفیف دار</span>
|
||||
<SwitchRoot
|
||||
v-model="params.has_discount"
|
||||
class="w-[3rem] h-[1.8rem] flex data-[state=unchecked]:bg-slate-200 data-[state=checked]:bg-stone-800 border border-slate-300 data-[state=checked]:border-stone-700 rounded-full relative transition-all focus-within:outline-none"
|
||||
>
|
||||
<SwitchThumb
|
||||
class="size-6 my-auto bg-white text-sm ms-1 flex items-center justify-center shadow-xl rounded-full transition-transform translate-x-0.5 will-change-transform data-[state=checked]:-translate-x-[68%]"
|
||||
/>
|
||||
</SwitchRoot>
|
||||
</div>
|
||||
|
||||
<div class="flex items-center justify-between w-full gap-5">
|
||||
<span class="text-black">فقط کالاهای موجود</span>
|
||||
|
||||
<SwitchRoot
|
||||
v-model="params.in_stock"
|
||||
class="w-[3rem] h-[1.8rem] flex data-[state=unchecked]:bg-slate-200 data-[state=checked]:bg-stone-800 border border-slate-300 data-[state=checked]:border-stone-700 rounded-full relative transition-all focus-within:outline-none"
|
||||
>
|
||||
<SwitchThumb
|
||||
class="size-6 my-auto bg-white text-sm ms-1 flex items-center justify-center shadow-xl rounded-full transition-transform translate-x-0.5 will-change-transform data-[state=checked]:-translate-x-[68%]"
|
||||
/>
|
||||
</SwitchRoot>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<Button
|
||||
end-icon="ci:close"
|
||||
variant="solid"
|
||||
@click="resetFilters"
|
||||
class="rounded-full py-4 !cursor-pointer"
|
||||
>
|
||||
بازنشانی به پیش فرض
|
||||
</Button>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped></style>
|
||||
Reference in New Issue
Block a user