158 lines
4.0 KiB
Vue
158 lines
4.0 KiB
Vue
<script setup>
|
|
import avatar3 from '@images/avatars/avatar-3.png';
|
|
import { onMounted } from 'vue';
|
|
import { useRoute, useRouter } from 'vue-router';
|
|
import { useStore } from 'vuex';
|
|
const router = useRouter()
|
|
const route = useRoute()
|
|
const store = useStore();
|
|
const currentUser = ref(localStorage.getItem('user_role'));
|
|
const access_token = localStorage.getItem('access_token');
|
|
const isVisiable = ref(true);
|
|
const itemHistory = ref([]);
|
|
const notifications = ref([]);
|
|
onMounted(async () => {
|
|
if (currentUser.value == 'patient') {
|
|
console.log("currentUserAsif", currentUser.value);
|
|
await store.dispatch('getPatientsNotification')
|
|
itemHistory.value = store.getters.getPatientsNotification.notification;
|
|
console.log("itemHistory", itemHistory.value);
|
|
if (itemHistory.value == '') {
|
|
console.log("itemHistory not found");
|
|
itemHistory.value = [
|
|
{
|
|
"id": 1,
|
|
"created_at": "2024-07-17T19:08:45.000000Z",
|
|
"updated_at": "2024-07-30T19:08:45.000000Z",
|
|
"deleted_at": null,
|
|
"status": "Approved",
|
|
"cart_id": 20,
|
|
"patient_id": 38,
|
|
"message": "Order Update",
|
|
"description": "Your order status has been updated."
|
|
}
|
|
]
|
|
}
|
|
console.log("second hostory", itemHistory.value);
|
|
appendItemHistoryToNotifications(itemHistory.value);
|
|
}
|
|
else {
|
|
itemHistory.value = '';
|
|
}
|
|
|
|
});
|
|
|
|
|
|
const appendItemHistoryToNotifications = (itemHistory) => {
|
|
if (itemHistory) {
|
|
itemHistory.forEach(item => {
|
|
notifications.value.push({
|
|
id: item.cart_id,
|
|
img: avatar3, // Placeholder for image
|
|
title: item.message,
|
|
subtitle: item.description,
|
|
time: new Date(item.created_at).toLocaleString(),
|
|
isSeen: false,
|
|
});
|
|
});
|
|
} else {
|
|
notifications.value = [];
|
|
}
|
|
|
|
console.log("notifications1", notifications.value);
|
|
};
|
|
// const notifications = ref([
|
|
// {
|
|
// id: 1,
|
|
// img: avatar4,
|
|
// title: 'Congratulation Flora! 🎉',
|
|
// subtitle: 'Won the monthly best seller badge',
|
|
// time: 'Today',
|
|
// isSeen: true,
|
|
// },
|
|
// {
|
|
// id: 2,
|
|
// text: 'Tom Holland',
|
|
// title: 'New user registered.',
|
|
// subtitle: '5 hours ago',
|
|
// time: 'Yesterday',
|
|
// isSeen: false,
|
|
// },
|
|
// {
|
|
// id: 3,
|
|
// img: avatar5,
|
|
// title: 'New message received 👋🏻',
|
|
// subtitle: 'You have 10 unread messages',
|
|
// time: '11 Aug',
|
|
// isSeen: true,
|
|
// },
|
|
// {
|
|
// id: 4,
|
|
// img: paypal,
|
|
// title: 'Paypal',
|
|
// subtitle: 'Received Payment',
|
|
// time: '25 May',
|
|
// isSeen: false,
|
|
// color: 'error',
|
|
// },
|
|
// {
|
|
// id: 5,
|
|
// img: avatar3,
|
|
// title: 'Received Order 📦',
|
|
// subtitle: 'New order received from john',
|
|
// time: '19 Mar',
|
|
// isSeen: true,
|
|
// },
|
|
// ])
|
|
|
|
const removeNotification = notificationId => {
|
|
notifications.value.forEach((item, index) => {
|
|
if (notificationId === item.id)
|
|
notifications.value.splice(index, 1)
|
|
})
|
|
}
|
|
|
|
const markRead = notificationId => {
|
|
notifications.value.forEach(item => {
|
|
notificationId.forEach(id => {
|
|
if (id === item.id)
|
|
item.isSeen = true
|
|
})
|
|
})
|
|
}
|
|
|
|
const markUnRead = notificationId => {
|
|
notifications.value.forEach(item => {
|
|
notificationId.forEach(id => {
|
|
if (id === item.id)
|
|
item.isSeen = false
|
|
})
|
|
})
|
|
}
|
|
|
|
const handleNotificationClick = notification => {
|
|
console.log("ok", notification);
|
|
if (!notification.isSeen)
|
|
markRead([notification.id])
|
|
const mainDiv = document.querySelector('.v-overlay-container');
|
|
|
|
// Remove all child elements
|
|
while (mainDiv.firstChild) {
|
|
mainDiv.removeChild(mainDiv.firstChild);
|
|
}
|
|
router.push('/order-detail/' + notification.id);
|
|
|
|
}
|
|
|
|
const handleClick = (event) => {
|
|
// Handle window click event here
|
|
console.log('Window clicked!', event);
|
|
};
|
|
</script>
|
|
|
|
<template>
|
|
<!-- <div v-if="history"></div> -->
|
|
<Notifications :notifications="notifications" @remove="removeNotification" @read="markRead" @unread="markUnRead"
|
|
@click:notification="handleNotificationClick" />
|
|
</template>
|