UBER-564: Add sound notification and settings (#3655)

models/notification/src/index.ts

@@ -41,6 +41,7 @@ import {
   EmailNotification,
   Notification,
   NotificationGroup,
+  NotificationPreferencesGroup,
   notificationId,
   NotificationObjectPresenter,
   NotificationPreview,
@@ -118,6 +119,13 @@ export class TNotificationGroup extends TDoc implements NotificationGroup {
   objectClass?: Ref<Class<Doc>>
 }
 
+@Model(notification.class.NotificationPreferencesGroup, core.class.Doc, DOMAIN_MODEL)
+export class TNotificationPreferencesGroup extends TDoc implements NotificationPreferencesGroup {
+  label!: IntlString
+  icon!: Asset
+  presenter!: AnyComponent
+}
+
 @Model(notification.class.NotificationProvider, core.class.Doc, DOMAIN_MODEL)
 export class TNotificationProvider extends TDoc implements NotificationProvider {
   label!: IntlString
@@ -178,6 +186,7 @@ export function createModel (builder: Builder): void {
     TNotificationProvider,
     TNotificationSetting,
     TNotificationGroup,
+    TNotificationPreferencesGroup,
     TClassCollaborators,
     TCollaborators,
     TDocUpdates,

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

@@ -14,7 +14,13 @@
 -->
 <script lang="ts">
   import { Ref } from '@hcengineering/core'
-  import type { NotificationGroup, NotificationSetting, NotificationType } from '@hcengineering/notification'
+  import { getResource } from '@hcengineering/platform'
+  import type {
+    NotificationGroup,
+    NotificationPreferencesGroup,
+    NotificationSetting,
+    NotificationType
+  } from '@hcengineering/notification'
   import { createQuery, getClient } from '@hcengineering/presentation'
   import { Label } from '@hcengineering/ui'
   import notification from '../plugin'
@@ -23,9 +29,10 @@
 
   const client = getClient()
   let groups: NotificationGroup[] = []
+  let preferencesGroups: NotificationPreferencesGroup[] = []
+
   client.findAll(notification.class.NotificationGroup, {}).then((res) => {
     groups = res
-    group = res[0]._id
   })
 
   let settings: Map<Ref<NotificationType>, NotificationSetting[]> = new Map()
@@ -33,7 +40,6 @@
   const query = createQuery()
 
   query.query(notification.class.NotificationSetting, {}, (res) => {
-    console.log('settings updated')
     settings = new Map()
     for (const value of res) {
       const arr = settings.get(value.type) ?? []
@@ -44,6 +50,19 @@
   })
 
   let group: Ref<NotificationGroup> | undefined = undefined
+  let currentPreferenceGroup: NotificationPreferencesGroup | undefined = undefined
+
+  client.findAll(notification.class.NotificationPreferencesGroup, {}).then((res) => {
+    preferencesGroups = res
+  })
+
+  $: if (!group && !currentPreferenceGroup) {
+    if (preferencesGroups.length > 0) {
+      currentPreferenceGroup = preferencesGroups[0]
+    } else if (groups.length > 0) {
+      group = groups[0]._id
+    }
+  }
 </script>
 
 <div class="flex h-full">
@@ -53,6 +72,20 @@
         <Label label={notification.string.Notifications} />
       </span>
     </div>
+    {#each preferencesGroups as preferenceGroup}
+      <GroupElement
+        icon={preferenceGroup.icon}
+        label={preferenceGroup.label}
+        selected={preferenceGroup === currentPreferenceGroup}
+        on:click={() => {
+          currentPreferenceGroup = preferenceGroup
+          group = undefined
+        }}
+      />
+    {/each}
+    {#if preferencesGroups.length > 0 && groups.length > 0}
+      <div class="antiNav-divider short line" />
+    {/if}
     {#each groups as gr}
       <GroupElement
         icon={gr.icon}
@@ -60,6 +93,7 @@
         selected={gr._id === group}
         on:click={() => {
           group = gr._id
+          currentPreferenceGroup = undefined
         }}
       />
     {/each}
@@ -69,5 +103,10 @@
     {#if group}
       <NotificationGroupSetting {group} {settings} />
     {/if}
+    {#if currentPreferenceGroup}
+      {#await getResource(currentPreferenceGroup.presenter) then presenter}
+        <svelte:component this={presenter} />
+      {/await}
+    {/if}
   </div>
 </div>

plugins/notification/src/index.ts

@@ -77,6 +77,15 @@ export interface NotificationGroup extends Doc {
   objectClass?: Ref<Class<Doc>>
 }
 
+/**
+ * @public
+ */
+export interface NotificationPreferencesGroup extends Doc {
+  label: IntlString
+  icon: Asset
+  presenter: AnyComponent
+}
+
 /**
  * @public
  */
@@ -218,7 +227,8 @@ const notification = plugin(notificationId, {
     NotificationProvider: '' as Ref<Class<NotificationProvider>>,
     NotificationSetting: '' as Ref<Class<NotificationSetting>>,
     DocUpdates: '' as Ref<Class<DocUpdates>>,
-    NotificationGroup: '' as Ref<Class<NotificationGroup>>
+    NotificationGroup: '' as Ref<Class<NotificationGroup>>,
+    NotificationPreferencesGroup: '' as Ref<Class<NotificationPreferencesGroup>>
   },
   ids: {
     NotificationSettings: '' as Ref<Doc>,