@operato/grist-editor 1.0.0-alpha.23 → 1.0.0-beta.40

package/dist/src/ox-popup-value-map-input.js

@@ -0,0 +1,105 @@
+import { __decorate } from "tslib";
+import '@operato/input/ox-input-value-map.js';
+import { css, html, LitElement } from 'lit';
+import { customElement, property } from 'lit/decorators.js';
+import { i18next } from '@operato/i18n';
+import { closePopup } from '@operato/popup';
+import { ScrollbarStyles } from '@operato/styles';
+let OxPopupValueMapInput = class OxPopupValueMapInput extends LitElement {
+    constructor() {
+        super(...arguments);
+        this.valuetype = 'string';
+    }
+    render() {
+        return html `
+      <ox-input-value-map
+        .value=${this.value}
+        keytype="string"
+        .valuetype=${this.valuetype}
+        @change=${this.onChange.bind(this)}
+      >
+      </ox-input-value-map>
+
+      <div class="button-container">
+        <mwc-button @click=${this.onCancel.bind(this)}>${i18next.t('button.cancel')}</mwc-button>
+        <mwc-button @click=${this.onConfirm.bind(this)}>${i18next.t('button.confirm')}</mwc-button>
+      </div>
+    `;
+    }
+    onChange(e) {
+        e.stopPropagation();
+        /*
+          주의 : 이 팝업 템플릿은 layout 모듈에 의해서 render 되므로,
+          layout의 구성에 변화가 발생하면, 다시 render된다.
+          이 팝업이 떠 있는 상태에서, 또 다른 팝업이 뜨는 경우도 layout 구성의 변화를 야기한다. (overlay의 갯수의 증가)
+          이 경우 value, options, confirmCallback 등 클로져를 사용한 것들이 초기 바인딩된 값으로 다시 바인딩되게 되는데,
+          만약, 템플릿 내부에서 이들 속성의 레퍼런스가 변화했다면, 원래 상태로 되돌아가는 현상이 발생하게 된다.
+          따라서, 가급적 이들 속성의 레퍼런스를 변화시키지 않는 것이 좋다.
+          (이 팝업 클래스를 템플릿으로 사용한 곳의 코드를 참조하세요.)
+          =>
+          이런 이유로, Object.assign(...)을 사용하였다.
+        */
+        if (!this.value) {
+            this.value = {};
+        }
+        for (let key in this.value) {
+            delete this.value[key];
+        }
+        Object.assign(this.value, e.detail);
+    }
+    onCancel(e) {
+        closePopup(this);
+    }
+    onConfirm(e) {
+        this.confirmCallback && this.confirmCallback(this.value);
+        closePopup(this);
+    }
+};
+OxPopupValueMapInput.styles = [
+    ScrollbarStyles,
+    css `
+      :host {
+        display: flex;
+        flex-direction: column;
+
+        background-color: #fff;
+
+        width: var(--overlay-center-normal-width, 50%);
+        height: var(--overlay-center-normal-height, 50%);
+      }
+
+      ox-input-value-map {
+        flex: 1;
+        overflow-y: auto;
+      }
+
+      span {
+        flex: 1;
+
+        display: flex;
+        align-items: center;
+        justify-content: center;
+
+        color: var(--primary-color);
+      }
+
+      .button-container {
+        display: flex;
+        margin-left: auto;
+      }
+    `
+];
+__decorate([
+    property({ type: Object })
+], OxPopupValueMapInput.prototype, "value", void 0);
+__decorate([
+    property({ type: String })
+], OxPopupValueMapInput.prototype, "valuetype", void 0);
+__decorate([
+    property({ type: Object })
+], OxPopupValueMapInput.prototype, "confirmCallback", void 0);
+OxPopupValueMapInput = __decorate([
+    customElement('ox-popup-value-map-input')
+], OxPopupValueMapInput);
+export { OxPopupValueMapInput };
+//# sourceMappingURL=ox-popup-value-map-input.js.map

