@operato/grist-editor 1.0.0-alpha.9

package/.editorconfig

@@ -0,0 +1,29 @@
+# EditorConfig helps developers define and maintain consistent
+# coding styles between different editors and IDEs
+# editorconfig.org
+
+root = true
+
+
+[*]
+
+# Change these settings to your own preference
+indent_style = space
+indent_size = 2
+
+# We recommend you to keep these unchanged
+end_of_line = lf
+charset = utf-8
+trim_trailing_whitespace = true
+insert_final_newline = true
+
+[*.md]
+trim_trailing_whitespace = false
+
+[*.json]
+indent_size = 2
+
+[*.{html,js,md}]
+block_comment_start = /**
+block_comment = *
+block_comment_end = */

package/.storybook/main.js

@@ -0,0 +1,3 @@
+module.exports = {
+  stories: ['../dist/stories/**/*.stories.{js,md,mdx}'],
+};

package/.storybook/server.mjs

@@ -0,0 +1,8 @@
+import { storybookPlugin } from '@web/dev-server-storybook';
+import baseConfig from '../web-dev-server.config.mjs';
+
+export default /** @type {import('@web/dev-server').DevServerConfig} */ ({
+  ...baseConfig,
+  open: '/',
+  plugins: [storybookPlugin({ type: 'web-components' }), ...baseConfig.plugins],
+});

package/CHANGELOG.md

