@operato/scene-grist 2.0.0-alpha.0 → 2.0.0-alpha.11

package/src/grist-action.ts

@@ -17,7 +17,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 +47,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 +147,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]
         }
@@ -223,6 +239,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 +311,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 +396,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,12 @@
  * Copyright © HatioLab Inc. All rights reserved.
  */
 
-import '@operato/data-grist'
+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 +45,11 @@ const NATURE: ComponentNature = {
       label: 'config',
       name: 'config'
     },
+    {
+      type: 'checkbox',
+      label: 'filterable',
+      name: 'filterable'
+    },
     {
       type: 'checkbox',
       label: 'appendable',
@@ -127,8 +134,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 +142,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 +213,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 +247,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 +256,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,6 +307,10 @@ export default class SceneGrist extends HTMLOverlayElement {
 
     if (typeof config !== 'object') {
       try {
+        var i18next = _i18next
+        //@ts-ignore 이 함수는 script에서 사용하기 위해서 스코프내에서 정의한 것임. 사용되지 않는다는 이유로 삭제하면 안됨.
+        var t = i18next.t
+
         config = eval(`(${config})`)
       } catch (e) {
         error(e)

package/translations/en.json

@@ -1,13 +1,15 @@
 {
-  "keyword": "keyword",
+  "component.grist": "data grid",
+  "component.grist-action": "data grid action",
   "label.grist-mode": "mode",
-  "label.target-grist": "target grist",
+  "label.target-grist": "target data grid",
   "label.config": "config",
   "label.action": "action",
   "label.content-scale": "content scale",
   "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

@@ -0,0 +1,15 @@
+{
+  "component.grist": "データグリッド",
+  "component.grist-action": "データグリッドアクション",
+  "label.grist-mode": "モード",
+  "label.target-grist": "対象データグリッド",
+  "label.config": "設定",
+  "label.action": "アクション",
+  "label.content-scale": "コンテンツスケール",
+  "label.run-at-startup": "起動時に実行",
+  "label.record-adder-format": "行追加時のデフォルト",
+  "label.appendable": "追加可能",
+  "label.filterable": "フィルタ可能",
+  "label.paginatable": "ページング可能",
+  "label.bound-data": "バインドデータ"
+}

package/translations/ko.json

@@ -1,13 +1,15 @@
 {
-  "keyword": "키워드",
+  "component.grist": "데이타 그리드",
+  "component.grist-action": "데이타 그리드 조작",
   "label.grist-mode": "형태",
-  "label.target-grist": "대상 grist",
+  "label.target-grist": "대상 데이타 그리드",
   "label.config": "설정",
   "label.action": "동작",
   "label.content-scale": "내부 스케일",
   "label.run-at-startup": "시작 시 실행",
   "label.record-adder-format": "행 추가 시 초기값",
   "label.appendable": "행추가 가능",
+  "label.filterable": "필터 가능",
   "label.paginatable": "페이지네이션",
   "label.bound-data": "연결 데이타"
 }

package/translations/ms.json

@@ -1,13 +1,15 @@
 {
-  "keyword": "[ms] keyword",
-  "label.grist-mode": "[ms] mode",
-  "label.target-grist": "[ms] target grist",
-  "label.config": "[ms] config",
-  "label.action": "[ms] action",
-  "label.content-scale": "[ms]content scale",
-  "label.run-at-startup": "[ms] run at startup",
-  "label.record-adder-format": "[ms] default when adding row",
-  "label.appendable": "[ms] appendable",
-  "label.paginatable": "[ms] paginatable",
-  "label.bound-data": "[ms] bound data"
+  "component.grist": "Grid Data",
+  "component.grist-action": "Aksi Grid Data",
+  "label.grist-mode": "Mod",
+  "label.target-grist": "Grid Data Sasaran",
+  "label.config": "Konfigurasi",
+  "label.action": "Tindakan",
+  "label.content-scale": "Skala Kandungan",
+  "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

@@ -1,13 +1,15 @@
 {
-  "keyword": "关键词",
+  "component.grist": "数据网格",
+  "component.grist-action": "数据网格操作",
   "label.grist-mode": "模式",
-  "label.target-grist": "目标grist",
+  "label.target-grist": "目标数据网格",
   "label.config": "配置",
-  "label.action": "动作",
-  "label.content-scale": "比例",
-  "label.run-at-startup": "在启动时运行",
-  "label.record-adder-format": "添加新行时的默认值",
-  "label.appendable": "可增加新行",
+  "label.action": "操作",
+  "label.content-scale": "内容缩放",
+  "label.run-at-startup": "启动时运行",
+  "label.record-adder-format": "添加行时的默认值",
+  "label.appendable": "可追加",
+  "label.filterable": "可过滤",
   "label.paginatable": "可分页",
   "label.bound-data": "绑定数据"
 }