@operato/dataset 1.0.0-beta.38 → 1.0.0-beta.40

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 = {}

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 = {}