Tracker: Refactor ViewOptions (#2228)

Signed-off-by: Dvinyanin Alexandr <dvinyanin.alexandr@gmail.com>

plugins/tracker-resources/src/components/issues/IssuesContent.svelte

@@ -3,7 +3,7 @@
   import { Component } from '@anticrm/ui'
   import { Viewlet } from '@anticrm/view'
   import { Issue } from '@anticrm/tracker'
-  import { viewOptionsStore } from '../../viewOptions'
+  import { viewOptionsStore } from '@anticrm/view-resources'
 
   export let viewlet: WithLookup<Viewlet>
   export let query: DocumentQuery<Issue> = {}

plugins/tracker-resources/src/components/issues/IssuesHeader.svelte

@@ -4,7 +4,6 @@
   import { FilterButton, setActiveViewletId } from '@anticrm/view-resources'
   import tracker from '../../plugin'
   import { WithLookup } from '@anticrm/core'
-  import ViewOptions from './ViewOptions.svelte'
 
   export let viewlet: WithLookup<Viewlet> | undefined
   export let viewlets: WithLookup<Viewlet>[] = []
@@ -43,6 +42,5 @@
       }}
     />
   {/if}
-  <ViewOptions {viewlet} />
   <slot name="extra" />
 </div>

plugins/tracker-resources/src/components/issues/IssuesView.svelte

@@ -5,15 +5,16 @@
   import { Issue } from '@anticrm/tracker'
   import { Button, IconDetails } from '@anticrm/ui'
   import view, { Viewlet } from '@anticrm/view'
-  import { FilterBar } from '@anticrm/view-resources'
+  import { FilterBar, ViewOptionModel, ViewOptionsButton, getActiveViewletId } from '@anticrm/view-resources'
-  import { getActiveViewletId } from '@anticrm/view-resources/src/utils'
-  import tracker from '../../plugin'
   import IssuesContent from './IssuesContent.svelte'
   import IssuesHeader from './IssuesHeader.svelte'
+  import { getDefaultViewOptionsConfig } from '../../utils'
+  import tracker from '../../plugin'
 
   export let query: DocumentQuery<Issue> = {}
   export let title: IntlString | undefined = undefined
   export let label: string = ''
+  export let viewOptionsConfig: ViewOptionModel[] = getDefaultViewOptionsConfig()
 
   export let panelWidth: number = 0
 
@@ -67,6 +68,9 @@
 
 <IssuesHeader {viewlets} {label} bind:viewlet bind:search>
   <svelte:fragment slot="extra">
