494 lines
15 KiB
Vue
494 lines
15 KiB
Vue
|
<template>
|
|||
|
|
<div>
|
|||
|
|
<NuxtLayout name="default" :menu="sidbarMenu">
|
|||
|
|
<div class="container-fluid">
|
|||
|
|
<div class="row">
|
|||
|
|
<div class="col-12">
|
|||
|
|
<div v-if="canView">
|
|||
|
|
<div class="user__container">
|
|||
|
|
<div class="d-flex justify-content-between align-items-center">
|
|||
|
|
<div>
|
|||
|
|
<h3>
|
|||
|
|
{{ $t("Notifications") }}
|
|||
|
|
</h3>
|
|||
|
|
<p class="text__light text__13">
|
|||
|
|
شما {{ list?.length }} اعلان خوانده نشده دارید.
|
|||
|
|
</p>
|
|||
|
|
</div>
|
|||
|
|
<div>
|
|||
|
|
<button-component
|
|||
|
|
@click="markAll()"
|
|||
|
|
buttonText="همه را خواندم"
|
|||
|
|
v-tooltip="'همه را خواندم'"
|
|||
|
|
classes="btn btn-primary"
|
|||
|
|
>
|
|||
|
|
</button-component>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<ul class="nav nav-tabs">
|
|||
|
|
<li class="nav-item">
|
|||
|
|
<button
|
|||
|
|
title="همه"
|
|||
|
|
type="button"
|
|||
|
|
@click.prevent="filterNotifications('all')"
|
|||
|
|
class="btn nav-link"
|
|||
|
|
:class="{
|
|||
|
|
active: activeTab == 'all',
|
|||
|
|
}"
|
|||
|
|
>
|
|||
|
|
<span class="badge badge-light">{{
|
|||
|
|
counts?.data?.all?.count
|
|||
|
|
}}</span>
|
|||
|
|
همه
|
|||
|
|
</button>
|
|||
|
|
</li>
|
|||
|
|
<li class="nav-item">
|
|||
|
|
<button
|
|||
|
|
title="جدید"
|
|||
|
|
type="button"
|
|||
|
|
@click.prevent="filterNotifications('new')"
|
|||
|
|
class="btn nav-link"
|
|||
|
|
:class="{
|
|||
|
|
active: activeTab == 'new',
|
|||
|
|
}"
|
|||
|
|
>
|
|||
|
|
<span class="badge badge-light">{{
|
|||
|
|
counts?.data?.new?.count
|
|||
|
|
}}</span>
|
|||
|
|
|
|||
|
|
جدید
|
|||
|
|
</button>
|
|||
|
|
</li>
|
|||
|
|
<li class="nav-item">
|
|||
|
|
<button
|
|||
|
|
title="خوانده نشده ها"
|
|||
|
|
type="button"
|
|||
|
|
@click.prevent="filterNotifications('unseen')"
|
|||
|
|
class="btn nav-link"
|
|||
|
|
:class="{
|
|||
|
|
active: activeTab == 'unseen',
|
|||
|
|
}"
|
|||
|
|
>
|
|||
|
|
<span class="badge badge-light">{{
|
|||
|
|
counts?.data?.unseen?.count
|
|||
|
|
}}</span>
|
|||
|
|
|
|||
|
|
خوانده نشده ها
|
|||
|
|
</button>
|
|||
|
|
</li>
|
|||
|
|
|
|||
|
|
<li class="nav-item">
|
|||
|
|
<button
|
|||
|
|
title="خوانده شده ها"
|
|||
|
|
type="button"
|
|||
|
|
@click.prevent="filterNotifications('seen')"
|
|||
|
|
class="btn nav-link"
|
|||
|
|
:class="{
|
|||
|
|
active: activeTab == 'seen',
|
|||
|
|
}"
|
|||
|
|
>
|
|||
|
|
<span class="badge badge-light">{{
|
|||
|
|
counts?.data?.seen?.count
|
|||
|
|
}}</span>
|
|||
|
|
|
|||
|
|
خوانده شده ها
|
|||
|
|
</button>
|
|||
|
|
</li>
|
|||
|
|
</ul>
|
|||
|
|
|
|||
|
|
<the-content-loading
|
|||
|
|
class="absolute-positioning"
|
|||
|
|
v-if="fetchingData"
|
|||
|
|
></the-content-loading>
|
|||
|
|
|
|||
|
|
<div v-else>
|
|||
|
|
<div v-if="list && list.length">
|
|||
|
|
<div class="notif-list firefox-scrollbar">
|
|||
|
|
<notification-item
|
|||
|
|
v-for="(item, index) in list"
|
|||
|
|
:item="item"
|
|||
|
|
:index="index"
|
|||
|
|
:key="item._id"
|
|||
|
|
@getList="getList"
|
|||
|
|
@go-to-notification-show-page="
|
|||
|
|
goToNotificationShowPage(item)
|
|||
|
|
"
|
|||
|
|
></notification-item>
|
|||
|
|
</div>
|
|||
|
|
<jahat-pagination
|
|||
|
|
v-if="pagination.total"
|
|||
|
|
:paginationInfo="pagination"
|
|||
|
|
@page-changed="pageChanged"
|
|||
|
|
@page-limit-changed="pageLimitChanged"
|
|||
|
|
@sort-changed="sortChanged"
|
|||
|
|
>
|
|||
|
|
</jahat-pagination>
|
|||
|
|
</div>
|
|||
|
|
<no-data v-else></no-data>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<no-data v-else>
|
|||
|
|
<the-content-loading v-if="fetchingData"></the-content-loading>
|
|||
|
|
|
|||
|
|
<div
|
|||
|
|
v-else
|
|||
|
|
class="d-flex justify-content-center align-items-center"
|
|||
|
|
>
|
|||
|
|
<div
|
|||
|
|
class="alert alert-warning d-flex justify-content-center align-items-center"
|
|||
|
|
>
|
|||
|
|
<span
|
|||
|
|
class="tavasi tavasi-warning-circle color-inherit ms-1 text__32"
|
|||
|
|
></span>
|
|||
|
|
عدم دسترسی
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</no-data>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</NuxtLayout>
|
|||
|
|
</div>
|
|||
|
|
</template>
|
|||
|
|
|
|||
|
|
<script lang="ts">
|
|||
|
|
// import notificationMixin from "~/composables/notifications/notificationMixin";
|
|||
|
|
import { mapActions, mapState } from "pinia";
|
|||
|
|
import { useAuthStore } from "~/stores/authStore";
|
|||
|
|
import { useCommonStore } from "~/stores/commonStore";
|
|||
|
|
import type { Pagination } from "~/types/commonTypes";
|
|||
|
|
import apis from "~/apis/adminApi";
|
|||
|
|
import type { counts, listNotification } from "~/types/notificationTypes";
|
|||
|
|
|
|||
|
|
import monirMenu from "~/json/dashboard/monir/menu.json";
|
|||
|
|
import majlesMenu from "~/json/dashboard/majles/menuDefault.json";
|
|||
|
|
|
|||
|
|
export default {
|
|||
|
|
|
|||
|
|
setup() {
|
|||
|
|
definePageMeta({
|
|||
|
|
layout: false,
|
|||
|
|
// layout: "dashboard-layout",
|
|||
|
|
});
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
data() {
|
|||
|
|
return {
|
|||
|
|
// httpService: undefined,
|
|||
|
|
activeTab: "all",
|
|||
|
|
|
|||
|
|
canView: false,
|
|||
|
|
fetchingData: false,
|
|||
|
|
listUnseen: [],
|
|||
|
|
countUnseen: undefined,
|
|||
|
|
list: [] as listNotification[],
|
|||
|
|
counts: {} as counts,
|
|||
|
|
notificationItem: undefined,
|
|||
|
|
buttonLoading: false,
|
|||
|
|
pagination: {
|
|||
|
|
total: 0,
|
|||
|
|
pages: 0,
|
|||
|
|
page: 1,
|
|||
|
|
offset: 0,
|
|||
|
|
limit: 10,
|
|||
|
|
} as Pagination,
|
|||
|
|
sorting: {},
|
|||
|
|
};
|
|||
|
|
},
|
|||
|
|
mounted() {
|
|||
|
|
if (this.isRealUser) {
|
|||
|
|
this.canView = true;
|
|||
|
|
this.getList();
|
|||
|
|
this.numberOfMark();
|
|||
|
|
}
|
|||
|
|
// else this.canView = false;
|
|||
|
|
// this.checkPermisionBeforGetList("notifications_users").then(() => {
|
|||
|
|
// this.getList();
|
|||
|
|
// });
|
|||
|
|
},
|
|||
|
|
computed: {
|
|||
|
|
...mapState(useAuthStore, ["isRealUser"]),
|
|||
|
|
|
|||
|
|
sidbarMenu() {
|
|||
|
|
if (isMajlesBuild()) return majlesMenu;
|
|||
|
|
else return monirMenu;
|
|||
|
|
},
|
|||
|
|
},
|
|||
|
|
methods: {
|
|||
|
|
...mapActions(useCommonStore, ["checkPermissions"]),
|
|||
|
|
filterNotifications(newTab: string) {
|
|||
|
|
this.activeTab = newTab;
|
|||
|
|
|
|||
|
|
this.getList();
|
|||
|
|
},
|
|||
|
|
// async checkPermisionBeforGetList(permission) {
|
|||
|
|
// if (this.fetchingData) return;
|
|||
|
|
// this.fetchingData = true;
|
|||
|
|
|
|||
|
|
// return await this.checkPermissions({ permission, _this: this })
|
|||
|
|
// .then(() => {
|
|||
|
|
// this.canView = true;
|
|||
|
|
// // this.fetchingData = false;
|
|||
|
|
// })
|
|||
|
|
// .catch(() => {
|
|||
|
|
// this.canView = false;
|
|||
|
|
// this.fetchingData = false;
|
|||
|
|
// });
|
|||
|
|
// },
|
|||
|
|
|
|||
|
|
// detelte item.
|
|||
|
|
// async deleteItem({ _id }) {
|
|||
|
|
// if (this.buttonLoading) return;
|
|||
|
|
// this.buttonLoading = true;
|
|||
|
|
|
|||
|
|
// var url = adminApi.notification.delete;
|
|||
|
|
// url = url.replace("{{id}}", _id);
|
|||
|
|
// url = url.replace("{{entity_type}}", "notif");
|
|||
|
|
|
|||
|
|
// return await this.httpService
|
|||
|
|
// .postRequest(url)
|
|||
|
|
// .then((res) => {
|
|||
|
|
// this.mySwalToast({
|
|||
|
|
// title: "تبریک",
|
|||
|
|
// html: res.message,
|
|||
|
|
// icon: "success",
|
|||
|
|
// });
|
|||
|
|
// })
|
|||
|
|
// .catch((error) => {})
|
|||
|
|
// .finally(() => {
|
|||
|
|
// this.buttonLoading = false;
|
|||
|
|
// });
|
|||
|
|
|
|||
|
|
// try {
|
|||
|
|
|
|||
|
|
// const { $api } = useNuxtApp();
|
|||
|
|
// const data: resModelThree = await $api(apis.captcha, {
|
|||
|
|
// baseURL: import.meta.env.VITE_AUTH_BASE_URL,
|
|||
|
|
// method: "GET",
|
|||
|
|
// });
|
|||
|
|
// } catch (err) {
|
|||
|
|
//
|
|||
|
|
// }
|
|||
|
|
// },
|
|||
|
|
|
|||
|
|
// Getting notification item.
|
|||
|
|
// getNotificationItem(id) {
|
|||
|
|
// let url = adminApi.notification.get;
|
|||
|
|
// url = url.replace("{{id}}", id);
|
|||
|
|
|
|||
|
|
// this.httpService
|
|||
|
|
// .getRequest(url)
|
|||
|
|
// .then((res) => {
|
|||
|
|
// this.notificationItem = res;
|
|||
|
|
// })
|
|||
|
|
// .catch(() => {})
|
|||
|
|
// .finally(() => {
|
|||
|
|
// this.fetchingData = false;
|
|||
|
|
// });
|
|||
|
|
// },
|
|||
|
|
// admin
|
|||
|
|
async getList() {
|
|||
|
|
// console.log("Offset:", this.pagination.offset);
|
|||
|
|
// console.log("Limit:", this.pagination.limit);
|
|||
|
|
// this.httpService
|
|||
|
|
// .getRequest(url)
|
|||
|
|
// .then((res) => {
|
|||
|
|
// this.list = res.hits.hits;
|
|||
|
|
// this.numberOfMark();
|
|||
|
|
// const total = res.hits.total.value;
|
|||
|
|
// const pages = Math.ceil(total / this.pagination.limit);
|
|||
|
|
// const pagination = {
|
|||
|
|
// total: total,
|
|||
|
|
// pages: pages == 0 ? 1 : pages,
|
|||
|
|
// };
|
|||
|
|
|
|||
|
|
// this.pagination = { ...this.pagination, ...pagination };
|
|||
|
|
// })
|
|||
|
|
// .catch(() => {})
|
|||
|
|
// .finally(() => {
|
|||
|
|
// this.fetchingData = false;
|
|||
|
|
// });
|
|||
|
|
let url =
|
|||
|
|
apis.notification[this.activeTab as keyof typeof apis.notification];
|
|||
|
|
let offset: number = this.pagination.offset;
|
|||
|
|
let limit: number = this.pagination.limit;
|
|||
|
|
url = url.replace("{{offset}}", offset as unknown as string);
|
|||
|
|
url = url.replace("{{limit}}", limit as unknown as string);
|
|||
|
|
|
|||
|
|
try {
|
|||
|
|
const { $api } = useNuxtApp();
|
|||
|
|
const data: resModelThree = await $api(url, {
|
|||
|
|
baseURL: repoUrl(),
|
|||
|
|
method: "GET",
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
this.list = data.hits.hits;
|
|||
|
|
} catch (err) {}
|
|||
|
|
},
|
|||
|
|
//user
|
|||
|
|
// getListUnseen() {
|
|||
|
|
// let url = adminApi.notification.listUnseen;
|
|||
|
|
|
|||
|
|
// url = url.replace("{{offset}}", this.pagination.offset);
|
|||
|
|
// url = url.replace("{{limit}}", this.pagination.limit);
|
|||
|
|
|
|||
|
|
// this.httpService
|
|||
|
|
// .getRequest(url)
|
|||
|
|
// .then((res) => {
|
|||
|
|
// this.listUnseen = res.hits.hits;
|
|||
|
|
|
|||
|
|
// const total = res.hits.total.value;
|
|||
|
|
// const pages = Math.ceil(total / this.pagination.limit);
|
|||
|
|
// const pagination = {
|
|||
|
|
// total: total,
|
|||
|
|
// pages: pages == 0 ? 1 : pages,
|
|||
|
|
// };
|
|||
|
|
|
|||
|
|
// this.pagination = { ...this.pagination, ...pagination };
|
|||
|
|
// })
|
|||
|
|
// .catch(() => {})
|
|||
|
|
// .finally(() => {
|
|||
|
|
// this.fetchingData = false;
|
|||
|
|
// });
|
|||
|
|
// },
|
|||
|
|
// user
|
|||
|
|
// getCountUnseen() {
|
|||
|
|
// const url = adminApi.notification.countUnseen;
|
|||
|
|
|
|||
|
|
// this.httpService
|
|||
|
|
// .getRequest(url)
|
|||
|
|
// .then((res) => {
|
|||
|
|
// this.countUnseen = res.count;
|
|||
|
|
// })
|
|||
|
|
// .catch(() => {})
|
|||
|
|
// .finally(() => {});
|
|||
|
|
// },
|
|||
|
|
goToNotificationShowPage(item: object) {
|
|||
|
|
this.$router.push({
|
|||
|
|
name: "notificationsShow",
|
|||
|
|
params: {
|
|||
|
|
// id: item._id,
|
|||
|
|
id: (item as { _id: string })._id,
|
|||
|
|
},
|
|||
|
|
});
|
|||
|
|
},
|
|||
|
|
// goToNotificationPage() {
|
|||
|
|
// this.$router.push({
|
|||
|
|
// name: "notifications",
|
|||
|
|
// });
|
|||
|
|
// },
|
|||
|
|
resetPagination() {
|
|||
|
|
this.pagination = {
|
|||
|
|
pages: 0,
|
|||
|
|
total: 0,
|
|||
|
|
page: 1,
|
|||
|
|
offset: 0,
|
|||
|
|
limit: 10,
|
|||
|
|
};
|
|||
|
|
},
|
|||
|
|
pageLimitChanged(paging: object) {
|
|||
|
|
this.resetPagination();
|
|||
|
|
let limit: number = this.pagination.limit;
|
|||
|
|
limit = (paging as { limit: number }).limit;
|
|||
|
|
|
|||
|
|
this.getList();
|
|||
|
|
},
|
|||
|
|
pageChanged(paging: object) {
|
|||
|
|
let page = (paging as { pageNumber: number }).pageNumber;
|
|||
|
|
page -= 1;
|
|||
|
|
let offset: number = this.pagination.offset;
|
|||
|
|
let limit: number = this.pagination.limit;
|
|||
|
|
offset = page * (paging as { limit: number }).limit;
|
|||
|
|
limit = (paging as { limit: number }).limit;
|
|||
|
|
|
|||
|
|
page = (paging as { pageNumber: number }).pageNumber;
|
|||
|
|
|
|||
|
|
this.getList();
|
|||
|
|
},
|
|||
|
|
sortChanged(sorting: object, paging: object) {
|
|||
|
|
// keep limit status.
|
|||
|
|
// reset page and offset values.
|
|||
|
|
let page = (paging as { pageNumber: number }).pageNumber;
|
|||
|
|
|
|||
|
|
page = this.pagination.offset = 0;
|
|||
|
|
this.sorting = sorting;
|
|||
|
|
|
|||
|
|
this.getList();
|
|||
|
|
},
|
|||
|
|
// timeSince(timeStamp) {
|
|||
|
|
// var date = new Date(timeStamp * 1000);
|
|||
|
|
// var seconds = Math.floor((new Date() - date) / 1000);
|
|||
|
|
// var interval = seconds / 31536000;
|
|||
|
|
// if (interval > 1) {
|
|||
|
|
// return Math.floor(interval) + " سال";
|
|||
|
|
// }
|
|||
|
|
// interval = seconds / 2592000;
|
|||
|
|
// if (interval > 1) {
|
|||
|
|
// return Math.floor(interval) + " ماه";
|
|||
|
|
// }
|
|||
|
|
// interval = seconds / 86400;
|
|||
|
|
// if (interval > 1) {
|
|||
|
|
// return Math.floor(interval) + " روز";
|
|||
|
|
// }
|
|||
|
|
// interval = seconds / 3600;
|
|||
|
|
// if (interval > 1) {
|
|||
|
|
// return Math.floor(interval) + " ساعت";
|
|||
|
|
// }
|
|||
|
|
// interval = seconds / 60;
|
|||
|
|
// if (interval > 1) {
|
|||
|
|
// return Math.floor(interval) + " دقیقه";
|
|||
|
|
// }
|
|||
|
|
// return Math.floor(seconds) + " ثانیه";
|
|||
|
|
// },
|
|||
|
|
async markAll() {
|
|||
|
|
// let url = adminApi.notification.markAllAsRead;
|
|||
|
|
|
|||
|
|
// this.httpService
|
|||
|
|
// .postRequest(url)
|
|||
|
|
// .then((res) => {
|
|||
|
|
// this.getList();
|
|||
|
|
// this.mySwalToast({
|
|||
|
|
// html: res?.message ?? "با موفقیت تغییر یافت.",
|
|||
|
|
// });
|
|||
|
|
// this.numberOfMark();
|
|||
|
|
// })
|
|||
|
|
// .catch(() => {})
|
|||
|
|
// .finally(() => {});
|
|||
|
|
|
|||
|
|
try {
|
|||
|
|
const { $api } = useNuxtApp();
|
|||
|
|
const data: resModelThree = await $api(
|
|||
|
|
apis.notification.markAllAsRead,
|
|||
|
|
{
|
|||
|
|
baseURL: repoUrl(),
|
|||
|
|
method: "POST",
|
|||
|
|
}
|
|||
|
|
);
|
|||
|
|
} catch (err) {}
|
|||
|
|
},
|
|||
|
|
async numberOfMark() {
|
|||
|
|
// let url = adminApi.notification.counts;
|
|||
|
|
// url = url.replace("{{data_type}}", this.data_type);
|
|||
|
|
|
|||
|
|
// this.httpService
|
|||
|
|
// .getRequest(url)
|
|||
|
|
// .then((res) => {
|
|||
|
|
// this.counts = res.data;
|
|||
|
|
// })
|
|||
|
|
// .catch(() => {})
|
|||
|
|
// .finally(() => {});
|
|||
|
|
try {
|
|||
|
|
const { $api } = useNuxtApp();
|
|||
|
|
const data: counts = await $api(apis.notification.counts, {
|
|||
|
|
baseURL: repoUrl(),
|
|||
|
|
method: "GET",
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
this.counts = data;
|
|||
|
|
} catch (err) {}
|
|||
|
|
},
|
|||
|
|
},
|
|||
|
|
};
|
|||
|
|
</script>
|