@@ -0,0 +1,11 @@
+# Change Log
+
+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.9](https://github.com/hatiolab/operato/compare/v1.0.0-alpha.8...v1.0.0-alpha.9) (2022-03-12)
+
+
+### :rocket: New Features
+
+* settled concept for input, property-editor, grist-editor, so on ([0c9e1d0](https://github.com/hatiolab/operato/commit/0c9e1d054c7aef5d965868242cf471667af7a3c3))

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) hatiolab.com
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,75 @@
+# \<mini-app>
+
+This webcomponent follows the [open-wc](https://github.com/open-wc/open-wc) recommendation.
+
+## Installation
+
+```bash
+npm i mini-app
+```
+
+## Usage
+
+```html
+<script type="module">
+  import 'mini-app/mini-app.js'
+</script>
+
+<mini-app></mini-app>
+```
+
+## Linting and formatting
+
+To scan the project for linting and formatting errors, run
+
+```bash
+npm run lint
+```
+
+To automatically fix linting and formatting errors, run
+
+```bash
+npm run format
+```
+
+## Testing with Web Test Runner
+
+To execute a single test run:
+
+```bash
+npm run test
+```
+
+To run the tests in interactive watch mode run:
+
+```bash
+npm run test:watch
+```
+
+## Demoing with Storybook
+
+To run a local instance of Storybook for your component, run
+
+```bash
+npm run storybook
+```
+
+To build a production version of Storybook, run
+
+```bash
+npm run storybook:build
+```
+
+## Tooling configs
+
+For most of the tools, the configuration is in the `package.json` to reduce the amount of files in your project.
+
+If you customize the configuration a lot, you can consider moving them to individual files.
+
+## Local Demo with `web-dev-server`
+
+```bash
+npm start
+```
+
+To run a local development server that serves the basic demo located in `demo/index.html`

package/demo/data-grist-test.html

@@ -0,0 +1,456 @@
+<!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" />
+  </head>
+
+  <body>
+    <script type="module">
+      import { LitElement, html, css, render } from 'lit'
+      import '../dist/index.js'
+      import '../dist/src/filters/filters-form.js'
+      import '../dist/src/sorters/sorters-control.js'
+      import '../dist/src/record-view/record-creator.js'
+      import '@operato/popup/ox-popup-list.js'
+      import '@material/mwc-icon'
+      import { CommonGristStyles } from '@operato/styles'
+
+      const fetchHandler = async ({ page, limit, sorters = [] }) => {
+        var total = 120993
+        var start = (page - 1) * limit
+
+        await new Promise(resolve => setTimeout(resolve, 500))
+
+        return {
+          total,
+          records: Array(limit * page > total ? total % limit : limit)
+            .fill()
+            .map((item, idx) => {
+              return {
+                id: idx,
+                name: idx % 2 ? `shnam-${start + idx + 1}` : `heartyoh-${start + idx + 1}`,
+                description:
+                  idx % 2 ? `hatiolabmanager${start + idx + 1}1234567890` : `hatiosea manager-${start + idx + 1}`,
+                email: idx % 2 ? `shnam-${start + idx + 1}@gmail.com` : `heartyoh-${start + idx + 1}@gmail.com`,
+                active: Math.round(Math.random() * 2) % 2 ? true : false,
+                barcode: idx % 2 ? `1234567890${start + idx + 1}` : `0987654321${start + idx + 1}`,
+                company:
+                  idx % 2
+                    ? {
+                        id: '2',
+                        name: 'HatioLAB',
+                        description: `경기도 성남시-${start + idx + 1}`
+                      }
+                    : {
+                        id: '3',
+                        name: 'HatioSEA',
+                        description: `말레이시아 세티아알람-${start + idx + 1}`
+                      },
+                thumbnail:
+                  idx % 4 === 0
+                    ? '' /* no source */
+                    : idx % 4 === 1
+                    ? `http://www.hatiolab.com/assets/img/operato-biz3.png`
+                    : idx % 4 === 2
+                    ? `http://www.hatiolab.com/assets/img/thingsboard-30.png`
+                    : `http://www.hatiolab.com/wrong-url.png` /* wrong source */,
+                role: ['admin', 'worker', 'tester'][idx % 3],
+                color: idx % 2 ? `#87f018` : `#180f87`,
+                rate: Math.round(Math.random() * 100),
+                dynamicType: ['text', 'email', 'checkbox', 'color', 'progress', 'barcode'][idx % 5],
+                dynamicValue: ['abcdefghijkl', 'heartyoh@hatiolab.com', 'true', 'orange', '50', '1234567890'][idx % 5],
+                homepage:
+                  idx % 2
+                    ? `http://hatiolab.com/${start + idx + 1}`
+                    : `http://deadpool.hatiolab.com/${start + idx + 1}`,
+                json5: {
+                  abc: 'abc',
+                  value: 123
+                },
+                createdAt: Date.now(),
+                updatedAt: Date.now()
+              }
+            })
+        }
+      }
+
+      const config = {
+        list: {
+          thumbnail: 'thumbnail',
+          fields: ['name', 'description'],
+          details: ['role', 'email']
+        },
+        columns: [
+          {
+            type: 'gutter',
+            gutterName: 'dirty'
+          },
+          {
+            type: 'gutter',
+            gutterName: 'sequence'
+          },
+          {
+            type: 'gutter',
+            gutterName: 'row-selector',
+            multiple: true
+          },
+          {
+            type: 'gutter',
+            gutterName: 'button',
+            icon: 'edit',
+            handlers: {
+              click: function () {
+                console.log('clicked')
+              }
+            }
+          },
+          {
+            type: 'gutter',
+            gutterName: 'button',
+            icon: 'add',
+            handlers: {
+              click: 'record-copy'
+            }
+          },
+          {
+            type: 'gutter',
+            gutterName: 'button',
+            icon: 'arrow_downward',
+            handlers: {
+              click: 'move-down'
+            }
+          },
+          {
+            type: 'string',
+            name: 'id',
+            hidden: true
+          },
+          {
+            type: 'link',
+            name: 'name',
+            label: true,
+            header: 'name',
+            record: {
+              editable: true,
+              options: {
+                // href: 'http://hatiolab.com',
+                href: function (column, record, rowIndex) {
+                  return record['homepage']
+                },
+                target: '_blank'
+              }
+            },
+            filter: 'search',
+            sortable: true,
+            width: 120
+          },
+          {
+            type: 'string',
+            name: 'description',
+            header: 'description',
+            filter: 'search',
+            record: {
+              editable: true,
+              align: 'left'
+            },
+            width: 200,
+            handlers: {
+              click: (columns, data, column, record, rowIndex, target) => {
+                alert(`${column.name} ${record[column.name]}, row : ${rowIndex}`)
+              }
+            }
+          },
+          {
+            type: 'email',
+            name: 'email',
+            label: true,
+            header: 'email',
+            record: {
+              editable: true
+            },
+            filter: 'search',
+            sortable: true,
+            width: 130,
+            validation: function (after, before, record, column) {
+              if (after.indexOf('@') == -1) {
+                document.dispatchEvent(
+                  new CustomEvent('notify', {
+                    detail: {
+                      type: 'error',
+                      message: `invalid value - ${after}`
+                    }
+                  })
+                )
+                return false
+              }
+              return true
+            }
+          },
+          {
+            type: 'boolean',
+            name: 'active',
+            header: 'active',
+            record: {
+              editable: true
+            },
+            filter: true,
+            handlers: {
+              dblclick: () => {
+                const grist = document.querySelector('ox-grist')
+                console.log(grist.dirtyRecords)
+              }
+            },
+            sortable: true,
+            width: 60
+          },
+          {
+            type: 'select',
+            name: 'role',
+            label: true,
+            header: 'role',
+            record: {
+              options: ['', 'admin', 'worker', 'tester'],
+              editable: true
+            },
+            filter: true,
+            sortable: true,
+            width: 120
+          },
+          {
+            type: 'color',
+            name: 'color',
+            header: 'color',
+            record: {
+              editable: true
+            },
+            sortable: true,
+            width: 50
+          },
+          {
+            type: 'float',
+            name: 'rate',
+            header: 'rate',
+            record: {
+              align: 'right',
+              editable: true
+            },
+            filter: 'between',
+            sortable: true,
+            width: 50
+          },
+          {
+            type: 'json5',
+            name: 'json5',
+            header: 'JSON5',
+            width: 200
+          },
+          {
+            type: 'image',
+            name: 'thumbnail',
+            header: 'thumbnail',
+            record: {
+              editable: true
+            }
+          },
+          {
+            type: 'datetime',
+            name: 'updatedAt',
+            header: 'updated at',
+            record: {
+              editable: true
+            },
+            filter: 'between',
+            sortable: true,
+            width: 180
+          },
+          {
+            type: 'datetime',
+            name: 'createdAt',
+            header: 'created at',
+            record: {
+              editable: false
+            },
+            sortable: true,
+            width: 180
+          }
+        ],
+        rows: {
+          selectable: {
+            multiple: true
+          },
+          handlers: {
+            click: 'select-row-toggle'
+          },
+          classifier: function (record, rowIndex) {
+            const rate = record['rate']
+            const emphasized =
+              rate < 10 ? ['black', 'white'] : rate < 25 ? ['yellow', 'blue'] : rate < 40 ? ['cyan', 'red'] : undefined
+            return {
+              emphasized
+            }
+          }
+        },
+        sorters: [
+          {
+            name: 'name',
+            desc: true
+          },
+          {
+            name: 'email'
+          }
+        ],
+        pagination: {
+          pages: [20, 30, 50, 100, 200]
+        }
+      }
+
+      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="tailer">
+                  <a href="./report-test.html">Report Test</a>
+                  <a
+                    href="#"
+                    @click=${() => {
+                      this.renderRoot.querySelector('ox-grist').reset()
+                    }}
+                    >Reset</a
+                  >
+                  <a
+                    href="#"
+                    @click=${() => {
+                      this.renderRoot.querySelector('ox-grist').fetch(true)
+                    }}
+                    >Fetch</a
+                  >
+                </div>
+
+                <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>
+
+                <ox-record-creator id="add" light-popup>
+                  <button><mwc-icon>add</mwc-icon></button>
+                </ox-record-creator>
+
+                <button @click=${e => this.grist.cloneSelectedRecords()}><mwc-icon>add</mwc-icon></button>
+              </div>
+            </ox-grist>
+          `
+        }
+      }
+
+      customElements.define('grist-demo', GristDemo)
+
+      setTimeout(() => {
+        render(html` <grist-demo mode="LIST"></grist-demo> `, document.querySelector('#demo'))
+      })
+    </script>
+
+    <div id="app">
+      <div id="demo"></div>
+    </div>
+  </body>
+</html>

package/demo/index.html

@@ -0,0 +1,33 @@
+<!DOCTYPE html>
+<html lang="en-GB">
+  <head>
+    <meta charset="utf-8" />
+    <style>
+      body {
+        background: #fafafa;
+        --ox-checkbox-size: 12px;
+      }
+
+      #demo {
+        position: relative;
+        height: 300px;
+        background-color: lightgray;
+        vertical-align: middle;
+      }
+    </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" />
+  </head>
+  <body>
+    <div id="demo"></div>
+
+    <script type="module">
+      import { html, render } from 'lit'
+      import '@material/mwc-icon'
+
+      const parent = document.querySelector('#demo')
+
+      render(html``, parent)
+    </script>
+  </body>
+</html>

package/dist/src/code/code-editor.d.ts

@@ -0,0 +1,6 @@
+import '@material/mwc-icon';
+import { InputEditor } from '@operato/data-grist';
+export declare class CodeEditor extends InputEditor {
+    firstUpdated(): Promise<void>;
+    get editorTemplate(): import("lit-html").TemplateResult<1>;
+}

package/dist/src/code/code-editor.js

@@ -0,0 +1,50 @@
+import '@material/mwc-icon';
+import { InputEditor } from '@operato/data-grist';
+import { client, gqlContext } from '@operato/graphql';
+import gql from 'graphql-tag';
+import { html } from 'lit';
+const FETCH_COMMON_CODE_GQL = (codeName) => gql `
+{
+  commonCode(name: "${codeName}") {
+    details {
+      name
+      description
+      rank
+    }
+  }
+}
+`;
+export class CodeEditor extends InputEditor {
+    async firstUpdated() {
+        super.firstUpdated();
+        var { codeName, codes } = this.column.record || {};
+        if (!codes && codeName) {
+            /* codeName으로 fetch 해와서, this.column.record.codes에 보관한다. */
+            var response = await client.query({
+                query: FETCH_COMMON_CODE_GQL(codeName),
+                context: gqlContext()
+            });
+            var commonCode = response && response.data && response.data.commonCode;
+            if (commonCode) {
+                this.column.record.codes = [{ name: '', description: '' }].concat(commonCode.details.sort(function (a, b) {
+                    return a.rank - b.rank;
+                }));
+                this.requestUpdate();
+            }
+        }
+    }
+    get editorTemplate() {
+        var { codes } = this.column.record || {};
+        return html `
+      <select>
+        ${(codes || ['']).map((code) => html `
+            <option ?selected=${code.name == this.value} value=${code.name}>
+              ${code.name}${code.description ? ` - ${code.description}` : ''}
+            </option>
+          `)}
+      </select>
+    `;
+    }
+}
+customElements.define('code-editor', CodeEditor);
+//# sourceMappingURL=code-editor.js.map