@operato/dataset 1.0.0-beta.9 → 1.0.0

package/src/usecase/qc/ox-property-editor-qc-limits.ts

@@ -0,0 +1,23 @@
+import './ox-input-qc-limits.js'
+
+import { html } from 'lit'
+import { customElement } from 'lit/decorators.js'
+
+import { OxPropertyEditor, PropertySpec } from '@operato/property-editor'
+
+@customElement('ox-property-editor-qc-limits')
+export class OxPropertyEditorQcLimits extends OxPropertyEditor {
+  editorTemplate(value: any, spec: PropertySpec) {
+    const { type, options, unit } = spec.property || {}
+
+    return html`
+      <ox-input-qc-limits
+        id="editor"
+        .value=${value}
+        .type=${type}
+        .unit=${unit}
+        .options=${options}
+      ></ox-input-qc-limits>
+    `
+  }
+}

package/stories/ox-data-entry-form.stories.ts

@@ -0,0 +1,165 @@
+import '@operato/i18n'
+import '../src/ox-data-entry-form.js'
+import '../src/usecase/ccp' /* register usecase CCP */
+import '@material/mwc-icon'
+
+import { html, TemplateResult } from 'lit'
+
+export default {
+  title: 'ox-data-entry-form',
+  component: 'ox-data-entry-form',
+  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 value = {
+  temp: 1000,
+  humid: [20, 23, 21, 26, 27],
+  inspection: [true, false, true],
+  evaluation: ['최우수', '보통', '우수'],
+  comment: '이것이 코멘트입니다.'
+}
+
+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-entry-form
+      .dataSet=${dataSet}
+      .value=${value}
+      @change=${(e: CustomEvent) => {
+        value = e.detail
+        console.log('change', value)
+      }}
+    ></ox-data-entry-form>
+  `
+
+export const Regular = Template.bind({})
+Regular.args = {}

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

@@ -0,0 +1,121 @@
+import '@operato/i18n'
+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-properties-dynamic-view.js'
+import '../src/ox-data-item-spec.js'
+import '../src/usecase/ccp' /* register usecase CCP */
+import '../src/usecase/qc' /* register usecase QC */
+import '../src/usecase/ccp/ox-property-editor-ccp-limits.js'
+import '../src/usecase/qc/ox-property-editor-qc-limits.js'
+
+import { html, TemplateResult } from 'lit'
+
+import { OxPropertyEditor } from '@operato/property-editor'
+
+OxPropertyEditor.register({
+  number: 'ox-property-editor-number',
+  string: 'ox-property-editor-string',
+  boolean: 'ox-property-editor-checkbox',
+  'ccp-limits': 'ox-property-editor-ccp-limits',
+  'qc-limits': 'ox-property-editor-qc-limits'
+})
+
+export default {
+  title: 'ox-data-item-spec',
+  component: 'ox-data-item-spec',
+  argTypes: {}
+}
+
+interface Story<T> {
+  (args: T): TemplateResult
+  args?: Partial<T>
+  argTypes?: Record<string, unknown>
+}
+
+interface ArgTypes {}
+
+const dataItemA = {
+  name: '창고 온도',
+  description: '창고 온도는 섭씨 0도 이하로 유지되어야 합니다.',
+  sequence: 1,
+  tag: 'temp',
+  unit: '℃',
+  type: 'number',
+  quota: 1
+}
+
+const dataItemB = {
+  name: '품평',
+  description: '품평은 최우수/우수/보통/미달을 포함하여 간단히 평가.',
+  sequence: 4,
+  tag: 'evaluation',
+  type: 'select',
+  options: {
+    options: [
+      { text: '최우수', value: '최우수' },
+      { text: '우수', value: '우수' },
+      { text: '보통', value: '보통' },
+      { text: '미달', value: '미달' }
+    ]
+  },
+  quota: 3
+}
+
+const dataItemC = {
+  name: '코멘트',
+  description: '특이사항을 기록함.',
+  sequence: 4,
+  tag: 'comment',
+  type: 'string',
+  quota: 1
+}
+
+var specA = {
+  CCP: {
+    criticalLimits: {
+      minimum: 100,
+      maximum: 200
+    },
+    targetLimits: {
+      minimum: 120,
+      maximum: 180
+    }
+  },
+  QC: {
+    passLimits: {
+      minimum: 320,
+      maximum: 440
+    }
+  }
+}
+
+var specB = {
+  CCP: { accpetables: ['최우수', '우수'] },
+  QC: { accpetables: ['최우수', '우수'] }
+}
+
+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>
+
+    <script type="module"></script>
+
+    <ox-data-item-spec
+      .dataItem=${dataItemA}
+      .value=${specA}
+      @change=${(e: CustomEvent) => {
+        specA = e.detail
+        console.log('change', specA)
+      }}
+    ></ox-data-item-spec>
+  `
+
+export const Regular = Template.bind({})
+Regular.args = {}

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

@@ -0,0 +1,256 @@
+import '@operato/i18n'
+import '../src/ox-data-ooc-view.js'
+import '../src/usecase/ccp' /* register usecase CCP */
+import '@material/mwc-icon'
+
+import { html, TemplateResult } from 'lit'
+
+export default {
+  title: 'ox-data-ooc-view',
+  component: 'ox-data-ooc-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 dataOoc = {
+  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도 이하로 유지되어야 합니다.',
+      spec: {
+        CCP: {
+          criticalLimits: {
+            minimum: 100,
+            maximum: 200
+          },
+          targetLimits: {
+            minimum: 120,
+            maximum: 180
+          }
+        }
+      }
+    },
+    humid: {
+      name: '창고 습도',
+      description: '창고 습도는 30% 이하로 유지되어야 합니다.',
+      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(),
+  history: [
+    {
+      user: {
+        id: 0,
+        name: 'shnam'
+      },
+      state: 'CREATED',
+      timestamp: Date.now()
+    },
+    {
+      user: {
+        id: 0,
+        name: 'shnam'
+      },
+      state: 'REVIEWED',
+      comment: '금일 생산한 제품은 전량 폐기합니다',
+      timestamp: Date.now()
+    },
+    {
+      user: {
+        id: 0,
+        name: 'shnam'
+      },
+      state: 'CORRECTED',
+      timestamp: 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-ooc-view
+      .dataSet=${dataSet}
+      .dataOoc=${dataOoc}
+      @change=${(e: CustomEvent) => console.log(e.detail)}
+    ></ox-data-ooc-view>
+  `
+
+export const Regular = Template.bind({})
+Regular.args = {}