Add archive all button in inbox (#4870)

Signed-off-by: Kristina Fefelova <kristin.fefelova@gmail.com>

plugins/notification-assets/lang/en.json

@@ -35,6 +35,7 @@
     "Pinned": "Pinned",
     "Message": "Message",
     "FlatList": "Flat list",
-    "GroupedList": "Grouped list"
+    "GroupedList": "Grouped list",
+    "ArchiveAll": "Archive all"
   }
 }

plugins/notification-assets/lang/ru.json

@@ -35,6 +35,7 @@
     "Pinned": "Закреплено",
     "Message": "Сообщение",
     "FlatList": "Flat list",
-    "GroupedList": "Grouped list"
+    "GroupedList": "Grouped list",
+    "ArchiveAll": "Архивировать все"
   }
 }

plugins/notification-resources/src/components/Filter.svelte

@@ -13,7 +13,7 @@
 // limitations under the License.
 -->
 <script lang="ts">
-  import { Button, IconFilter, SelectPopup, eventToHTMLElement, showPopup } from '@hcengineering/ui'
+  import { IconFilter, SelectPopup, eventToHTMLElement, showPopup, ButtonIcon } from '@hcengineering/ui'
   import notification from '../plugin'
 
   export let filter: 'all' | 'read' | 'unread' = 'all'
@@ -45,4 +45,4 @@
   }
 </script>
 
-<Button icon={IconFilter} on:click={click} />
+<ButtonIcon icon={IconFilter} size="small" on:click={click} />

plugins/notification-resources/src/components/inbox/Inbox.svelte

@@ -31,7 +31,8 @@
     Separator,
     TabItem,
     TabList,
-    Location
+    Location,
+    ModernButton
   } from '@hcengineering/ui'
   import chunter, { ThreadMessage } from '@hcengineering/chunter'
   import { Ref, WithLookup } from '@hcengineering/core'
@@ -255,6 +256,10 @@
   onMount(() => {
     loadSavedMessages()
   })
+
+  function archiveAll (): void {
+    void inboxClient.deleteAllNotifications()
+  }
 </script>
 
 <ActionContext
@@ -283,6 +288,12 @@
             />
           </div>
           <div class="flex flex-gap-2">
+            <ModernButton
+              label={notification.string.ArchiveAll}
+              icon={view.icon.Archive}
+              size="small"
+              on:click={archiveAll}
+            />
             <Filter bind:filter />
           </div>
         </div>

plugins/notification-resources/src/inboxNotificationsClient.ts

@@ -20,7 +20,8 @@ import {
   type Doc,
   type Ref,
   type TxOperations,
-  type WithLookup
+  type WithLookup,
+  generateId
 } from '@hcengineering/core'
 import notification, {
   type ActivityInboxNotification,
@@ -29,7 +30,7 @@ import notification, {
   type InboxNotification,
   type InboxNotificationsClient
 } from '@hcengineering/notification'
-import { createQuery } from '@hcengineering/presentation'
+import { createQuery, getClient } from '@hcengineering/presentation'
 import { derived, get, writable } from 'svelte/store'
 
 export const inboxMessagesStore = writable<ActivityMessage[]>([])
@@ -250,4 +251,19 @@ export class InboxNotificationsClientImpl implements InboxNotificationsClient {
       await client.remove(notification)
     }
   }
+
+  async deleteAllNotifications (): Promise<void> {
+    const doneOp = await getClient().measure('deleteAllNotifications')
+    const ops = getClient().apply(generateId())
+
+    try {
+      const inboxNotifications = get(this.inboxNotifications) ?? []
+      for (const notification of inboxNotifications) {
+        await ops.remove(notification)
+      }
+    } finally {
+      await ops.commit()
+      await doneOp()
+    }
+  }
 }

plugins/notification/src/index.ts

@@ -282,6 +282,7 @@ export interface InboxNotificationsClient {
   readNotifications: (client: TxOperations, ids: Array<Ref<InboxNotification>>) => Promise<void>
   unreadNotifications: (client: TxOperations, ids: Array<Ref<InboxNotification>>) => Promise<void>
   deleteNotifications: (client: TxOperations, ids: Array<Ref<InboxNotification>>) => Promise<void>
+  deleteAllNotifications: () => Promise<void>
 }
 
 /**
@@ -388,7 +389,8 @@ const notification = plugin(notificationId, {
     Pinned: '' as IntlString,
     FlatList: '' as IntlString,
     GroupedList: '' as IntlString,
-    All: '' as IntlString
+    All: '' as IntlString,
+    ArchiveAll: '' as IntlString
   },
   function: {
     GetInboxNotificationsClient: '' as Resource<InboxNotificationsClientFactory>,