connected notifications to api
This commit is contained in:
Mamalizz
@@ -2,7 +2,7 @@
|
||||
// meta
|
||||
|
||||
useSeoMeta({
|
||||
title : "پنل کاربری اعلان ها"
|
||||
title: "پنل کاربری اعلان ها",
|
||||
});
|
||||
|
||||
definePageMeta({
|
||||
@@ -14,21 +14,35 @@ definePageMeta({
|
||||
|
||||
import { usePushNotifications } from "~/composables/global/usePushNotifications";
|
||||
import useSubscribeNotification from "~/composables/api/notifications/useSubscribeNotification";
|
||||
import useGetAllNotifications, {
|
||||
type GetAllNotificationsRequest,
|
||||
} from "~/composables/api/account/useGetAllNotifications";
|
||||
|
||||
// state
|
||||
|
||||
const params = useUrlSearchParams("history");
|
||||
const params: GetAllNotificationsRequest = useUrlSearchParams("history");
|
||||
|
||||
const subscribe = ref(false);
|
||||
|
||||
const sortFilters = ref([
|
||||
{
|
||||
title: "جدید ترین",
|
||||
value: "created_at",
|
||||
title: "اخبار",
|
||||
value: "NEWS",
|
||||
},
|
||||
{
|
||||
title: "قدیمی ترین",
|
||||
value: "-created_at",
|
||||
title: "اعلانات کاربر",
|
||||
value: "USER_NOTIF",
|
||||
},
|
||||
]);
|
||||
|
||||
const statusFilters = ref([
|
||||
{
|
||||
title: "خوانده شده",
|
||||
value: "read",
|
||||
},
|
||||
{
|
||||
title: "خوانده نشده",
|
||||
value: "not_read",
|
||||
},
|
||||
]);
|
||||
|
||||
@@ -41,8 +55,31 @@ const {
|
||||
subscription,
|
||||
} = usePushNotifications();
|
||||
|
||||
const { isPending: subscribeNotificationIsPending } =
|
||||
useSubscribeNotification();
|
||||
const { isPending: subscribeNotificationIsPending } = useSubscribeNotification();
|
||||
|
||||
// computeds
|
||||
|
||||
const filters = computed(() => {
|
||||
return {
|
||||
sort: params.sort ?? "created_at",
|
||||
status: params.status ?? "",
|
||||
page: params.page ?? 1,
|
||||
};
|
||||
});
|
||||
|
||||
const hasNotifications = computed(() => data.value && data.value.count > 0);
|
||||
|
||||
const { data, isLoading: notificationsIsLoading } = useGetAllNotifications(filters);
|
||||
|
||||
const notifications = computed(() => {
|
||||
return data.value?.results.flat();
|
||||
});
|
||||
|
||||
const paginationData = computed(() => {
|
||||
return data.value?.results.map((_, i: number) => {
|
||||
return { type: "page", value: i };
|
||||
});
|
||||
});
|
||||
|
||||
// watch
|
||||
|
||||
@@ -60,19 +97,24 @@ watch(
|
||||
|
||||
<template>
|
||||
<section class="w-full flex flex-col gap-5">
|
||||
<ProfilePageTitle title="اعلان های شما" icon="bi:bell" />
|
||||
<ProfilePageTitle
|
||||
title="اعلان های شما"
|
||||
icon="bi:bell"
|
||||
/>
|
||||
|
||||
<div
|
||||
v-if="isSupported"
|
||||
class="w-fill flex items-center justify-between py-5 lg:p-5 pt-0 border-b border-slate-200 gap-5"
|
||||
>
|
||||
<div class="flex items-start justify-start gap-3">
|
||||
<Icon name="bi:bell" size="20" />
|
||||
<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 leading-[175%]">
|
||||
اعلانات حساب شما به صورت مستقیم به دستگاه شما ارسال می
|
||||
شود
|
||||
اعلانات حساب شما به صورت مستقیم به دستگاه شما ارسال می شود
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
@@ -88,47 +130,120 @@ watch(
|
||||
</div>
|
||||
|
||||
<div class="w-full flex items-center justify-between lg:px-5">
|
||||
<span class="max-lg:text-sm"> 1 اعلان </span>
|
||||
<div class="flex items-center justify-start gap-3">
|
||||
<span class="text-xs lg:text-sm">فیلتر بر اساس</span>
|
||||
<span class="whitespace-pre max-lg:hidden"> 1 اعلان </span>
|
||||
<div class="max-lg:w-full flex items-center justify-end gap-8">
|
||||
<div class="flex items-center justify-start gap-3">
|
||||
<span class="text-xs lg: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-4 lg: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"
|
||||
<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-4 lg: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"
|
||||
>
|
||||
<Icon name="bi:check" size="20" />
|
||||
</SelectItemIndicator>
|
||||
<SelectItemText
|
||||
class="text-end font-iran-yekan-x text-xs lg:text-sm"
|
||||
<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-xs lg:text-sm">
|
||||
{{ category.title }}
|
||||
</SelectItemText>
|
||||
</SelectItem>
|
||||
</SelectGroup>
|
||||
</template>
|
||||
</Select>
|
||||
</div>
|
||||
|
||||
<div class="flex items-center justify-start gap-3">
|
||||
<span class="text-xs lg:text-sm">وضعیت</span>
|
||||
|
||||
<Select
|
||||
v-model="params.status!"
|
||||
triggerRootClass="!py-2.5"
|
||||
class="w-[6rem]"
|
||||
>
|
||||
<template #content>
|
||||
<SelectGroup>
|
||||
<SelectItem
|
||||
v-for="(category, index) in statusFilters"
|
||||
:key="index"
|
||||
class="text-xs leading-none w-full rounded-sm py-4 lg: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"
|
||||
>
|
||||
{{ category.title }}
|
||||
</SelectItemText>
|
||||
</SelectItem>
|
||||
</SelectGroup>
|
||||
</template>
|
||||
</Select>
|
||||
<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-xs lg:text-sm">
|
||||
{{ category.title }}
|
||||
</SelectItemText>
|
||||
</SelectItem>
|
||||
</SelectGroup>
|
||||
</template>
|
||||
</Select>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="w-full flex flex-col gap-5">
|
||||
<Notification v-for="i in 3" />
|
||||
<div
|
||||
v-if="notificationsIsLoading"
|
||||
class="flex flex-col gap-6 w-full"
|
||||
>
|
||||
<Skeleton
|
||||
v-for="i in 3"
|
||||
class="w-full !h-[8rem] !rounded-xl"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<!-- <div v-if="data?.count > 7" class="w-full flex-center py-10">
|
||||
<Pagination :items="paginationData" :total="data?.count" />
|
||||
</div> -->
|
||||
<template v-else>
|
||||
<div
|
||||
v-if="!hasNotifications && !notificationsIsLoading"
|
||||
class="flex flex-grow w-full"
|
||||
v-auto-animate
|
||||
>
|
||||
<Placeholder
|
||||
class="!w-full !py-[5rem]"
|
||||
icon="bi:ticket"
|
||||
title="اعلانی یافت نشد"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div
|
||||
v-else
|
||||
class="flex flex-col gap-6 w-full"
|
||||
>
|
||||
<Notification
|
||||
v-for="(notification, index) in notifications"
|
||||
:key="index"
|
||||
:data="notification"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<div
|
||||
v-if="data?.count! > 7"
|
||||
class="w-full flex-center py-10"
|
||||
>
|
||||
<Pagination
|
||||
:items="paginationData"
|
||||
:total="data?.count!"
|
||||
/>
|
||||
</div>
|
||||
</section>
|
||||
</template>
|
||||
|
||||
|
||||
Reference in New Issue
Block a user