@operato/data-grist 2.0.0-alpha.132 → 2.0.0-alpha.133

package/src/data-grist.ts

@@ -10,6 +10,7 @@ import isEqual from 'lodash-es/isEqual'
 import Headroom from '@operato/headroom'
 import { pulltorefresh } from '@operato/pull-to-refresh'
 import { HeadroomStyles, ScrollbarStyles, SpinnerStyles } from '@operato/styles'
+import { PagePreferenceProvider } from '@operato/p13n'
 import { SnapshotTaker, TimeCapsule } from '@operato/utils'
 
 import { buildConfig } from './configure/config-builder'
@@ -171,12 +172,12 @@ export class DataGrist extends LitElement implements DataConsumer {
    */
   @property({ type: Boolean, attribute: 'url-params-sensitive' }) urlParamsSensitive?: boolean
 
-  @property({ type: Object }) personalConfigProvider?: {
-    load(): PersonalGristPreference | Promise<PersonalGristPreference | undefined> | undefined
-    save(
-      preference?: PersonalGristPreference
-    ): PersonalGristPreference | Promise<PersonalGristPreference | undefined> | undefined
-    reset(): void | Promise<void>
+  @property({ type: Object }) personalConfigProvider: PagePreferenceProvider = {
+    load: () => {
+      return {}
+    },
+    save: preference => preference,
+    reset: () => {}
   }
 
   @state() personalConfig?: {
@@ -202,6 +203,9 @@ export class DataGrist extends LitElement implements DataConsumer {
   private originMarginTop?: string
   private lastLocation: { origin?: string; pathname?: string; search?: string } = {}
 
+  /* 그리드가 준비되기 전에 fetch 요청이 있었음을 나타내는 플래그임 */
+  private pendingFetch?: boolean
+
   private popstateEventHandler: EventListener = ((e: Event) => {
     const { origin, pathname, search } = window.location
     if (
@@ -315,7 +319,7 @@ export class DataGrist extends LitElement implements DataConsumer {
   }
 
   public applyUpdatedConfiguration() {
-    if (!this.config?.columns) {
+    if (!this.personalConfig) {
       return
     }
 
@@ -323,7 +327,7 @@ export class DataGrist extends LitElement implements DataConsumer {
     const columns: Partial<ColumnConfig>[] = config.columns
 
     if (this.personalConfig) {
-      const { columns: personalColumns } = this.personalConfig
+      const { columns: personalColumns, sorters, pagination, mode } = this.personalConfig
 
       if (personalColumns) {
         const xcolumns = columns.map((column: Partial<ColumnConfig>) => {
@@ -355,6 +359,18 @@ export class DataGrist extends LitElement implements DataConsumer {
         // 배열 재정렬 실행
         config.columns = reorderList(xcolumns as any, personalColumns as any)
       }
+
+      if (pagination) {
+        config.pagination = pagination
+      }
+
+      if (sorters) {
+        config.sorters = sorters
+      }
+
+      if (mode) {
+        this.mode = mode
+      }
     }
 
     this._config = buildConfig({
@@ -404,7 +420,8 @@ export class DataGrist extends LitElement implements DataConsumer {
       this.dataProvider.limit = limit || pages[0] || ZERO_PAGES[0]
     }
 
-    if (!this.urlParamsSensitive && !this.explicitFetch) {
+    if (this.pendingFetch || (!this.urlParamsSensitive && !this.explicitFetch)) {
+      this.pendingFetch = false
       this.fetch()
     }
   }
@@ -546,9 +563,10 @@ export class DataGrist extends LitElement implements DataConsumer {
    * @param {boolean} reset - If true, the method resets the scroll position to the top.
    */
   async fetch(reset = true) {
-    if (!this.compiledConfig) {
+    if (this.compiledConfig === ZERO_CONFIG) {
       /* avoid to be here */
       console.warn('grist is not configured yet.')
+      this.pendingFetch = true
       return
     }
 
@@ -574,6 +592,8 @@ export class DataGrist extends LitElement implements DataConsumer {
           sortings: this.sorters || this.compiledConfig?.sorters,
           filters: this.filters
         })
+
+        this.pagination && (this.pagination!.limit = limit)
       }
     }
   }
@@ -589,9 +609,9 @@ export class DataGrist extends LitElement implements DataConsumer {
       await this.requestUpdate()
     }
 
-    if (changes.has('personalConfigProvider') && this.personalConfigProvider) {
+    if (changes.has('personalConfigProvider')) {
       this.personalConfig = await this.personalConfigProvider.load()
-    } else if (changes.has('config') || changes.has('personalConfig')) {
+    } else if (changes.has('personalConfig')) {
       this.applyUpdatedConfiguration()
     }
 
@@ -1151,4 +1171,8 @@ export class DataGrist extends LitElement implements DataConsumer {
       })
     )
   }
+
+  getCurrentLimit() {
+    return this.dataProvider?.limit || ZERO_PAGINATION.limit
+  }
 }

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

@@ -30,8 +30,6 @@ export class OxGristPersonalizer extends LitElement {
     `
   ]
 
-  @property({ type: String }) page!: string
-  @property({ type: String }) element!: string
   @property({ type: Boolean, attribute: true }) debug: boolean = false
 
   @state() private preference?: PersonalGristPreference
@@ -42,7 +40,7 @@ export class OxGristPersonalizer extends LitElement {
         @click=${(e: MouseEvent) => {
           const grist = this.closest('ox-grist') as DataGrist
 
-          const { config, compiledConfig } = grist
+          const { config, compiledConfig, sorters, pagination, mode } = grist
           const { columns: compiledColumns } = compiledConfig
 
           const columns = compiledColumns
@@ -59,7 +57,13 @@ export class OxGristPersonalizer extends LitElement {
                 hidden: column.hidden,
                 width: column.width
               }
-            })
+            }),
+            sorters,
+            pagination: {
+              ...pagination,
+              limit: grist.getCurrentLimit()
+            },
+            mode
           }
 
           const template = html`

package/stories/grid-setting.stories.ts

@@ -403,7 +403,11 @@ const Template: Story<ArgTypes> = ({
             columns: [
               { name: 'name', hidden: false, width: 200 },
               { name: 'description', hidden: true }
-            ]
+            ],
+            pagination: {
+              pages: [20, 30, 50, 100, 200],
+              limit: 30
+            }
           }
         },
         async save(preference: PersonalGristPreference) {