Save last filter (#2003)

Signed-off-by: Denis Bykhov <80476319+BykhovDenis@users.noreply.github.com>

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

@@ -14,8 +14,9 @@
 -->
 <script lang="ts">
   import { Class, Doc, DocumentQuery, Ref } from '@anticrm/core'
+  import { getResource } from '@anticrm/platform'
   import { getClient } from '@anticrm/presentation'
-  import { Button, eventToHTMLElement, IconAdd, showPopup } from '@anticrm/ui'
+  import { Button, eventToHTMLElement, getCurrentLocation, IconAdd, locationToUrl, showPopup } from '@anticrm/ui'
   import { Filter } from '@anticrm/view'
   import { createEventDispatcher } from 'svelte'
   import view from '../../plugin'
@@ -59,12 +60,7 @@
     )
   }
 
-  $: clear(_class)
-
-  function clear (_class: Ref<Class<Doc>>) {
-    filters.map((p) => p.onRemove?.())
-    filters = []
-  }
+  $: load(_class)
 
   function remove (i: number) {
     filters[i]?.onRemove?.()
@@ -72,13 +68,44 @@
     filters = filters
   }
 
+  $: saveFilters(filters)
+
+  function saveFilters (filters: Filter[]) {
+    const loc = getCurrentLocation()
+    const key = 'filter' + locationToUrl(loc)
+    if (filters.length > 0) {
+      localStorage.setItem(key, JSON.stringify(filters))
+    } else {
+      localStorage.removeItem(key)
+    }
+  }
+
+  function load (_class: Ref<Class<Doc>>) {
+    const loc = getCurrentLocation()
+    const key = 'filter' + locationToUrl(loc)
+    const saved = localStorage.getItem(key)
+    filters.map((p) => p.onRemove?.())
+    if (saved !== null) {
+      filters = JSON.parse(saved)
+    } else {
+      filters = []
+    }
+  }
+
   async function makeQuery (query: DocumentQuery<Doc>, filters: Filter[]): Promise<void> {
     const newQuery = hierarchy.clone(query)
     for (let i = 0; i < filters.length; i++) {
       const filter = filters[i]
-      const newValue = await filter.mode.result(filter.value, () => {
-        makeQuery(query, filters)
-      })
+      const mode = await client.findOne(view.class.FilterMode, { _id: filter.mode })
+      if (mode === undefined) continue
+      const result = await getResource(mode.result)
+      const newValue = await result(
+        filter.value,
+        () => {
+          makeQuery(query, filters)
+        },
+        filter.index
+      )
       if (newQuery[filter.key.key] === undefined) {
         newQuery[filter.key.key] = newValue
       } else {
@@ -139,6 +166,7 @@
           {filter}
           on:change={() => {
             makeQuery(query, filters)
+            saveFilters(filters)
           }}
           on:remove={() => {
             remove(i)

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

@@ -13,7 +13,7 @@
 // limitations under the License.
 -->
 <script lang="ts">
-  import { translate } from '@anticrm/platform'
+  import { IntlString, translate } from '@anticrm/platform'
   import { Class, Doc, Ref, RefTo } from '@anticrm/core'
   import { eventToHTMLElement, IconClose, showPopup, Icon, Label } from '@anticrm/ui'
   import { Filter } from '@anticrm/view'
@@ -27,6 +27,7 @@
   export let _class: Ref<Class<Doc>>
   export let filter: Filter
 
+  let label: IntlString | undefined
   let current = 0
   const client = getClient()
   const hierarchy = client.getHierarchy()
@@ -47,13 +48,15 @@
   }
   $: if (filter) getLabel()
 
-  function toggle () {
-    const modes = filter.modes.filter((p) => p.isAvailable(filter.value))
+  async function toggle () {
     current++
-    filter.mode = modes[current % modes.length]
+    filter.mode = filter.modes[current % filter.modes.length]
+    label = (await client.findOne(view.class.FilterMode, { _id: filter.mode }))?.label
     dispatch('change')
   }
 
+  client.findOne(view.class.FilterMode, { _id: filter.mode }).then((p) => (label = p?.label))
+
   function onChange (e: Filter | undefined) {
     filter = filter
     dispatch('change')
@@ -74,7 +77,9 @@
     <span><Label label={filter.key.label} /></span>
   </button>
   <button class="filter-button" on:click={toggle}>
-    <span><Label label={filter.mode.label} /></span>
+    {#if label}
+      <span><Label {label} params={{ value: filter.value.length }} /></span>
+    {/if}
   </button>
   <button
     class="filter-button"

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

@@ -35,29 +35,8 @@
   const key = { key: tkey }
   const lookup = buildConfigLookup(hierarchy, _class, [tkey])
   const promise = getPresenter(client, _class, key, key, lookup)
-  filter.modes = [
-    {
-      label: view.string.FilterIs,
-      isAvailable: (res: any[]) => res.length <= 1,
-      result: async (res: any[]) => {
-        return { $in: res }
-      }
-    },
-    {
-      label: view.string.FilterIsEither,
-      isAvailable: (res: any[]) => res.length > 1,
-      result: async (res: any[]) => {
-        return { $in: res }
-      }
-    },
-    {
-      label: view.string.FilterIsNot,
-      isAvailable: () => true,
-      result: async (res: any[]) => {
-        return { $nin: res }
-      }
-    }
-  ]
+  filter.modes = [view.ids.FilterObjectIn, view.ids.FilterObjectNin]
+  filter.mode = filter.mode === undefined ? filter.modes[0] : filter.mode
 
   let values: (Doc | undefined | null)[] = []
   let objectsPromise: Promise<FindResult<Doc>> | undefined
@@ -120,12 +99,6 @@
     return values.includes(value?._id ?? value)
   }
 
-  function checkMode () {
-    if (filter.mode?.isAvailable(filter.value)) return
-    const newMode = filter.modes.find((p) => p.isAvailable(filter.value))
-    filter.mode = newMode !== undefined ? newMode : filter.mode
-  }
-
   function toggle (value: Doc | undefined | null): void {
     if (isSelected(value, filter.value)) {
       if (isState) {
@@ -146,7 +119,6 @@
         filter.value = [...filter.value, undefined]
       }
     }
-    checkMode()
   }
 
   let search: string = ''

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

@@ -25,22 +25,7 @@
 
   const dispatch = createEventDispatcher()
 
-  filter.modes = [
-    {
-      label: view.string.Before,
-      isAvailable: (res: any[]) => true,
-      result: async (res: any[]) => {
-        return { $lt: res[0] }
-      }
-    },
-    {
-      label: view.string.After,
-      isAvailable: () => true,
-      result: async (res: any[]) => {
-        return { $gt: res[0] }
-      }
-    }
-  ]
+  filter.modes = [view.ids.FilterBefore, view.ids.FilterAfter]
   filter.mode = filter.mode === undefined ? filter.modes[0] : filter.mode
 
   function click (value: number): void {

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

@@ -27,29 +27,8 @@
   export let filter: Filter
   export let onChange: (e: Filter) => void
 
-  filter.modes = [
-    {
-      label: view.string.FilterIs,
-      isAvailable: (res: any[]) => res.length <= 1,
-      result: async (res: [any, any[]][]) => {
-        return { $in: res.map((p) => p[1]).flat() }
-      }
-    },
-    {
-      label: view.string.FilterIsEither,
-      isAvailable: (res: any[]) => res.length > 1,
-      result: async (res: [any, any[]][]) => {
-        return { $in: res.map((p) => p[1]).flat() }
-      }
-    },
-    {
-      label: view.string.FilterIsNot,
-      isAvailable: () => true,
-      result: async (res: [any, any[]][]) => {
-        return { $nin: res.map((p) => p[1]).flat() }
-      }
-    }
-  ]
+  filter.modes = [view.ids.FilterValueIn, view.ids.FilterValueNin]
+  filter.mode = filter.mode === undefined ? filter.modes[0] : filter.mode
 
   const client = getClient()
   const key = { key: filter.key.key }
@@ -109,12 +88,6 @@
     return values.has(value)
   }
 
-  function checkMode () {
-    if (filter.mode?.isAvailable(filter.value)) return
-    const newMode = filter.modes.find((p) => p.isAvailable(filter.value))
-    filter.mode = newMode !== undefined ? newMode : filter.mode
-  }
-
   function toggle (value: any): void {
     if (isSelected(value, selectedValues)) {
       selectedValues.delete(value)
@@ -197,7 +170,6 @@
       filter.value = Array.from(selectedValues.values()).map((p) => {
         return [p, Array.from(realValues.get(p) ?? [])]
       })
-      checkMode()
       onChange(filter)
       dispatch('close')
     }}