@operato/dataset 1.0.0-alpha.2 → 1.0.0-alpha.22

package/CHANGELOG.md

@@ -3,6 +3,185 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [1.0.0-alpha.22](https://github.com/hatiolab/operato/compare/v1.0.0-alpha.21...v1.0.0-alpha.22) (2022-03-17)
+
+
+### :bug: Bug Fix
+
+* ccp demo ([67b7d65](https://github.com/hatiolab/operato/commit/67b7d65b48d0ca7b3350684a45a396c0538c4902))
+
+
+### :rocket: New Features
+
+* added data-item-spec-editor for grist ([8376e14](https://github.com/hatiolab/operato/commit/8376e142d894a709e60ed676e917d5a26e01e374))
+
+
+
+## [1.0.0-alpha.21](https://github.com/hatiolab/operato/compare/v1.0.0-alpha.20...v1.0.0-alpha.21) (2022-03-16)
+
+
+### :rocket: New Features
+
+* @operato/ccp module added ([f08ba5a](https://github.com/hatiolab/operato/commit/f08ba5a464c04b7fb132c6f18de975997087846a))
+* ccp spec provider ([d72fe7c](https://github.com/hatiolab/operato/commit/d72fe7c497685e7f033ef04e6a866bd86613f397))
+
+
+### :bug: Bug Fix
+
+* demo ([6fa3eac](https://github.com/hatiolab/operato/commit/6fa3eac612bd98ce25e3ef6d8ce89527d7152fb4))
+* description on ox-data-item-spec view ([47da306](https://github.com/hatiolab/operato/commit/47da306a253a96e0c24c986e4608bfe0713a111a))
+
+
+
+## [1.0.0-alpha.20](https://github.com/hatiolab/operato/compare/v1.0.0-alpha.19...v1.0.0-alpha.20) (2022-03-15)
+
+
+### :bug: Bug Fix
+
+* ox-data-entry-form in dataset module ([736fe96](https://github.com/hatiolab/operato/commit/736fe968e292059055d18a4c18a5da979bbb4722))
+
+
+
+## [1.0.0-alpha.19](https://github.com/hatiolab/operato/compare/v1.0.0-alpha.18...v1.0.0-alpha.19) (2022-03-14)
+
+**Note:** Version bump only for package @operato/dataset
+
+
+
+
+
+## [1.0.0-alpha.18](https://github.com/hatiolab/operato/compare/v1.0.0-alpha.17...v1.0.0-alpha.18) (2022-03-14)
+
+**Note:** Version bump only for package @operato/dataset
+
+
+
+
+
+## [1.0.0-alpha.17](https://github.com/hatiolab/operato/compare/v1.0.0-alpha.16...v1.0.0-alpha.17) (2022-03-13)
+
+**Note:** Version bump only for package @operato/dataset
+
+
+
+
+
+## [1.0.0-alpha.16](https://github.com/hatiolab/operato/compare/v1.0.0-alpha.15...v1.0.0-alpha.16) (2022-03-13)
+
+**Note:** Version bump only for package @operato/dataset
+
+
+
+
+
+## [1.0.0-alpha.15](https://github.com/hatiolab/operato/compare/v1.0.0-alpha.14...v1.0.0-alpha.15) (2022-03-13)
+
+**Note:** Version bump only for package @operato/dataset
+
+
+
+
+
+## [1.0.0-alpha.14](https://github.com/hatiolab/operato/compare/v1.0.0-alpha.13...v1.0.0-alpha.14) (2022-03-13)
+
+**Note:** Version bump only for package @operato/dataset
+
+
+
+
+
+## [1.0.0-alpha.13](https://github.com/hatiolab/operato/compare/v1.0.0-alpha.12...v1.0.0-alpha.13) (2022-03-13)
+
+**Note:** Version bump only for package @operato/dataset
+
+
+
+
+
+## [1.0.0-alpha.12](https://github.com/hatiolab/operato/compare/v1.0.0-alpha.11...v1.0.0-alpha.12) (2022-03-13)
+
+**Note:** Version bump only for package @operato/dataset
+
+
+
+
+
+## [1.0.0-alpha.11](https://github.com/hatiolab/operato/compare/v1.0.0-alpha.10...v1.0.0-alpha.11) (2022-03-12)
+
+**Note:** Version bump only for package @operato/dataset
+
+
+
+
+
+## [1.0.0-alpha.10](https://github.com/hatiolab/operato/compare/v1.0.0-alpha.9...v1.0.0-alpha.10) (2022-03-12)
+
+**Note:** Version bump only for package @operato/dataset
+
+
+
+
+
+## [1.0.0-alpha.9](https://github.com/hatiolab/operato/compare/v1.0.0-alpha.8...v1.0.0-alpha.9) (2022-03-12)
+
+**Note:** Version bump only for package @operato/dataset
+
+
+
+
+
+## [1.0.0-alpha.8](https://github.com/hatiolab/operato/compare/v1.0.0-alpha.7...v1.0.0-alpha.8) (2022-03-11)
+
+**Note:** Version bump only for package @operato/dataset
+
+
+
+
+
+## [1.0.0-alpha.7](https://github.com/hatiolab/operato/compare/v1.0.0-alpha.6...v1.0.0-alpha.7) (2022-03-11)
+
+**Note:** Version bump only for package @operato/dataset
+
+
+
+
+
+## [1.0.0-alpha.6](https://github.com/hatiolab/operato/compare/v1.0.0-alpha.5...v1.0.0-alpha.6) (2022-03-11)
+
+
+### :bug: Bug Fix
+
+* ox-data-entry-form style ([c94c833](https://github.com/hatiolab/operato/commit/c94c8338aee8cf3e69c286e6af7cb2b5f081bbc7))
+
+
+
+## [1.0.0-alpha.5](https://github.com/hatiolab/operato/compare/v1.0.0-alpha.4...v1.0.0-alpha.5) (2022-03-11)
+
+
+### :bug: Bug Fix
+
+* data entry style ([d3dc3a6](https://github.com/hatiolab/operato/commit/d3dc3a6612c75597162621bd22421fa8d808cb13))
+
+
+
+## [1.0.0-alpha.4](https://github.com/hatiolab/operato/compare/v1.0.0-alpha.3...v1.0.0-alpha.4) (2022-03-11)
+
+
+### :bug: Bug Fix
+
+* ox-data-entry-form options and inputs layout ([56987c6](https://github.com/hatiolab/operato/commit/56987c664000d558427ba8dbf77730130061cb1a))
+
+
+
+## [1.0.0-alpha.3](https://github.com/hatiolab/operato/compare/v1.0.0-alpha.2...v1.0.0-alpha.3) (2022-03-10)
+
+
+### :bug: Bug Fix
+
+* add file type for data-item ([0177c84](https://github.com/hatiolab/operato/commit/0177c84ef3a91bfe85e6aec796b33b29a0e0f45e))
+
+
+
 ## [1.0.0-alpha.2](https://github.com/hatiolab/operato/compare/v1.0.0-alpha.1...v1.0.0-alpha.2) (2022-03-10)
 
 

package/demo/data-item-grist.html

@@ -0,0 +1,343 @@
+<!DOCTYPE html>
+<html lang="en-GB">
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" />
+    <style>
+      body {
+        /* box-sizing: border-box; */
+        margin: 0;
+        padding: 0;
+        overflow: hidden;
+
+        /* This is a font-stack that tries to use the system-default sans-serifs first */
+        font-family: Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';
+        line-height: 1.5;
+        -webkit-font-smoothing: antialiased;
+      }
+
+      #app {
+        width: 100vw;
+        height: 100vh;
+
+        display: flex;
+        flex-direction: column;
+      }
+
+      #demo {
+        flex: 1;
+
+        display: flex;
+        flex-direction: column;
+        overflow: hidden;
+      }
+
+      grist-demo {
+        flex: 1;
+        overflow: auto;
+      }
+    </style>
+    <link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500" rel="stylesheet" />
+    <link href="https://fonts.googleapis.com/css?family=Material+Icons&display=block" rel="stylesheet" />
+
+    <link href="/themes/app-theme.css" rel="stylesheet" />
+    <link href="/themes/oops-theme.css" rel="stylesheet" />
+    <link href="/themes/grist-theme.css" rel="stylesheet" />
+
+    <script>
+      // HACK(keanulee): The Redux package assumes `process` exists - mock it here before
+      // the module is loaded.
+      window.process = {
+        env: {
+          NODE_ENV: 'production'
+        }
+      }
+    </script>
+  </head>
+
+  <body>
+    <script type="module">
+      import { LitElement, html, css, render } from 'lit'
+      import '@operato/data-grist'
+      import '@operato/data-grist/ox-filters-form.js'
+      import '@operato/data-grist/ox-sorters-control.js'
+      import '@material/mwc-icon'
+      import { CommonGristStyles } from '@operato/styles'
+      import { i18next } from '@operato/i18n'
+
+      /* set grist-editors */
+      import '../dist/src/grist-editor/index.js'
+
+      const fetchHandler = async ({ page, limit, sorters = [] }) => {
+        var total = 10
+        var start = (page - 1) * limit
+
+        return {
+          total,
+          records: Array(limit * page > total ? total % limit : limit)
+            .fill()
+            .map((item, idx) => {
+              return {
+                id: idx,
+                name: `name-${start + idx + 1}`,
+                description: `description-${start + idx + 1}`,
+                sequence: idx + 1,
+                active: true,
+                tag: `tag-${idx + 1}`,
+                type: idx % 3 === 0 ? 'select' : idx % 3 === 1 ? 'number' : 'string',
+                createdAt: Date.now(),
+                updatedAt: Date.now()
+              }
+            })
+        }
+      }
+
+      var config = {
+        list: { fields: ['name', 'description', 'active'] },
+        columns: [
+          { type: 'gutter', gutterName: 'row-selector', multiple: true },
+          {
+            type: 'gutter',
+            gutterName: 'button',
+            icon: 'add',
+            handlers: {
+              click: 'record-copy'
+            }
+          },
+          { type: 'gutter', gutterName: 'sequence' },
+          {
+            type: 'gutter',
+            gutterName: 'button',
+            icon: 'arrow_upward',
+            handlers: {
+              click: 'move-up'
+            }
+          },
+          {
+            type: 'gutter',
+            gutterName: 'button',
+            icon: 'arrow_downward',
+            handlers: {
+              click: 'move-down'
+            }
+          },
+          {
+            type: 'number',
+            name: 'sequence',
+            hidden: true
+          },
+          {
+            type: 'string',
+            name: 'id',
+            hidden: true
+          },
+          {
+            type: 'string',
+            name: 'name',
+            header: i18next.t('field.name'),
+            record: {
+              editable: true
+            },
+            width: 140
+          },
+          {
+            type: 'string',
+            name: 'description',
+            header: i18next.t('field.description'),
+            record: {
+              editable: true
+            },
+            width: 180
+          },
+          {
+            type: 'checkbox',
+            name: 'active',
+            label: true,
+            header: i18next.t('field.active'),
+            record: {
+              editable: true
+            },
+            sortable: true,
+            width: 60
+          },
+          {
+            type: 'string',
+            name: 'tag',
+            header: i18next.t('field.tag'),
+            record: {
+              editable: true
+            },
+            width: 180
+          },
+          {
+            type: 'select',
+            name: 'type',
+            header: i18next.t('field.type'),
+            record: {
+              options: ['', 'number', 'text', 'select', 'boolean', 'file'],
+              editable: true
+            },
+            width: 120
+          },
+          {
+            type: 'parameters',
+            name: 'options',
+            header: i18next.t('field.options'),
+            record: {
+              editable: true,
+              renderer: (value, column, record, rowIndex, field) => {
+                return typeof value === 'string' ? value : typeof value === 'object' ? JSON.stringify(value) : ''
+              },
+              options: async (value, column, record, row, field) => {
+                return {
+                  name: record.type,
+                  help: '',
+                  spec:
+                    record.type === 'select'
+                      ? [
+                          {
+                            type: 'options',
+                            name: 'options',
+                            label: 'options'
+                          }
+                        ]
+                      : [],
+                  context: this.grist,
+                  objectified: true
+                }
+              }
+            },
+            width: 120
+          },
+          {
+            type: 'string',
+            name: 'unit',
+            header: i18next.t('field.unit'),
+            record: {
+              editable: true
+            },
+            width: 120
+          },
+          {
+            type: 'number',
+            name: 'quota',
+            header: i18next.t('field.quota'),
+            record: {
+              editable: true
+            },
+            width: 60
+          },
+          {
+            type: 'data-item-spec',
+            name: 'spec',
+            header: i18next.t('field.spec'),
+            record: {
+              editable: true,
+              options: {
+                name,
+                objectified: true
+              }
+            },
+            width: 200
+          }
+        ],
+        rows: {
+          selectable: {
+            multiple: true
+          }
+        },
+        pagination: {
+          infinite: true
+        },
+        sorters: [
+          {
+            name: 'sequence'
+          }
+        ]
+      }
+
+      class GristDemo extends LitElement {
+        static styles = [
+          CommonGristStyles,
+          css`
+            :host {
+              display: flex;
+              flex-direction: column;
+            }
+
+            #tailer {
+              display: flex;
+              flex-direction: row;
+              margin: 0 var(--margin-default);
+            }
+
+            #tailer a {
+              padding: 0 var(--padding-default) 0 var(--padding-default);
+              margin: 0 var(--margin-narrow);
+              border-right: 1px solid rgba(0, 0, 0, 0.1);
+              font-size: var(--fontsize-default);
+              color: var(--primary-color);
+            }
+          `
+        ]
+
+        static get properties() {
+          return {
+            mode: String
+          }
+        }
+
+        get grist() {
+          return this.renderRoot.querySelector('ox-grist')
+        }
+
+        render() {
+          const mode = this.mode || 'CARD'
+
+          return html`
+            <ox-grist .config=${config} .mode=${mode} auto-fetch .fetchHandler=${fetchHandler}>
+              <div id="filters" slot="headroom">
+                <ox-filters-form @filters-change=${e => console.log('changed', e.detail)}></ox-filters-form>
+              </div>
+
+              <div slot="headroom" id="headroom">
+                <div id="sorters">
+                  Sort
+                  <mwc-icon
+                    @click=${e => {
+                      const target = e.currentTarget
+                      this.renderRoot.querySelector('#sorter-control').open({
+                        right: 0,
+                        top: target.offsetTop + target.offsetHeight
+                      })
+                    }}
+                    >expand_more</mwc-icon
+                  >
+                  <ox-popup id="sorter-control">
+                    <ox-sorters-control> </ox-sorters-control>
+                  </ox-popup>
+                </div>
+
+                <div id="modes">
+                  <mwc-icon @click=${() => (this.mode = 'GRID')} ?active=${mode == 'GRID'}>view_list</mwc-icon>
+                  <mwc-icon @click=${() => (this.mode = 'LIST')} ?active=${mode == 'LIST'}>menu</mwc-icon>
+                  <mwc-icon @click=${() => (this.mode = 'CARD')} ?active=${mode == 'CARD'}>apps</mwc-icon>
+                </div>
+              </div>
+            </ox-grist>
+          `
+        }
+      }
+
+      customElements.define('ox-data-items', GristDemo)
+
+      setTimeout(() => {
+        render(html` <ox-data-items mode="LIST"></ox-data-items> `, document.querySelector('#demo'))
+      })
+    </script>
+
+    <div id="app">
+      <div id="demo"></div>
+    </div>
+  </body>
+</html>

package/demo/index.html

@@ -2,103 +2,25 @@
 <html lang="en-GB">
   <head>
     <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1" />
     <style>
       body {
-        background: #fafafa;
         --ox-checkbox-size: 12px;
       }
 
-      #demo {
-        position: relative;
-        height: 300px;
-        background-color: lightgray;
-        vertical-align: middle;
+      a {
+        display: block;
       }
     </style>
+
     <link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500" rel="stylesheet" />
     <link href="https://fonts.googleapis.com/css?family=Material+Icons&display=block" rel="stylesheet" />
+    <link href="/themes/app-theme.css" rel="stylesheet" />
+    <link href="/themes/form-theme.css" rel="stylesheet" />
   </head>
   <body>
-    <div id="demo"></div>
-
-    <script type="module">
-      import { html, render } from 'lit'
-      import '../dist/src/ox-data-entry-form.js'
-
-      const parent = document.querySelector('#demo')
-      const dataSet = {
-        name: 'sample',
-        description: 'sample description',
-        dataItems: [
-          {
-            name: '창고 온도',
-            description: '창고 온도는 섭씨 0도 이하로 유지되어야 합니다.',
-            sequence: 1,
-            tag: 'temp',
-            type: 'number',
-            quota: 1
-          },
-          {
-            name: '창고 습도',
-            description: '창고 습도는 30% 이하로 유지되어야 합니다.',
-            sequence: 2,
-            tag: 'humid',
-            type: 'number',
-            quota: 5
-          },
-          {
-            name: '육안 검사',
-            description: '육안 검사는 포장전 30분 내로 실행되어야 합니다.',
-            sequence: 3,
-            tag: 'inspection',
-            type: 'boolean',
-            quota: 3
-          },
-          {
-            name: '품평',
-            description: '품평은 최우수/우수/보통/미달을 포함하여 간단히 평가.',
-            sequence: 4,
-            tag: 'evaluation',
-            type: 'select',
-            options: {
-              options: [
-                { text: '최우수', value: '최우수' },
-                { text: '우수', value: '우수' },
-                { text: '보통', value: '보통' },
-                { text: '미달', value: '미달' }
-              ]
-            },
-            quota: 3
-          },
-          {
-            name: '코멘트',
-            description: '특이사항을 기록함.',
-            sequence: 4,
-            tag: 'comment',
-            type: 'string',
-            quota: 1
-          }
-        ]
-      }
-
-      var value = {
-        temp: 1000,
-        humid: [20, 23, 21, 26, 27],
-        inspection: [true, false, true],
-        evaluation: ['최우수', '보통', '우수']
-      }
-
-      render(
-        html`<ox-data-entry-form
-          .dataSet=${dataSet}
-          .value=${value}
-          @change=${e => {
-            value = e.detail
-            console.log('change', value)
-          }}
-        ></ox-data-entry-form>`,
-        parent
-      )
-    </script>
+    <a href="./ox-data-entry-form.html">ox-data-entry-form</a>
+    <a href="./ox-data-item-spec.html">ox-data-item-spec</a>
+    <a href="./data-item-grist.html">data-item-grist</a>
   </body>
 </html>