feat: Adds the ability to delete the saved custom views (#3780)

* feat: Adds the ability to delete the saved custom views

* Removed unused tag

* Review fixes

* Review fixes

* Update DeleteCustomViews.vue

app/javascript/dashboard/components/ChatList.vue

@@ -32,8 +32,20 @@
             @click="resetAndFetchData"
           />
         </div>
+        <div v-if="hasActiveCustomViews">
+          <woot-button
+            v-tooltip.top-end="$t('FILTER.CUSTOM_VIEWS.DELETE.DELETE_BUTTON')"
+            size="tiny"
+            variant="smooth"
+            color-scheme="alert"
+            icon="delete"
+            class="delete-custom-view__button"
+            @click="onClickOpenDeleteCustomViewsModal"
+          />
+        </div>
+
         <woot-button
-          v-if="!hasActiveCustomViews"
+          v-else
           v-tooltip.top-end="$t('FILTER.TOOLTIP_LABEL')"
           variant="clear"
           color-scheme="secondary"
@@ -52,6 +64,14 @@
       @close="onCloseAddCustomViewsModal"
     />
 
+    <delete-custom-views
+      v-if="showDeleteCustomViewsModal"
+      :show-delete-popup.sync="showDeleteCustomViewsModal"
+      :active-custom-view="activeCustomView"
+      :custom-views-id="customViewsId"
+      @close="onCloseDeleteCustomViewsModal"
+    />
+
     <chat-type-tabs
       v-if="!hasAppliedFiltersOrActiveCustomViews"
       :items="assigneeTabItems"
@@ -129,6 +149,7 @@ import wootConstants from '../constants';
 import advancedFilterTypes from './widgets/conversation/advancedFilterItems';
 import filterQueryGenerator from '../helper/filterQueryGenerator.js';
 import AddCustomViews from 'dashboard/routes/dashboard/customviews/AddCustomViews';
+import DeleteCustomViews from 'dashboard/routes/dashboard/customviews/DeleteCustomViews.vue';
 
 import {
   hasPressedAltAndJKey,
@@ -142,6 +163,7 @@ export default {
     ConversationCard,
     ChatFilter,
     ConversationAdvancedFilter,
+    DeleteCustomViews,
   },
   mixins: [timeMixin, conversationMixin, eventListenerMixins],
   props: {
@@ -177,6 +199,7 @@ export default {
       })),
       customViewsQuery: {},
       showAddCustomViewsModal: false,
+      showDeleteCustomViewsModal: false,
     };
   },
   computed: {
@@ -197,14 +220,14 @@ export default {
       return this.appliedFilters.length;
     },
     hasActiveCustomViews() {
-      return this.activeCustomView.length > 0 && this.customViewsId !== 0;
+      return this.activeCustomView && this.customViewsId !== 0;
     },
     hasAppliedFiltersOrActiveCustomViews() {
       return this.hasAppliedFilters || this.hasActiveCustomViews;
     },
     savedCustomViewsValue() {
       if (this.hasActiveCustomViews) {
-        const payload = this.activeCustomView[0].query;
+        const payload = this.activeCustomView.query;
         this.fetchSavedFilteredConversations(payload);
       }
       return {};
@@ -275,7 +298,7 @@ export default {
         return this.$t('CHAT_LIST.MENTION_HEADING');
       }
       if (this.hasActiveCustomViews) {
-        return this.activeCustomView[0].name;
+        return this.activeCustomView.name;
       }
       return this.$t('CHAT_LIST.TAB_HEADING');
     },
@@ -298,11 +321,13 @@ export default {
     },
     activeCustomView() {
       if (this.customViewsId) {
-        return this.customViews.filter(
+        const activeView = this.customViews.filter(
           view => view.id === Number(this.customViewsId)
         );
+        const [firstValue] = activeView;
+        return firstValue;
       }
-      return [];
+      return undefined;
     },
     activeTeam() {
       if (this.teamId) {
@@ -352,6 +377,12 @@ export default {
     onCloseAddCustomViewsModal() {
       this.showAddCustomViewsModal = false;
     },
+    onClickOpenDeleteCustomViewsModal() {
+      this.showDeleteCustomViewsModal = true;
+    },
+    onCloseDeleteCustomViewsModal() {
+      this.showDeleteCustomViewsModal = false;
+    },
     onToggleAdvanceFiltersModal() {
       this.showAdvancedFilters = !this.showAdvancedFilters;
     },
@@ -404,7 +435,7 @@ export default {
       this.$store.dispatch('emptyAllConversations');
       this.$store.dispatch('clearConversationFilters');
       if (this.hasActiveCustomViews) {
-        const payload = this.activeCustomView[0].query;
+        const payload = this.activeCustomView.query;
         this.fetchSavedFilteredConversations(payload);
       }
       if (this.customViewsId) {
@@ -422,7 +453,7 @@ export default {
         this.fetchConversations();
       }
       if (this.hasActiveCustomViews) {
-        const payload = this.activeCustomView[0].query;
+        const payload = this.activeCustomView.query;
         this.fetchSavedFilteredConversations(payload);
       } else {
         this.fetchFilteredConversations(this.appliedFilters);
@@ -504,4 +535,8 @@ export default {
   padding: 0 0 var(--space-slab) 0 !important;
   border-bottom: 1px solid var(--color-border);
 }
+
+.delete-custom-view__button {
+  margin-right: var(--space-normal);
+}
 </style>

app/javascript/dashboard/i18n/locale/en/advancedFilters.json

@@ -45,6 +45,21 @@
           "SUCCESS_MESSAGE": "Custom view created successfully",
           "ERROR_MESSAGE": "Error while creating custom view"
         }
+      },
+      "DELETE": {
+        "DELETE_BUTTON": "Delete filter",
+        "MODAL": {
+          "CONFIRM": {
+            "TITLE": "Confirm Deletion",
+            "MESSAGE": "Are you sure to delete the filter ",
+            "YES": "Yes, Delete ",
+            "NO": "No, Keep "
+          }
+        },
+        "API": {
+          "SUCCESS_MESSAGE": "Custom view deleted successfully",
+          "ERROR_MESSAGE": "Error while deleting custom view"
+        }
       }
     }
   }

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

@@ -0,0 +1,77 @@
+<template>
+  <div>
+    <woot-delete-modal
+      v-if="showDeletePopup"
+      :show.sync="showDeletePopup"
+      :on-close="closeDeletePopup"
+      :on-confirm="deleteSavedCustomViews"
+      :title="$t('FILTER.CUSTOM_VIEWS.DELETE.MODAL.CONFIRM.TITLE')"
+      :message="deleteMessage"
+      :confirm-text="deleteConfirmText"
+      :reject-text="deleteRejectText"
+    />
+  </div>
+</template>
+
+<script>
+import alertMixin from 'shared/mixins/alertMixin';
+export default {
+  mixins: [alertMixin],
+  props: {
+    showDeletePopup: {
+      type: Boolean,
+      default: false,
+    },
+    activeCustomView: {
+      type: Object,
+      default: () => {},
+    },
+    customViewsId: {
+      type: [String, Number],
+      default: 0,
+    },
+  },
+
+  computed: {
+    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}`;
+    },
+    deleteRejectText() {
+      return `${this.$t('FILTER.CUSTOM_VIEWS.DELETE.MODAL.CONFIRM.NO')} ${this
+        .activeCustomView && this.activeCustomView.name}`;
+    },
+  },
+
+  methods: {
+    async deleteSavedCustomViews() {
+      try {
+        await this.$store.dispatch(
+          'customViews/delete',
+          Number(this.customViewsId)
+        );
+        this.closeDeletePopup();
+        this.showAlert(
+          this.$t('FILTER.CUSTOM_VIEWS.DELETE.API.SUCCESS_MESSAGE')
+        );
+      } catch (error) {
+        const errorMessage =
+          error?.response?.message ||
+          this.$t('FILTER.CUSTOM_VIEWS.DELETE.API.ERROR_MESSAGE');
+        this.showAlert(errorMessage);
+      }
+      if (this.$route.name !== 'home') {
+        this.$router.push({ name: 'home' });
+      }
+    },
+    closeDeletePopup() {
+      this.$emit('close');
+    },
+  },
+};
+</script>