KumiSystems/Chatwoot
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

enhancement: Custom views (#3838)

Browse source 
* enhancement: Custom views

* Review fixes
This commit is contained in:
Sivin Varghese 2022-01-27 08:26:12 +05:30 • committed by GitHub
parent 5710b7559e
commit cd6c9a8fe9
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
14 changed files with 251 additions and 169 deletions
Download patch file Download diff file Expand all files Collapse all files

128
app/javascript/dashboard/components/ChatList.vue
View file

@ -3,7 +3,7 @@
<slot></slot> <slot></slot>
<div <div
class="chat-list__top" class="chat-list__top"
:class="{ filter__applied: hasAppliedFiltersOrActiveCustomViews }" :class="{ filter__applied: hasAppliedFiltersOrActiveFolders }"
> >
<h1 class="page-title text-truncate" :title="pageTitle"> <h1 class="page-title text-truncate" :title="pageTitle">
{{ pageTitle }} {{ pageTitle }}
@ -11,17 +11,17 @@
<div class="filter--actions"> <div class="filter--actions">
<chat-filter <chat-filter
v-if="!hasAppliedFiltersOrActiveCustomViews" v-if="!hasAppliedFiltersOrActiveFolders"
@statusFilterChange="updateStatusType" @statusFilterChange="updateStatusType"
/> />
<div v-if="hasAppliedFilters && !hasActiveCustomViews"> <div v-if="hasAppliedFilters && !hasActiveFolders">
<woot-button <woot-button
v-tooltip.top-end="$t('FILTER.CUSTOM_VIEWS.ADD.SAVE_BUTTON')" v-tooltip.top-end="$t('FILTER.CUSTOM_VIEWS.ADD.SAVE_BUTTON')"
size="tiny" size="tiny"
variant="smooth" variant="smooth"
color-scheme="secondary" color-scheme="secondary"
icon="save" icon="save"
@click="onClickOpenAddCustomViewsModal" @click="onClickOpenAddFoldersModal"
/> />
<woot-button <woot-button
v-tooltip.top-end="$t('FILTER.CLEAR_BUTTON_LABEL')" v-tooltip.top-end="$t('FILTER.CLEAR_BUTTON_LABEL')"
@ -32,7 +32,7 @@
@click="resetAndFetchData" @click="resetAndFetchData"
/> />
</div> </div>
<div v-if="hasActiveCustomViews"> <div v-if="hasActiveFolders">
<woot-button <woot-button
v-tooltip.top-end="$t('FILTER.CUSTOM_VIEWS.DELETE.DELETE_BUTTON')" v-tooltip.top-end="$t('FILTER.CUSTOM_VIEWS.DELETE.DELETE_BUTTON')"
size="tiny" size="tiny"
@ -40,7 +40,7 @@
color-scheme="alert" color-scheme="alert"
icon="delete" icon="delete"
class="delete-custom-view__button" class="delete-custom-view__button"
@click="onClickOpenDeleteCustomViewsModal" @click="onClickOpenDeleteFoldersModal"
/> />
</div> </div>
@ -59,21 +59,23 @@
</div> </div>
<add-custom-views <add-custom-views
v-if="showAddCustomViewsModal" v-if="showAddFoldersModal"
:custom-views-query="customViewsQuery" :custom-views-query="foldersQuery"
@close="onCloseAddCustomViewsModal" :open-last-saved-item="openLastSavedItemInFolder"
@close="onCloseAddFoldersModal"
/> />
<delete-custom-views <delete-custom-views
v-if="showDeleteCustomViewsModal" v-if="showDeleteFoldersModal"
:show-delete-popup.sync="showDeleteCustomViewsModal" :show-delete-popup.sync="showDeleteFoldersModal"
:active-custom-view="activeCustomView" :active-custom-view="activeFolder"
:custom-views-id="customViewsId" :custom-views-id="foldersId"
@close="onCloseDeleteCustomViewsModal" :open-last-item-after-delete="openLastItemAfterDeleteInFolder"
@close="onCloseDeleteFoldersModal"
/> />
<chat-type-tabs <chat-type-tabs
v-if="!hasAppliedFiltersOrActiveCustomViews" v-if="!hasAppliedFiltersOrActiveFolders"
:items="assigneeTabItems" :items="assigneeTabItems"
:active-tab="activeAssigneeTab" :active-tab="activeAssigneeTab"
class="tab--chat-type" class="tab--chat-type"
@ -90,7 +92,7 @@
:key="chat.id" :key="chat.id"
:active-label="label" :active-label="label"
:team-id="teamId" :team-id="teamId"
:custom-views-id="customViewsId" :folders-id="foldersId"
:chat="chat" :chat="chat"
:conversation-type="conversationType" :conversation-type="conversationType"
:show-assignee="showAssigneeInConversationCard" :show-assignee="showAssigneeInConversationCard"
@ -183,7 +185,7 @@ export default {
type: String, type: String,
default: '', default: '',
}, },
customViewsId: { foldersId: {
type: [String, Number], type: [String, Number],
default: 0, default: 0,
}, },
@ -197,9 +199,9 @@ export default {
...filter, ...filter,
attributeName: this.$t(`FILTER.ATTRIBUTES.${filter.attributeI18nKey}`), attributeName: this.$t(`FILTER.ATTRIBUTES.${filter.attributeI18nKey}`),
})), })),
customViewsQuery: {}, foldersQuery: {},
showAddCustomViewsModal: false, showAddFoldersModal: false,
showDeleteCustomViewsModal: false, showDeleteFoldersModal: false,
}; };
}, },
computed: { computed: {
@ -214,20 +216,20 @@ export default {
activeInbox: 'getSelectedInbox', activeInbox: 'getSelectedInbox',
conversationStats: 'conversationStats/getStats', conversationStats: 'conversationStats/getStats',
appliedFilters: 'getAppliedConversationFilters', appliedFilters: 'getAppliedConversationFilters',
customViews: 'customViews/getCustomViews', folders: 'customViews/getCustomViews',
}), }),
hasAppliedFilters() { hasAppliedFilters() {
return this.appliedFilters.length; return this.appliedFilters.length;
}, },
hasActiveCustomViews() { hasActiveFolders() {
return this.activeCustomView && this.customViewsId !== 0; return this.activeFolder && this.foldersId !== 0;
}, },
hasAppliedFiltersOrActiveCustomViews() { hasAppliedFiltersOrActiveFolders() {
return this.hasAppliedFilters || this.hasActiveCustomViews; return this.hasAppliedFilters || this.hasActiveFolders;
}, },
savedCustomViewsValue() { savedFoldersValue() {
if (this.hasActiveCustomViews) { if (this.hasActiveFolders) {
const payload = this.activeCustomView.query; const payload = this.activeFolder.query;
this.fetchSavedFilteredConversations(payload); this.fetchSavedFilteredConversations(payload);
} }
return {}; return {};
@ -254,7 +256,7 @@ export default {
); );
}, },
currentPageFilterKey() { currentPageFilterKey() {
return this.hasAppliedFiltersOrActiveCustomViews return this.hasAppliedFiltersOrActiveFolders
? 'appliedFilters' ? 'appliedFilters'
: this.activeAssigneeTab; : this.activeAssigneeTab;
}, },
@ -279,9 +281,7 @@ export default {
conversationType: this.conversationType conversationType: this.conversationType
? this.conversationType ? this.conversationType
: undefined, : undefined,
customViews: this.hasActiveCustomViews folders: this.hasActiveFolders ? this.savedFoldersValue : undefined,
? this.savedCustomViewsValue
: undefined,
}; };
}, },
pageTitle() { pageTitle() {
@ -297,14 +297,14 @@ export default {
if (this.conversationType === 'mention') { if (this.conversationType === 'mention') {
return this.$t('CHAT_LIST.MENTION_HEADING'); return this.$t('CHAT_LIST.MENTION_HEADING');
} }
if (this.hasActiveCustomViews) { if (this.hasActiveFolders) {
return this.activeCustomView.name; return this.activeFolder.name;
} }
return this.$t('CHAT_LIST.TAB_HEADING'); return this.$t('CHAT_LIST.TAB_HEADING');
}, },
conversationList() { conversationList() {
let conversationList = []; let conversationList = [];
if (!this.hasAppliedFiltersOrActiveCustomViews) { if (!this.hasAppliedFiltersOrActiveFolders) {
const filters = this.conversationFilters; const filters = this.conversationFilters;
if (this.activeAssigneeTab === 'me') { if (this.activeAssigneeTab === 'me') {
conversationList = [...this.mineChatsList(filters)]; conversationList = [...this.mineChatsList(filters)];
@ -319,10 +319,10 @@ export default {
return conversationList; return conversationList;
}, },
activeCustomView() { activeFolder() {
if (this.customViewsId) { if (this.foldersId) {
const activeView = this.customViews.filter( const activeView = this.folders.filter(
view => view.id === Number(this.customViewsId) view => view.id === Number(this.foldersId)
); );
const [firstValue] = activeView; const [firstValue] = activeView;
return firstValue; return firstValue;
@ -349,8 +349,10 @@ export default {
conversationType() { conversationType() {
this.resetAndFetchData(); this.resetAndFetchData();
}, },
activeCustomView() { activeFolder() {
if (!this.hasAppliedFilters) {
this.resetAndFetchData(); this.resetAndFetchData();
}
}, },
}, },
mounted() { mounted() {
@ -366,22 +368,22 @@ export default {
if (this.$route.name !== 'home') { if (this.$route.name !== 'home') {
this.$router.push({ name: 'home' }); this.$router.push({ name: 'home' });
} }
this.customViewsQuery = { payload: payload }; this.foldersQuery = { payload: payload };
this.$store.dispatch('conversationPage/reset'); this.$store.dispatch('conversationPage/reset');
this.$store.dispatch('emptyAllConversations'); this.$store.dispatch('emptyAllConversations');
this.fetchFilteredConversations(payload); this.fetchFilteredConversations(payload);
}, },
onClickOpenAddCustomViewsModal() { onClickOpenAddFoldersModal() {
this.showAddCustomViewsModal = true; this.showAddFoldersModal = true;
}, },
onCloseAddCustomViewsModal() { onCloseAddFoldersModal() {
this.showAddCustomViewsModal = false; this.showAddFoldersModal = false;
}, },
onClickOpenDeleteCustomViewsModal() { onClickOpenDeleteFoldersModal() {
this.showDeleteCustomViewsModal = true; this.showDeleteFoldersModal = true;
}, },
onCloseDeleteCustomViewsModal() { onCloseDeleteFoldersModal() {
this.showDeleteCustomViewsModal = false; this.showDeleteFoldersModal = false;
}, },
onToggleAdvanceFiltersModal() { onToggleAdvanceFiltersModal() {
this.showAdvancedFilters = !this.showAdvancedFilters; this.showAdvancedFilters = !this.showAdvancedFilters;
@ -434,11 +436,11 @@ export default {
this.$store.dispatch('conversationPage/reset'); this.$store.dispatch('conversationPage/reset');
this.$store.dispatch('emptyAllConversations'); this.$store.dispatch('emptyAllConversations');
this.$store.dispatch('clearConversationFilters'); this.$store.dispatch('clearConversationFilters');
if (this.hasActiveCustomViews) { if (this.hasActiveFolders) {
const payload = this.activeCustomView.query; const payload = this.activeFolder.query;
this.fetchSavedFilteredConversations(payload); this.fetchSavedFilteredConversations(payload);
} }
if (this.customViewsId) { if (this.foldersId) {
return; return;
} }
this.fetchConversations(); this.fetchConversations();
@ -449,11 +451,11 @@ export default {
.then(() => this.$emit('conversation-load')); .then(() => this.$emit('conversation-load'));
}, },
loadMoreConversations() { loadMoreConversations() {
if (!this.hasAppliedFiltersOrActiveCustomViews) { if (!this.hasAppliedFiltersOrActiveFolders) {
this.fetchConversations(); this.fetchConversations();
} }
if (this.hasActiveCustomViews) { if (this.hasActiveFolders) {
const payload = this.activeCustomView.query; const payload = this.activeFolder.query;
this.fetchSavedFilteredConversations(payload); this.fetchSavedFilteredConversations(payload);
} else { } else {
this.fetchFilteredConversations(this.appliedFilters); this.fetchFilteredConversations(this.appliedFilters);
@ -493,6 +495,22 @@ export default {
this.resetAndFetchData(); this.resetAndFetchData();
} }
}, },
openLastSavedItemInFolder() {
const lastItemOfFolder = this.folders[this.folders.length - 1];
const lastItemId = lastItemOfFolder.id;
this.$router.push({
name: 'folder_conversations',
params: { id: lastItemId },
});
},
openLastItemAfterDeleteInFolder() {
if (this.folders.length > 0) {
this.openLastSavedItemInFolder();
} else {
this.$router.push({ name: 'home' });
this.fetchConversations();
}
},
}, },
}; };
</script> </script>

2
app/javascript/dashboard/components/layout/config/sidebarItems/contacts.js
View file

@ -5,7 +5,7 @@ const contacts = accountId => ({
routes: [ routes: [
'contacts_dashboard', 'contacts_dashboard',
'contact_profile_dashboard', 'contact_profile_dashboard',
'contacts_through_custom_view', 'contacts_segments_dashboard',
'contacts_labels_dashboard', 'contacts_labels_dashboard',
], ],
menuItems: [ menuItems: [

4
app/javascript/dashboard/components/layout/config/sidebarItems/conversations.js
View file

@ -14,8 +14,8 @@ const conversations = accountId => ({
'conversations_through_team', 'conversations_through_team',
'conversation_mentions', 'conversation_mentions',
'conversation_through_mentions', 'conversation_through_mentions',
'custom_view_conversations', 'folder_conversations',
'conversations_through_custom_view', 'conversations_through_folders',
], ],
menuItems: [ menuItems: [
{ {

14
app/javascript/dashboard/components/layout/sidebarComponents/Secondary.vue
View file

@ -157,7 +157,7 @@ export default {
})), })),
}; };
}, },
customViewsSection() { foldersSection() {
return { return {
icon: 'folder', icon: 'folder',
label: 'CUSTOM_VIEWS_FOLDER', label: 'CUSTOM_VIEWS_FOLDER',
@ -175,7 +175,7 @@ export default {
})), })),
}; };
}, },
contactCustomViewsSection() { contactSegmentsSection() {
return { return {
icon: 'folder', icon: 'folder',
label: 'CUSTOM_VIEWS_SEGMENTS', label: 'CUSTOM_VIEWS_SEGMENTS',
@ -200,16 +200,10 @@ export default {
conversationMenuItems = [this.teamSection, ...conversationMenuItems]; conversationMenuItems = [this.teamSection, ...conversationMenuItems];
} }
if (this.customViews.length) { if (this.customViews.length) {
conversationMenuItems = [ conversationMenuItems = [this.foldersSection, ...conversationMenuItems];
this.customViewsSection,
...conversationMenuItems,
];
} }
if (this.contactCustomViews.length) { if (this.contactCustomViews.length) {
contactMenuItems = [ contactMenuItems = [this.contactSegmentsSection, ...contactMenuItems];
this.contactCustomViewsSection,
...contactMenuItems,
];
} }
return { return {
conversations: conversationMenuItems, conversations: conversationMenuItems,

4
app/javascript/dashboard/components/widgets/conversation/ConversationCard.vue
View file

@ -130,7 +130,7 @@ export default {
type: [String, Number], type: [String, Number],
default: 0, default: 0,
}, },
customViewsId: { foldersId: {
type: [String, Number], type: [String, Number],
default: 0, default: 0,
}, },
@ -252,7 +252,7 @@ export default {
id: chat.id, id: chat.id,
label: this.activeLabel, label: this.activeLabel,
teamId: this.teamId, teamId: this.teamId,
customViewsId: this.customViewsId, foldersId: this.foldersId,
conversationType: this.conversationType, conversationType: this.conversationType,
}); });
router.push({ path: frontendURL(path) }); router.push({ path: frontendURL(path) });

6
app/javascript/dashboard/helper/URLHelper.js
View file

@ -12,7 +12,7 @@ export const conversationUrl = ({
label, label,
teamId, teamId,
conversationType = '', conversationType = '',
customViewsId, foldersId,
}) => { }) => {
let url = `accounts/${accountId}/conversations/${id}`; let url = `accounts/${accountId}/conversations/${id}`;
if (activeInbox) { if (activeInbox) {
@ -21,8 +21,8 @@ export const conversationUrl = ({
url = `accounts/${accountId}/label/${label}/conversations/${id}`; url = `accounts/${accountId}/label/${label}/conversations/${id}`;
} else if (teamId) { } else if (teamId) {
url = `accounts/${accountId}/team/${teamId}/conversations/${id}`; url = `accounts/${accountId}/team/${teamId}/conversations/${id}`;
} else if (customViewsId && customViewsId !== 0) { } else if (foldersId && foldersId !== 0) {
url = `accounts/${accountId}/custom_view/${customViewsId}/conversations/${id}`; url = `accounts/${accountId}/custom_view/${foldersId}/conversations/${id}`;
} else if (conversationType === 'mention') { } else if (conversationType === 'mention') {
url = `accounts/${accountId}/mentions/conversations/${id}`; url = `accounts/${accountId}/mentions/conversations/${id}`;
} }

20
app/javascript/dashboard/i18n/locale/en/advancedFilters.json
View file

@ -41,9 +41,13 @@
"ERROR_MESSAGE": "Name is required", "ERROR_MESSAGE": "Name is required",
"SAVE_BUTTON": "Save filter", "SAVE_BUTTON": "Save filter",
"CANCEL_BUTTON": "Cancel", "CANCEL_BUTTON": "Cancel",
"API": { "API_FOLDERS": {
"SUCCESS_MESSAGE": "Custom view created successfully", "SUCCESS_MESSAGE": "Folder created successfully",
"ERROR_MESSAGE": "Error while creating custom view" "ERROR_MESSAGE": "Error while creating folder"
},
"API_SEGMENTS": {
"SUCCESS_MESSAGE": "Segment created successfully",
"ERROR_MESSAGE": "Error while creating segment"
} }
}, },
"DELETE": { "DELETE": {
@ -56,9 +60,13 @@
"NO": "No, Keep it" "NO": "No, Keep it"
} }
}, },
"API": { "API_FOLDERS": {
"SUCCESS_MESSAGE": "Custom view deleted successfully", "SUCCESS_MESSAGE": "Folder deleted successfully",
"ERROR_MESSAGE": "Error while deleting custom view" "ERROR_MESSAGE": "Error while deleting folder"
},
"API_SEGMENTS": {
"SUCCESS_MESSAGE": "Segment deleted successfully",
"ERROR_MESSAGE": "Error while deleting segment"
} }
} }
} }

