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

* feat: Adds the ability to delete a segment

* Minor fixes

* Small changes

app/javascript/dashboard/routes/dashboard/contacts/components/ContactsView.vue

@@ -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;
     },

app/javascript/dashboard/routes/dashboard/contacts/components/Header.vue

@@ -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>

app/javascript/dashboard/routes/dashboard/customviews/DeleteCustomViews.vue

@@ -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');