package/dist/src/ox-popup-value-map-input.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ox-popup-value-map-input.js","sourceRoot":"","sources":["../../src/ox-popup-value-map-input.ts"],"names":[],"mappings":";AAAA,OAAO,sCAAsC,CAAA;AAE7C,OAAO,EAAE,GAAG,EAAE,IAAI,EAAE,UAAU,EAAE,MAAM,KAAK,CAAA;AAC3C,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAA;AAE3D,OAAO,EAAE,OAAO,EAAE,MAAM,eAAe,CAAA;AACvC,OAAO,EAAE,UAAU,EAAE,MAAM,gBAAgB,CAAA;AAC3C,OAAO,EAAE,eAAe,EAAE,MAAM,iBAAiB,CAAA;AAGjD,IAAa,oBAAoB,GAAjC,MAAa,oBAAqB,SAAQ,UAAU;IAApD;;QAqC8B,cAAS,GAAW,QAAQ,CAAA;IAsD1D,CAAC;IAnDC,MAAM;QACJ,OAAO,IAAI,CAAA;;iBAEE,IAAI,CAAC,KAAK;;qBAEN,IAAI,CAAC,SAAS;kBACjB,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,IAAI,CAAC;;;;;6BAKb,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,IAAI,CAAC,IAAI,OAAO,CAAC,CAAC,CAAC,eAAe,CAAC;6BACtD,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,IAAI,CAAC,IAAI,OAAO,CAAC,CAAC,CAAC,gBAAgB,CAAC;;KAEhF,CAAA;IACH,CAAC;IAEO,QAAQ,CAAC,CAAc;QAC7B,CAAC,CAAC,eAAe,EAAE,CAAA;QAEnB;;;;;;;;;;UAUE;QAEF,IAAI,CAAC,IAAI,CAAC,KAAK,EAAE;YACf,IAAI,CAAC,KAAK,GAAG,EAAE,CAAA;SAChB;QAED,KAAK,IAAI,GAAG,IAAI,IAAI,CAAC,KAAK,EAAE;YAC1B,OAAO,IAAI,CAAC,KAAK,CAAC,GAAG,CAAC,CAAA;SACvB;QAED,MAAM,CAAC,MAAM,CAAC,IAAI,CAAC,KAAK,EAAE,CAAC,CAAC,MAAM,CAAC,CAAA;IACrC,CAAC;IAEO,QAAQ,CAAC,CAAQ;QACvB,UAAU,CAAC,IAAI,CAAC,CAAA;IAClB,CAAC;IAEO,SAAS,CAAC,CAAQ;QACxB,IAAI,CAAC,eAAe,IAAI,IAAI,CAAC,eAAe,CAAC,IAAI,CAAC,KAAK,CAAC,CAAA;QACxD,UAAU,CAAC,IAAI,CAAC,CAAA;IAClB,CAAC;CACF,CAAA;AA1FQ,2BAAM,GAAG;IACd,eAAe;IACf,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KA8BF;CACF,CAAA;AAE2B;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;mDAAW;AACV;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;uDAA6B;AAC5B;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;6DAAwC;AAtCxD,oBAAoB;IADhC,aAAa,CAAC,0BAA0B,CAAC;GAC7B,oBAAoB,CA2FhC;SA3FY,oBAAoB","sourcesContent":["import '@operato/input/ox-input-value-map.js'\n\nimport { css, html, LitElement } from 'lit'\nimport { customElement, property } from 'lit/decorators.js'\n\nimport { i18next } from '@operato/i18n'\nimport { closePopup } from '@operato/popup'\nimport { ScrollbarStyles } from '@operato/styles'\n\n@customElement('ox-popup-value-map-input')\nexport class OxPopupValueMapInput extends LitElement {\n  static styles = [\n    ScrollbarStyles,\n    css`\n      :host {\n        display: flex;\n        flex-direction: column;\n\n        background-color: #fff;\n\n        width: var(--overlay-center-normal-width, 50%);\n        height: var(--overlay-center-normal-height, 50%);\n      }\n\n      ox-input-value-map {\n        flex: 1;\n        overflow-y: auto;\n      }\n\n      span {\n        flex: 1;\n\n        display: flex;\n        align-items: center;\n        justify-content: center;\n\n        color: var(--primary-color);\n      }\n\n      .button-container {\n        display: flex;\n        margin-left: auto;\n      }\n    `\n  ]\n\n  @property({ type: Object }) value: any\n  @property({ type: String }) valuetype: string = 'string'\n  @property({ type: Object }) confirmCallback!: (newval: any) => void\n\n  render() {\n    return html`\n      <ox-input-value-map\n        .value=${this.value}\n        keytype=\"string\"\n        .valuetype=${this.valuetype}\n        @change=${this.onChange.bind(this)}\n      >\n      </ox-input-value-map>\n\n      <div class=\"button-container\">\n        <mwc-button @click=${this.onCancel.bind(this)}>${i18next.t('button.cancel')}</mwc-button>\n        <mwc-button @click=${this.onConfirm.bind(this)}>${i18next.t('button.confirm')}</mwc-button>\n      </div>\n    `\n  }\n\n  private onChange(e: CustomEvent) {\n    e.stopPropagation()\n\n    /* \n      주의 : 이 팝업 템플릿은 layout 모듈에 의해서 render 되므로, \n      layout의 구성에 변화가 발생하면, 다시 render된다.\n      이 팝업이 떠 있는 상태에서, 또 다른 팝업이 뜨는 경우도 layout 구성의 변화를 야기한다. (overlay의 갯수의 증가)\n      이 경우 value, options, confirmCallback 등 클로져를 사용한 것들이 초기 바인딩된 값으로 다시 바인딩되게 되는데,\n      만약, 템플릿 내부에서 이들 속성의 레퍼런스가 변화했다면, 원래 상태로 되돌아가는 현상이 발생하게 된다.\n      따라서, 가급적 이들 속성의 레퍼런스를 변화시키지 않는 것이 좋다.\n      (이 팝업 클래스를 템플릿으로 사용한 곳의 코드를 참조하세요.)\n      => \n      이런 이유로, Object.assign(...)을 사용하였다.\n    */\n\n    if (!this.value) {\n      this.value = {}\n    }\n\n    for (let key in this.value) {\n      delete this.value[key]\n    }\n\n    Object.assign(this.value, e.detail)\n  }\n\n  private onCancel(e: Event) {\n    closePopup(this)\n  }\n\n  private onConfirm(e: Event) {\n    this.confirmCallback && this.confirmCallback(this.value)\n    closePopup(this)\n  }\n}\n"]}

