@operato/data-grist 2.0.0-alpha.111 → 2.0.0-alpha.114

package/src/data-grist.ts

@@ -170,8 +170,13 @@ export class DataGrist extends LitElement implements DataConsumer {
    */
   @property({ type: Boolean, attribute: 'url-params-sensitive' }) urlParamsSensitive?: boolean
 
-  @state() _data: GristData = ZERO_DATA
-  @state() _config: GristConfig = ZERO_CONFIG
+  @property({ type: Object }) personalSetting?: {
+    columns?: Partial<ColumnConfig>[]
+    [key: string]: any
+  }
+
+  @state() _data: GristData = ZERO_DATA // copy data, dirty data
+  @state() _config: GristConfig = ZERO_CONFIG // compiled configuration
   @state() private _showSpinner: boolean = false
 
   @query('slot[name=headroom]') head!: HTMLElement
@@ -300,9 +305,23 @@ export class DataGrist extends LitElement implements DataConsumer {
     }
   }
 
-  private setConfig() {
+  public applyUpdatedConfiguration() {
+    const config = this.config
+    const { columns } = config
+
+    if (this.personalSetting) {
+      const { columns: personalColumns } = this.personalSetting
+
+      if (personalColumns) {
+        config.columns = columns.map((column: Partial<ColumnConfig>) => {
+          const personalColumn = personalColumns.find(pcolumn => pcolumn.name == column.name)
+          return personalColumn ? { ...column, ...personalColumn } : column
+        })
+      }
+    }
+
     this._config = buildConfig({
-      ...this.config
+      ...config
     })
 
     this.dispatchEvent(
@@ -534,7 +553,7 @@ export class DataGrist extends LitElement implements DataConsumer {
     }
 
     if (changes.has('config')) {
-      this.setConfig()
+      this.applyUpdatedConfiguration()
     }
 
     if (changes.has('fetchHandler')) {

package/stories/grid-setting.stories.ts

@@ -7,12 +7,14 @@ import '@material/web/icon/icon.js'
 
 import { html, TemplateResult } from 'lit'
 
+import { OxPopupList } from '@operato/popup'
 import { CommonHeaderStyles, CommonGristStyles } from '@operato/styles'
 
 import {
   ColumnConfig,
   FetchHandler,
   GristClassifier,
+  GristConfig,
   GristEventHandlerSet,
   GristRecord,
   ValidationCallback
@@ -353,9 +355,9 @@ interface Story<T> {
 
 interface ArgTypes {
   config: object
-  mode: string
+  mode: 'GRID' | 'LIST' | 'CARD'
   urlParamsSensitive: boolean
-  fetchHandler: object
+  fetchHandler: FetchHandler
 }
 
 const Template: Story<ArgTypes> = ({ config, mode = 'GRID', urlParamsSensitive = false, fetchHandler }: ArgTypes) =>
@@ -377,14 +379,52 @@ const Template: Story<ArgTypes> = ({ config, mode = 'GRID', urlParamsSensitive =
     <link href="/themes/grist-theme.css" rel="stylesheet" />
 
     <style>
-      ${CommonGristStyles.cssText}
-      ${CommonHeaderStyles.cssText}
+      ${CommonGristStyles.cssText} ${CommonHeaderStyles.cssText}
+    </style>
+
+    <style>
+      ox-popup-list {
+        width: 200px;
+        max-height: 300px;
+        overflow: scroll;
+      }
+
+      [slot='setting'] {
+        --md-icon-size: 14px;
+        width: 16px;
+        height: 16px;
+        background-color: rgba(var(--secondary-color-rgb), 0.6);
+        border-radius: 0px 0px 7px 7px;
+        color: var(--theme-white-color);
+        cursor: pointer;
+      }
+
+      [slot='setting']:hover {
+        color: var(--primary-color);
+      }
+
+      ox-popup-list {
+        .header {
+          display: flex;
+          flex-direction: row;
+          align-items: center;
+          text-transform: capitalize;
+        }
+
+        .header md-icon {
+          --md-icon-size: 1.2em;
+          margin-left: auto;
+        }
+      }
     </style>
 
     <ox-grist
-      .config=${config}
       .mode=${mode}
+      .config=${config}
       .fetchHandler=${fetchHandler}
+      .personalSetting=${{
+        columns: [{ name: 'description', hidden: true }]
+      }}
       ?url-params-sensitive=${urlParamsSensitive}
       @filters-change=${(e: Event) => console.log('filters', (e.target as any).filters)}
     >
@@ -426,8 +466,49 @@ const Template: Story<ArgTypes> = ({ config, mode = 'GRID', urlParamsSensitive =
         slot="setting"
         @click=${(e: MouseEvent) => {
           const grist = (e.target as HTMLElement).closest('ox-grist') as DataGrist
-          alert('setting clicked. will fetch again.')
-          grist?.fetch()
+
+          const { compiledConfig: config } = grist
+          const columns = (config as GristConfig).columns.filter(
+            column => column.name && column.type !== 'gutter' && column.name != 'id'
+          )
+
+          const template = html`
+            <div class="header">
+              select to show<md-icon
+                @click=${(e: MouseEvent) =>
+                  ((e.target as HTMLElement).closest('ox-popup-list') as OxPopupList)?.close()}
+                >save</md-icon
+              >
+            </div>
+            ${columns.map(
+              column =>
+                html`<ox-checkbox label="checkbox" ?checked=${!column.hidden} value=${column.name} option />${column.name}</ox-checkbox>`
+            )}
+          `
+
+          const popup = OxPopupList.open({
+            template,
+            multiple: true,
+            attrSelected: 'checked',
+            top: e.pageY,
+            left: e.pageX
+          })
+
+          popup.onselect = (e: Event) => {
+            console.log('select', e.target, (e as CustomEvent).detail, (e.target as OxPopupList).value)
+            const selected = (e as CustomEvent).detail
+
+            const pconfig = grist.personalSetting || {}
+            pconfig.columns = columns.map(column => {
+              return {
+                name: column.name,
+                hidden: selected.indexOf(column.name) == -1
+              }
+            })
+            grist.personalSetting = pconfig
+
+            grist.applyUpdatedConfiguration()
+          }
         }}
         >tune</md-icon
       >