@operato/data-grist 2.0.0-alpha.115 → 2.0.0-alpha.117

package/src/data-grist.ts

@@ -29,6 +29,7 @@ import {
   GristRecord,
   GristSelectFunction,
   PaginationConfig,
+  PersonalGristPreference,
   SortersConfig
 } from './types'
 import { convertListParamToSearchString, convertSearchStringToListParam } from './utils'
@@ -170,7 +171,14 @@ export class DataGrist extends LitElement implements DataConsumer {
    */
   @property({ type: Boolean, attribute: 'url-params-sensitive' }) urlParamsSensitive?: boolean
 
-  @property({ type: Object }) personalConfig?: {
+  @property({ type: Object }) personalConfigProvider?: {
+    load(): PersonalGristPreference | Promise<PersonalGristPreference | undefined> | undefined
+    save(
+      preference?: PersonalGristPreference
+    ): PersonalGristPreference | Promise<PersonalGristPreference | undefined> | undefined
+  }
+
+  @state() personalConfig?: {
     columns?: Partial<ColumnConfig>[]
     [key: string]: any
   }
@@ -552,10 +560,19 @@ export class DataGrist extends LitElement implements DataConsumer {
       await this.requestUpdate()
     }
 
-    if (changes.has('config') || changes.has('personalConfig')) {
+    if (changes.has('personalConfigProvider')) {
+      if (this.personalConfigProvider) {
+        this.personalConfig = await this.personalConfigProvider.load()
+        this.applyUpdatedConfiguration()
+      }
+    } else if (changes.has('config') || changes.has('personalConfig')) {
       this.applyUpdatedConfiguration()
     }
 
+    // if (changes.has('config') || changes.has('personalConfig')) {
+    //   this.applyUpdatedConfiguration()
+    // }
+
     if (changes.has('fetchHandler')) {
       this.dataProvider && (this.dataProvider.fetchHandler = this.fetchHandler)
       needToSetPullToRefresh = true

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

@@ -0,0 +1,122 @@
+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 { GristConfig, PersonalGristPreference } from '../types'
+import { DataGrist } from '../data-grist'
+
+@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
+
+  @state() private preference?: PersonalGristPreference
+
+  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=${async (e: MouseEvent) => {
+                  if (grist.personalConfigProvider) {
+                    this.preference = await grist.personalConfigProvider.save(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: PersonalGristPreference = 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/src/types.ts

@@ -761,3 +761,17 @@ export type GristData = {
  * @returns {boolean} - `true` if the record should be selected, `false` otherwise.
  */
 export type GristSelectFunction = (record: GristRecord) => boolean
+
+/**
+ * Defines a type for personalized grid settings. It includes individual column settings and additional configurations specific to a user's grid view.
+ *
+ * @typedef {Object} PersonalGristPreference
+ * @property {Partial<ColumnConfig>[]} [columns] - Partially defines the configuration for each column in the grid.
+ *   Each element can include only some properties of the `ColumnConfig`, used for optionally overriding column settings.
+ * @property {any} [key] - Allows for storing additional user-defined properties with dynamic keys.
+ *   This property can include various custom settings beyond the grid configuration, and the keys can be freely defined.
+ */
+export type PersonalGristPreference = {
+  columns?: Partial<ColumnConfig>[]
+  [key: string]: any
+}

package/stories/grid-setting.stories.ts

@@ -1,25 +1,25 @@
+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'
 
-import { OxPopupList } from '@operato/popup'
 import { CommonHeaderStyles, CommonGristStyles } from '@operato/styles'
 
 import {
   ColumnConfig,
   FetchHandler,
   GristClassifier,
-  GristConfig,
   GristEventHandlerSet,
   GristRecord,
+  PersonalGristPreference,
   ValidationCallback
 } from '../src/types.js'
-import { DataGrist } from '../src/index.js'
 
 const fetchHandler: FetchHandler = async ({ page, limit }) => {
   var total = 120993
@@ -382,48 +382,23 @@ 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}
-      .personalConfig=${{
-        columns: [{ name: 'description', hidden: true }]
+      .personalConfigProvider=${{
+        load() {
+          return {
+            columns: [
+              { name: 'name', hidden: false, width: 200 },
+              { name: 'description', hidden: true }
+            ]
+          }
+        },
+        save(preference: PersonalGristPreference) {
+          console.log('saving preference', preference)
+          return preference
+        }
       }}
       ?url-params-sensitive=${urlParamsSensitive}
       @filters-change=${(e: Event) => console.log('filters', (e.target as any).filters)}
@@ -461,57 +436,7 @@ const Template: Story<ArgTypes> = ({ config, mode = 'GRID', urlParamsSensitive =
         </ox-record-creator>
       </div>
 
-      <md-icon
-        title="personal setting"
-        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.personalConfig || {}
-            pconfig.columns = columns.map(column => {
-              return {
-                name: column.name,
-                hidden: selected.indexOf(column.name) == -1
-              }
-            })
-            grist.personalConfig = pconfig
-
-            grist.applyUpdatedConfiguration()
-          }
-        }}
-        >tune</md-icon
-      >
+      <ox-grist-personalizer slot="setting"></ox-grist-personalizer>
     </ox-grist>`
 
 export const Regular = Template.bind({})