+    {#if viewlet}
+      <ViewOptionsButton viewOptionsKey={viewlet._id} config={viewOptionsConfig} />
+    {/if}
     {#if asideFloat && $$slots.aside}
       <Button
         icon={IconDetails}

plugins/tracker-resources/src/components/issues/KanbanView.svelte

@@ -18,7 +18,7 @@
   import { Kanban, TypeState } from '@anticrm/kanban'
   import notification from '@anticrm/notification'
   import { createQuery } from '@anticrm/presentation'
-  import { Issue, IssuesGrouping, IssuesOrdering, IssueStatus, Team, ViewOptions } from '@anticrm/tracker'
+  import { Issue, IssuesGrouping, IssuesOrdering, IssueStatus, Team } from '@anticrm/tracker'
   import { Button, Component, IconAdd, showPanel, showPopup, Loading, tooltip } from '@anticrm/ui'
   import { focusStore, ListSelectionProvider, SelectDirection, selectionStore } from '@anticrm/view-resources'
   import ActionContext from '@anticrm/view-resources/src/components/ActionContext.svelte'
@@ -45,8 +45,13 @@
 
   export let currentSpace: Ref<Team> = tracker.team.DefaultTeam
   export let baseMenuClass: Ref<Class<Doc>> | undefined = undefined
-  export let viewOptions: ViewOptions
   export let query: DocumentQuery<Issue> = {}
+  export let viewOptions: {
+    groupBy: IssuesGrouping
+    orderBy: IssuesOrdering
+    shouldShowEmptyGroups: boolean
+    shouldShowSubIssues: boolean
+  }
 
   $: currentSpace = typeof query.space === 'string' ? query.space : tracker.team.DefaultTeam
   $: ({ groupBy, orderBy, shouldShowEmptyGroups, shouldShowSubIssues } = viewOptions)
@@ -54,7 +59,6 @@
   $: rankFieldName = orderBy === IssuesOrdering.Manual ? orderBy : undefined
   $: resultQuery = {
     ...(shouldShowSubIssues ? {} : { attachedTo: tracker.ids.NoParent }),
-    space: currentSpace,
     ...query
   } as any
 

plugins/tracker-resources/src/components/issues/ViewOptionsPopup.svelte

@@ -1,104 +0,0 @@
-<!--
-// Copyright © 2022 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 { IssuesGrouping, IssuesOrdering, IssuesDateModificationPeriod } from '@anticrm/tracker'
-  import { Label, MiniToggle, DropdownRecord } from '@anticrm/ui'
-  import tracker from '../../plugin'
-  import { issuesGroupByOptions, issuesOrderByOptions, issuesDateModificationPeriodOptions } from '../../utils'
-  import { createEventDispatcher } from 'svelte'
-
-  const dispatch = createEventDispatcher()
-
-  export let groupBy: IssuesGrouping | undefined = undefined
-  export let orderBy: IssuesOrdering | undefined = undefined
-  export let completedIssuesPeriod: IssuesDateModificationPeriod | null = null
-  export let shouldShowSubIssues: boolean | undefined = false
-  export let shouldShowEmptyGroups: boolean | undefined = false
-
-  $: _groupBy = groupBy
-  $: _orderBy = orderBy
-  $: _completedIssuesPeriod = completedIssuesPeriod
-  $: _shouldShowSubIssues = shouldShowSubIssues
-  $: _shouldShowEmptyGroups = shouldShowEmptyGroups
-
-  const groupByItems = issuesGroupByOptions
-  const orderByItems = issuesOrderByOptions
-  const dateModificationPeriodItems = issuesDateModificationPeriodOptions
-
-  const updateOptions = (): void => {
-    dispatch('update', {
-      groupBy: _groupBy,
-      orderBy: _orderBy,
-      completedIssuesPeriod: _completedIssuesPeriod,
-      shouldShowSubIssues: _shouldShowSubIssues,
-      shouldShowEmptyGroups: _shouldShowEmptyGroups
-    })
-  }
-</script>
-
-<div class="antiCard">
-  <div class="antiCard-group grid">
-    <span class="label"><Label label={tracker.string.Grouping} /></span>
-    <div class="value">
-      <DropdownRecord
-        items={groupByItems}
-        selected={_groupBy}
-        on:select={(result) => {
-          if (result === undefined) return
-          _groupBy = result.detail
-          updateOptions()
-        }}
-      />
-    </div>
-    <span class="label"><Label label={tracker.string.Ordering} /></span>
-    <div class="value">
-      <DropdownRecord
-        items={orderByItems}
-        selected={_orderBy}
-        on:select={(result) => {
-          if (result === undefined) return
-          _orderBy = result.detail
-          updateOptions()
-        }}
-      />
-    </div>
-  </div>
-  <div class="antiCard-group grid">
-    {#if _completedIssuesPeriod}
-      <span class="label"><Label label={tracker.string.CompletedIssues} /></span>
-      <div class="value">
-        <DropdownRecord
-          items={dateModificationPeriodItems}
-          selected={_completedIssuesPeriod}
-          on:select={(result) => {
-            if (result === undefined) return
-            _completedIssuesPeriod = result.detail
-            updateOptions()
-          }}
-        />
-      </div>
-    {/if}
-    <span class="label"><Label label={tracker.string.SubIssues} /></span>
-    <div class="value">
-      <MiniToggle bind:on={shouldShowSubIssues} on:change={updateOptions} />
-    </div>
-    {#if _groupBy === IssuesGrouping.Status || _groupBy === IssuesGrouping.Priority}
-      <span class="label"><Label label={tracker.string.ShowEmptyGroups} /></span>
-      <div class="value">
-        <MiniToggle bind:on={_shouldShowEmptyGroups} on:change={updateOptions} />
-      </div>
-    {/if}
-  </div>
-</div>

plugins/tracker-resources/src/index.ts

@@ -36,7 +36,6 @@ import PriorityPresenter from './components/issues/PriorityPresenter.svelte'
 import StatusEditor from './components/issues/StatusEditor.svelte'
 import StatusPresenter from './components/issues/StatusPresenter.svelte'
 import TitlePresenter from './components/issues/TitlePresenter.svelte'
-import ViewOptionsPopup from './components/issues/ViewOptionsPopup.svelte'
 import MyIssues from './components/myissues/MyIssues.svelte'
 import NewIssueHeader from './components/NewIssueHeader.svelte'
 import NopeComponent from './components/NopeComponent.svelte'
@@ -142,7 +141,6 @@ export default async (): Promise<Resources> => ({
     DueDatePresenter,
     EditIssue,
     NewIssueHeader,
-    ViewOptionsPopup,
     IconPresenter,
     LeadPresenter,
     TargetDatePresenter,

plugins/tracker-resources/src/utils.ts

@@ -26,6 +26,7 @@ import {
   ProjectStatus,
   Team
 } from '@anticrm/tracker'
+import { ViewOptionModel } from '@anticrm/view-resources'
 import { AnyComponent, AnySvelteComponent, getMillisecondsInMonth, MILLISECONDS_IN_WEEK } from '@anticrm/ui'
 import tracker from './plugin'
 import { defaultPriorities, defaultProjectStatuses, issuePriorities } from './types'
@@ -437,3 +438,47 @@ export async function getPriorityStates (): Promise<TypeState[]> {
     }))
   )
 }
+
+export function getDefaultViewOptionsConfig (): ViewOptionModel[] {
+  return [
+    {
+      key: 'groupBy',
+      label: tracker.string.Grouping,
+      defaultValue: 'status',
+      values: [
+        { id: 'status', label: tracker.string.Status },
+        { id: 'assignee', label: tracker.string.Assignee },
+        { id: 'priority', label: tracker.string.Priority },
+        { id: 'project', label: tracker.string.Project },
+        { id: 'noGrouping', label: tracker.string.NoGrouping }
+      ],
+      type: 'dropdown'
+    },
+    {
+      key: 'orderBy',
+      label: tracker.string.Ordering,
+      defaultValue: 'status',
+      values: [
+        { id: 'status', label: tracker.string.Status },
+        { id: 'modifiedOn', label: tracker.string.LastUpdated },
+        { id: 'priority', label: tracker.string.Priority },
+        { id: 'dueDate', label: tracker.string.DueDate },
+        { id: 'rank', label: tracker.string.Manual }
+      ],
+      type: 'dropdown'
+    },
+    {
+      key: 'shouldShowSubIssues',
+      label: tracker.string.SubIssues,
+      defaultValue: false,
+      type: 'toggle'
+    },
+    {
+      key: 'shouldShowEmptyGroups',
+      label: tracker.string.ShowEmptyGroups,
+      defaultValue: false,
+      type: 'toggle',
+      hidden: ({ groupBy }) => !['status', 'priority'].includes(groupBy)
+    }
+  ]
+}

plugins/tracker-resources/src/viewOptions.ts

@@ -1,7 +0,0 @@
-import { ViewOptions } from '@anticrm/tracker'
-import { writable } from 'svelte/store'
-
-/**
- * @public
- */
-export const viewOptionsStore = writable<ViewOptions>()

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

@@ -13,37 +13,37 @@
 // limitations under the License.
 -->
 <script lang="ts">
-  import { IssuesDateModificationPeriod, IssuesGrouping, IssuesOrdering, ViewOptions } from '@anticrm/tracker'
   import { Button, eventToHTMLElement, IconDownOutline, showPopup, Label } from '@anticrm/ui'
-  import { getViewOptions, setViewOptions } from '@anticrm/view-resources'
+  import view from '@anticrm/view'
-  import view, { Viewlet } from '@anticrm/view'
-
   import ViewOptionsPopup from './ViewOptionsPopup.svelte'
-  import { viewOptionsStore } from '../../viewOptions'
+  import { getViewOptions, setViewOptions, viewOptionsStore, ViewOptionModel } from '../viewOptions'
 
-  export let viewlet: Viewlet | undefined
+  export let config: ViewOptionModel[]
+  export let viewOptionsKey: string
 
-  let viewOptions: ViewOptions
+  $: loadViewOptionsStore(config, viewOptionsKey)
-  $: if (viewlet) {
+
-    const savedViewOptions = getViewOptions(viewlet._id)
+  function loadViewOptionsStore (config: ViewOptionModel[], key: string) {
-    viewOptions = savedViewOptions
+    viewOptionsStore.set(
-      ? JSON.parse(savedViewOptions)
+      config.reduce(
-      : {
+        (options, { key, defaultValue }) => ({ [key]: defaultValue, ...options }),
-          groupBy: IssuesGrouping.Status,
+        getViewOptions(key) ?? {}
-          orderBy: IssuesOrdering.Status,
+      )
-          completedIssuesPeriod: IssuesDateModificationPeriod.All,
+    )
-          shouldShowEmptyGroups: false,
-          shouldShowSubIssues: false
   }
-  }
-
-  $: $viewOptionsStore = viewOptions
 
   const handleOptionsEditorOpened = (event: MouseEvent) => {
-    showPopup(ViewOptionsPopup, viewOptions, eventToHTMLElement(event), undefined, (result) => {
+    showPopup(
-      viewOptions = result
+      ViewOptionsPopup,
-      if (viewlet) setViewOptions(viewlet._id, JSON.stringify(viewOptions))
+      { config, viewOptions: $viewOptionsStore },
-    })
+      eventToHTMLElement(event),
+      undefined,
+      (result) => {
+        if (result?.key === undefined) return
+        $viewOptionsStore[result.key] = result.value
+        setViewOptions(viewOptionsKey, $viewOptionsStore)
+      }
+    )
   }
 </script>
 

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

@@ -0,0 +1,35 @@
+<script lang="ts">
+  import { DropdownLabelsIntl, MiniToggle, Label } from '@anticrm/ui'
+  import { createEventDispatcher } from 'svelte'
+  import { isDropdownType, isToggleType, ViewOptions, ViewOptionModel } from '../viewOptions'
+
+  export let config: ViewOptionModel[]
+  export let viewOptions: ViewOptions
+
+  const dispatch = createEventDispatcher()
+</script>
+
+<div class="antiCard">
+  <div class="antiCard-group grid">
+    {#each config as model}
+      {@const value = viewOptions[model.key]}
+      <span class="label"><Label label={model.label} /></span>
+      <div class="value">
+        {#if isToggleType(model)}
+          <MiniToggle on={value} on:change={() => dispatch('update', { key: model.key, value: !value })} />
+        {:else if isDropdownType(model)}
+          {@const items = model.values.filter(({ hidden }) => !hidden?.(viewOptions))}
+          <DropdownLabelsIntl
+            label={model.label}
+            {items}
+            selected={value}
+            width="10rem"
+            justify="left"
+            on:selected={(e) => dispatch('update', { key: model.key, value: e.detail })}
+          />
+        {/if}
+      </div>
+    {/each}
+    <slot name="extra" />
+  </div>
+</div>

plugins/view-resources/src/index.ts

@@ -75,18 +75,18 @@ export { default as LinkPresenter } from './components/LinkPresenter.svelte'
 export { default as ContextMenu } from './components/Menu.svelte'
 export { default as TableBrowser } from './components/TableBrowser.svelte'
 export { default as FixedColumn } from './components/FixedColumn.svelte'
+export { default as ViewOptionsButton } from './components/ViewOptionsButton.svelte'
 export * from './context'
 export * from './filter'
 export * from './selection'
+export * from './viewOptions'
 export {
   buildModel,
   getCollectionCounter,
   getObjectPresenter,
   LoadingProps,
   setActiveViewletId,
-  getActiveViewletId,
+  getActiveViewletId
-  setViewOptions,
-  getViewOptions
 } from './utils'
 export {
   HTMLPresenter,

plugins/view-resources/src/utils.ts

@@ -431,24 +431,3 @@ export function getActiveViewletId (): Ref<Viewlet> | null {
   const key = makeViewletKey()
   return localStorage.getItem(key) as Ref<Viewlet> | null
 }
-
-function makeViewOptionsKey (viewletId: Ref<Viewlet>): string {
-  const loc = getCurrentLocation()
-  loc.fragment = undefined
-  loc.query = undefined
-  return `viewOptions:${viewletId}:${locationToUrl(loc)}`
-}
-
-export function setViewOptions (viewletId: Ref<Viewlet>, options: string | null): void {
-  const key = makeViewOptionsKey(viewletId)
-  if (options !== null) {
-    localStorage.setItem(key, options)
-  } else {
-    localStorage.removeItem(key)
-  }
-}
-
-export function getViewOptions (viewletId: Ref<Viewlet>): string | null {
-  const key = makeViewOptionsKey(viewletId)
-  return localStorage.getItem(key)
-}

plugins/view-resources/src/viewOptions.ts

@@ -0,0 +1,56 @@
+import { IntlString } from '@anticrm/platform'
+import { getCurrentLocation, locationToUrl } from '@anticrm/ui'
+import { writable } from 'svelte/store'
+
+export type ViewOptions = Record<string, any>
+
+export const viewOptionsStore = writable<ViewOptions>({})
+
+export function isToggleType (viewOption: ViewOptionModel): viewOption is ToggleViewOption {
+  return viewOption.type === 'toggle'
+}
+
+export function isDropdownType (viewOption: ViewOptionModel): viewOption is DropdownViewOption {
+  return viewOption.type === 'dropdown'
+}
+
+function makeViewOptionsKey (prefix: string): string {
+  const loc = getCurrentLocation()
+  loc.fragment = undefined
+  loc.query = undefined
+  return `viewOptions:${prefix}:${locationToUrl(loc)}`
+}
+
+export function setViewOptions (prefix: string, options: ViewOptions): void {
+  const key = makeViewOptionsKey(prefix)
+  localStorage.setItem(key, JSON.stringify(options))
+}
+
+export function getViewOptions (prefix: string): ViewOptions | null {
+  const key = makeViewOptionsKey(prefix)
+  const options = localStorage.getItem(key)
+  if (options === null) return null
+  return JSON.parse(options)
+}
+
+export interface ViewOption {
+  type: string
+  key: string
+  defaultValue: any
+  label: IntlString
+  group?: string
+  hidden?: (viewOptions: ViewOptions) => boolean
+}
+
+export interface ToggleViewOption extends ViewOption {
+  type: 'toggle'
+  defaultValue: boolean
+}
+
+export interface DropdownViewOption extends ViewOption {
+  type: 'dropdown'
+  defaultValue: string
+  values: Array<{ label: IntlString, id: string, hidden?: (viewOptions: ViewOptions) => boolean }>
+}
+
+export type ViewOptionModel = ToggleViewOption | DropdownViewOption