TSK-950: Remove value from filter if the object doesn't exist (#2852)

Signed-off-by: Vyacheslav Tumanov <me@slavatumanov.me>

plugins/tags-resources/src/components/TagsFilter.svelte

@@ -211,3 +211,10 @@
     }}
   />
 </div>
+
+<style>
+  .flex {
+    display: flex;
+    align-items: center;
+  }
+</style>

plugins/view-assets/lang/en.json

@@ -39,6 +39,8 @@
     "FilterIsNot": "is not",
     "FilterIsEither": "{value, plural, =1 {is} other {is either of}}",
     "FilterStatesCount": "{value, plural, =1 {1 state} other {# states}}",
+    "FilterUpdated": "Filter was updated",
+    "FilterRemoved": "{count, plural, =1 {# non-existing value was} other {# non-existing values were}} removed from the filter",
     "Before": "Before",
     "After": "After",
     "Apply": "Apply",

plugins/view-assets/lang/ru.json

@@ -37,6 +37,8 @@
     "FilterIsNot": "не равен",
     "FilterIsEither": "{value, plural, =1 {равен} other {один из}}",
     "FilterStatesCount": "{value, plural, =1 {1 состоянию} other {# состояний}}",
+    "FilterUpdated": "Фильтр был обновлен",
+    "FilterRemoved": "Несуществующие значения были удалены из фильтра: {removed}",
     "Before": "До",
     "After": "После",
     "Apply": "Применить",

plugins/view-resources/src/components/filter/FilterRemovedNotification.svelte

@@ -0,0 +1,63 @@
+<script lang="ts">
+  import { Button, IconClose, Notification } from '@hcengineering/ui'
+  import { fade } from 'svelte/transition'
+
+  export let onRemove: () => void
+  export let notification: Notification
+
+  const { title, params } = notification
+</script>
+
+<div class="root" in:fade out:fade>
+  <div class="content">
+    <div class="title">
+      {title}
+    </div>
+    <div class="row">
+      {params.description}
+    </div>
+  </div>
+  <div class="close-button">
+    <Button icon={IconClose} kind="transparent" size="small" on:click={onRemove} />
+  </div>
+</div>
+
+<style lang="scss">
+  .root {
+    position: relative;
+    display: flex;
+    margin: 10px;
+    box-shadow: 0 4px 10px var(--divider-color);
+    height: 100px;
+    width: 400px;
+    overflow: hidden;
+    color: var(--caption-color);
+    background-color: var(--body-color);
+    border: 1px solid var(--divider-color);
+    border-radius: 6px;
+    padding: 10px;
+  }
+
+  .content {
+    margin-left: 10px;
+  }
+
+  .title {
+    display: flex;
+    align-items: center;
+    color: var(--caption-color);
+    font-weight: 500;
+    margin-bottom: 10px;
+  }
+
+  .close-button {
+    position: absolute;
+    top: 5px;
+    right: 5px;
+  }
+
+  .row {
+    display: flex;
+    align-items: center;
+  }
+</style>

plugins/view-resources/src/components/filter/ObjectFilter.svelte

@@ -18,11 +18,20 @@
   import presentation, { getClient } from '@hcengineering/presentation'
   import type { State } from '@hcengineering/task'
   import task from '@hcengineering/task'
-  import ui, { Button, CheckBox, Label, Loading, resizeObserver, deviceOptionsStore } from '@hcengineering/ui'
+  import ui, {
+    Button,
+    CheckBox,
+    Label,
+    Loading,
+    resizeObserver,
+    deviceOptionsStore,
+    addNotification
+  } from '@hcengineering/ui'
   import { Filter } from '@hcengineering/view'
   import { createEventDispatcher, onMount } from 'svelte'
   import view from '../../plugin'
   import { buildConfigLookup, getPresenter } from '../../utils'
+  import FilterRemovedNotification from './FilterRemovedNotification.svelte'
 
   export let filter: Filter
   export let space: Ref<Space> | undefined = undefined
@@ -92,6 +101,15 @@
     const options = clazz.sortingKey !== undefined ? { sort: { [clazz.sortingKey]: SortingOrder.Ascending } } : {}
     objectsPromise = client.findAll(targetClass, resultQuery, options)
     values = await objectsPromise
+    if (values.length !== targets.size) {
+      const notExisting = [...targets.keys()].filter((k) => !values.includes(k))
+      const oldSize = filter.value.length
+      filter.value = filter.value.filter((p) => !notExisting.includes(p))
+      onChange(filter)
+      addNotification(await translate(view.string.FilterUpdated), filter.key.label, FilterRemovedNotification, {
+        description: await translate(view.string.FilterRemoved, { count: oldSize - (filter.value.length ?? 0) })
+      })
+    }
     if (targets.has(undefined)) {
       values.unshift(undefined)
     }

plugins/view-resources/src/components/filter/ValueFilter.svelte

@@ -79,6 +79,9 @@
       values.set(value, (values.get(value) ?? 0) + 1)
       realValues.set(value, (realValues.get(value) ?? new Set()).add(realValue))
     }
+    for (const object of filter.value.map((p) => p[0])) {
+      if (!values.has(object)) values.set(object, 0)
+    }
     values = values
     objectsPromise = undefined
   }

plugins/view-resources/src/plugin.ts

@@ -42,6 +42,8 @@ export default mergeIds(viewId, view, {
     FilterIsNot: '' as IntlString,
     FilterIsEither: '' as IntlString,
     FilterStatesCount: '' as IntlString,
+    FilterRemoved: '' as IntlString,
+    FilterUpdated: '' as IntlString,
     Before: '' as IntlString,
     After: '' as IntlString,
     Apply: '' as IntlString,