@operato/scene-grist 2.0.0-alpha.6 → 2.0.0-beta.0

package/src/grist-action.ts

@@ -3,6 +3,7 @@
  *
  * grist 컴포넌트를 보조하여 grist의 각종 동작을 수행하는 컴포넌트.
  */
+import 'ses'
 
 import { Component, ComponentNature, Properties, RectPath, ValueHolder } from '@hatiolab/things-scene'
 import { DataGrist } from '@operato/data-grist'
@@ -17,7 +18,8 @@ export enum ACTIONS {
   GET_DIRTY = 'getDirtyRows',
   ADD_ROW = 'addRow',
   DELETE_SELECTED_ROWS = 'deleteSelectedRowsSoftly',
-  GET_PAGE_INFO = 'getPageInfo'
+  GET_PAGE_INFO = 'getPageInfo',
+  GET_LIST_PARAM = 'getListParam'
 }
 
 const NATURE: ComponentNature = {
@@ -46,6 +48,11 @@ const NATURE: ComponentNature = {
             display: 'Get page information',
             value: ACTIONS.GET_PAGE_INFO
           },
+          {
+            // 페이지네이션 정보 가져오기
+            display: 'Get ListParam',
+            value: ACTIONS.GET_LIST_PARAM
+          },
           {
             // 모든 레코드 데이터 가져오기
             display: 'Get all rows',
@@ -141,6 +148,16 @@ export default class GristAction extends ValueHolder(RectPath(Component)) {
             this.data = this.getPageInfoFrom(null, fetchedData)
             this.doDataMap()
           }
+        } else if (after.action == ACTIONS.GET_LIST_PARAM) {
+          gristComponent.beforeFetchFuncs[refid] = (fetchedData: {
+            page: number
+            limit: number
+            total: number
+            records: GristRecord[]
+          }) => {
+            this.data = this.getListParamFrom(null, fetchedData)
+            this.doDataMap()
+          }
         } else {
           delete gristComponent.beforeFetchFuncs[refid]
         }
@@ -194,10 +211,11 @@ export default class GristAction extends ValueHolder(RectPath(Component)) {
       case ACTIONS.ADD_ROW:
         {
           var records = grist.dirtyData.records || []
+          const c = new Compartment()
 
           let recordFormat
           try {
-            recordFormat = eval(`(${this.state.recordFormat})`)
+            recordFormat = c.evaluate(`(${this.state.recordFormat})`)
           } catch (e) {
             console.log('Invalid JSON format. It will be assumed as empty object.\n', e)
             recordFormat = {}
@@ -223,6 +241,9 @@ export default class GristAction extends ValueHolder(RectPath(Component)) {
       case ACTIONS.GET_PAGE_INFO:
         data = this.getPageInfoFrom(grist)
         break
+      case ACTIONS.GET_LIST_PARAM:
+        data = this.getListParamFrom(grist)
+        break
     }
 
     // 이 컴포넌트의 data 값이 바뀌는 동작은 데이터 매핑까지 실행함
@@ -292,6 +313,38 @@ export default class GristAction extends ValueHolder(RectPath(Component)) {
     }
   }
 
+  // Grist로부터 ListParam 정보를 가져옴
+  getListParamFrom(grist: DataGrist | null, fetchedData?: GristData) {
+    var {
+      page = 1,
+      limit = 20,
+      sorters,
+      sortings,
+      filters = [],
+      inherited,
+      options
+      // @ts-ignore
+    } = fetchedData || (grist && grist.dataProvider) || pagination(grist!)
+
+    return {
+      pagination: { page, limit },
+      sortings: sorters || sortings,
+      filters,
+      inherited,
+      options
+    }
+
+    function pagination(grist: DataGrist) {
+      var config = grist && grist.config && grist.config.pagination
+      if (config)
+        return {
+          page: config.page,
+          limit: config.limit || (config.pages && config.pages[0])
+        }
+      else return {}
+    }
+  }
+
   // 레코드들을 서버 공통 resolver에 맞는 포맷으로 만듦
   buildPatches(patches: GristRecord[]): GristRecord[] {
     return patches.map(patch => {
@@ -345,7 +398,7 @@ export default class GristAction extends ValueHolder(RectPath(Component)) {
 
   get targetGristComponent(): SceneGrist {
     var { target } = this.state
-    return this.root.findById(target) as SceneGrist
+    return target && (this.root.findById(target) as SceneGrist)
   }
 
   get targetGristElement(): DataGrist | undefined {

package/src/grist.ts

@@ -2,10 +2,13 @@
  * Copyright © HatioLab Inc. All rights reserved.
  */
 
-import '@operato/data-grist'
+import 'ses'
+import '@operato/data-grist/ox-grist.js'
+import '@operato/data-grist/ox-filters-form.js'
 
 import { Component, ComponentNature, error, HTMLOverlayElement, Properties } from '@hatiolab/things-scene'
 import { DataGrist, FetchResult } from '@operato/data-grist'
+import { i18next as _i18next } from '@operato/i18n'
 import { FetchOption } from '@operato/data-grist/dist/src/types'
 
 const NATURE: ComponentNature = {
@@ -43,6 +46,11 @@ const NATURE: ComponentNature = {
       label: 'config',
       name: 'config'
     },
+    {
+      type: 'checkbox',
+      label: 'filterable',
+      name: 'filterable'
+    },
     {
       type: 'checkbox',
       label: 'appendable',
@@ -127,8 +135,6 @@ export default class SceneGrist extends HTMLOverlayElement {
     super.createElement()
 
     this.grist = document.createElement('ox-grist') as DataGrist
-    this.grist.style.setProperty('--grist-padding', '0')
-
     this.element.appendChild(this.grist)
 
     this.rescale()
@@ -137,8 +143,18 @@ export default class SceneGrist extends HTMLOverlayElement {
 
     this.setGristConfig(grist)
 
-    grist.fetchHandler = async ({ page, limit, sorters, options }: FetchOption): Promise<FetchResult> => {
-      Object.values(this.beforeFetchFuncs).forEach((func: any) => func({ page, limit, sorters, options }))
+    grist.fetchHandler = async ({
+      page,
+      limit,
+      sorters,
+      sortings,
+      filters,
+      inherited,
+      options
+    }: FetchOption): Promise<FetchResult> => {
+      Object.values(this.beforeFetchFuncs).forEach((func: any) =>
+        func({ page, limit, sorters, sortings, filters, inherited, options })
+      )
       var { total = 0, records = [] } = grist.data || {}
 
       return {
@@ -198,7 +214,13 @@ export default class SceneGrist extends HTMLOverlayElement {
   onchange(after: Properties, before: Properties) {
     super.onchange(after, before)
 
-    if ('mode' in after || 'appendable' in after || 'paginatable' in after || 'config' in after) {
+    if (
+      'mode' in after ||
+      'filterable' in after ||
+      'appendable' in after ||
+      'paginatable' in after ||
+      'config' in after
+    ) {
       this.setGristConfig(this.grist)
     }
 
@@ -226,7 +248,7 @@ export default class SceneGrist extends HTMLOverlayElement {
       return
     }
 
-    var { mode } = this.state
+    var { mode, filterable } = this.state
 
     if (mode != 'DEVICE') {
       grist.mode = mode
@@ -235,6 +257,16 @@ export default class SceneGrist extends HTMLOverlayElement {
     }
 
     grist.config = this.config
+
+    grist.innerHTML = filterable
+      ? `
+        <div slot="headroom">
+          <div style="padding: 9px 9px 0px 9px;">
+            <ox-filters-form autofocus></ox-filters-form>
+          </div>
+        </div>
+        `
+      : ''
   }
 
   /*
@@ -276,7 +308,12 @@ export default class SceneGrist extends HTMLOverlayElement {
 
     if (typeof config !== 'object') {
       try {
-        config = eval(`(${config})`)
+        const c = new Compartment({
+          t: _i18next.t,
+          i18next: _i18next
+        })
+
+        config = c.evaluate(`(${config})`)
       } catch (e) {
         error(e)
       }

package/translations/en.json

@@ -9,6 +9,7 @@
   "label.run-at-startup": "run at startup",
   "label.record-adder-format": "default when adding row",
   "label.appendable": "appendable",
+  "label.filterable": "filterable",
   "label.paginatable": "paginatable",
   "label.bound-data": "bound data"
 }

package/translations/ja.json

@@ -9,6 +9,7 @@
   "label.run-at-startup": "起動時に実行",
   "label.record-adder-format": "行追加時のデフォルト",
   "label.appendable": "追加可能",
+  "label.filterable": "フィルタ可能",
   "label.paginatable": "ページング可能",
   "label.bound-data": "バインドデータ"
 }

package/translations/ko.json

@@ -9,6 +9,7 @@
   "label.run-at-startup": "시작 시 실행",
   "label.record-adder-format": "행 추가 시 초기값",
   "label.appendable": "행추가 가능",
+  "label.filterable": "필터 가능",
   "label.paginatable": "페이지네이션",
   "label.bound-data": "연결 데이타"
 }

package/translations/ms.json

@@ -9,6 +9,7 @@
   "label.run-at-startup": "Jalankan ketika memulakan",
   "label.record-adder-format": "Default ketika menambah baris",
   "label.appendable": "Boleh ditambah",
+  "label.filterable": "boleh ditapis",
   "label.paginatable": "Boleh dipaginasi",
   "label.bound-data": "Data Terikat"
 }

package/translations/zh.json

@@ -9,6 +9,7 @@
   "label.run-at-startup": "启动时运行",
   "label.record-adder-format": "添加行时的默认值",
   "label.appendable": "可追加",
+  "label.filterable": "可过滤",
   "label.paginatable": "可分页",
   "label.bound-data": "绑定数据"
 }

package/tsconfig.json

@@ -7,6 +7,7 @@
     "lib": ["es2019", "dom"],
     "strict": true,
     "esModuleInterop": false,
+    "allowJs": true,
     "allowSyntheticDefaultImports": true,
     "experimentalDecorators": true,
     "importHelpers": true,