126
app/javascript/dashboard/routes/dashboard/contacts/components/ContactsView.vue
View file

@ -3,7 +3,7 @@
<div class="left-wrap" :class="wrapClas"> <div class="left-wrap" :class="wrapClas">
<contacts-header <contacts-header
:search-query="searchQuery" :search-query="searchQuery"
:custom-views-id="customViewsId" :segments-id="segmentsId"
:on-search-submit="onSearchSubmit" :on-search-submit="onSearchSubmit"
this-selected-contact-id="" this-selected-contact-id=""
:on-input-search="onInputSearch" :on-input-search="onInputSearch"
@ -31,18 +31,20 @@
</div> </div>
<add-custom-views <add-custom-views
v-if="showAddCustomViewsModal" v-if="showAddSegmentsModal"
:custom-views-query="customViewsQuery" :custom-views-query="segmentsQuery"
:filter-type="filterType" :filter-type="filterType"
@close="onCloseAddCustomViewsModal" :open-last-saved-item="openSavedItemInSegment"
@close="onCloseAddSegmentsModal"
/> />
<delete-custom-views <delete-custom-views
v-if="showDeleteCustomViewsModal" v-if="showDeleteSegmentsModal"
:show-delete-popup.sync="showDeleteCustomViewsModal" :show-delete-popup.sync="showDeleteSegmentsModal"
:active-custom-view="activeCustomView" :active-custom-view="activeSegment"
:custom-views-id="customViewsId" :custom-views-id="segmentsId"
:active-filter-type="filterType" :active-filter-type="filterType"
@close="onCloseDeleteCustomViewsModal" :open-last-item-after-delete="openLastItemAfterDeleteInSegment"
@close="onCloseDeleteSegmentsModal"
/> />
<contact-info-panel <contact-info-panel
@ -102,7 +104,7 @@ export default {
}, },
props: { props: {
label: { type: String, default: '' }, label: { type: String, default: '' },
customViewsId: { segmentsId: {
type: [String, Number], type: [String, Number],
default: 0, default: 0,
}, },
@ -121,10 +123,10 @@ export default {
`CONTACTS_FILTER.ATTRIBUTES.${filter.attributeI18nKey}` `CONTACTS_FILTER.ATTRIBUTES.${filter.attributeI18nKey}`
), ),
})), })),
customViewsQuery: {}, segmentsQuery: {},
filterType: FILTER_TYPE_CONTACT, filterType: FILTER_TYPE_CONTACT,
showAddCustomViewsModal: false, showAddSegmentsModal: false,
showDeleteCustomViewsModal: false, showDeleteSegmentsModal: false,
}; };
}, },
computed: { computed: {
@ -132,7 +134,7 @@ export default {
records: 'contacts/getContacts', records: 'contacts/getContacts',
uiFlags: 'contacts/getUIFlags', uiFlags: 'contacts/getUIFlags',
meta: 'contacts/getMeta', meta: 'contacts/getMeta',
customViews: 'customViews/getCustomViews', segments: 'customViews/getCustomViews',
getAppliedContactFilters: 'contacts/getAppliedContactFilters', getAppliedContactFilters: 'contacts/getAppliedContactFilters',
}), }),
showEmptySearchResult() { showEmptySearchResult() {
@ -142,12 +144,18 @@ export default {
hasAppliedFilters() { hasAppliedFilters() {
return this.getAppliedContactFilters.length; return this.getAppliedContactFilters.length;
}, },
hasActiveCustomViews() { hasActiveSegments() {
return this.activeCustomView && this.customViewsId !== 0; return this.activeSegment && this.segmentsId !== 0;
},
isContactAndLabelDashboard() {
return (
this.$route.name === 'contacts_dashboard' ||
this.$route.name === 'contacts_labels_dashboard'
);
}, },
pageTitle() { pageTitle() {
if (this.hasActiveCustomViews) { if (this.hasActiveSegments) {
return this.activeCustomView.name; return this.activeSegment.name;
} }
if (this.label) { if (this.label) {
return `#${this.label}`; return `#${this.label}`;
@ -176,10 +184,10 @@ export default {
? selectedPageNumber ? selectedPageNumber
: DEFAULT_PAGE; : DEFAULT_PAGE;
}, },
activeCustomView() { activeSegment() {
if (this.customViewsId) { if (this.segmentsId) {
const [firstValue] = this.customViews.filter( const [firstValue] = this.segments.filter(
view => view.id === Number(this.customViewsId) view => view.id === Number(this.segmentsId)
); );
return firstValue; return firstValue;
} }
@ -189,11 +197,17 @@ export default {
watch: { watch: {
label() { label() {
this.fetchContacts(DEFAULT_PAGE); this.fetchContacts(DEFAULT_PAGE);
if (this.hasAppliedFilters) {
this.clearFilters();
}
}, },
activeCustomView() { activeSegment() {
if (this.hasActiveCustomViews) { if (this.hasActiveSegments) {
const payload = this.activeCustomView.query; const payload = this.activeSegment.query;
this.fetchSavedFilteredContact(payload); this.fetchSavedFilteredContact(payload, DEFAULT_PAGE);
}
if (this.hasAppliedFilters && this.$route.name === 'contacts_dashboard') {
this.fetchFilteredContacts(DEFAULT_PAGE);
} else { } else {
this.fetchContacts(DEFAULT_PAGE); this.fetchContacts(DEFAULT_PAGE);
} }
@ -222,6 +236,7 @@ export default {
return sortAttr; return sortAttr;
}, },
fetchContacts(page) { fetchContacts(page) {
if (this.isContactAndLabelDashboard) {
this.updatePageParam(page); this.updatePageParam(page);
let value = ''; let value = '';
if (this.searchQuery.charAt(0) === '+') { if (this.searchQuery.charAt(0) === '+') {
@ -242,15 +257,28 @@ export default {
...requestParams, ...requestParams,
}); });
} }
},
fetchSavedFilteredContact(payload) {
if (this.hasAppliedFilters) {
this.clearFilters();
} }
},
fetchSavedFilteredContact(payload, page) {
if (this.hasActiveSegments) {
this.updatePageParam(page);
this.$store.dispatch('contacts/filter', { this.$store.dispatch('contacts/filter', {
queryPayload: payload, queryPayload: payload,
page,
}); });
}
}, },
fetchFilteredContacts(page) {
if (this.hasAppliedFilters) {
const payload = this.segmentsQuery;
this.updatePageParam(page);
this.$store.dispatch('contacts/filter', {
queryPayload: payload,
page,
});
}
},
onInputSearch(event) { onInputSearch(event) {
const newQuery = event.target.value; const newQuery = event.target.value;
const refetchAllContacts = !!this.searchQuery && newQuery === ''; const refetchAllContacts = !!this.searchQuery && newQuery === '';
@ -267,7 +295,15 @@ export default {
}, },
onPageChange(page) { onPageChange(page) {
this.selectedContactId = ''; this.selectedContactId = '';
if (this.segmentsId !== 0) {
const payload = this.activeSegment.query;
this.fetchSavedFilteredContact(payload, page);
}
if (this.hasAppliedFilters) {
this.fetchFilteredContacts(page);
} else {
this.fetchContacts(page); this.fetchContacts(page);
}
}, },
openContactInfoPanel(contactId) { openContactInfoPanel(contactId) {
this.selectedContactId = contactId; this.selectedContactId = contactId;
@ -281,16 +317,16 @@ export default {
this.showCreateModal = !this.showCreateModal; this.showCreateModal = !this.showCreateModal;
}, },
onToggleSaveFilters() { onToggleSaveFilters() {
this.showAddCustomViewsModal = true; this.showAddSegmentsModal = true;
}, },
onCloseAddCustomViewsModal() { onCloseAddSegmentsModal() {
this.showAddCustomViewsModal = false; this.showAddSegmentsModal = false;
}, },
onToggleDeleteFilters() { onToggleDeleteFilters() {
this.showDeleteCustomViewsModal = true; this.showDeleteSegmentsModal = true;
}, },
onCloseDeleteCustomViewsModal() { onCloseDeleteSegmentsModal() {
this.showDeleteCustomViewsModal = false; this.showDeleteSegmentsModal = false;
}, },
onToggleImport() { onToggleImport() {
this.showImportModal = !this.showImportModal; this.showImportModal = !this.showImportModal;
@ -304,7 +340,7 @@ export default {
}, },
onApplyFilter(payload) { onApplyFilter(payload) {
this.closeContactInfoPanel(); this.closeContactInfoPanel();
this.customViewsQuery = { payload }; this.segmentsQuery = { payload };
this.$store.dispatch('contacts/filter', { this.$store.dispatch('contacts/filter', {
queryPayload: filterQueryGenerator(payload), queryPayload: filterQueryGenerator(payload),
}); });
@ -314,6 +350,22 @@ export default {
this.$store.dispatch('contacts/clearContactFilters'); this.$store.dispatch('contacts/clearContactFilters');
this.fetchContacts(this.pageParameter); this.fetchContacts(this.pageParameter);
}, },
openSavedItemInSegment() {
const lastItemInSegments = this.segments[this.segments.length - 1];
const lastItemId = lastItemInSegments.id;
this.$router.push({
name: 'contacts_segments_dashboard',
params: { id: lastItemId },
});
},
openLastItemAfterDeleteInSegment() {
if (this.segments.length > 0) {
this.openSavedItemInSegment();
} else {
this.$router.push({ name: 'contacts_dashboard' });
this.fetchContacts(DEFAULT_PAGE);
}
},
}, },
}; };
</script> </script>

22
app/javascript/dashboard/routes/dashboard/contacts/components/Header.vue
View file

@ -26,18 +26,16 @@
{{ $t('CONTACTS_PAGE.SEARCH_BUTTON') }} {{ $t('CONTACTS_PAGE.SEARCH_BUTTON') }}
</woot-button> </woot-button>
</div> </div>
<woot-button <woot-button
v-if="hasActiveCustomViews && !hasAppliedFilters" v-if="hasActiveSegments"
class="margin-right-small clear" class="margin-right-small clear"
color-scheme="alert" color-scheme="alert"
icon="delete" icon="delete"
@click="onToggleDeleteCustomViewsModal" @click="onToggleDeleteSegmentsModal"
> >
{{ $t('CONTACTS_PAGE.FILTER_CONTACTS_DELETE') }} {{ $t('CONTACTS_PAGE.FILTER_CONTACTS_DELETE') }}
</woot-button> </woot-button>
<div v-if="!hasActiveSegments" class="filters__button-wrap">
<div v-if="!hasActiveCustomViews" class="filters__button-wrap">
<div v-if="hasAppliedFilters" class="filters__applied-indicator" /> <div v-if="hasAppliedFilters" class="filters__applied-indicator" />
<woot-button <woot-button
class="margin-right-small clear" class="margin-right-small clear"
@ -51,12 +49,12 @@
</div> </div>
<woot-button <woot-button
v-if="hasAppliedFilters && !hasActiveCustomViews" v-if="hasAppliedFilters && !hasActiveSegments"
class="margin-right-small clear" class="margin-right-small clear"
color-scheme="alert" color-scheme="alert"
variant="clear" variant="clear"
icon="save" icon="save"
@click="onToggleCustomViewsModal" @click="onToggleSegmentsModal"
> >
{{ $t('CONTACTS_PAGE.FILTER_CONTACTS_SAVE') }} {{ $t('CONTACTS_PAGE.FILTER_CONTACTS_SAVE') }}
</woot-button> </woot-button>
@ -96,7 +94,7 @@ export default {
type: String, type: String,
default: '', default: '',
}, },
customViewsId: { segmentsId: {
type: [String, Number], type: [String, Number],
default: 0, default: 0,
}, },
@ -137,15 +135,15 @@ export default {
hasAppliedFilters() { hasAppliedFilters() {
return this.getAppliedContactFilters.length; return this.getAppliedContactFilters.length;
}, },
hasActiveCustomViews() { hasActiveSegments() {
return this.customViewsId !== 0; return this.segmentsId !== 0;
}, },
}, },
methods: { methods: {
onToggleCustomViewsModal() { onToggleSegmentsModal() {
this.$emit('on-toggle-save-filter'); this.$emit('on-toggle-save-filter');
}, },
onToggleDeleteCustomViewsModal() { onToggleDeleteSegmentsModal() {
this.$emit('on-toggle-delete-filter'); this.$emit('on-toggle-delete-filter');
}, },
}, },

4
app/javascript/dashboard/routes/dashboard/contacts/routes.js
View file

@ -12,11 +12,11 @@ export const routes = [
}, },
{ {
path: frontendURL('accounts/:accountId/contacts/custom_view/:id'), path: frontendURL('accounts/:accountId/contacts/custom_view/:id'),
name: 'contacts_through_custom_view', name: 'contacts_segments_dashboard',
roles: ['administrator', 'agent'], roles: ['administrator', 'agent'],
component: ContactsView, component: ContactsView,
props: route => { props: route => {
return { customViewsId: route.params.id }; return { segmentsId: route.params.id };
}, },
}, },
{ {

4
app/javascript/dashboard/routes/dashboard/conversation/ConversationView.vue
View file

@ -5,7 +5,7 @@
:label="label" :label="label"
:team-id="teamId" :team-id="teamId"
:conversation-type="conversationType" :conversation-type="conversationType"
:custom-views-id="customViewsId" :folders-id="foldersId"
@conversation-load="onConversationLoad" @conversation-load="onConversationLoad"
> >
<pop-over-search /> <pop-over-search />
@ -55,7 +55,7 @@ export default {
type: String, type: String,
default: '', default: '',
}, },
customViewsId: { foldersId: {
type: [String, Number], type: [String, Number],
default: 0, default: 0,
}, },

8
app/javascript/dashboard/routes/dashboard/conversation/conversation.routes.js
View file

@ -85,21 +85,21 @@ export default {
}, },
{ {
path: frontendURL('accounts/:accountId/custom_view/:id'), path: frontendURL('accounts/:accountId/custom_view/:id'),
name: 'custom_view_conversations', name: 'folder_conversations',
roles: ['administrator', 'agent'], roles: ['administrator', 'agent'],
component: ConversationView, component: ConversationView,
props: route => ({ customViewsId: route.params.id }), props: route => ({ foldersId: route.params.id }),
}, },
{ {
path: frontendURL( path: frontendURL(
'accounts/:accountId/custom_view/:id/conversations/:conversation_id' 'accounts/:accountId/custom_view/:id/conversations/:conversation_id'
), ),
name: 'conversations_through_custom_view', name: 'conversations_through_folders',
roles: ['administrator', 'agent'], roles: ['administrator', 'agent'],
component: ConversationView, component: ConversationView,
props: route => ({ props: route => ({
conversationId: route.params.conversation_id, conversationId: route.params.conversation_id,
customViewsId: route.params.id, foldersId: route.params.id,
}), }),
}, },
{ {

16
app/javascript/dashboard/routes/dashboard/customviews/AddCustomViews.vue
View file

@ -43,6 +43,10 @@ export default {
type: Object, type: Object,
default: () => {}, default: () => {},
}, },
openLastSavedItem: {
type: Function,
default: () => {},
},
}, },
data() { data() {
@ -80,17 +84,21 @@ export default {
filter_type: this.filterType, filter_type: this.filterType,
query: this.customViewsQuery, query: this.customViewsQuery,
}); });
this.alertMessage = this.$t( this.alertMessage =
'FILTER.CUSTOM_VIEWS.ADD.API.SUCCESS_MESSAGE' this.filterType === 0
); ? this.$t('FILTER.CUSTOM_VIEWS.ADD.API_FOLDERS.SUCCESS_MESSAGE')
: this.$t('FILTER.CUSTOM_VIEWS.ADD.API_SEGMENTS.SUCCESS_MESSAGE');
this.onClose(); this.onClose();
} catch (error) { } catch (error) {
const errorMessage = error?.message; const errorMessage = error?.message;
this.alertMessage = this.alertMessage =
errorMessage || this.$t('FILTER.CUSTOM_VIEWS.ADD.API.ERROR_MESSAGE'); errorMessage || this.filterType === 0
? this.$t('FILTER.CUSTOM_VIEWS.ADD.API_FOLDERS.ERROR_MESSAGE')
: this.$t('FILTER.CUSTOM_VIEWS.ADD.API_SEGMENTS.ERROR_MESSAGE');
} finally { } finally {
this.showAlert(this.alertMessage); this.showAlert(this.alertMessage);
} }
this.openLastSavedItem();
}, },
}, },
}; };

