From b838b20c51f57cb062e07896fa8c1cf96aea3c1f Mon Sep 17 00:00:00 2001
From: Mamalizz <mohammad.hosein.ghorbani82@gmail.com>
Date: Tue, 7 Jan 2025 18:13:46 +0330
Subject: [PATCH] added filter button

---
 frontend/components/products/FilterButton.vue | 155 ++++++++++++------
 1 file changed, 105 insertions(+), 50 deletions(-)

diff --git a/frontend/components/products/FilterButton.vue b/frontend/components/products/FilterButton.vue
index 097aa0f..e7aca24 100644
--- a/frontend/components/products/FilterButton.vue
+++ b/frontend/components/products/FilterButton.vue
@@ -1,61 +1,122 @@
-<script setup lang="ts"></script>
+<script setup lang="ts">
+// state
+
+const filterIsShow = ref(false);
+
+const sort_filter = ref([
+    {
+        title: "جدیدترین ها",
+        value: "",
+    },
+    {
+        title: "گران ترین ها",
+        value: "",
+    },
+    {
+        title: "ارزان ترین ها",
+        value: "",
+    },
+]);
+
+const categories = [
+    {
+        name: "میوه",
+        children: [
+            { name: "سیب" },
+            { name: "موز" },
+            { name: "پرتقال" },
+            { name: "طالبی" },
+            { name: "انگور" },
+            { name: "هندوانه" },
+            { name: "خربزه" },
+            { name: "گلابی" },
+        ],
+    },
+    {
+        name: "سبزیجات",
+        children: [
+            { name: "کلم" },
+            { name: "بروکلی" },
+            { name: "هویج" },
+            { name: "کاهو" },
+            { name: "اسفناج" },
+            { name: "چوی بوک" },
+            { name: "گل کلم" },
+            { name: "سیب زمینی" },
+        ],
+    },
+];
+</script>
 
 <template>
-    <DialogRoot modal>
-        <DialogTrigger>
+    <SideModal title="فیلتر محصولات">
+        <template #button>
             <Button
                 end-icon="ci:filter"
                 variant="secondary"
-                class="rounded-full"
+                class="rounded-full py-4 !bg-slate-100"
             >
                 فیلتر محصولات
             </Button>
-        </DialogTrigger>
+        </template>
+    </SideModal>
+
+    <!-- <DialogRoot modal>
+        <DialogTrigger> </DialogTrigger>
         <DialogPortal to="#teleports">
             <DialogOverlay
                 class="bg-black/60 backdrop-blur-sm data-[state=open]:animate-overlay-show fixed inset-0 z-30"
             />
             <DialogContent
-                class="data-[state=open]:animate-content-show absolute top-1/2 left-1/2 max-h-[85vh] w-[90vw] max-w-[450px] -translate-x-1/2 -translate-y-1/2 rounded-[6px] bg-white p-[25px] shadow-[hsl(206_22%_7%_/_35%)_0px_10px_38px_-10px,_hsl(206_22%_7%_/_20%)_0px_10px_20px_-15px] focus:outline-none z-[100]"
+                dir="rtl"
+                class="data-[state=open]:animate-content-show absolute top-1/2 left-1/2 max-h-[85vh] w-[90vw] max-w-[550px] -translate-x-1/2 -translate-y-1/2 rounded-[6px] bg-white p-[25px] shadow-[hsl(206_22%_7%_/_35%)_0px_10px_38px_-10px,_hsl(206_22%_7%_/_20%)_0px_10px_20px_-15px] focus:outline-none z-[100]"
             >
-                <DialogTitle
-                    class="flex items-center typo-h-4 text-black font-semibold"
-                >
-                    Edit profile
+                <DialogTitle class="flex items-center">
+                    <div class="w-full flex items-center justify-between">
+                        <div
+                            class="typo-h-6 text-black font-semibold flex-center gap-2"
+                        >
+                            <Icon name="ci:filter" size="24" />
+                            فیلتر محصولات
+                        </div>
+                        <DialogClose
+                            class="text-black cursor-pointer inline-flex appearance-none items-center justify-center rounded-full"
+                            aria-label="Close"
+                        >
+                            <Icon name="ci:close" size="20" />
+                        </DialogClose>
+                    </div>
                 </DialogTitle>
-                <DialogDescription
-                    class="text-mauve11 mt-[10px] mb-5 text-sm leading-normal"
-                >
-                    Make changes to your profile here. Click save when you're
-                    done.
-                </DialogDescription>
-                <fieldset class="mb-[15px] flex items-center gap-5">
-                    <label
-                        class="text-black w-[90px] text-right text-sm"
-                        for="name"
-                    >
-                        Name
-                    </label>
-                    <input
-                        id="name"
-                        class="text-black bg-stone-50 shadow-green7 focus:shadow-gray-100 inline-flex h-[35px] w-full flex-1 items-center justify-center rounded-lg px-[10px] text-sm leading-none shadow-[0_0_0_1px] outline-none focus:shadow-[0_0_0_2px]"
-                        defaultValue="Pedro Duarte"
-                    />
-                </fieldset>
-                <fieldset class="mb-[15px] flex items-center gap-5">
-                    <label
-                        class="text-black w-[90px] text-right text-sm"
-                        for="username"
-                    >
-                        Username
-                    </label>
-                    <input
-                        id="username"
-                        class="text-black bg-stone-50 shadow-green7 focus:shadow-gray-100 inline-flex h-[35px] w-full flex-1 items-center justify-center rounded-lg px-[10px] text-sm leading-none shadow-[0_0_0_1px] outline-none focus:shadow-[0_0_0_2px]"
-                        defaultValue="@peduarte"
-                    />
-                </fieldset>
-                <div class="mt-[25px] flex justify-end">
+
+                <div class="w-full py-10 gap-6 flex flex-col">
+                    <div class="flex items-center justify-between w-full gap-3">
+                        <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"
+                                class="py-1 px-2.5 cursor-pointer text-nowrap bg-slate-100 rounded-sm text-sm"
+                            >
+                                {{ sort.title }}
+                            </button>
+                        </div>
+                    </div>
+                    <div class="flex flex-col w-full gap-3">
+                        <div
+                            class="flex items-center justify-start gap-2 text-lg w-full"
+                        >
+                            <Icon name="ci:grid" size="24" />
+                            دسته بندی
+                        </div>
+                    </div>
+                </div>
+
+                <div class="flex justify-start">
                     <DialogClose as-child>
                         <button
                             class="bg-green4 text-green11 text-sm hover:bg-green5 focus:shadow-green7 inline-flex h-[35px] items-center justify-center rounded-lg px-[15px] font-semibold leading-none focus:shadow-[0_0_0_2px] focus:outline-none"
@@ -64,15 +125,9 @@
                         </button>
                     </DialogClose>
                 </div>
-                <DialogClose
-                    class="text-black hover:bg-green4 focus:shadow-green7 absolute top-[10px] right-[10px] inline-flex h-[25px] w-[25px] appearance-none items-center justify-center rounded-full focus:shadow-[0_0_0_2px] focus:outline-none"
-                    aria-label="Close"
-                >
-                    <Icon name="ci:close" />
-                </DialogClose>
             </DialogContent>
         </DialogPortal>
-    </DialogRoot>
+    </DialogRoot> -->
 </template>
 
 <style lang="scss" scoped></style>