List extract (#2505)

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

@@ -13,14 +13,42 @@
 // limitations under the License.
 -->
 <script lang="ts">
-  import { Button, showPopup, IconDownOutline, Label } from '@hcengineering/ui'
-  import { Viewlet } from '@hcengineering/view'
-  import ViewletSetting from './ViewletSetting.svelte'
+  import { Button, eventToHTMLElement, IconDownOutline, Label, showPopup } from '@hcengineering/ui'
+  import { Viewlet, ViewOptionsModel } from '@hcengineering/view'
   import view from '../plugin'
+  import { defaulOptions, getViewOptions, setViewOptions, viewOptionsStore } from '../viewOptions'
+  import ViewletSetting from './ViewletSetting.svelte'
+  import ViewOptions from './ViewOptions.svelte'
 
   export let viewlet: Viewlet | undefined
 
   let btn: HTMLButtonElement
+
+  $: viewlet && loadViewOptionsStore(viewlet.viewOptions, viewlet._id)
+
+  function loadViewOptionsStore (config: ViewOptionsModel | undefined, key: string) {
+    if (!config) return
+    viewOptionsStore.set(getViewOptions(key) ?? defaulOptions)
+  }
+
+  function clickHandler (event: MouseEvent) {
+    if (viewlet?.viewOptions !== undefined) {
+      showPopup(
+        ViewOptions,
+        { viewlet, config: viewlet.viewOptions, viewOptions: $viewOptionsStore },
+        eventToHTMLElement(event),
+        undefined,
+        (result) => {
+          if (result?.key === undefined) return
+          $viewOptionsStore[result.key] = result.value
+          viewOptionsStore.set($viewOptionsStore)
+          setViewOptions(viewlet?._id ?? '', $viewOptionsStore)
+        }
+      )
+    } else {
+      showPopup(ViewletSetting, { viewlet }, btn)
+    }
+  }
 </script>
 
 {#if viewlet}
@@ -30,9 +58,7 @@
     size={'small'}
     showTooltip={{ label: view.string.CustomizeView }}
     bind:input={btn}
-    on:click={() => {
-      showPopup(ViewletSetting, { viewlet }, btn)
-    }}
+    on:click={clickHandler}
   >
     <svelte:fragment slot="content">
       <div class="flex-row-center clear-mins pointer-events-none">