UBER-691 (#3564)

Signed-off-by: Denis Bykhov <bykhov.denis@gmail.com>
hcengineering · Aug 7, 2023 · 07cc690 · 07cc690
1 parent 85d0400
commit 07cc690
Show file tree

Hide file tree

Showing 26 changed files with 346 additions and 306 deletions.
diff --git a/plugins/calendar-resources/src/components/Events.svelte b/plugins/calendar-resources/src/components/Events.svelte
@@ -16,10 +16,9 @@
   import { Event } from '@hcengineering/calendar'
   import { Class, DocumentQuery, Ref, Space, WithLookup } from '@hcengineering/core'
   import { Asset, IntlString } from '@hcengineering/platform'
-  import { createQuery } from '@hcengineering/presentation'
-  import { AnyComponent, Button, Component, Label, Loading, showPopup, TabList, IconAdd } from '@hcengineering/ui'
-  import view, { Viewlet, ViewletPreference } from '@hcengineering/view'
-  import { getViewOptions, setActiveViewletId, viewOptionStore } from '@hcengineering/view-resources'
+  import { AnyComponent, Button, Component, IconAdd, Label, Loading, showPopup } from '@hcengineering/ui'
+  import { Viewlet, ViewletPreference } from '@hcengineering/view'
+  import { ViewletSelector, getViewOptions, viewOptionStore } from '@hcengineering/view-resources'
   import calendar from '../plugin'
   // import { deviceOptionsStore as deviceInfo } from '@hcengineering/ui'
 
@@ -33,23 +32,10 @@
   export let createComponent: AnyComponent | undefined = calendar.component.CreateEvent
   export let createLabel: IntlString | undefined = calendar.string.CreateEvent
 
-  const viewletQuery = createQuery()
   const search = ''
   let resultQuery: DocumentQuery<Event> = {}
 
   let viewlets: WithLookup<Viewlet>[] = []
-  viewletQuery.query(
-    view.class.Viewlet,
-    { attachTo: _class },
-    (res) => {
-      viewlets = res
-      if (viewlet === undefined || res.findIndex((p) => p._id === viewlet?._id) === -1) {
-        viewlet = res[0]
-        setActiveViewletId(viewlet._id)
-      }
-    },
-    { lookup: { descriptor: view.class.ViewletDescriptor } }
-  )
 
   function updateResultQuery (search: string): void {
     resultQuery = search === '' ? { ...query } : { ...query, $search: search }
@@ -66,30 +52,9 @@
 
   let viewlet: WithLookup<Viewlet> | undefined
 
-  const preferenceQuery = createQuery()
   let preference: ViewletPreference | undefined
   let loading = true
 
-  $: viewlet &&
-    preferenceQuery.query(
-      view.class.ViewletPreference,
-      {
-        attachedTo: viewlet._id
-      },
-      (res) => {
-        preference = res[0]
-        loading = false
-      },
-      { limit: 1 }
-    )
-  $: viewslist = viewlets.map((views) => {
-    return {
-      id: views._id,
-      icon: views.$lookup?.descriptor?.icon,
-      tooltip: views.$lookup?.descriptor?.label
-    }
-  })
-
   $: viewOptions = getViewOptions(viewlet, $viewOptionStore)
 </script>
 
@@ -99,16 +64,7 @@
   </div>
 
   <div class="ac-header-full medium-gap mb-1">
-    {#if viewlets.length > 1}
-      <TabList
-        items={viewslist}
-        multiselect={false}
-        selected={viewlet?._id}
-        on:select={(result) => {
-          if (result.detail !== undefined) viewlet = viewlets.find((vl) => vl._id === result.detail.id)
-        }}
-      />
-    {/if}
+    <ViewletSelector bind:viewlet bind:loading bind:preference bind:viewlets viewletQuery={{ attachTo: _class }} />
     <Button icon={IconAdd} label={createLabel} kind={'accented'} on:click={showCreateDialog} />
   </div>
 </div>

diff --git a/plugins/contact-resources/src/components/Contacts.svelte b/plugins/contact-resources/src/components/Contacts.svelte
@@ -18,7 +18,13 @@
   import { ActionContext } from '@hcengineering/presentation'
   import { Button, Label, Loading, SearchEdit, showPopup } from '@hcengineering/ui'
   import view, { Viewlet, ViewletPreference, ViewOptions } from '@hcengineering/view'
-  import { FilterBar, FilterButton, TableBrowser, ViewletSettingButton } from '@hcengineering/view-resources'
+  import {
+    FilterBar,
+    FilterButton,
+    TableBrowser,
+    ViewletSelector,
+    ViewletSettingButton
+  } from '@hcengineering/view-resources'
   import contact from '../plugin'
   import CreateContact from './CreateContact.svelte'
   // import { deviceOptionsStore as deviceInfo } from '@hcengineering/ui'
@@ -68,16 +74,17 @@
       <FilterButton _class={contact.class.Contact} />
     </div>
     <div class="ac-header-full medium-gap">
-      <ViewletSettingButton
-        bind:viewOptions
+      <ViewletSelector
+        hidden
+        bind:viewlet
+        bind:preference
+        bind:loading
         viewletQuery={{
           attachTo: contact.class.Contact,
           descriptor: view.viewlet.Table
         }}
-        bind:viewlet
-        bind:preference
-        bind:loading
       />
+      <ViewletSettingButton bind:viewOptions bind:viewlet />
       <!-- <ActionIcon icon={IconMoreH} size={'small'} /> -->
     </div>
   </div>

diff --git a/plugins/contact-resources/src/components/Members.svelte b/plugins/contact-resources/src/components/Members.svelte
@@ -18,7 +18,7 @@
   import { createQuery, getClient } from '@hcengineering/presentation'
   import { Button, Icon, IconAdd, Label, showPopup } from '@hcengineering/ui'
   import { Viewlet, ViewletPreference } from '@hcengineering/view'
-  import { Table, ViewletSettingButton } from '@hcengineering/view-resources'
+  import { Table, ViewletSelector, ViewletSettingButton } from '@hcengineering/view-resources'
   import contact from '../plugin'
   import UsersPopup from './UsersPopup.svelte'
   import IconMembersOutline from './icons/MembersOutline.svelte'
@@ -75,13 +75,14 @@
       <Label label={contact.string.Members} />
     </span>
     <div class="buttons-group xsmall-gap">
-      <ViewletSettingButton
-        viewletQuery={{ _id: contact.viewlet.TableMember }}
-        kind={'ghost'}
+      <ViewletSelector
+        hidden
         bind:viewlet
         bind:preference
         bind:loading
+        viewletQuery={{ _id: contact.viewlet.TableMember }}
       />
+      <ViewletSettingButton kind={'ghost'} bind:viewlet />
       <Button id={contact.string.AddMember} icon={IconAdd} kind={'ghost'} on:click={createApp} />
     </div>
   </div>

diff --git a/plugins/document-resources/src/components/Documents.svelte b/plugins/document-resources/src/components/Documents.svelte
@@ -20,7 +20,7 @@
   import { ActionContext } from '@hcengineering/presentation'
   import { Label, Loading, SearchEdit } from '@hcengineering/ui'
   import view, { Viewlet, ViewletPreference } from '@hcengineering/view'
-  import { FilterButton, TableBrowser, ViewletSettingButton } from '@hcengineering/view-resources'
+  import { FilterButton, TableBrowser, ViewletSelector, ViewletSettingButton } from '@hcengineering/view-resources'
   import document from '../plugin'
 
   export let query: DocumentQuery<Document> = {}
@@ -57,15 +57,17 @@
       <FilterButton _class={document.class.Document} />
     </div>
     <div class="ac-header-full medium-gap">
-      <ViewletSettingButton
+      <ViewletSelector
+        hidden
+        bind:viewlet
+        bind:preference
+        bind:loading
         viewletQuery={{
           attachTo: document.class.Document,
           descriptor: view.viewlet.Table
         }}
-        bind:viewlet
-        bind:preference
-        bind:loading
       />
+      <ViewletSettingButton bind:viewlet />
       <!-- <ActionIcon icon={IconMoreH} size={'small'} /> -->
     </div>
   </div>

diff --git a/plugins/hr-resources/src/components/DepartmentStaff.svelte b/plugins/hr-resources/src/components/DepartmentStaff.svelte
@@ -20,7 +20,7 @@
   import { createQuery, getClient } from '@hcengineering/presentation'
   import { Button, IconAdd, Label, Scroller, eventToHTMLElement, showPopup } from '@hcengineering/ui'
   import { Viewlet, ViewletPreference } from '@hcengineering/view'
-  import { Table, ViewletSettingButton } from '@hcengineering/view-resources'
+  import { Table, ViewletSelector, ViewletSettingButton } from '@hcengineering/view-resources'
   import hr from '../plugin'
   import { addMember } from '../utils'
 
@@ -73,13 +73,14 @@
       <Label label={hr.string.Members} />
     </span>
     <div class="flex-row-center gap-2 reverse">
-      <ViewletSettingButton
-        viewletQuery={{ _id: hr.viewlet.TableMember }}
-        kind={'ghost'}
+      <ViewletSelector
+        hidden
         bind:viewlet
         bind:preference
         bind:loading
+        viewletQuery={{ _id: hr.viewlet.TableMember }}
       />
+      <ViewletSettingButton kind={'ghost'} bind:viewlet />
       <Button id={hr.string.AddEmployee} icon={IconAdd} kind={'ghost'} on:click={add} />
     </div>
   </div>

diff --git a/plugins/hr-resources/src/components/schedule/MonthTableView.svelte b/plugins/hr-resources/src/components/schedule/MonthTableView.svelte
@@ -20,7 +20,7 @@
   import { getEmbeddedLabel } from '@hcengineering/platform'
   import { Button, Label, Loading, showPopup, tableToCSV } from '@hcengineering/ui'
   import { BuildModelKey, Viewlet, ViewletPreference } from '@hcengineering/view'
-  import { TableBrowser, ViewletSettingButton } from '@hcengineering/view-resources'
+  import { TableBrowser, ViewletSelector, ViewletSettingButton } from '@hcengineering/view-resources'
   import hr from '../../plugin'
   import {
     EmployeeReports,
@@ -367,7 +367,14 @@
       <div class="clear-mins" />
       <div class="ac-header-full small-gap">
         <Button label={getEmbeddedLabel('Export')} on:click={(evt) => exportTable(evt)} />
-        <ViewletSettingButton viewletQuery={{ _id: hr.viewlet.StaffStats }} bind:viewlet bind:preference bind:loading />
+        <ViewletSelector
+          hidden
+          bind:viewlet
+          bind:preference
+          bind:loading
+          viewletQuery={{ _id: hr.viewlet.StaffStats }}
+        />
+        <ViewletSettingButton bind:viewlet />
       </div>
     </div>
     {#if viewlet}

diff --git a/plugins/lead-resources/src/components/MyLeads.svelte b/plugins/lead-resources/src/components/MyLeads.svelte
@@ -21,7 +21,13 @@
   import task from '@hcengineering/task'
   import { IModeSelector, Label, Loading, ModeSelector, resolvedLocationStore, SearchEdit } from '@hcengineering/ui'
   import { Viewlet, ViewletPreference, ViewOptions } from '@hcengineering/view'
-  import { FilterBar, FilterButton, TableBrowser, ViewletSettingButton } from '@hcengineering/view-resources'
+  import {
+    FilterBar,
+    FilterButton,
+    TableBrowser,
+    ViewletSelector,
+    ViewletSettingButton
+  } from '@hcengineering/view-resources'
   import { createEventDispatcher } from 'svelte'
   import lead from '../plugin'
 
@@ -102,16 +108,17 @@
     <div class="buttons-divider" />
     <FilterButton {_class} />
   </div>
-  <ViewletSettingButton
-    bind:viewOptions
+  <ViewletSelector
+    hidden
+    bind:viewlet
+    bind:preference
+    bind:loading
     viewletQuery={{
       attachTo: _class,
       descriptor: task.viewlet.StatusTable
     }}
-    bind:viewlet
-    bind:preference
-    bind:loading
   />
+  <ViewletSettingButton bind:viewOptions bind:viewlet />
 </div>
 <FilterBar {_class} query={searchQuery} {viewOptions} on:change={(e) => (resultQuery = e.detail)} />
 

diff --git a/plugins/recruit-resources/src/components/Applications.svelte b/plugins/recruit-resources/src/components/Applications.svelte
@@ -16,7 +16,7 @@
   import type { Doc, Ref } from '@hcengineering/core'
   import { Button, Icon, IconAdd, Label, Scroller, showPopup } from '@hcengineering/ui'
   import { Viewlet, ViewletPreference } from '@hcengineering/view'
-  import { Table, ViewletSettingButton } from '@hcengineering/view-resources'
+  import { Table, ViewletsSettingButton } from '@hcengineering/view-resources'
   import recruit from '../plugin'
   import CreateApplication from './CreateApplication.svelte'
   import IconApplication from './icons/Application.svelte'
@@ -44,7 +44,7 @@
       <Label label={recruit.string.Applications} />
     </span>
     <div class="flex-row-center gap-2 reverse">
-      <ViewletSettingButton
+      <ViewletsSettingButton
         viewletQuery={{ _id: recruit.viewlet.VacancyApplicationsEmbeddeed }}
         kind={'ghost'}
         bind:viewlet

diff --git a/plugins/recruit-resources/src/components/Organizations.svelte b/plugins/recruit-resources/src/components/Organizations.svelte
@@ -19,7 +19,13 @@
   import { Applicant, Vacancy } from '@hcengineering/recruit'
   import { Button, IconAdd, Label, Loading, SearchEdit, showPopup } from '@hcengineering/ui'
   import view, { BuildModelKey, Viewlet, ViewletPreference, ViewOptions } from '@hcengineering/view'
-  import { FilterBar, FilterButton, TableBrowser, ViewletSettingButton } from '@hcengineering/view-resources'
+  import {
+    FilterBar,
+    FilterButton,
+    TableBrowser,
+    ViewletSelector,
+    ViewletSettingButton
+  } from '@hcengineering/view-resources'
   import recruit from '../plugin'
   import CreateOrganization from './CreateOrganization.svelte'
   import VacancyListApplicationsPopup from './organizations/VacancyListApplicationsPopup.svelte'
@@ -205,16 +211,17 @@
     <FilterButton _class={recruit.mixin.VacancyList} />
   </div>
   <div class="ac-header-full medium-gap">
-    <ViewletSettingButton
-      bind:viewOptions
+    <ViewletSelector
+      hidden
       viewletQuery={{
         attachTo: recruit.mixin.VacancyList,
         descriptor: view.viewlet.Table
       }}
-      bind:viewlet
       bind:preference
       bind:loading
+      bind:viewlet
     />
+    <ViewletSettingButton bind:viewOptions bind:viewlet />
     <!-- <ActionIcon icon={IconMoreH} size={'small'} /> -->
   </div>
 </div>

diff --git a/plugins/recruit-resources/src/components/Vacancies.svelte b/plugins/recruit-resources/src/components/Vacancies.svelte
@@ -18,7 +18,13 @@
   import { Vacancy } from '@hcengineering/recruit'
   import { Button, IconAdd, Label, Loading, SearchEdit, showPopup, tableToCSV } from '@hcengineering/ui'
   import view, { BuildModelKey, ViewOptions, Viewlet, ViewletPreference } from '@hcengineering/view'
-  import { FilterBar, FilterButton, TableBrowser, ViewletSettingButton } from '@hcengineering/view-resources'
+  import {
+    FilterBar,
+    FilterButton,
+    TableBrowser,
+    ViewletSelector,
+    ViewletSettingButton
+  } from '@hcengineering/view-resources'
   import recruit from '../plugin'
   import CreateVacancy from './CreateVacancy.svelte'
 
@@ -149,16 +155,17 @@
     <FilterButton _class={recruit.class.Vacancy} />
   </div>
   <div class="ac-header-full medium-gap">
-    <ViewletSettingButton
-      bind:viewOptions
+    <ViewletSelector
+      hidden
       viewletQuery={{
         attachTo: recruit.class.Vacancy,
         descriptor: view.viewlet.Table
       }}
-      bind:viewlet
       bind:preference
       bind:loading
+      bind:viewlet
     />
+    <ViewletSettingButton bind:viewOptions bind:viewlet />
     <!-- <ActionIcon icon={IconMoreH} size={'small'} /> -->
   </div>
 </div>

diff --git a/plugins/recruit-resources/src/components/VacancyApplications.svelte b/plugins/recruit-resources/src/components/VacancyApplications.svelte
@@ -18,7 +18,7 @@
   import { recruitId, Vacancy } from '@hcengineering/recruit'
   import { Button, Icon, IconAdd, Label, Loading, resizeObserver, Scroller, showPopup } from '@hcengineering/ui'
   import { Viewlet, ViewletPreference } from '@hcengineering/view'
-  import { NavLink, Table, ViewletSettingButton } from '@hcengineering/view-resources'
+  import { NavLink, Table, ViewletsSettingButton } from '@hcengineering/view-resources'
   import recruit from '../plugin'
   import CreateApplication from './CreateApplication.svelte'
   import IconApplication from './icons/Application.svelte'
@@ -53,7 +53,7 @@
       </NavLink>
     </span>
     <div class="flex-row-center gap-2 reverse">
-      <ViewletSettingButton
+      <ViewletsSettingButton
         viewletQuery={{ _id: recruit.viewlet.VacancyApplicationsShort }}
         kind={'ghost'}
         bind:viewlet