@operato/dataset 1.5.4 → 1.5.5

package/src/ox-data-ooc-brief-view.ts

@@ -2,7 +2,7 @@ import '@operato/input/ox-input-file.js'
 import './ox-data-sample-view'
 import '@material/mwc-icon'
 
-import { css, html, LitElement } from 'lit'
+import { css, html, LitElement, nothing } from 'lit'
 import { customElement, property } from 'lit/decorators.js'
 
 import { i18next } from '@operato/i18n'
@@ -36,6 +36,10 @@ export class OxDataOocBriefView extends LitElement {
       text-align: center;
     }
 
+    h3[corrective] {
+      font-size: 20px;
+    }
+
     mwc-icon {
       font-size: 16px;
     }
@@ -69,36 +73,35 @@ export class OxDataOocBriefView extends LitElement {
       background-color: var(--status-info-color);
     }
 
-    div[instruction] {
-      display: flex;
-      flex-direction: column;
-
-      padding: var(--padding-wide);
-    }
-
-    div[instruction] div {
-      display: flex;
+    [corrective-content] [field-state] {
+      border-radius: 2px;
+      background-color: var(--primary-color);
+      margin-left: var(--margin-default);
+      padding: 1px 2px;
+      font-size: 0.7rem;
+      color: var(--theme-white-color);
     }
-
-    div[instruction] div[content] {
-      display: flex;
-      min-height: 50px;
+    [corrective-content] {
+      background-color: var(--theme-white-color);
+      box-shadow: var(--box-shadow);
+      border-radius: var(--border-radius);
+      margin: var(--page-description-margin);
+      padding: var(--padding-default);
+      font: var(--page-description-font);
+      color: var(--secondary-color);
     }
-
-    div[action] {
-      display: flex;
-      flex-direction: column;
-
-      padding: var(--padding-wide);
+    [corrective-content] mwc-icon {
+      position: relative;
+      top: 3px;
+      margin: 0 2px 0 10px;
     }
-
-    div[action] div {
-      display: flex;
+    [field-info] {
+      opacity: 0.7;
     }
-
-    div[action] div[content] {
-      display: flex;
-      min-height: 50px;
+    [corrective-content] strong {
+      display: block;
+      font-weight: bold;
+      font-size: 0.9rem;
     }
   `
 
@@ -125,27 +128,28 @@ export class OxDataOocBriefView extends LitElement {
         <div>DATA OOC <span field-state>${state || ''}</span></div>
       </h3>
 
-      <div instruction>
-        <div><mwc-icon>build_circle</mwc-icon> <span>corrective instruction</span></div>
-        <div content>${correctiveInstruction}</div>
-        ${reviewer
-          ? html`<div>
-              <mwc-icon>alarm</mwc-icon> ${formatter.format(new Date(reviewedAt!))}
-              <mwc-icon>account_circle</mwc-icon>${reviewer.name}
-            </div>`
-          : html``}
-      </div>
-
-      <div action>
-        <div><mwc-icon>build_circle</mwc-icon> <span>corrective action</span></div>
-        <div content>${correctiveAction}</div>
-        ${corrector
-          ? html`<div>
-              <mwc-icon>alarm</mwc-icon> ${formatter.format(new Date(correctedAt!))}
-              <mwc-icon>account_circle</mwc-icon>${corrector.name}
-            </div>`
-          : html``}
-      </div>
+      ${reviewer
+        ? html`
+            <h3 corrective>${i18next.t('label.corrective instruction')}</h3>
+            <p corrective-content>
+              <span field-info
+                >${formatter.format(new Date(reviewedAt!))} <mwc-icon>account_circle</mwc-icon>${reviewer.name}</span
+              >
+              <strong>${correctiveInstruction}</strong>
+            </p>
+          `
+        : nothing}
+      ${corrector
+        ? html`
+            <h3 corrective>${i18next.t('label.corrective action')}</h3>
+            <p corrective-content>
+              <span field-info
+                >${formatter.format(new Date(correctedAt!))} <mwc-icon>account_circle</mwc-icon>${corrector.name}</span
+              >
+              <strong>${correctiveAction}</strong>
+            </p>
+          `
+        : nothing}
     `
   }
 }

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

@@ -0,0 +1,268 @@
+import '@operato/i18n'
+import '../src/ox-data-ooc-brief-view.js'
+import '../src/usecase/ccp/index.js' /* register usecase CCP */
+import '@material/mwc-icon'
+
+import { html, TemplateResult } from 'lit'
+
+export default {
+  title: 'ox-data-ooc-brief-view',
+  component: 'ox-data-ooc-brief-view',
+  argTypes: {}
+}
+
+interface Story<T> {
+  (args: T): TemplateResult
+  args?: Partial<T>
+  argTypes?: Record<string, unknown>
+}
+
+interface ArgTypes {}
+
+const dataSet = {
+  name: 'sample',
+  description: 'sample description',
+  type: 'manual',
+  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이 어쩌구 저쩌구 그래서 중요합니다. 당연히 그래야죠.',
+  state: 'CORRECTED',
+  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(),
+  reviewer: {
+    name: '남상혁'
+  },
+  reviewedAt: Date.now(),
+  correctiveInstruction: '바지틀고서 만나오리오. 쿠투추파',
+  corrector: {
+    name: '남상혁'
+  },
+  correctedAt: Date.now(),
+  correctiveAction: '바지틀고서 만나오리오. 쿠투추파',
+  history: [
+    {
+      user: {
+        id: 0,
+        name: 'shnam'
+      },
+      state: 'ISSUED',
+      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-brief-view
+      .dataSet=${dataSet}
+      .dataOoc=${dataOoc}
+      @change=${(e: CustomEvent) => console.log(e.detail)}
+    ></ox-data-ooc-brief-view>
+  `
+
+export const Regular = Template.bind({})
+Regular.args = {}

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

@@ -22,6 +22,7 @@ interface ArgTypes {}
 const dataSet = {
   name: 'sample',
   description: 'sample description',
+  type: 'manual',
   useCase: 'CCP',
   dataItems: [
     {

package/translations/en.json

@@ -43,6 +43,8 @@
   "field.work-date": "work date",
   "field.work-shift": "work shift",
   "label.acceptables": "acceptables",
+  "label.corrective action": "corrective action",
+  "label.corrective instruction": "corrective instruction",
   "label.critical-limits": "critical limits",
   "label.maximum value": "maximum value",
   "label.minimum value": "minimum value",
@@ -59,6 +61,8 @@
   "text.observation": "observation",
   "text.operating limit": "operating limit",
   "text.target limit": "target limit",
+  "title.corrective action": "corrective action",
+  "title.corrective instruction": "corrective instruction",
   "title.data-entry list": "data entry list",
   "title.data-entry-form": "data entry form",
   "title.data-item list": "data item list",