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

package/src/data-grist.ts

@@ -170,7 +170,7 @@ export class DataGrist extends LitElement implements DataConsumer {
    */
   @property({ type: Boolean, attribute: 'url-params-sensitive' }) urlParamsSensitive?: boolean
 
-  @property({ type: Object }) personalSetting?: {
+  @property({ type: Object }) personalConfig?: {
     columns?: Partial<ColumnConfig>[]
     [key: string]: any
   }
@@ -309,8 +309,8 @@ export class DataGrist extends LitElement implements DataConsumer {
     const config = this.config
     const { columns } = config
 
-    if (this.personalSetting) {
-      const { columns: personalColumns } = this.personalSetting
+    if (this.personalConfig) {
+      const { columns: personalColumns } = this.personalConfig
 
       if (personalColumns) {
         config.columns = columns.map((column: Partial<ColumnConfig>) => {
@@ -552,7 +552,7 @@ export class DataGrist extends LitElement implements DataConsumer {
       await this.requestUpdate()
     }
 
-    if (changes.has('config')) {
+    if (changes.has('config') || changes.has('personalConfig')) {
       this.applyUpdatedConfiguration()
     }
 

package/src/personalizer/ox-grist-personalizer.ts

@@ -0,0 +1,138 @@
+import '@material/web/icon/icon.js'
+
+import { css, html, LitElement } from 'lit'
+import { customElement, property, state } from 'lit/decorators.js'
+
+import { OxPopupList } from '@operato/popup'
+
+import { ColumnConfig, GristConfig } from '../types'
+import { DataGrist } from '../data-grist'
+
+export type PersonalPagePreference = {
+  columns?: Partial<ColumnConfig>[]
+  [key: string]: any
+}
+
+@customElement('ox-grist-personalizer')
+export class OxGristPersonalizer extends LitElement {
+  static styles = [
+    css`
+      md-icon {
+        --md-icon-size: 14px;
+        width: 16px;
+        height: 16px;
+        background-color: rgba(var(--secondary-color-rgb), 0.6);
+        color: var(--primary-color);
+        border-radius: 0px 0px 7px 7px;
+        cursor: pointer;
+
+        &:hover {
+          color: var(--theme-white-color);
+        }
+      }
+    `
+  ]
+
+  @property({ type: String }) page!: string
+  @property({ type: String }) element!: string
+  @property({ type: Object }) saveCallback?: (
+    page: string,
+    element: string,
+    preference?: PersonalPagePreference
+  ) => void
+
+  @state() private preference?: PersonalPagePreference
+
+  render() {
+    return html`
+      <md-icon
+        @click=${(e: MouseEvent) => {
+          const grist = this.closest('ox-grist') as DataGrist
+
+          const { compiledConfig: config } = grist
+          const columns = (config as GristConfig).columns.filter(
+            column => column.name && column.type !== 'gutter' && column.name != 'id'
+          )
+
+          this.preference = columns.map(column => {
+            return {
+              name: column.name,
+              hidden: column.hidden,
+              width: column.width
+            }
+          })
+
+          const template = html`
+            <div class="personalizer-header" slot="header">
+              select to show<md-icon
+                style="margin-left: auto;"
+                @click=${(e: MouseEvent) => {
+                  this.dispatchEvent(
+                    new CustomEvent('save', {
+                      detail: {
+                        page: this.page,
+                        element: this.element,
+                        preference: this.preference
+                      }
+                    })
+                  )
+                  ;((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,
+            styles: css`
+              :host {
+                width: 200px;
+                max-height: 300px;
+                overflow: scroll;
+              }
+
+              ::slotted(.personalizer-header) {
+                --md-icon-size: 1.2em;
+
+                display: flex;
+                flex-direction: row;
+                align-items: center;
+                text-transform: capitalize;
+              }
+            `
+          })
+
+          popup.onselect = (e: Event) => {
+            const selected = (e as CustomEvent).detail
+
+            const pconfig: PersonalPagePreference = grist.personalConfig || {}
+            pconfig.columns = columns.map(column => {
+              return {
+                name: column.name,
+                hidden: selected.indexOf(column.name) == -1,
+                width: column.width
+              }
+            })
+
+            this.preference = pconfig
+
+            grist.personalConfig = this.preference
+
+            grist.applyUpdatedConfiguration()
+          }
+        }}
+        >settings</md-icon
+      >
+    `
+  }
+}

package/stories/grid-setting.stories.ts

@@ -1,9 +1,11 @@
+import '@material/web/icon/icon.js'
+import '@operato/popup/ox-popup-list.js'
+
 import '../src/index.js'
 import '../src/filters/filters-form.js'
 import '../src/sorters/sorters-control.js'
 import '../src/record-view/record-creator.js'
-import '@operato/popup/ox-popup-list.js'
-import '@material/web/icon/icon.js'
+import '../src/personalizer/ox-grist-personalizer.js'
 
 import { html, TemplateResult } from 'lit'
 
@@ -382,47 +384,11 @@ const Template: Story<ArgTypes> = ({ config, mode = 'GRID', urlParamsSensitive =
       ${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
       .mode=${mode}
       .config=${config}
       .fetchHandler=${fetchHandler}
-      .personalSetting=${{
+      .personalConfig=${{
         columns: [{ name: 'description', hidden: true }]
       }}
       ?url-params-sensitive=${urlParamsSensitive}
@@ -461,57 +427,15 @@ const Template: Story<ArgTypes> = ({ config, mode = 'GRID', urlParamsSensitive =
         </ox-record-creator>
       </div>
 
-      <md-icon
-        title="personal setting"
+      <ox-grist-personalizer
+        page="sample-page"
+        element="sample-element"
         slot="setting"
-        @click=${(e: MouseEvent) => {
-          const grist = (e.target as HTMLElement).closest('ox-grist') as DataGrist
-
-          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()
-          }
+        @save=${(e: CustomEvent) => {
+          const { page, element, preference } = e.detail as any
+          console.log(page, element, preference)
         }}
-        >tune</md-icon
-      >
+      ></ox-grist-personalizer>
     </ox-grist>`
 
 export const Regular = Template.bind({})