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 { getActiveViewletId } from '@anticrm/view-resources/src/utils'
-  import tracker from '../../plugin'
+  import { FilterBar, ViewOptionModel, ViewOptionsButton, getActiveViewletId } from '@anticrm/view-resources'
   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/ViewOptions.svelte

@@ -1,72 +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 { 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, { Viewlet } from '@anticrm/view'
-
-  import ViewOptionsPopup from './ViewOptionsPopup.svelte'
-  import { viewOptionsStore } from '../../viewOptions'
-
-  export let viewlet: Viewlet | undefined
-
-  let viewOptions: ViewOptions
-  $: if (viewlet) {
-    const savedViewOptions = getViewOptions(viewlet._id)
-    viewOptions = savedViewOptions
-      ? JSON.parse(savedViewOptions)
-      : {
-          groupBy: IssuesGrouping.Status,
-          orderBy: IssuesOrdering.Status,
-          completedIssuesPeriod: IssuesDateModificationPeriod.All,
-          shouldShowEmptyGroups: false,
-          shouldShowSubIssues: false
-        }
-  }
-
-  $: $viewOptionsStore = viewOptions
-
-  const handleOptionsEditorOpened = (event: MouseEvent) => {
-    showPopup(ViewOptionsPopup, viewOptions, eventToHTMLElement(event), undefined, (result) => {
-      viewOptions = result
-      if (viewlet) setViewOptions(viewlet._id, JSON.stringify(viewOptions))
-    })
-  }
-</script>
-
-<Button
-  icon={view.icon.ViewButton}
-  kind={'secondary'}
-  size={'small'}
-  showTooltip={{ label: view.string.CustomizeView }}
-  on:click={handleOptionsEditorOpened}
->
-  <svelte:fragment slot="content">
-    <div class="flex-row-center clear-mins pointer-events-none">
-      <span class="text-sm font-medium"><Label label={view.string.View} /></span>
-      <div class="icon"><IconDownOutline size={'full'} /></div>
-    </div>
-  </svelte:fragment>
-</Button>
-
-<style lang="scss">
-  .icon {
-    margin-left: 0.25rem;
-    width: 0.875rem;
-    height: 0.875rem;
-    color: var(--content-color);
-  }
-</style>

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>()