From 8c426d7e7ae379d105c852a461b4077c45b7f91b Mon Sep 17 00:00:00 2001
From: Mamalizz <mohammad.hosein.ghorbani82@gmail.com>
Date: Sat, 22 Mar 2025 16:22:17 +0330
Subject: [PATCH] added notifications

---
 frontend/pages/profile/notifications.vue | 119 ++++++++++++++++++++++-
 1 file changed, 117 insertions(+), 2 deletions(-)

diff --git a/frontend/pages/profile/notifications.vue b/frontend/pages/profile/notifications.vue
index 9ba8144..ce345bf 100644
--- a/frontend/pages/profile/notifications.vue
+++ b/frontend/pages/profile/notifications.vue
@@ -5,12 +5,127 @@ definePageMeta({
     middleware: "check-is-logged-in",
     layout: "profile",
 });
+
+// imports
+
+import { usePushNotifications } from "~/composables/global/usePushNotifications";
+import useSubscribeNotification from "~/composables/api/notifications/useSubscribeNotification";
+
+// state
+
+const params = useUrlSearchParams("history");
+
+const subscribe = ref(false);
+
+const sortFilters = ref([
+    {
+        title: "جدید ترین",
+        value: "created_at",
+    },
+    {
+        title: "قدیمی ترین",
+        value: "-created_at",
+    },
+]);
+
+// queries
+
+const {
+    isSupported,
+    subscribe: notificationSubsribe,
+    unsubscribe: notificationUnSubsribe,
+    subscription,
+} = usePushNotifications();
+
+const { isPending: subscribeNotificationIsPending } =
+    useSubscribeNotification();
+
+// watch
+
+watch(
+    () => subscribe.value,
+    (nv) => {
+        if (!!subscription && nv) {
+            notificationSubsribe();
+        } else {
+            notificationUnSubsribe();
+        }
+    }
+);
 </script>
 
 <template>
-    <div class="w-full flex flex-col gap-5">
+    <section class="w-full flex flex-col gap-5">
         <ProfilePageTitle title="اعلان های شما" icon="bi:bell" />
-    </div>
+
+        <div
+            v-if="isSupported"
+            class="w-fill flex items-center justify-between p-5 pt-0 border-b border-slate-200"
+        >
+            <div class="flex items-start justify-start gap-3">
+                <Icon name="bi:bell" size="20" />
+                <div class="flex flex-col gap-1 pb-0.5">
+                    <span class="text-sm"> دریافت مستقیم اعلانات </span>
+                    <span class="text-xs text-slate-500">
+                        اعلانات حساب شما به صورت مستقیم به دستگاه شما ارسال می
+                        شود
+                    </span>
+                </div>
+            </div>
+
+            <div class="flex items-center justify-end gap-3">
+                <Switch v-model="subscribe" />
+                <Icon
+                    v-if="subscribeNotificationIsPending"
+                    name="svg-spinners:180-ring-with-bg"
+                    size="20"
+                />
+            </div>
+        </div>
+
+        <div class="w-full flex items-center justify-between px-5">
+            <span> 1 اعلان </span>
+            <div class="flex items-center justify-start gap-3">
+                <span class="text-sm">فیلتر بر اساس</span>
+
+                <Select
+                    v-model="params.sort!"
+                    triggerRootClass="!py-2.5"
+                    class="w-[6rem]"
+                >
+                    <template #content>
+                        <SelectGroup>
+                            <SelectItem
+                                v-for="(category, index) in sortFilters"
+                                :key="index"
+                                class="text-xs leading-none w-full rounded-sm py-5 flex items-center justify-between h-[25px] pr-[12px] relative select-none data-[disabled]:pointer-events-none data-[highlighted]:outline-none data-[highlighted]:bg-slate-300 data-[highlighted]:text-black"
+                                :value="category.value"
+                            >
+                                <SelectItemIndicator
+                                    class="absolute left-0 w-[25px] inline-flex items-center justify-center"
+                                >
+                                    <Icon name="bi:check" size="20" />
+                                </SelectItemIndicator>
+                                <SelectItemText
+                                    class="text-end font-iran-yekan-x text-sm"
+                                >
+                                    {{ category.title }}
+                                </SelectItemText>
+                            </SelectItem>
+                        </SelectGroup>
+                    </template>
+                </Select>
+            </div>
+        </div>
+
+        <div class="w-full flex flex-col gap-5">
+            <Notification v-for="i in 3" />
+        </div>
+
+        <!-- <div v-if="data?.count > 7" class="w-full flex-center py-10">
+            <Pagination :items="paginationData" :total="data?.count" />
+        </div> -->
+    </section>
 </template>
 
 <style scoped></style>