@operato/dataset 1.0.0-beta.9 → 1.0.0

package/stories/ox-data-sample-view.stories.ts

@@ -0,0 +1,227 @@
+import '@operato/i18n'
+import '../src/ox-data-sample-view.js'
+import '../src/usecase/ccp' /* register usecase CCP */
+import '@material/mwc-icon'
+
+import { html, TemplateResult } from 'lit'
+
+export default {
+  title: 'ox-data-sample-view',
+  component: 'ox-data-sample-view',
+  argTypes: {}
+}
+
+interface Story<T> {
+  (args: T): TemplateResult
+  args?: Partial<T>
+  argTypes?: Record<string, unknown>
+}
+
+interface ArgTypes {}
+
+const dataSet = {
+  name: 'sample',
+  description: 'sample description',
+  useCase: 'CCP',
+  dataItems: [
+    {
+      name: '창고 온도',
+      description: '창고 온도는 섭씨 0도 이하로 유지되어야 합니다.',
+      sequence: 1,
+      tag: 'temp',
+      type: 'number',
+      quota: 1,
+      active: true,
+      unit: '℃',
+      spec: {
+        CCP: {
+          criticalLimits: {
+            minimum: 100,
+            maximum: 200
+          },
+          targetLimits: {
+            minimum: 120,
+            maximum: 180
+          }
+        }
+      }
+    },
+    {
+      name: '창고 습도',
+      description: '창고 습도는 30% 이하로 유지되어야 합니다.',
+      sequence: 2,
+      tag: 'humid',
+      type: 'number',
+      quota: 5,
+      active: true,
+      unit: '%',
+      spec: {
+        CCP: {
+          criticalLimits: {
+            minimum: 10,
+            maximum: 50
+          },
+          targetLimits: {
+            minimum: 20,
+            maximum: 40
+          }
+        }
+      }
+    },
+    {
+      name: '육안 검사',
+      description: '육안 검사는 포장전 30분 내로 실행되어야 합니다.',
+      sequence: 3,
+      tag: 'inspection',
+      type: 'boolean',
+      quota: 3,
+      active: true,
+      spec: {
+        CCP: {
+          criticalLimits: {
+            acceptables: true
+          },
+          targetLimits: {
+            acceptables: true
+          }
+        }
+      }
+    },
+    {
+      name: '품평',
+      description: '품평은 최우수/우수/보통/미달을 포함하여 간단히 평가.',
+      sequence: 4,
+      tag: 'evaluation',
+      type: 'select',
+      options: {
+        options: [
+          { text: '최우수', value: '최우수' },
+          { text: '우수', value: '우수' },
+          { text: '보통', value: '보통' },
+          { text: '미달', value: '미달' }
+        ]
+      },
+      quota: 3,
+      active: true,
+      spec: {
+        CCP: {
+          criticalLimits: {
+            acceptables: ['최우수', '우수', '보통']
+          },
+          targetLimits: {
+            acceptables: ['최우수', '우수']
+          }
+        }
+      }
+    },
+    {
+      name: '코멘트',
+      description: '특이사항을 기록함.',
+      sequence: 4,
+      tag: 'comment',
+      type: 'string',
+      quota: 1,
+      active: true
+    },
+    {
+      name: '첨부파일',
+      description: '참조 첨부 파일.',
+      sequence: 4,
+      tag: 'attachment',
+      type: 'file',
+      quota: 1,
+      active: true
+    }
+  ]
+}
+
+var dataSample = {
+  name: 'Data Sample Name',
+  description: 'Data Sample이 어쩌구 저쩌구 그래서 중요합니다. 당연히 그래야죠.',
+  useCase: 'CCP',
+  data: {
+    temp: [1000],
+    humid: [20, 23, 21, 26, 27],
+    inspection: [true, false, true],
+    evaluation: ['최우수', '보통', '우수'],
+    comment: '이것은 코멘트입니다.'
+  },
+  spec: {
+    temp: {
+      name: '창고 온도',
+      description: '창고 온도는 섭씨 0도 이하로 유지되어야 합니다.',
+      unit: '℃',
+      spec: {
+        CCP: {
+          criticalLimits: {
+            minimum: 100,
+            maximum: 200
+          },
+          targetLimits: {
+            minimum: 120,
+            maximum: 180
+          }
+        }
+      }
+    },
+    humid: {
+      name: '창고 습도',
+      description: '창고 습도는 30% 이하로 유지되어야 합니다.',
+      unit: '%',
+      spec: {
+        CCP: {
+          criticalLimits: {
+            minimum: 10,
+            maximum: 50
+          },
+          targetLimits: {
+            minimum: 20,
+            maximum: 40
+          }
+        }
+      }
+    },
+    inspection: {
+      name: '육안 검사',
+      description: '육안 검사는 포장전 30분 내로 실행되어야 합니다.'
+    },
+    evaluation: {
+      name: '품평',
+      description: '품평은 최우수/우수/보통/미달을 포함하여 간단히 평가.',
+      spec: {
+        CCP: {
+          criticalLimits: {
+            acceptables: ['최우수', '우수', '보통']
+          },
+          targetLimits: {
+            acceptables: ['최우수', '우수']
+          }
+        }
+      }
+    },
+    comment: {
+      name: '코멘트',
+      description: '특이사항을 기록함.'
+    },
+    attachment: {
+      name: '첨부파일',
+      description: '참조 첨부 파일.'
+    }
+  },
+  collectedAt: Date.now()
+}
+
+const Template: Story<ArgTypes> = ({}: ArgTypes) =>
+  html`
+    <link href="/themes/app-theme.css" rel="stylesheet" />
+    <link href="https://fonts.googleapis.com/css?family=Material+Icons&display=block" rel="stylesheet" />
+    <style>
+      body {
+      }
+    </style>
+
+    <ox-data-sample-view .dataSample=${dataSample}></ox-data-sample-view>
+  `
+
+export const Regular = Template.bind({})
+Regular.args = {}

