TSK-1263 Inbox configurator (#3067)

Signed-off-by: Denis Bykhov <bykhov.denis@gmail.com>

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

@@ -14,13 +14,13 @@
 -->
 <script lang="ts">
   import contact, { EmployeeAccount } from '@hcengineering/contact'
-  import { Doc, getCurrentAccount, Ref, Space } from '@hcengineering/core'
+  import { Doc, getCurrentAccount, Ref } from '@hcengineering/core'
   import {
-    Notification as PlatformNotification,
     NotificationProvider,
     NotificationSetting,
     NotificationStatus,
-    NotificationType
+    NotificationType,
+    Notification as PlatformNotification
   } from '@hcengineering/notification'
   import { createQuery, getClient } from '@hcengineering/presentation'
   import { getCurrentLocation, showPanel } from '@hcengineering/ui'
@@ -31,8 +31,6 @@
   const query = createQuery()
   const settingQuery = createQuery()
   const providersQuery = createQuery()
-  const accountId = getCurrentAccount()._id
-  const space = accountId as string as Ref<Space>
   const notificationClient = NotificationClientImpl.getClient()
   const lastViews = notificationClient.getLastViews()
   const lastViewId: Ref<Doc> = ((getCurrentAccount() as EmployeeAccount).employee + 'notification') as Ref<Doc>
@@ -46,27 +44,21 @@
   $: enabled &&
     providersQuery.query(
       notification.class.NotificationProvider,
-      { _id: notification.ids.BrowserNotification },
+      { _id: notification.providers.BrowserNotification },
       (res) => {
         provider = res[0]
       }
     )
 
   $: enabled &&
-    settingQuery.query(
-      notification.class.NotificationSetting,
-      {
-        space
-      },
-      (res) => {
-        settings = new Map(
-          res.map((setting) => {
-            return [setting.type, setting]
-          })
-        )
-        settingsReceived = true
-      }
-    )
+    settingQuery.query(notification.class.NotificationSetting, {}, (res) => {
+      settings = new Map(
+        res.map((setting) => {
+          return [setting.type, setting]
+        })
+      )
+      settingsReceived = true
+    })
 
   const alreadyShown = new Set<Ref<PlatformNotification>>()
 
@@ -99,7 +91,7 @@
     const text = notification.text.replace(/<[^>]*>/g, '').trim()
     if (text === '') return
     const setting = settings.get(notification.type)
-    const enabled = setting?.enabled ?? provider?.default
+    const enabled = setting?.enabled
     if (!enabled) return
     if ((setting?.modifiedOn ?? notification.modifiedOn) < 0) return
 

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

@@ -0,0 +1,60 @@
+<!--
+// Copyright © 2023 Hardcore Engineering Inc.
+// 
+// Licensed under the Eclipse Public License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License. You may
+// obtain a copy of the License at https://www.eclipse.org/legal/epl-2.0
+// 
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// 
+// See the License for the specific language governing permissions and
+// limitations under the License.
+-->
+<script lang="ts">
+  import type { Asset, IntlString } from '@hcengineering/platform'
+  import { Icon, Label } from '@hcengineering/ui'
+  import { createEventDispatcher } from 'svelte'
+
+  export let icon: Asset | undefined = undefined
+  export let label: IntlString | undefined = undefined
+  export let selected: boolean = false
+  export let expandable = false
+
+  const dispatch = createEventDispatcher()
+</script>
+
+<!-- svelte-ignore a11y-click-events-have-key-events -->
+<div
+  class="antiNav-element"
+  class:selected
+  class:expandable
+  on:click|stopPropagation={() => {
+    dispatch('click')
+  }}
+>
+  <div class="an-element__icon">
+    {#if icon}
+      <Icon {icon} size={'small'} />
+    {/if}
+  </div>
+  <span class="an-element__label title">
+    {#if label}<Label {label} />{/if}
+  </span>
+</div>
+
+<style lang="scss">
+  .expandable {
+    position: relative;
+    &::after {
+      content: '▶';
+      position: absolute;
+      top: 50%;
+      right: 0.5rem;
+      font-size: 0.375rem;
+      color: var(--dark-color);
+      transform: translateY(-50%);
+    }
+  }
+</style>

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

@@ -0,0 +1,138 @@
+<!--
+// Copyright © 2023 Hardcore Engineering Inc.
+// 
+// Licensed under the Eclipse Public License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License. You may
+// obtain a copy of the License at https://www.eclipse.org/legal/epl-2.0
+// 
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// 
+// See the License for the specific language governing permissions and
+// limitations under the License.
+-->
+<script lang="ts">
+  import { IdMap, Ref, toIdMap } from '@hcengineering/core'
+  import type {
+    NotificationGroup,
+    NotificationProvider,
+    NotificationSetting,
+    NotificationType
+  } from '@hcengineering/notification'
+  import { IntlString } from '@hcengineering/platform'
+  import { getClient } from '@hcengineering/presentation'
+  import { Grid, Label, ToggleWithLabel } from '@hcengineering/ui'
+  import notification from '../plugin'
+
+  export let group: Ref<NotificationGroup>
+  export let settings: Map<Ref<NotificationType>, NotificationSetting[]>
+
+  const client = getClient()
+  let types: NotificationType[] = []
+  let typesMap: IdMap<NotificationType> = new Map()
+  let providers: NotificationProvider[] = []
+  let providersMap: IdMap<NotificationProvider> = new Map()
+
+  $: load(group)
+
+  async function load (group: Ref<NotificationGroup>) {
+    types = await client.findAll(notification.class.NotificationType, { group })
+    typesMap = toIdMap(types)
+    providers = await client.findAll(notification.class.NotificationProvider, {})
+    providersMap = toIdMap(providers)
+  }
+
+  $: column = providers.length + 1
+
+  function getStatus (
+    settings: Map<Ref<NotificationType>, NotificationSetting[]>,
+    type: Ref<NotificationType>,
+    provider: Ref<NotificationProvider>
+  ): boolean {
+    const setting = getSetting(settings, type, provider)
+    if (setting !== undefined) return setting.enabled
+    const prov = providersMap.get(provider)
+    if (prov === undefined) return false
+    const typeValue = typesMap.get(type)
+    if (typeValue === undefined) return false
+    return typeValue?.providers?.[provider] ?? false
+  }
+
+  function createHandler (type: Ref<NotificationType>, provider: Ref<NotificationProvider>): (evt: any) => void {
+    return (evt: any) => change(type, provider, evt.detail)
+  }
+
+  async function change (
+    type: Ref<NotificationType>,
+    provider: Ref<NotificationProvider>,
+    value: boolean
+  ): Promise<void> {
+    const current = getSetting(settings, type, provider)
+    if (current === undefined) {
+      await client.createDoc(notification.class.NotificationSetting, notification.space.Notifications, {
+        attachedTo: provider,
+        type,
+        enabled: value
+      })
+    } else {
+      await client.update(current, {
+        enabled: value
+      })
+    }
+  }
+
+  function getSetting (
+    map: Map<Ref<NotificationType>, NotificationSetting[]>,
+    type: Ref<NotificationType>,
+    provider: Ref<NotificationProvider>
+  ): NotificationSetting | undefined {
+    const typeMap = map.get(type)
+    if (typeMap === undefined) return
+    return typeMap.find((p) => p.attachedTo === provider)
+  }
+
+  function getLabel (type: NotificationType): IntlString {
+    if (type.attachedToClass !== undefined) {
+      return notification.string.AddedRemoved
+    }
+    return notification.string.Change
+  }
+</script>
+
+<div class="flex-grow container">
+  <Grid {column} columnGap={5} rowGap={1.5}>
+    {#each types as type}
+      <div class="flex">
+        {#if type.generated}
+          <Label label={getLabel(type)} />:
+        {/if}
+        <Label label={type.label} />
+      </div>
+      {#each providers as provider (provider._id)}
+        {#if type.providers[provider._id] !== undefined}
+          <div class="toggle">
+            <ToggleWithLabel
+              label={provider.label}
+              on={getStatus(settings, type._id, provider._id)}
+              on:change={createHandler(type._id, provider._id)}
+            />
+          </div>
+        {:else}
+          <div />
+        {/if}
+      {/each}
+    {/each}
+  </Grid>
+</div>
+
+<style lang="scss">
+  .container {
+    padding: 3rem;
+    width: fit-content;
+  }
+
+  .toggle {
+    width: fit-content;
+  }
+</style>

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

@@ -1,5 +1,5 @@
 <!--
-// Copyright © 2020, 2021 Anticrm Platform Contributors.
+// Copyright © 2023 Hardcore Engineering Inc.
 // 
 // Licensed under the Eclipse Public License, Version 2.0 (the "License");
 // you may not use this file except in compliance with the License. You may
@@ -13,166 +13,61 @@
 // limitations under the License.
 -->
 <script lang="ts">
-  import { getCurrentAccount, Ref, Space, TxProcessor } from '@hcengineering/core'
-  import type { NotificationProvider, NotificationSetting, NotificationType } from '@hcengineering/notification'
-  import presentation, { createQuery, getClient } from '@hcengineering/presentation'
-  import { Button, Grid, Icon, Label, ToggleWithLabel } from '@hcengineering/ui'
+  import { Ref } from '@hcengineering/core'
+  import type { NotificationGroup, NotificationSetting, NotificationType } from '@hcengineering/notification'
+  import { createQuery, getClient } from '@hcengineering/presentation'
+  import { Label } from '@hcengineering/ui'
   import notification from '../plugin'
+  import GroupElement from './GroupElement.svelte'
+  import NotificationGroupSetting from './NotificationGroupSetting.svelte'
 
-  const accountId = getCurrentAccount()._id
-  const typeQuery = createQuery()
-  const providersQuery = createQuery()
-  const settingsQuery = createQuery()
   const client = getClient()
-  const space = accountId as string as Ref<Space>
-
-  let disabled = true
-
-  let types: NotificationType[] = []
-  let providers: NotificationProvider[] = []
-  let settings: Map<Ref<NotificationType>, Map<Ref<NotificationProvider>, NotificationSetting>> = new Map<
-    Ref<NotificationType>,
-    Map<Ref<NotificationProvider>, NotificationSetting>
-  >()
-  let oldSettings: Map<Ref<NotificationType>, Map<Ref<NotificationProvider>, NotificationSetting>> = new Map<
-    Ref<NotificationType>,
-    Map<Ref<NotificationProvider>, NotificationSetting>
-  >()
-
-  typeQuery.query(notification.class.NotificationType, { hidden: false }, (res) => (types = res))
-  providersQuery.query(notification.class.NotificationProvider, {}, (res) => (providers = res))
-  settingsQuery.query(notification.class.NotificationSetting, { space }, (res) => {
-    settings = convertToMap(res)
-    oldSettings = convertToMap(client.getHierarchy().clone(res))
+  let groups: NotificationGroup[] = []
+  client.findAll(notification.class.NotificationGroup, {}).then((res) => {
+    groups = res
+    group = res[0]._id
   })
 
-  function convertToMap (
-    settings: NotificationSetting[]
-  ): Map<Ref<NotificationType>, Map<Ref<NotificationProvider>, NotificationSetting>> {
-    const result = new Map<Ref<NotificationType>, Map<Ref<NotificationProvider>, NotificationSetting>>()
-    for (const setting of settings) {
-      setSetting(result, setting)
+  let settings: Map<Ref<NotificationType>, NotificationSetting[]> = new Map()
+
+  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) ?? []
+      arr.push(value)
+      settings.set(value.type, arr)
     }
-    return result
-  }
+    settings = settings
+  })
 
-  function change (type: Ref<NotificationType>, provider: Ref<NotificationProvider>, value: boolean): void {
-    const current = getSetting(settings, type, provider)
-    if (current === undefined) {
-      const tx = client.txFactory.createTxCreateDoc(notification.class.NotificationSetting, space, {
-        provider,
-        type,
-        enabled: value
-      })
-      const setting = TxProcessor.createDoc2Doc(tx)
-      setSetting(settings, setting)
-    } else {
-      current.enabled = value
-    }
-    disabled = false
-  }
-
-  function getSetting (
-    map: Map<Ref<NotificationType>, Map<Ref<NotificationProvider>, NotificationSetting>>,
-    type: Ref<NotificationType>,
-    provider: Ref<NotificationProvider>
-  ): NotificationSetting | undefined {
-    const typeMap = map.get(type)
-    if (typeMap === undefined) return
-    return typeMap.get(provider)
-  }
-
-  function setSetting (
-    result: Map<Ref<NotificationType>, Map<Ref<NotificationProvider>, NotificationSetting>>,
-    setting: NotificationSetting
-  ): void {
-    let typeMap = result.get(setting.type)
-    if (typeMap === undefined) {
-      typeMap = new Map<Ref<NotificationProvider>, NotificationSetting>()
-      result.set(setting.type, typeMap)
-    }
-    typeMap.set(setting.provider, setting)
-  }
-
-  async function save (): Promise<void> {
-    disabled = true
-    const promises: Promise<any>[] = []
-    for (const type of settings.values()) {
-      for (const setting of type.values()) {
-        const old = getSetting(oldSettings, setting.type, setting.provider)
-        if (old === undefined) {
-          promises.push(client.createDoc(setting._class, setting.space, setting))
-        } else if (old.enabled !== setting.enabled) {
-          promises.push(
-            client.updateDoc(old._class, old.space, old._id, {
-              enabled: setting.enabled
-            })
-          )
-        }
-      }
-    }
-    try {
-      await Promise.all(promises)
-    } catch (e) {
-      console.log(e)
-    }
-  }
-
-  $: column = providers.length + 1
-
-  function getStatus (
-    map: Map<Ref<NotificationType>, Map<Ref<NotificationProvider>, NotificationSetting>>,
-    type: Ref<NotificationType>,
-    provider: Ref<NotificationProvider>
-  ): boolean {
-    const setting = getSetting(map, type, provider)
-    if (setting !== undefined) return setting.enabled
-    const prov = providers.find((p) => p._id === provider)
-    if (prov === undefined) return false
-    return prov.default
-  }
-  const createHandler = (type: Ref<NotificationType>, provider: Ref<NotificationProvider>): ((evt: any) => void) => {
-    return (evt: any) => change(type, provider, evt.detail)
-  }
+  let group: Ref<NotificationGroup> | undefined = undefined
 </script>
 
-<div class="antiComponent">
-  <div class="ac-header short divide">
-    <div class="ac-header__icon"><Icon icon={notification.icon.Notifications} size={'medium'} /></div>
-    <div class="ac-header__title"><Label label={notification.string.Notifications} /></div>
-  </div>
-  <div class="flex-row-stretch flex-grow container">
-    <div class="flex-col flex-grow">
-      <div class="flex-grow">
-        <Grid {column} columnGap={5} rowGap={1.5}>
-          {#each types as type (type._id)}
-            <Label label={type.label} />
-            {#each providers as provider (provider._id)}
-              <ToggleWithLabel
-                label={provider.label}
-                on={getStatus(settings, type._id, provider._id)}
-                on:change={createHandler(type._id, provider._id)}
-              />
-            {/each}
-          {/each}
-        </Grid>
-      </div>
-      <div class="flex-row-reverse">
-        <Button
-          label={presentation.string.Save}
-          {disabled}
-          kind={'primary'}
-          on:click={() => {
-            save()
-          }}
-        />
-      </div>
+<div class="flex h-full">
+  <div class="antiPanel-navigator filled indent">
+    <div class="antiNav-header">
+      <span class="fs-title overflow-label">
+        <Label label={notification.string.Notifications} />
+      </span>
     </div>
+    {#each groups as gr}
+      <GroupElement
+        icon={gr.icon}
+        label={gr.label}
+        selected={gr._id === group}
+        on:click={() => {
+          group = gr._id
+        }}
+      />
+    {/each}
+  </div>
+
+  <div class="antiPanel-component border-left filled">
+    {#if group}
+      <NotificationGroupSetting {group} {settings} />
+    {/if}
   </div>
 </div>
-
-<style lang="scss">
-  .container {
-    padding: 3rem;
-  }
-</style>