@@ -25,12 +31,6 @@
>
{{ $t('INBOX.LIST.NO_NOTIFICATIONS') }}
-
n.primary_actor.id === Number(this.conversationId)
- );
+ return this.notifications.find(n => n.id === Number(this.notificationId));
+ },
+ conversationId() {
+ return this.activeNotification?.primary_actor.id;
},
isInboxViewEnabled() {
return this.$store.getters['accounts/isFeatureEnabledGlobally'](
@@ -93,14 +100,14 @@ export default {
);
},
showConversationList() {
- return this.isOnExpandedLayout ? !this.conversationId : true;
+ return this.isOnExpandedLayout ? !this.notificationId : true;
},
isFetchingInitialData() {
return this.uiFlags.isFetching && !this.notifications.length;
},
showInboxMessageView() {
return (
- Boolean(this.conversationId) &&
+ Boolean(this.notificationId) &&
Boolean(this.currentChat.id) &&
!this.isFetchingInitialData
);
@@ -109,20 +116,11 @@ export default {
return this.notifications?.length ?? 0;
},
activeNotificationIndex() {
- const conversationId = Number(this.conversationId);
const notificationIndex = this.notifications.findIndex(
- n => n.primary_actor.id === conversationId
+ n => n.id === Number(this.notificationId)
);
return notificationIndex >= 0 ? notificationIndex + 1 : 0;
},
- isOnExpandedLayout() {
- const {
- LAYOUT_TYPES: { CONDENSED },
- } = wootConstants;
- const { conversation_display_type: conversationDisplayType = CONDENSED } =
- this.uiSettings;
- return conversationDisplayType !== CONDENSED;
- },
isContactPanelOpen() {
if (this.currentChat.id) {
const { is_contact_sidebar_open: isContactSidebarOpen } =
@@ -149,10 +147,19 @@ export default {
});
}
this.$store.dispatch('agents/get');
+ this.handleResize();
},
methods: {
+ handleResize() {
+ const { SMALL_SCREEN_BREAKPOINT } = wootConstants;
+ if (window.innerWidth <= SMALL_SCREEN_BREAKPOINT) {
+ this.isOnExpandedLayout = true;
+ } else {
+ this.isOnExpandedLayout = false;
+ }
+ },
async fetchConversationById() {
- if (!this.conversationId) return;
+ if (!this.notificationId || !this.conversationId) return;
const chat = this.findConversation();
if (!chat) {
await this.$store.dispatch('getConversation', this.conversationId);
@@ -169,8 +176,9 @@ export default {
});
},
findConversation() {
- const conversationId = Number(this.conversationId);
- return this.allConversation.find(c => c.id === conversationId);
+ return this.allConversation.find(
+ c => c.id === Number(this.conversationId)
+ );
},
navigateToConversation(activeIndex, direction) {
const indexOffset = direction === 'next' ? 0 : -2;
@@ -180,7 +188,7 @@ export default {
id,
primary_actor_id: primaryActorId,
primary_actor_type: primaryActorType,
- primary_actor: { id: conversationId, meta: { unreadCount } = {} },
+ primary_actor: { meta: { unreadCount } = {} },
notification_type: notificationType,
} = targetNotification;
@@ -197,7 +205,7 @@ export default {
this.$router.push({
name: 'inbox_view_conversation',
- params: { conversation_id: conversationId },
+ params: { notification_id: id },
});
}
},
diff --git a/app/javascript/dashboard/routes/dashboard/inbox/components/InboxCard.vue b/app/javascript/dashboard/routes/dashboard/inbox/components/InboxCard.vue
index 8e100f7b5..f61e8680d 100644
--- a/app/javascript/dashboard/routes/dashboard/inbox/components/InboxCard.vue
+++ b/app/javascript/dashboard/routes/dashboard/inbox/components/InboxCard.vue
@@ -166,11 +166,11 @@ export default {
id,
primary_actor_id: primaryActorId,
primary_actor_type: primaryActorType,
- primary_actor: { id: conversationId, inbox_id: inboxId },
+ primary_actor: { inbox_id: inboxId },
notification_type: notificationType,
} = notification;
- if (this.$route.params.conversation_id !== conversationId) {
+ if (this.$route.params.notification_id !== id) {
this.$track(INBOX_EVENTS.OPEN_CONVERSATION_VIA_INBOX, {
notificationType,
});
@@ -184,13 +184,14 @@ export default {
this.$router.push({
name: 'inbox_view_conversation',
- params: { inboxId, conversation_id: conversationId },
+ params: { inboxId, notification_id: id },
});
}
},
closeContextMenu() {
this.isContextMenuOpen = false;
this.contextMenuPosition = { x: null, y: null };
+ this.$emit('context-menu-close');
},
openContextMenu(e) {
this.closeContextMenu();
@@ -200,6 +201,7 @@ export default {
y: e.pageY || e.clientY,
};
this.isContextMenuOpen = true;
+ this.$emit('context-menu-open');
},
handleAction(key) {
switch (key) {
diff --git a/app/javascript/dashboard/routes/dashboard/inbox/components/InboxListHeader.vue b/app/javascript/dashboard/routes/dashboard/inbox/components/InboxListHeader.vue
index 3f5a594b7..d7be310de 100644
--- a/app/javascript/dashboard/routes/dashboard/inbox/components/InboxListHeader.vue
+++ b/app/javascript/dashboard/routes/dashboard/inbox/components/InboxListHeader.vue
@@ -69,12 +69,29 @@ export default {
InboxDisplayMenu,
},
mixins: [clickaway, alertMixin],
+ props: {
+ isContextMenuOpen: {
+ type: Boolean,
+ default: false,
+ },
+ },
data() {
return {
showInboxDisplayMenu: false,
showInboxOptionMenu: false,
};
},
+ watch: {
+ isContextMenuOpen: {
+ handler(val) {
+ if (val) {
+ this.showInboxDisplayMenu = false;
+ this.showInboxOptionMenu = false;
+ }
+ },
+ immediate: true,
+ },
+ },
methods: {
markAllRead() {
this.$track(INBOX_EVENTS.MARK_ALL_NOTIFICATIONS_AS_READ);
@@ -100,21 +117,19 @@ export default {
},
onInboxOptionMenuClick(key) {
this.showInboxOptionMenu = false;
- if (key === 'mark_all_read') {
- this.markAllRead();
- }
- if (key === 'delete_all') {
- this.deleteAll();
- }
- if (key === 'delete_all_read') {
- this.deleteAllRead();
- }
+ const actions = {
+ mark_all_read: () => this.markAllRead(),
+ delete_all: () => this.deleteAll(),
+ delete_all_read: () => this.deleteAllRead(),
+ };
+ const action = actions[key];
+ if (action) action();
+ this.$emit('redirect');
},
onFilterChange(option) {
this.$emit('filter', option);
this.showInboxDisplayMenu = false;
- if (this.$route.name === 'inbox_view') return;
- this.$router.push({ name: 'inbox_view' });
+ this.$emit('redirect');
},
},
};
diff --git a/app/javascript/shared/mixins/resizeListenerMixin.js b/app/javascript/shared/mixins/resizeListenerMixin.js
new file mode 100644
index 000000000..ea8569e0c
--- /dev/null
+++ b/app/javascript/shared/mixins/resizeListenerMixin.js
@@ -0,0 +1,25 @@
+export default {
+ mounted() {
+ window.addEventListener('resize', this.handleResize);
+ },
+ beforeDestroy() {
+ window.removeEventListener('resize', this.onResizeHandler);
+ },
+ methods: {
+ // Resize event for layout changes
+ onResizeHandler() {
+ let throttled = false;
+ const delay = 150;
+
+ if (throttled) {
+ return;
+ }
+ throttled = true;
+
+ setTimeout(() => {
+ throttled = false;
+ this.handleResize();
+ }, delay);
+ },
+ },
+};