Implement persistent table sorting by integrating with view options. (#10665)

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

plugins/view-resources/src/components/RelationshipTable.svelte

@@ -85,12 +85,17 @@
   $: associations = buildConfigAssociation(config)
 
   let _sortKey = prefferedSorting
+  let sortOrder = SortingOrder.Descending
   let userSorting = false
-  $: if (!userSorting) {
+  $: if (!userSorting && !viewOptions?.orderBy) {
     _sortKey = prefferedSorting
   }
 
-  let sortOrder = SortingOrder.Descending
+  $: if (viewOptions?.orderBy) {
+    _sortKey = viewOptions.orderBy[0]
+    sortOrder = viewOptions.orderBy[1]
+  }
+
   let loading = 0
 
   let objects: Doc[] = []
@@ -204,6 +209,7 @@
     } else {
       sortOrder = sortOrder === SortingOrder.Ascending ? SortingOrder.Descending : SortingOrder.Ascending
     }
+    dispatch('sort', { key: _sortKey, order: sortOrder })
   }
 
   const joinProps = (attribute: AttributeModel, object: Doc, readonly: boolean) => {

plugins/view-resources/src/components/RelationshipTableBrowser.svelte

@@ -13,13 +13,14 @@
 // limitations under the License.
 -->
 <script lang="ts">
-  import { Class, Doc, DocumentQuery, FindOptions, Ref, generateId } from '@hcengineering/core'
+  import { Class, Doc, DocumentQuery, FindOptions, Ref, generateId, SortingOrder } from '@hcengineering/core'
   import { ActionContext } from '@hcengineering/presentation'
   import { Scroller, tableSP } from '@hcengineering/ui'
   import { BuildModelKey, Viewlet, ViewOptionModel, ViewOptions } from '@hcengineering/view'
   import { onDestroy, onMount } from 'svelte'
   import { type ViewletContext, ViewletContextStore, viewletContextStore } from '../viewletContextStore'
   import RelationshipTable from './RelationshipTable.svelte'
+  import { setViewOptions } from '../viewOptions'
 
   export let _class: Ref<Class<Doc>>
   export let query: DocumentQuery<Doc>
@@ -33,6 +34,13 @@
   export let readonly = false
 
   const contextId = generateId()
+  async function onSort (event: CustomEvent<{ key: string, order: SortingOrder }>) {
+    const { key, order } = event.detail
+    if (viewlet && viewOptions) {
+      viewOptions.orderBy = [key, order]
+      setViewOptions(viewlet, viewOptions)
+    }
+  }
 
   // Set viewlet context in store when component mounts/updates
   $: {
@@ -92,5 +100,6 @@
     {viewOptions}
     viewOptionsConfig={viewOptionsConfig ?? viewlet?.viewOptions?.other}
     {readonly}
+    on:sort={onSort}
   />
 </Scroller>

plugins/view-resources/src/components/Table.svelte

@@ -86,6 +86,8 @@
   const client = getClient()
   const hierarchy = client.getHierarchy()
 
+  let sortOrder = SortingOrder.Descending
+
   let lookup = buildConfigLookup(hierarchy, _class, config, options?.lookup)
   let associations = buildConfigAssociation(config)
 
@@ -94,11 +96,15 @@
 
   let _sortKey = prefferedSorting
   let userSorting = false
-  $: if (!userSorting) {
+  $: if (!userSorting && !viewOptions?.orderBy) {
     _sortKey = prefferedSorting
   }
 
-  let sortOrder = SortingOrder.Descending
+  $: if (viewOptions?.orderBy) {
+    _sortKey = viewOptions.orderBy[0]
+    sortOrder = viewOptions.orderBy[1]
+  }
+
   let loading = 0
 
   let objects: Doc[] = []
@@ -225,6 +231,7 @@
     } else {
       sortOrder = sortOrder === SortingOrder.Ascending ? SortingOrder.Descending : SortingOrder.Ascending
     }
+    dispatch('sort', { key: _sortKey, order: sortOrder })
   }
 
   $: checkedSet = new Set<Ref<Doc>>(checked.map((it) => it._id))

plugins/view-resources/src/components/TableBrowser.svelte

@@ -14,7 +14,7 @@
 -->
 <script lang="ts">
   import type { Class, Doc, DocumentQuery, FindOptions, Ref } from '@hcengineering/core'
-  import { generateId } from '@hcengineering/core'
+  import { generateId, SortingOrder } from '@hcengineering/core'
   import { ActionContext } from '@hcengineering/presentation'
   import { FadeOptions, Scroller, tableSP } from '@hcengineering/ui'
   import { BuildModelKey, ViewOptionModel, ViewOptions, Viewlet } from '@hcengineering/view'
@@ -23,6 +23,7 @@
   import { LoadingProps } from '../utils'
   import { type ViewletContext, ViewletContextStore, viewletContextStore } from '../viewletContextStore'
   import Table from './Table.svelte'
+  import { setViewOptions } from '../viewOptions'
 
   export let _class: Ref<Class<Doc>>
   export let query: DocumentQuery<Doc>
@@ -56,6 +57,13 @@
   const selection = listProvider.selection
 
   const contextId = generateId()
+  async function onSort (event: CustomEvent<{ key: string, order: SortingOrder }>) {
+    const { key, order } = event.detail
+    if (viewlet && viewOptions) {
+      viewOptions.orderBy = [key, order]
+      setViewOptions(viewlet, viewOptions)
+    }
+  }
 
   // Set viewlet context in store when component mounts/updates
   $: {
@@ -129,6 +137,7 @@
     on:content={(evt) => {
       listProvider.update(evt.detail)
     }}
+    on:sort={onSort}
     on:check={(evt) => {
       listProvider.updateSelection(evt.detail.docs, evt.detail.value)
     }}