From bfcfbfa75f8fb5105907f626302b33f369ed216f Mon Sep 17 00:00:00 2001
From: Mamalizz <mohammad.hosein.ghorbani82@gmail.com>
Date: Tue, 7 Jan 2025 22:34:10 +0330
Subject: [PATCH] added filter products

---
 .../global/products/FilterProducts.vue        | 187 ++++++++++++++++++
 1 file changed, 187 insertions(+)
 create mode 100644 frontend/components/global/products/FilterProducts.vue

diff --git a/frontend/components/global/products/FilterProducts.vue b/frontend/components/global/products/FilterProducts.vue
new file mode 100644
index 0000000..f59a8bf
--- /dev/null
+++ b/frontend/components/global/products/FilterProducts.vue
@@ -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>