feat: Delete all/read notifications (#8844)

app/javascript/dashboard/routes/dashboard/inbox/components/InboxDisplayMenu.vue

@@ -115,18 +115,6 @@ export default {
           value: 'read',
           selected: true,
         },
-        {
-          id: 3,
-          name: this.$t('INBOX.DISPLAY_MENU.DISPLAY_OPTIONS.LABELS'),
-          value: 'labels',
-          selected: false,
-        },
-        {
-          id: 4,
-          name: this.$t('INBOX.DISPLAY_MENU.DISPLAY_OPTIONS.CONVERSATION_ID'),
-          value: 'conversationId',
-          selected: false,
-        },
       ],
       sortOptions: [
         {
@@ -137,10 +125,6 @@ export default {
           name: this.$t('INBOX.DISPLAY_MENU.SORT_OPTIONS.OLDEST'),
           key: 'oldest',
         },
-        {
-          name: this.$t('INBOX.DISPLAY_MENU.SORT_OPTIONS.PRIORITY'),
-          key: 'priority',
-        },
       ],
       activeSort: 'newest',
     };

app/javascript/dashboard/routes/dashboard/inbox/components/InboxListHeader.vue

@@ -49,6 +49,7 @@
         v-if="showInboxOptionMenu"
         v-on-clickaway="openInboxOptionsMenu"
         class="absolute top-9"
+        @option-click="onInboxOptionMenuClick"
       />
     </div>
   </div>
@@ -57,6 +58,7 @@
 <script>
 import { mixin as clickaway } from 'vue-clickaway';
 import InboxOptionMenu from './InboxOptionMenu.vue';
+import { INBOX_EVENTS } from 'dashboard/helper/AnalyticsHelper/events';
 import InboxDisplayMenu from './InboxDisplayMenu.vue';
 export default {
   components: {
@@ -71,12 +73,34 @@ export default {
     };
   },
   methods: {
+    markAllRead() {
+      this.$track(INBOX_EVENTS.MARK_ALL_NOTIFICATIONS_AS_READ);
+      this.$store.dispatch('notifications/readAll');
+    },
+    deleteAll() {
+      this.$store.dispatch('notifications/deleteAll');
+    },
+    deleteAllRead() {
+      this.$store.dispatch('notifications/deleteAllRead');
+    },
     openInboxDisplayMenu() {
       this.showInboxDisplayMenu = !this.showInboxDisplayMenu;
     },
     openInboxOptionsMenu() {
       this.showInboxOptionMenu = !this.showInboxOptionMenu;
     },
+    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();
+      }
+    },
   },
 };
 </script>

app/javascript/dashboard/routes/dashboard/inbox/components/InboxOptionMenu.vue

@@ -7,15 +7,7 @@
         v-for="item in menuItems"
         :key="item.key"
         :label="item.label"
-        @click="onMenuItemClick(item.key)"
-      />
-    </div>
-    <div class="flex flex-col">
-      <menu-item
-        v-for="item in commonMenuItems"
-        :key="item.key"
-        :label="item.label"
-        @click="onMenuItemClick(item.key)"
+        @click="onClick(item.key)"
       />
     </div>
   </div>
@@ -30,24 +22,6 @@ export default {
   data() {
     return {
       menuItems: [
-        {
-          key: 'mark_as_read',
-          label: this.$t('INBOX.MENU_ITEM.MARK_AS_READ'),
-        },
-        {
-          key: 'mark_as_unread',
-          label: this.$t('INBOX.MENU_ITEM.MARK_AS_UNREAD'),
-        },
-        {
-          key: 'snooze',
-          label: this.$t('INBOX.MENU_ITEM.SNOOZE'),
-        },
-        {
-          key: 'delete',
-          label: this.$t('INBOX.MENU_ITEM.DELETE'),
-        },
-      ],
-      commonMenuItems: [
         {
           key: 'mark_all_read',
           label: this.$t('INBOX.MENU_ITEM.MARK_ALL_READ'),
@@ -64,7 +38,7 @@ export default {
     };
   },
   methods: {
-    onMenuItemClick(key) {
+    onClick(key) {
       this.$emit('option-click', key);
     },
   },