Tracker: Refactor ViewOptions (#2228)

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

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

@@ -0,0 +1,72 @@
+<!--
+// 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 { Button, eventToHTMLElement, IconDownOutline, showPopup, Label } from '@anticrm/ui'
+  import view from '@anticrm/view'
+  import ViewOptionsPopup from './ViewOptionsPopup.svelte'
+  import { getViewOptions, setViewOptions, viewOptionsStore, ViewOptionModel } from '../viewOptions'
+
+  export let config: ViewOptionModel[]
+  export let viewOptionsKey: string
+
+  $: loadViewOptionsStore(config, viewOptionsKey)
+
+  function loadViewOptionsStore (config: ViewOptionModel[], key: string) {
+    viewOptionsStore.set(
+      config.reduce(
+        (options, { key, defaultValue }) => ({ [key]: defaultValue, ...options }),
+        getViewOptions(key) ?? {}
+      )
+    )
+  }
+
+  const handleOptionsEditorOpened = (event: MouseEvent) => {
+    showPopup(
+      ViewOptionsPopup,
+      { config, viewOptions: $viewOptionsStore },
+      eventToHTMLElement(event),
+      undefined,
+      (result) => {
+        if (result?.key === undefined) return
+        $viewOptionsStore[result.key] = result.value
+        setViewOptions(viewOptionsKey, $viewOptionsStore)
+      }
+    )
+  }
+</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/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,
-  setViewOptions,
-  getViewOptions
+  getActiveViewletId
 } 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