package/dist/stories/ox-grist-editor-crontab.stories.d.ts

@@ -0,0 +1,24 @@
+import '@operato/property-editor/ox-property-editor-checkbox.js';
+import '@operato/property-editor/ox-property-editor-number.js';
+import '@operato/property-editor/ox-property-editor-string.js';
+import '@operato/property-editor/ox-property-editor-options.js';
+import '@operato/property-editor/ox-properties-dynamic-view.js';
+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 { TemplateResult } from 'lit';
+declare const _default: {
+    title: string;
+    component: string;
+    argTypes: {};
+};
+export default _default;
+interface Story<T> {
+    (args: T): TemplateResult;
+    args?: Partial<T>;
+    argTypes?: Record<string, unknown>;
+}
+interface ArgTypes {
+}
+export declare const Regular: Story<ArgTypes>;

package/dist/stories/ox-grist-editor-crontab.stories.js

@@ -0,0 +1,406 @@
+import { __decorate } from "tslib";
+import '@operato/property-editor/ox-property-editor-checkbox.js';
+import '@operato/property-editor/ox-property-editor-number.js';
+import '@operato/property-editor/ox-property-editor-string.js';
+import '@operato/property-editor/ox-property-editor-options.js';
+import '@operato/property-editor/ox-properties-dynamic-view.js';
+import '@operato/data-grist';
+import '@operato/data-grist/ox-filters-form.js';
+import '@operato/data-grist/ox-sorters-control.js';
+import '@material/mwc-icon';
+/* set grist-editors */
+import { css, html, LitElement } from 'lit';
+import { state } from 'lit/decorators.js';
+import { OxGristRendererJson5, registerEditor, registerRenderer } from '@operato/data-grist';
+import { i18next } from '@operato/i18n';
+import { OxPropertyEditor } from '@operato/property-editor';
+import { CommonGristStyles } from '@operato/styles';
+import { OxGristEditorCrontab } from '../src/ox-grist-editor-crontab.js';
+import { OxGristEditorDuration } from '../src/ox-grist-editor-duration.js';
+import { OxGristEditorParameters } from '../src/ox-grist-editor-parameters.js';
+import { OxGristEditorPartitionKeys } from '../src/ox-grist-editor-partition-keys.js';
+// import { OxGristRendererCrontab } from '../src/ox-grist-renderer-crontab.js'
+import { OxGristEditorValueMap } from '../src/ox-grist-editor-value-map.js';
+// import { OxGristEditorJson } from './ox-grist-editor-json.js'
+// import { OxGristRendererCrontab } from '../src/ox-grist-renderer-crontab.js'
+OxPropertyEditor.register({
+    number: 'ox-property-editor-number',
+    string: 'ox-property-editor-string',
+    boolean: 'ox-property-editor-checkbox',
+    options: 'ox-property-editor-options'
+});
+registerEditor('parameters', OxGristEditorParameters);
+registerEditor('crontab', OxGristEditorCrontab);
+registerEditor('value-map', OxGristEditorValueMap);
+registerEditor('partition-keys', OxGristEditorPartitionKeys);
+/* register grist renderer/editor for id */
+// registerEditor('resource-id', OxGristEditorResourceId)
+// registerEditor('resource-object', OxGristEditorResourceObject)
+// registerEditor('resource-code', OxGristEditorResourceCode)
+registerEditor('parameters', OxGristEditorParameters);
+registerEditor('value-map', OxGristEditorValueMap);
+registerEditor('partition-keys', OxGristEditorPartitionKeys);
+registerEditor('crontab', OxGristEditorCrontab);
+registerEditor('duration', OxGristEditorDuration);
+// registerEditor('json', OxGristEditorJson)
+// registerRenderer('resource-id', OxGristRendererResourceId)
+// registerRenderer('resource-object', OxGristRendererResourceObject)
+registerRenderer('parameters', OxGristRendererJson5);
+registerRenderer('value-map', OxGristRendererJson5);
+registerRenderer('partition-keys', OxGristRendererJson5);
+// registerRenderer('crontab', OxGristRendererCrontab)
+const fetchHandler = async ({ page = 1, limit = 100, sortings = [], filters = [] }) => {
+    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',
+                spec: {
+                    ccp: {
+                        criticalLimits: 100,
+                        targetLimits: 200
+                    },
+                    qc: {
+                        criticalLimits: 300,
+                        targetLimits: true
+                    }
+                },
+                options: idx % 2 === 0
+                    ? {
+                        options: [
+                            {
+                                text: 'A',
+                                value: 'a'
+                            },
+                            {
+                                text: 'B',
+                                value: 'b'
+                            }
+                        ]
+                    }
+                    : undefined,
+                schedule: '* * * * * *',
+                keyvalue: {},
+                createdAt: Date.now(),
+                updatedAt: Date.now()
+            };
+        })
+    };
+};
+class GristDemo extends LitElement {
+    constructor() {
+        super(...arguments);
+        this.mode = 'CARD';
+        this.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: 'crontab',
+                    name: 'schedule',
+                    header: i18next.t('field.schedule'),
+                    record: {
+                        editable: true
+                    },
+                    width: 120
+                },
+                {
+                    type: 'partition-keys',
+                    name: 'keyvalue',
+                    header: i18next.t('field.keyvalue'),
+                    record: {
+                        editable: true,
+                        options: {
+                            objectified: true,
+                            valuetype: 'string'
+                        }
+                    },
+                    width: 120
+                },
+                {
+                    type: 'parameters',
+                    name: 'options',
+                    header: i18next.t('field.options'),
+                    record: {
+                        editable: true,
+                        renderer: (value) => {
+                            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 /* tell parameters editor not to need to parse */
+                            };
+                        }
+                    },
+                    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: 'crontab',
+                    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'
+                }
+            ]
+        };
+    }
+    get grist() {
+        return this.renderRoot.querySelector('ox-grist');
+    }
+    render() {
+        const mode = this.mode || 'CARD';
+        return html `
+      <ox-grist .config=${this.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="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>
+    `;
+    }
+}
+GristDemo.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);
+      }
+    `
+];
+__decorate([
+    state()
+], GristDemo.prototype, "mode", void 0);
+customElements.define('ox-grist-demo', GristDemo);
+export default {
+    title: 'ox-grist-editor-crontab',
+    component: 'ox-grist-editor-crontab',
+    argTypes: {}
+};
+const Template = ({}) => html `
+    <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" />
+
+    <style>
+      [slot='headroom'] {
+        display: flex;
+        flex-direction: row;
+        align-items: center;
+        padding: var(--padding-default) var(--padding-wide);
+        border-top: 2px solid rgba(0, 0, 0, 0.2);
+        background-color: var(--theme-white-color);
+        box-shadow: var(--box-shadow);
+
+        --mdc-icon-size: 24px;
+      }
+      #sorters mwc-icon,
+      #modes mwc-icon {
+        --mdc-icon-size: 18px;
+      }
+      #sorters {
+        margin-left: auto;
+        margin-right: var(--margin-default);
+        padding-left: var(--padding-narrow);
+        border-bottom: var(--border-dark-color);
+        position: relative;
+        color: var(--secondary-color);
+        font-size: var(--fontsize-default);
+        user-select: none;
+      }
+
+      #sorters > * {
+        padding: var(--padding-narrow);
+        vertical-align: middle;
+      }
+
+      #filters {
+        display: flex;
+        justify-content: center;
+        align-items: center;
+      }
+
+      #filters * {
+        margin-right: var(--margin-default);
+      }
+
+      @media only screen and (max-width: 460px) {
+        #filters {
+          flex-direction: column;
+        }
+
+        #modes {
+          display: none;
+        }
+      }
+    </style>
+
+    <ox-grist-demo mode="LIST"></ox-grist-demo>
+  `;
+export const Regular = Template.bind({});
+Regular.args = {};
+//# sourceMappingURL=ox-grist-editor-crontab.stories.js.map

package/dist/stories/ox-grist-editor-crontab.stories.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ox-grist-editor-crontab.stories.js","sourceRoot":"","sources":["../../stories/ox-grist-editor-crontab.stories.ts"],"names":[],"mappings":"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","sourcesContent":["import '@operato/property-editor/ox-property-editor-checkbox.js'\nimport '@operato/property-editor/ox-property-editor-number.js'\nimport '@operato/property-editor/ox-property-editor-string.js'\nimport '@operato/property-editor/ox-property-editor-options.js'\nimport '@operato/property-editor/ox-properties-dynamic-view.js'\nimport '@operato/data-grist'\nimport '@operato/data-grist/ox-filters-form.js'\nimport '@operato/data-grist/ox-sorters-control.js'\nimport '@material/mwc-icon'\n\n/* set grist-editors */\nimport { css, html, LitElement, TemplateResult } from 'lit'\nimport { state } from 'lit/decorators.js'\n\nimport { FetchOption, GristRecord, OxGristRendererJson5, registerEditor, registerRenderer } from '@operato/data-grist'\nimport { i18next } from '@operato/i18n'\nimport { OxPropertyEditor } from '@operato/property-editor'\nimport { CommonGristStyles } from '@operato/styles'\n\nimport { OxGristEditorCrontab } from '../src/ox-grist-editor-crontab.js'\nimport { OxGristEditorDuration } from '../src/ox-grist-editor-duration.js'\nimport { OxGristEditorParameters } from '../src/ox-grist-editor-parameters.js'\nimport { OxGristEditorPartitionKeys } from '../src/ox-grist-editor-partition-keys.js'\n// import { OxGristRendererCrontab } from '../src/ox-grist-renderer-crontab.js'\nimport { OxGristEditorValueMap } from '../src/ox-grist-editor-value-map.js'\n\n// import { OxGristEditorJson } from './ox-grist-editor-json.js'\n// import { OxGristRendererCrontab } from '../src/ox-grist-renderer-crontab.js'\n\nOxPropertyEditor.register({\n  number: 'ox-property-editor-number',\n  string: 'ox-property-editor-string',\n  boolean: 'ox-property-editor-checkbox',\n  options: 'ox-property-editor-options'\n})\n\nregisterEditor('parameters', OxGristEditorParameters)\nregisterEditor('crontab', OxGristEditorCrontab)\nregisterEditor('value-map', OxGristEditorValueMap)\nregisterEditor('partition-keys', OxGristEditorPartitionKeys)\n\n/* register grist renderer/editor for id */\n// registerEditor('resource-id', OxGristEditorResourceId)\n// registerEditor('resource-object', OxGristEditorResourceObject)\n// registerEditor('resource-code', OxGristEditorResourceCode)\nregisterEditor('parameters', OxGristEditorParameters)\nregisterEditor('value-map', OxGristEditorValueMap)\nregisterEditor('partition-keys', OxGristEditorPartitionKeys)\nregisterEditor('crontab', OxGristEditorCrontab)\nregisterEditor('duration', OxGristEditorDuration)\n// registerEditor('json', OxGristEditorJson)\n\n// registerRenderer('resource-id', OxGristRendererResourceId)\n// registerRenderer('resource-object', OxGristRendererResourceObject)\nregisterRenderer('parameters', OxGristRendererJson5)\nregisterRenderer('value-map', OxGristRendererJson5)\nregisterRenderer('partition-keys', OxGristRendererJson5)\n// registerRenderer('crontab', OxGristRendererCrontab)\n\nconst fetchHandler = async ({ page = 1, limit = 100, sortings = [], filters = [] }: FetchOption) => {\n  var total = 10\n  var start = (page - 1) * limit\n\n  return {\n    total,\n    records: Array(limit * page > total ? total % limit : limit)\n      .fill('')\n      .map((item, idx) => {\n        return {\n          id: idx,\n          name: `name-${start + idx + 1}`,\n          description: `description-${start + idx + 1}`,\n          sequence: idx + 1,\n          active: true,\n          tag: `tag-${idx + 1}`,\n          type: idx % 3 === 0 ? 'select' : idx % 3 === 1 ? 'number' : 'string',\n          spec: {\n            ccp: {\n              criticalLimits: 100,\n              targetLimits: 200\n            },\n            qc: {\n              criticalLimits: 300,\n              targetLimits: true\n            }\n          },\n          options:\n            idx % 2 === 0\n              ? {\n                  options: [\n                    {\n                      text: 'A',\n                      value: 'a'\n                    },\n                    {\n                      text: 'B',\n                      value: 'b'\n                    }\n                  ]\n                }\n              : undefined,\n          schedule: '* * * * * *',\n          keyvalue: {},\n          createdAt: Date.now(),\n          updatedAt: Date.now()\n        }\n      })\n  }\n}\n\nclass GristDemo extends LitElement {\n  static styles = [\n    CommonGristStyles,\n    css`\n      :host {\n        display: flex;\n        flex-direction: column;\n      }\n\n      #tailer {\n        display: flex;\n        flex-direction: row;\n        margin: 0 var(--margin-default);\n      }\n\n      #tailer a {\n        padding: 0 var(--padding-default) 0 var(--padding-default);\n        margin: 0 var(--margin-narrow);\n        border-right: 1px solid rgba(0, 0, 0, 0.1);\n        font-size: var(--fontsize-default);\n        color: var(--primary-color);\n      }\n    `\n  ]\n\n  @state() mode: String = 'CARD'\n\n  get grist() {\n    return this.renderRoot.querySelector('ox-grist')\n  }\n\n  config: any = {\n    list: { fields: ['name', 'description', 'active'] },\n    columns: [\n      { type: 'gutter', gutterName: 'row-selector', multiple: true },\n      {\n        type: 'gutter',\n        gutterName: 'button',\n        icon: 'add',\n        handlers: {\n          click: 'record-copy'\n        }\n      },\n      { type: 'gutter', gutterName: 'sequence' },\n      {\n        type: 'gutter',\n        gutterName: 'button',\n        icon: 'arrow_upward',\n        handlers: {\n          click: 'move-up'\n        }\n      },\n      {\n        type: 'gutter',\n        gutterName: 'button',\n        icon: 'arrow_downward',\n        handlers: {\n          click: 'move-down'\n        }\n      },\n      {\n        type: 'number',\n        name: 'sequence',\n        hidden: true\n      },\n      {\n        type: 'string',\n        name: 'id',\n        hidden: true\n      },\n      {\n        type: 'string',\n        name: 'name',\n        header: i18next.t('field.name'),\n        record: {\n          editable: true\n        },\n        width: 140\n      },\n      {\n        type: 'string',\n        name: 'description',\n        header: i18next.t('field.description'),\n        record: {\n          editable: true\n        },\n        width: 180\n      },\n      {\n        type: 'checkbox',\n        name: 'active',\n        label: true,\n        header: i18next.t('field.active'),\n        record: {\n          editable: true\n        },\n        sortable: true,\n        width: 60\n      },\n      {\n        type: 'string',\n        name: 'tag',\n        header: i18next.t('field.tag'),\n        record: {\n          editable: true\n        },\n        width: 180\n      },\n      {\n        type: 'select',\n        name: 'type',\n        header: i18next.t('field.type'),\n        record: {\n          options: ['', 'number', 'text', 'select', 'boolean', 'file'],\n          editable: true\n        },\n        width: 120\n      },\n      {\n        type: 'crontab',\n        name: 'schedule',\n        header: i18next.t('field.schedule'),\n        record: {\n          editable: true\n        },\n        width: 120\n      },\n      {\n        type: 'partition-keys',\n        name: 'keyvalue',\n        header: i18next.t('field.keyvalue'),\n        record: {\n          editable: true,\n          options: {\n            objectified: true,\n            valuetype: 'string'\n          }\n        },\n        width: 120\n      },\n      {\n        type: 'parameters',\n        name: 'options',\n        header: i18next.t('field.options'),\n        record: {\n          editable: true,\n          renderer: (value: any) => {\n            return typeof value === 'string' ? value : typeof value === 'object' ? JSON.stringify(value) : ''\n          },\n          options: async (value: any, column: any, record: GristRecord, row: GristRecord, field: any) => {\n            return {\n              name: record.type,\n              help: '',\n              spec:\n                record.type === 'select'\n                  ? [\n                      {\n                        type: 'options',\n                        name: 'options',\n                        label: 'options'\n                      }\n                    ]\n                  : [],\n              context: this.grist,\n              objectified: true /* tell parameters editor not to need to parse */\n            }\n          }\n        },\n        width: 120\n      },\n      {\n        type: 'string',\n        name: 'unit',\n        header: i18next.t('field.unit'),\n        record: {\n          editable: true\n        },\n        width: 120\n      },\n      {\n        type: 'number',\n        name: 'quota',\n        header: i18next.t('field.quota'),\n        record: {\n          editable: true\n        },\n        width: 60\n      },\n      {\n        type: 'crontab',\n        name: 'spec',\n        header: i18next.t('field.spec'),\n        record: {\n          editable: true,\n          options: {\n            name,\n            objectified: true\n          }\n        },\n        width: 200\n      }\n    ],\n    rows: {\n      selectable: {\n        multiple: true\n      }\n    },\n    pagination: {\n      infinite: true\n    },\n    sorters: [\n      {\n        name: 'sequence'\n      }\n    ]\n  }\n\n  render() {\n    const mode = this.mode || 'CARD'\n\n    return html`\n      <ox-grist .config=${this.config} .mode=${mode} auto-fetch .fetchHandler=${fetchHandler}>\n        <div id=\"filters\" slot=\"headroom\">\n          <ox-filters-form @filters-change=${(e: CustomEvent) => console.log('changed', e.detail)}></ox-filters-form>\n        </div>\n\n        <div slot=\"headroom\" id=\"headroom\">\n          <div id=\"modes\">\n            <mwc-icon @click=${() => (this.mode = 'GRID')} ?active=${mode == 'GRID'}>view_list</mwc-icon>\n            <mwc-icon @click=${() => (this.mode = 'LIST')} ?active=${mode == 'LIST'}>menu</mwc-icon>\n            <mwc-icon @click=${() => (this.mode = 'CARD')} ?active=${mode == 'CARD'}>apps</mwc-icon>\n          </div>\n        </div>\n      </ox-grist>\n    `\n  }\n}\n\ncustomElements.define('ox-grist-demo', GristDemo)\n\nexport default {\n  title: 'ox-grist-editor-crontab',\n  component: 'ox-grist-editor-crontab',\n  argTypes: {}\n}\n\ninterface Story<T> {\n  (args: T): TemplateResult\n  args?: Partial<T>\n  argTypes?: Record<string, unknown>\n}\n\ninterface ArgTypes {}\n\nconst Template: Story<ArgTypes> = ({}: ArgTypes) =>\n  html`\n    <link href=\"https://fonts.googleapis.com/css?family=Material+Icons&display=block\" rel=\"stylesheet\" />\n    <link href=\"/themes/app-theme.css\" rel=\"stylesheet\" />\n    <link href=\"/themes/oops-theme.css\" rel=\"stylesheet\" />\n    <link href=\"/themes/grist-theme.css\" rel=\"stylesheet\" />\n\n    <style>\n      [slot='headroom'] {\n        display: flex;\n        flex-direction: row;\n        align-items: center;\n        padding: var(--padding-default) var(--padding-wide);\n        border-top: 2px solid rgba(0, 0, 0, 0.2);\n        background-color: var(--theme-white-color);\n        box-shadow: var(--box-shadow);\n\n        --mdc-icon-size: 24px;\n      }\n      #sorters mwc-icon,\n      #modes mwc-icon {\n        --mdc-icon-size: 18px;\n      }\n      #sorters {\n        margin-left: auto;\n        margin-right: var(--margin-default);\n        padding-left: var(--padding-narrow);\n        border-bottom: var(--border-dark-color);\n        position: relative;\n        color: var(--secondary-color);\n        font-size: var(--fontsize-default);\n        user-select: none;\n      }\n\n      #sorters > * {\n        padding: var(--padding-narrow);\n        vertical-align: middle;\n      }\n\n      #filters {\n        display: flex;\n        justify-content: center;\n        align-items: center;\n      }\n\n      #filters * {\n        margin-right: var(--margin-default);\n      }\n\n      @media only screen and (max-width: 460px) {\n        #filters {\n          flex-direction: column;\n        }\n\n        #modes {\n          display: none;\n        }\n      }\n    </style>\n\n    <ox-grist-demo mode=\"LIST\"></ox-grist-demo>\n  `\n\nexport const Regular = Template.bind({})\nRegular.args = {}\n"]}