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

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,17 @@ export class DataGrist extends LitElement implements DataConsumer {
       await this.requestUpdate()
     }
 
-    if (changes.has('config') || changes.has('personalConfig')) {
+    if (changes.has('personalConfigProvider') && 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/index.ts

@@ -12,5 +12,6 @@ export * from './gutters'
 export * from './filters'
 export * from './sorters/sorters-control'
 export * from './record-view'
+export * from './personalizer'
 
 export * from './utils/list-param'

package/src/personalizer/index.ts

@@ -0,0 +1 @@
+export * from './ox-grist-personalizer'

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

@@ -1,18 +1,14 @@
-import '@material/web/icon/icon.js'
+import '@material/web/button/outlined-button.js'
 
 import { css, html, LitElement } from 'lit'
 import { customElement, property, state } from 'lit/decorators.js'
 
+import { i18next } from '@operato/i18n'
 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 +31,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`
@@ -64,21 +55,15 @@ export class OxGristPersonalizer extends LitElement {
 
           const template = html`
             <div class="personalizer-header" slot="header">
-              select to show<md-icon
+              ${i18next.t('text.column visibility setting')}<md-outlined-button
                 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
+                >${i18next.t('button.save')}</md-outlined-button
               >
             </div>
 
@@ -96,13 +81,17 @@ export class OxGristPersonalizer extends LitElement {
             left: e.pageX,
             styles: css`
               :host {
-                width: 200px;
-                max-height: 300px;
+                width: 240px;
+                max-height: 360px;
                 overflow: scroll;
               }
 
               ::slotted(.personalizer-header) {
                 --md-icon-size: 1.2em;
+                --md-outlined-button-container-height: 24px;
+                --md-outlined-button-container-shape: 4px;
+                --md-outlined-button-leading-space: 4px;
+                --md-outlined-button-trailing-space: 4px;
 
                 display: flex;
                 flex-direction: row;
@@ -115,7 +104,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({})