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

feat: Adds the ability to delete a segment (#3836)

Browse source 
* feat: Adds the ability to delete a segment

* Minor fixes

* Small changes
This commit is contained in:
Sivin Varghese 2022-01-24 17:37:43 +05:30 committed by GitHub
parent e90d064648
commit b304f5a826
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
8 changed files with 77 additions and 18 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
app/javascript/dashboard/api/customViews.js
View file

@ -9,6 +9,10 @@ class CustomViewsAPI extends ApiClient {
getCustomViewsByFilterType(type) {
return axios.get(`${this.url}?filter_type=${type}`);
}
deleteCustomViews(id, type) {
return axios.delete(`${this.url}/${id}?filter_type=${type}`);
}
}
export default new CustomViewsAPI();

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

@ -52,8 +52,8 @@
"CONFIRM": {
"TITLE": "Confirm Deletion",
"MESSAGE": "Are you sure to delete the filter ",
"YES": "Yes, Delete ",
"NO": "No, Keep "
"YES": "Yes, Delete",
"NO": "No, Keep it"
}
},
"API": {

1
app/javascript/dashboard/i18n/locale/en/contact.json
View file

@ -180,6 +180,7 @@
"SEARCH_INPUT_PLACEHOLDER": "Search for contacts",
"FILTER_CONTACTS": "Filter",
"FILTER_CONTACTS_SAVE": "Save filter",
"FILTER_CONTACTS_DELETE": "Delete filter",
"LIST": {
"LOADING_MESSAGE": "Loading contacts...",
"404": "No contacts matches your search 🔍",

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

@ -12,6 +12,7 @@
:on-toggle-filter="onToggleFilters"
:header-title="pageTitle"
@on-toggle-save-filter="onToggleSaveFilters"
@on-toggle-delete-filter="onToggleDeleteFilters"
/>
<contacts-table
:contacts="records"
@ -28,12 +29,22 @@
:total-count="meta.count"
/>
</div>
<add-custom-views
v-if="showAddCustomViewsModal"
:custom-views-query="customViewsQuery"
:filter-type="filterType"
@close="onCloseAddCustomViewsModal"
/>
<delete-custom-views
v-if="showDeleteCustomViewsModal"
:show-delete-popup.sync="showDeleteCustomViewsModal"
:active-custom-view="activeCustomView"
:custom-views-id="customViewsId"
:active-filter-type="filterType"
@close="onCloseDeleteCustomViewsModal"
/>
<contact-info-panel
v-if="showContactViewPane"
:contact="selectedContact"
@ -72,6 +83,7 @@ import ContactsAdvancedFilters from './ContactsAdvancedFilters.vue';
import contactFilterItems from '../contactFilterItems';
import filterQueryGenerator from '../../../../helper/filterQueryGenerator';
import AddCustomViews from 'dashboard/routes/dashboard/customviews/AddCustomViews';
import DeleteCustomViews from 'dashboard/routes/dashboard/customviews/DeleteCustomViews';
const DEFAULT_PAGE = 1;
const FILTER_TYPE_CONTACT = 1;
@ -86,6 +98,7 @@ export default {
ImportContacts,
ContactsAdvancedFilters,
AddCustomViews,
DeleteCustomViews,
},
props: {
label: { type: String, default: '' },
@ -111,6 +124,7 @@ export default {
customViewsQuery: {},
filterType: FILTER_TYPE_CONTACT,
showAddCustomViewsModal: false,
showDeleteCustomViewsModal: false,
};
},
computed: {
@ -272,6 +286,12 @@ export default {
onCloseAddCustomViewsModal() {
this.showAddCustomViewsModal = false;
},
onToggleDeleteFilters() {
this.showDeleteCustomViewsModal = true;
},
onCloseDeleteCustomViewsModal() {
this.showDeleteCustomViewsModal = false;
},
onToggleImport() {
this.showImportModal = !this.showImportModal;
},

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

@ -26,6 +26,17 @@
{{ $t('CONTACTS_PAGE.SEARCH_BUTTON') }}
</woot-button>
</div>
<woot-button
v-if="hasActiveCustomViews && !hasAppliedFilters"
class="margin-right-small clear"
color-scheme="alert"
icon="delete"
@click="onToggleDeleteCustomViewsModal"
>
{{ $t('CONTACTS_PAGE.FILTER_CONTACTS_DELETE') }}
</woot-button>
<div v-if="!hasActiveCustomViews" class="filters__button-wrap">
<div v-if="hasAppliedFilters" class="filters__applied-indicator" />
<woot-button
@ -38,6 +49,7 @@
{{ $t('CONTACTS_PAGE.FILTER_CONTACTS') }}
</woot-button>
</div>
<woot-button
v-if="hasAppliedFilters && !hasActiveCustomViews"
class="margin-right-small clear"
@ -133,6 +145,9 @@ export default {
onToggleCustomViewsModal() {
this.$emit('on-toggle-save-filter');
},
onToggleDeleteCustomViewsModal() {
this.$emit('on-toggle-delete-filter');
},
},
};
</script>

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

@ -30,31 +30,49 @@ export default {
type: [String, Number],
default: 0,
},
activeFilterType: {
type: Number,
default: 0,
},
},
computed: {
activeCustomViews() {
if (this.activeFilterType === 0) {
return 'conversation';
}
if (this.activeFilterType === 1) {
return 'contact';
}
return '';
},
deleteMessage() {
return `${this.$t(
'FILTER.CUSTOM_VIEWS.DELETE.MODAL.CONFIRM.MESSAGE'
)} ${this.activeCustomView && this.activeCustomView.name} ?`;
},
deleteConfirmText() {
return `${this.$t('FILTER.CUSTOM_VIEWS.DELETE.MODAL.CONFIRM.YES')} ${this
.activeCustomView && this.activeCustomView.name}`;
return `${this.$t('FILTER.CUSTOM_VIEWS.DELETE.MODAL.CONFIRM.YES')}`;
},
deleteRejectText() {
return `${this.$t('FILTER.CUSTOM_VIEWS.DELETE.MODAL.CONFIRM.NO')} ${this
.activeCustomView && this.activeCustomView.name}`;
return `${this.$t('FILTER.CUSTOM_VIEWS.DELETE.MODAL.CONFIRM.NO')}`;
},
isFolderSection() {
return this.activeFilterType === 0 && this.$route.name !== 'home';
},
isSegmentSection() {
return (
this.activeFilterType === 1 && this.$route.name !== 'contacts_dashboard'
);
},
},
methods: {
async deleteSavedCustomViews() {
try {
await this.$store.dispatch(
'customViews/delete',
Number(this.customViewsId)
);
const id = Number(this.customViewsId);
const filterType = this.activeCustomViews;
await this.$store.dispatch('customViews/delete', { id, filterType });
this.closeDeletePopup();
this.showAlert(
this.$t('FILTER.CUSTOM_VIEWS.DELETE.API.SUCCESS_MESSAGE')
@ -65,9 +83,12 @@ export default {
this.$t('FILTER.CUSTOM_VIEWS.DELETE.API.ERROR_MESSAGE');
this.showAlert(errorMessage);
}
if (this.$route.name !== 'home') {
if (this.isFolderSection) {
this.$router.push({ name: 'home' });
}
if (this.isSegmentSection) {
this.$router.push({ name: 'contacts_dashboard' });
}
},
closeDeletePopup() {
this.$emit('close');

4
app/javascript/dashboard/store/modules/customViews.js
View file

@ -49,10 +49,10 @@ export const actions = {
commit(types.SET_CUSTOM_VIEW_UI_FLAG, { isCreating: false });
}
},
delete: async ({ commit }, id) => {
delete: async ({ commit }, { id, filterType }) => {
commit(types.SET_CUSTOM_VIEW_UI_FLAG, { isDeleting: true });
try {
await CustomViewsAPI.delete(id);
await CustomViewsAPI.deleteCustomViews(id, filterType);
commit(types.DELETE_CUSTOM_VIEW, id);
} catch (error) {
throw new Error(error);

8
app/javascript/dashboard/store/modules/specs/customViews/actions.spec.js
View file

@ -51,18 +51,16 @@ describe('#actions', () => {
describe('#delete', () => {
it('sends correct actions if API is success', async () => {
axios.delete.mockResolvedValue({ data: customViewList[0] });
await actions.delete({ commit }, customViewList[0].id);
await actions.delete({ commit }, { id: 1, filterType: 'contact' });
expect(commit.mock.calls).toEqual([
[types.default.SET_CUSTOM_VIEW_UI_FLAG, { isDeleting: true }],
[types.default.DELETE_CUSTOM_VIEW, customViewList[0].id],
[types.default.DELETE_CUSTOM_VIEW, 1],
[types.default.SET_CUSTOM_VIEW_UI_FLAG, { isDeleting: false }],
]);
});
it('sends correct actions if API is error', async () => {
axios.delete.mockRejectedValue({ message: 'Incorrect header' });
await expect(
actions.delete({ commit }, customViewList[0].id)
).rejects.toThrow(Error);
await expect(actions.delete({ commit }, 1)).rejects.toThrow(Error);
expect(commit.mock.calls).toEqual([
[types.default.SET_CUSTOM_VIEW_UI_FLAG, { isDeleting: true }],
[types.default.SET_CUSTOM_VIEW_UI_FLAG, { isDeleting: false }],