package/stories/ox-grist-editor-data-item-spec.stories.ts

@@ -0,0 +1,409 @@
+import '@material/mwc-icon'
+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/ox-filters-form.js'
+import '@operato/data-grist/ox-sorters-control.js'
+import '@operato/grist-editor' /* regiester grist editors */
+/* set grist-editors */
+import '../src/grist-editor/index.js'
+import '../src/usecase/ccp' /* register usecase CCP */
+import '../src/usecase/qc' /* register usecase QC */
+
+import { css, html, LitElement, TemplateResult } from 'lit'
+import { state } from 'lit/decorators.js'
+
+import { FetchOption, GristRecord } from '@operato/data-grist'
+// import { OxGristEditorCrontab } from '@operato/grist-editor/ox-grist-editor-crontab.js'
+// import { OxGristEditorParameters } from '@operato/grist-editor/ox-grist-editor-parameters.js'
+// import { OxGristEditorPartitionKeys } from '@operato/grist-editor/ox-grist-editor-partition-keys.js'
+// // import { OxGristRendererCrontab } from '@operato/grist-editor/ox-grist-renderer-crontab.js'
+// import { OxGristEditorValueMap } from '@operato/grist-editor/ox-grist-editor-value-map.js'
+import { i18next } from '@operato/i18n'
+import { OxPropertyEditor } from '@operato/property-editor'
+import { CommonGristStyles } from '@operato/styles'
+
+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)
+
+const fetchHandler = async ({ page = 1, limit = 100, sortings = [], filters = [] }: FetchOption) => {
+  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 {
+  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);
+      }
+    `
+  ]
+
+  @state() mode: String = 'CARD'
+
+  get grist() {
+    return this.renderRoot.querySelector('ox-grist')
+  }
+
+  config: any = {
+    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: any) => {
+            return typeof value === 'string' ? value : typeof value === 'object' ? JSON.stringify(value) : ''
+          },
+          options: async (value: any, column: any, record: GristRecord, row: GristRecord, field: any) => {
+            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: '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'
+      }
+    ]
+  }
+
+  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: CustomEvent) => 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>
+    `
+  }
+}
+
+customElements.define('ox-data-items', GristDemo)
+
+export default {
+  title: 'ox-grist-editor-data-item-spec',
+  component: 'ox-grist-editor-data-item-spec',
+  argTypes: {}
+}
+
+interface Story<T> {
+  (args: T): TemplateResult
+  args?: Partial<T>
+  argTypes?: Record<string, unknown>
+}
+
+interface ArgTypes {}
+
+const Template: Story<ArgTypes> = ({}: ArgTypes) =>
+  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-data-items mode="LIST"></ox-data-items>
+  `
+
+export const Regular = Template.bind({})
+Regular.args = {}

package/translations/en.json

@@ -3,24 +3,28 @@
   "button.reviewed": "reviewed",
   "field.appliance": "appliance",
   "field.collected_at": "collected at",
+  "field.collected-at": "collected at",
+  "field.corrected-at": "corrected at",
+  "field.corrective action": "corrective action",
   "field.corrective-action": "corrective action",
   "field.corrector": "corrector",
-  "field.corrected-at": "corrected at",
-  "field.data": "data",
+  "field.critical control point": "critical control point",
   "field.data-sample": "data sample",
   "field.data-set": "data set",
+  "field.data": "data",
   "field.device-id": "device id",
   "field.entry-role": "entry role",
   "field.entry-type": "entry type",
   "field.entry-view": "entry view",
   "field.hidden": "hidden",
+  "field.item": "item",
   "field.latest-collected-at": "latest collected at",
   "field.monitor-type": "monitor type",
   "field.monitor-view": "monitor view",
   "field.netmask": "network mask",
   "field.next-schedule": "next schedule",
-  "field.oos": "out of critical limit",
   "field.ooc": "out of control limit",
+  "field.oos": "out of critical limit",
   "field.options": "options",
   "field.partition-keys": "partition keys",
   "field.prev-schedule": "previous schedule",
@@ -38,20 +42,34 @@
   "field.use-case": "use case",
   "field.work-date": "work date",
   "field.work-shift": "work shift",
+  "label.acceptables": "acceptables",
+  "label.critical-limits": "critical limits",
+  "label.maximum value": "maximum value",
+  "label.minimum value": "minimum value",
+  "label.pass-limits": "pass limits",
+  "label.target-limits": "target limits",
   "text.automatically collected": "automatically collected",
-  "text.data sample created successfully": "a data sample created successfully",
+  "text.control limit": "control limit",
   "text.data ooc updated successfully": "a data ooc updated successfully",
+  "text.data sample created successfully": "a data sample created successfully",
   "text.manually collected": "manually collected",
-  "title.data-entry-form": "data entry form",
+  "text.maximum value": "maximum value",
+  "text.measurement": "measurement",
+  "text.minimum value": "minimum value",
+  "text.observation": "observation",
+  "text.operating limit": "operating limit",
+  "text.target limit": "target limit",
   "title.data-entry list": "data entry list",
+  "title.data-entry-form": "data entry form",
   "title.data-item list": "data item list",
   "title.data-monitor-view": "data monitor view",
-  "title.data-report-view": "data report view",
   "title.data-ooc list": "data OOC list",
   "title.data-ooc view": "data OOC view",
+  "title.data-report-view": "data report view",
   "title.data-sample list": "data sample list",
   "title.data-sample view": "data sample view",
   "title.data-sensor list": "data sensor list",
   "title.data-set list": "data set list",
-  "title.edit code": "edit code"
-}
+  "title.edit code": "edit code",
+  "title.history": "history"
+}