LeadMagnet/leadchat
1
0
Fork 0
Code Issues Pull Requests Actions 3 Packages Projects Releases Wiki Activity

feat: Inbox item actions (#8838)

Browse Source 
* feat: Inbox item actions

* feat: add inbox id in push event data

* Update InboxList.vue

* feat: complete actions

* Update InboxList.vue

* Update InboxView.vue

* chore: code cleanup

* chore: fix specs

---------

Co-authored-by: Sivin Varghese <64252451+iamsivin@users.noreply.github.com>
This commit is contained in:
Muhsin Keloth
2024-02-02 11:58:47 +05:30
committed by GitHub
parent 33e98bf61a
commit d3c1fce761
15 changed files with 242 additions and 54 deletions
Download Patch File Download Diff File Expand all files Collapse all files

57
app/javascript/dashboard/routes/dashboard/inbox/InboxList.vue
View File

@@ -2,7 +2,7 @@
import { mapGetters } from 'vuex';
import InboxCard from './components/InboxCard.vue';
import InboxListHeader from './components/InboxListHeader.vue';
import { ACCOUNT_EVENTS } from '../../../helper/AnalyticsHelper/events';
import { INBOX_EVENTS } from '../../../helper/AnalyticsHelper/events';
import IntersectionObserver from 'dashboard/components/IntersectionObserver.vue';
export default {
components: {
@@ -37,27 +37,15 @@ export default {
},
methods: {
openConversation(notification) {
const {
primary_actor_id: primaryActorId,
primary_actor_type: primaryActorType,
primary_actor: { id: conversationId },
notification_type: notificationType,
} = notification;
this.$track(ACCOUNT_EVENTS.OPEN_CONVERSATION_VIA_NOTIFICATION, {
const { notification_type: notificationType } = notification;
this.$track(INBOX_EVENTS.OPEN_CONVERSATION_VIA_NOTIFICATION, {
notificationType,
});
this.$store.dispatch('notifications/read', {
primaryActorId,
primaryActorType,
unreadCount: this.meta.unreadCount,
});
this.$router.push(
`/app/accounts/${this.accountId}/conversations/${conversationId}`
);
this.markNotificationAsRead(notification);
},
onMarkAllDoneClick() {
this.$track(ACCOUNT_EVENTS.MARK_AS_READ_NOTIFICATIONS);
this.$track(INBOX_EVENTS.MARK_ALL_NOTIFICATIONS_AS_READ);
this.$store.dispatch('notifications/readAll');
},
loadMoreNotifications() {
@@ -65,6 +53,35 @@ export default {
this.$store.dispatch('notifications/index', { page: this.page + 1 });
this.page += 1;
},
markNotificationAsRead(notification) {
this.$track(INBOX_EVENTS.MARK_NOTIFICATION_AS_READ);
const {
id,
primary_actor_id: primaryActorId,
primary_actor_type: primaryActorType,
} = notification;
this.$store.dispatch('notifications/read', {
id,
primaryActorId,
primaryActorType,
unreadCount: this.meta.unreadCount,
});
},
markNotificationAsUnRead(notification) {
this.$track(INBOX_EVENTS.MARK_NOTIFICATION_AS_UNREAD);
const { id } = notification;
this.$store.dispatch('notifications/unread', {
id,
});
},
deleteNotification(notification) {
this.$track(INBOX_EVENTS.DELETE_NOTIFICATION);
this.$store.dispatch('notifications/delete', {
notification,
unread_count: this.meta.unreadCount,
count: this.meta.count,
});
},
},
};
</script>
@@ -81,6 +98,10 @@ export default {
v-for="notificationItem in records"
:key="notificationItem.id"
:notification-item="notificationItem"
@open-conversation="openConversation"
@mark-notification-as-read="markNotificationAsRead"
@mark-notification-as-unread="markNotificationAsUnRead"
@delete-notification="deleteNotification"
/>
<div v-if="uiFlags.isFetching" class="text-center">
<span class="spinner mt-4 mb-4" />

37
app/javascript/dashboard/routes/dashboard/inbox/components/InboxCard.vue
View File

@@ -45,7 +45,9 @@
<inbox-context-menu
v-if="isContextMenuOpen"
:context-menu-position="contextMenuPosition"
:menu-items="menuItems"
@close="closeContextMenu"
@click="handleAction"
/>
</div>
</template>
@@ -106,6 +108,27 @@ export default {
);
return this.shortTimestamp(dynamicTime, true);
},
menuItems() {
const items = [
{
key: 'delete',
label: this.$t('INBOX.MENU_ITEM.DELETE'),
},
];
if (!this.isUnread) {
items.push({
key: 'mark_as_unread',
label: this.$t('INBOX.MENU_ITEM.MARK_AS_UNREAD'),
});
} else {
items.push({
key: 'mark_as_read',
label: this.$t('INBOX.MENU_ITEM.MARK_AS_READ'),
});
}
return items;
},
},
unmounted() {
this.closeContextMenu();
@@ -127,6 +150,20 @@ export default {
};
this.isContextMenuOpen = true;
},
handleAction(key) {
switch (key) {
case 'mark_as_read':
this.$emit('mark-notification-as-read', this.notificationItem);
break;
case 'mark_as_unread':
this.$emit('mark-notification-as-unread', this.notificationItem);
break;
case 'delete':
this.$emit('delete-notification', this.notificationItem);
break;
default:
}
},
},
};
</script>

26
app/javascript/dashboard/routes/dashboard/inbox/components/InboxContextMenu.vue
View File

@@ -28,28 +28,10 @@ export default {
type: Object,
default: () => ({}),
},
},
data() {
return {
menuItems: [
{
key: 'mark_as_read',
label: this.$t('INBOX.MENU_ITEM.MARK_AS_READ'),
},
{
key: 'mark_as_unread',
label: this.$t('INBOX.MENU_ITEM.MARK_AS_UNREAD'),
},
{
key: 'snooze',
label: this.$t('INBOX.MENU_ITEM.SNOOZE'),
},
{
key: 'delete',
label: this.$t('INBOX.MENU_ITEM.DELETE'),
},
],
};
menuItems: {
type: Array,
default: () => [],
},
},
methods: {
handleClose() {

1
app/javascript/dashboard/routes/dashboard/notifications/components/NotificationPanel.vue
View File

@@ -188,6 +188,7 @@ export default {
notificationType,
});
this.$store.dispatch('notifications/read', {
id: notification.id,
primaryActorId,
primaryActorType,
unreadCount: this.meta.unreadCount,

1
app/javascript/dashboard/routes/dashboard/notifications/components/NotificationsView.vue
View File

@@ -58,6 +58,7 @@ export default {
notificationType,
});
this.$store.dispatch('notifications/read', {
id: notification.id,
primaryActorId,
primaryActorType,
unreadCount: this.meta.unreadCount,