22
app/javascript/dashboard/routes/dashboard/customviews/DeleteCustomViews.vue
View file

@ -34,6 +34,10 @@ export default {
type: Number, type: Number,
default: 0, default: 0,
}, },
openLastItemAfterDelete: {
type: Function,
default: () => {},
},
}, },
computed: { computed: {
@ -75,20 +79,20 @@ export default {
await this.$store.dispatch('customViews/delete', { id, filterType }); await this.$store.dispatch('customViews/delete', { id, filterType });
this.closeDeletePopup(); this.closeDeletePopup();
this.showAlert( this.showAlert(
this.$t('FILTER.CUSTOM_VIEWS.DELETE.API.SUCCESS_MESSAGE') this.activeFilterType === 0
? this.$t('FILTER.CUSTOM_VIEWS.DELETE.API_FOLDERS.SUCCESS_MESSAGE')
: this.$t('FILTER.CUSTOM_VIEWS.DELETE.API_SEGMENTS.SUCCESS_MESSAGE')
); );
} catch (error) { } catch (error) {
const errorMessage = const errorMessage =
error?.response?.message || error?.response?.message || this.activeFilterType === 0
this.$t('FILTER.CUSTOM_VIEWS.DELETE.API.ERROR_MESSAGE'); ? this.$t('FILTER.CUSTOM_VIEWS.DELETE.API_FOLDERS.SUCCESS_MESSAGE')
: this.$t(
'FILTER.CUSTOM_VIEWS.DELETE.API_SEGMENTS.SUCCESS_MESSAGE'
);
this.showAlert(errorMessage); this.showAlert(errorMessage);
} }
if (this.isFolderSection) { this.openLastItemAfterDelete();
this.$router.push({ name: 'home' });
}
if (this.isSegmentSection) {
this.$router.push({ name: 'contacts_dashboard' });
}
}, },
closeDeletePopup() { closeDeletePopup() {
this.$emit('close'); this.$emit('close');