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

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

@@ -5,14 +5,9 @@ import { customElement, property, state } from 'lit/decorators.js'
 
 import { OxPopupList } from '@operato/popup'
 
-import { ColumnConfig, GristConfig } from '../types'
+import { GristConfig, PersonalGristPreference } 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 = [
@@ -35,13 +30,8 @@ export class OxGristPersonalizer extends LitElement {
 
   @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
+  @state() private preference?: PersonalGristPreference
 
   render() {
     return html`
@@ -66,16 +56,10 @@ export class OxGristPersonalizer extends LitElement {
             <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
-                      }
-                    })
-                  )
+                @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
@@ -115,7 +99,7 @@ export class OxGristPersonalizer extends LitElement {
           popup.onselect = (e: Event) => {
             const selected = (e as CustomEvent).detail
 
-            const pconfig: PersonalPagePreference = grist.personalConfig || {}
+            const pconfig: PersonalGristPreference = grist.personalConfig || {}
             pconfig.columns = columns.map(column => {
               return {
                 name: column.name,

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

@@ -9,19 +9,17 @@ 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
@@ -388,8 +386,19 @@ const Template: Story<ArgTypes> = ({ config, mode = 'GRID', urlParamsSensitive =
       .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)}
@@ -427,15 +436,7 @@ const Template: Story<ArgTypes> = ({ config, mode = 'GRID', urlParamsSensitive =
         </ox-record-creator>
       </div>
 
-      <ox-grist-personalizer
-        page="sample-page"
-        element="sample-element"
-        slot="setting"
-        @save=${(e: CustomEvent) => {
-          const { page, element, preference } = e.detail as any
-          console.log(page, element, preference)
-        }}
-      ></ox-grist-personalizer>
+      <ox-grist-personalizer slot="setting"></ox-grist-personalizer>
     </ox-grist>`
 
 export const Regular = Template.bind({})