UBER-691 (#3564)

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

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

@@ -1,27 +1,19 @@
 <script lang="ts">
-  import { Class, Doc, Ref, Space } from '@hcengineering/core'
-  import { TabList, SearchEdit, IModeSelector, ModeSelector } from '@hcengineering/ui'
+  import { Class, Doc, DocumentQuery, Ref, Space, WithLookup } from '@hcengineering/core'
+  import { IModeSelector, ModeSelector, SearchEdit } from '@hcengineering/ui'
   import { Viewlet } from '@hcengineering/view'
-  import { WithLookup } from '@hcengineering/core'
-  import { setActiveViewletId } from '../utils'
+  import ViewletSelector from './ViewletSelector.svelte'
   import FilterButton from './filter/FilterButton.svelte'
 
   export let space: Ref<Space> | undefined = undefined
   export let _class: Ref<Class<Doc>>
   export let viewlet: WithLookup<Viewlet> | undefined
+  export let viewletQuery: DocumentQuery<Viewlet> | undefined = undefined
   export let viewlets: WithLookup<Viewlet>[] = []
   export let label: string
   export let search: string
   export let showLabelSelector = false
   export let modeSelectorProps: IModeSelector | undefined = undefined
-
-  $: viewslist = viewlets.map((views) => {
-    return {
-      id: views._id,
-      icon: views.$lookup?.descriptor?.icon,
-      tooltip: views.$lookup?.descriptor?.label
-    }
-  })
 </script>
 
 <div
@@ -42,24 +34,7 @@
     {/if}
   </div>
   <div class="mb-1 clear-mins">
-    {#if viewlets.length > 1}
-      <TabList
-        items={viewslist}
-        multiselect={false}
-        selected={viewlet?._id}
-        onlyIcons
-        on:select={(result) => {
-          if (result.detail !== undefined) {
-            if (viewlet?._id === result.detail.id) return
-            viewlet = viewlets.find((vl) => vl._id === result.detail.id)
-
-            if (viewlet) {
-              setActiveViewletId(viewlet._id)
-            }
-          }
-        }}
-      />
-    {/if}
+    <ViewletSelector bind:viewlet bind:viewlets viewletQuery={viewletQuery ?? { attachTo: _class }} />
     <slot name="header-tools" />
   </div>
 </div>

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

@@ -0,0 +1,104 @@
+<script lang="ts">
+  import { createEventDispatcher, onDestroy } from 'svelte'
+  import { activeViewlet, makeViewletKey, setActiveViewletId } from '../utils'
+  import { TabList, resolvedLocationStore } from '@hcengineering/ui'
+  import view, { Viewlet, ViewletPreference } from '@hcengineering/view'
+  import { DocumentQuery, Ref, WithLookup } from '@hcengineering/core'
+  import { createQuery } from '@hcengineering/presentation'
+
+  export let viewlet: WithLookup<Viewlet> | undefined
+  export let viewlets: WithLookup<Viewlet>[] = []
+  export let viewletQuery: DocumentQuery<Viewlet>
+  export let preference: ViewletPreference | undefined = undefined
+  export let loading = true
+  export let hidden = false
+
+  const query = createQuery()
+
+  $: query.query(
+    view.class.Viewlet,
+    viewletQuery,
+    (res) => {
+      viewlets = res
+      dispatch('viewlets', viewlets)
+    },
+    {
+      lookup: {
+        descriptor: view.class.ViewletDescriptor
+      }
+    }
+  )
+
+  let key = makeViewletKey()
+
+  onDestroy(
+    resolvedLocationStore.subscribe((loc) => {
+      key = makeViewletKey(loc)
+    })
+  )
+
+  $: getActiveViewlet(viewlets, $activeViewlet, key)
+
+  const dispatch = createEventDispatcher()
+
+  function getActiveViewlet (
+    viewlets: WithLookup<Viewlet>[],
+    activeViewlet: Record<string, Ref<Viewlet> | null>,
+    key: string
+  ) {
+    if (viewlets.length === 0) return
+    const newViewlet = viewlets.find((viewlet) => viewlet?._id === activeViewlet[key]) ?? viewlets[0]
+    if (viewlet?._id !== newViewlet?._id) {
+      viewlet = newViewlet
+      setActiveViewletId(newViewlet._id)
+      dispatch('viewlet', viewlet)
+    }
+  }
+
+  $: viewslist = viewlets.map((views) => {
+    return {
+      id: views._id,
+      icon: views.$lookup?.descriptor?.icon,
+      tooltip: views.$lookup?.descriptor?.label
+    }
+  })
+
+  const preferenceQuery = createQuery()
+
+  $: if (viewlet != null) {
+    preferenceQuery.query(
+      view.class.ViewletPreference,
+      {
+        attachedTo: viewlet._id
+      },
+      (res) => {
+        preference = res[0]
+        loading = false
+        dispatch('loading', loading)
+        dispatch('preference', preference)
+      },
+      { limit: 1 }
+    )
+  } else {
+    preferenceQuery.unsubscribe()
+  }
+</script>
+
+{#if viewlets.length > 1 && !hidden}
+  <TabList
+    items={viewslist}
+    multiselect={false}
+    selected={viewlet?._id}
+    on:select={(result) => {
+      if (result.detail !== undefined) {
+        if (viewlet?._id === result.detail.id) {
+          return
+        }
+        viewlet = viewlets.find((vl) => vl._id === result.detail.id)
+        if (viewlet) {
+          setActiveViewletId(viewlet._id)
+        }
+      }
+    }}
+  />
+{/if}

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

@@ -13,28 +13,16 @@
 // limitations under the License.
 -->
 <script lang="ts">
-  import { DocumentQuery, Ref, WithLookup } from '@hcengineering/core'
-  import { createQuery } from '@hcengineering/presentation'
-  import { Button, ButtonKind, resolvedLocationStore, showPopup } from '@hcengineering/ui'
-  import { ViewOptions, Viewlet, ViewletPreference } from '@hcengineering/view'
-  import { createEventDispatcher, onDestroy } from 'svelte'
+  import { Button, ButtonKind, showPopup } from '@hcengineering/ui'
+  import { ViewOptions, Viewlet } from '@hcengineering/view'
   import view from '../plugin'
-  import { activeViewlet, makeViewletKey, setActiveViewletId } from '../utils'
   import { getViewOptions, viewOptionStore } from '../viewOptions'
   import ViewOptionsButton from './ViewOptionsButton.svelte'
   import ViewletSetting from './ViewletSetting.svelte'
 
-  export let viewletQuery: DocumentQuery<Viewlet> = {}
   export let kind: ButtonKind = 'regular'
   export let viewOptions: ViewOptions | undefined = undefined
-
-  export let loading = true
-
   export let viewlet: Viewlet | undefined = undefined
-  export let viewlets: WithLookup<Viewlet>[] = []
-  export let preference: ViewletPreference | undefined = undefined
-
-  const dispatch = createEventDispatcher()
 
   let btn: HTMLButtonElement
 
@@ -43,67 +31,6 @@
   }
 
   $: viewOptions = getViewOptions(viewlet, $viewOptionStore)
-
-  const query = createQuery()
-
-  $: query.query(
-    view.class.Viewlet,
-    viewletQuery,
-    (res) => {
-      viewlets = res
-      dispatch('viewlets', viewlets)
-    },
-    {
-      lookup: {
-        descriptor: view.class.ViewletDescriptor
-      }
-    }
-  )
-
-  let key = makeViewletKey()
-
-  onDestroy(
-    resolvedLocationStore.subscribe((loc) => {
-      key = makeViewletKey(loc)
-    })
-  )
-
-  $: getActiveViewlet(viewlets, $activeViewlet, key)
-
-  function getActiveViewlet (
-    viewlets: WithLookup<Viewlet>[],
-    activeViewlet: Record<string, Ref<Viewlet> | null>,
-    key: string
-  ) {
-    if (viewlets.length === 0) return
-    const newViewlet = viewlets.find((viewlet) => viewlet?._id === activeViewlet[key]) ?? viewlets[0]
-    if (viewlet?._id !== newViewlet?._id) {
-      preference = undefined
-      viewlet = newViewlet
-      setActiveViewletId(newViewlet._id)
-      dispatch('viewlet', viewlet)
-    }
-  }
-
-  const preferenceQuery = createQuery()
-
-  $: if (viewlet != null) {
-    preferenceQuery.query(
-      view.class.ViewletPreference,
-      {
-        attachedTo: viewlet._id
-      },
-      (res) => {
-        preference = res[0]
-        loading = false
-        dispatch('loading', loading)
-        dispatch('preference', preference)
-      },
-      { limit: 1 }
-    )
-  } else {
-    preferenceQuery.unsubscribe()
-  }
 </script>
 
 {#if viewlet}

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

@@ -0,0 +1,97 @@
+<!--
+// 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 { DocumentQuery, WithLookup } from '@hcengineering/core'
+  import { createQuery } from '@hcengineering/presentation'
+  import { Button, ButtonKind, showPopup } from '@hcengineering/ui'
+  import { ViewOptions, Viewlet, ViewletPreference } from '@hcengineering/view'
+  import { createEventDispatcher } from 'svelte'
+  import view from '../plugin'
+  import { getViewOptions, viewOptionStore } from '../viewOptions'
+  import ViewOptionsButton from './ViewOptionsButton.svelte'
+  import ViewletSetting from './ViewletSetting.svelte'
+
+  export let viewletQuery: DocumentQuery<Viewlet> = {}
+  export let kind: ButtonKind = 'regular'
+  export let viewOptions: ViewOptions | undefined = undefined
+
+  export let viewlet: Viewlet | undefined = undefined
+  export let viewlets: WithLookup<Viewlet>[] = []
+  export let preference: ViewletPreference | undefined = undefined
+  export let loading = true
+
+  const dispatch = createEventDispatcher()
+
+  let btn: HTMLButtonElement
+
+  function clickHandler (event: MouseEvent) {
+    showPopup(ViewletSetting, { viewlet }, btn)
+  }
+
+  $: viewOptions = getViewOptions(viewlet, $viewOptionStore)
+
+  const query = createQuery()
+
+  $: query.query(
+    view.class.Viewlet,
+    viewletQuery,
+    (res) => {
+      viewlets = res
+      viewlet = viewlets[0]
+      dispatch('viewlets', viewlets)
+    },
+    {
+      lookup: {
+        descriptor: view.class.ViewletDescriptor
+      }
+    }
+  )
+
+  const preferenceQuery = createQuery()
+
+  $: if (viewlet != null) {
+    preferenceQuery.query(
+      view.class.ViewletPreference,
+      {
+        attachedTo: viewlet._id
+      },
+      (res) => {
+        preference = res[0]
+        loading = false
+      },
+      { limit: 1 }
+    )
+  } else {
+    preferenceQuery.unsubscribe()
+  }
+</script>
+
+{#if viewlet}
+  <div class="flex-row-center gap-2 reverse">
+    {#if viewOptions}
+      <ViewOptionsButton {viewlet} {kind} {viewOptions} />
+    {/if}
+    <Button
+      icon={view.icon.Configure}
+      label={view.string.Show}
+      {kind}
+      shrink={1}
+      adaptiveShrink={'sm'}
+      showTooltip={{ label: view.string.CustomizeView, direction: 'bottom' }}
+      bind:input={btn}
+      on:click={clickHandler}
+    />
+  </div>
+{/if}