@operato/dataset 2.0.0-alpha.8 → 2.0.0-alpha.81

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

@@ -1,13 +1,13 @@
 import '@operato/input/ox-input-file.js'
 import './ox-data-sample-view'
-import '@material/mwc-icon'
+import './ox-data-ooc-badge'
+import './ox-data-ooc-correction-part'
+import '@material/web/icon/icon.js'
 
-import { css, html, LitElement, nothing } from 'lit'
+import { css, html, LitElement } from 'lit'
 import { customElement, property } from 'lit/decorators.js'
 
-import { i18next } from '@operato/i18n'
-
-import { DataOoc, DataSet } from './types.js'
+import { DataOoc } from './types.js'
 
 @customElement('ox-data-ooc-brief-view')
 export class OxDataOocBriefView extends LitElement {
@@ -15,140 +15,29 @@ export class OxDataOocBriefView extends LitElement {
     :host {
       display: flex;
       flex-direction: column;
-      background-color: var(--main-section-background-color);
 
       position: relative;
     }
 
-    h3 {
-      margin: var(--title-margin);
-      padding-top: 12px;
-      font: var(--title-font);
-      color: var(--title-text-color);
-    }
-
-    h3[state] {
+    ox-data-ooc-badge {
       position: absolute;
+
       margin: 0;
       padding: 0;
       right: 10px;
       width: 90px;
-      text-align: center;
-    }
-
-    h3[corrective] {
-      font-size: 20px;
-    }
-
-    mwc-icon {
-      font-size: 16px;
-    }
-    [state] mwc-icon {
-      font-size: 80px;
-      opacity: 0.4;
-      color: var(--primary-background-color);
-    }
-
-    [state] div {
-      position: absolute;
-      top: 22px;
-      left: 0;
-      right: 0;
-      font-size: 10px;
-      color: var(--theme-white-color);
-    }
-    [state] [field-state] {
-      display: block;
-      border-radius: 4px;
-      background-color: var(--primary-color);
-      box-shadow: var(--box-shadow);
-      margin-top: var(--margin-narrow);
-      padding: 1px 3px;
-      font-size: 0.8rem;
-    }
-    [danger] [field-state] {
-      background-color: var(--status-danger-color);
-    }
-    [complete] [field-state] {
-      background-color: var(--status-info-color);
-    }
-
-    [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);
-    }
-    [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);
-    }
-    [corrective-content] mwc-icon {
-      position: relative;
-      top: 3px;
-      margin: 0 2px 0 10px;
-    }
-    [field-info] {
-      opacity: 0.7;
-    }
-    [corrective-content] strong {
-      display: block;
-      font-weight: bold;
-      font-size: 0.9rem;
     }
   `
 
   @property({ type: Object }) dataOoc?: DataOoc
 
   render() {
-    const {
-      correctiveInstruction = '',
-      correctiveAction = '',
-      reviewer,
-      reviewedAt,
-      corrector,
-      correctedAt,
-      state
-    } = this.dataOoc || {}
-    const formatter = new Intl.DateTimeFormat(navigator.language, { dateStyle: 'full', timeStyle: 'short' })
+    const { state } = this.dataOoc || {}
 
     return html`
       <ox-data-sample-view .dataSample=${this.dataOoc}></ox-data-sample-view>
-
-      <h3 state ?danger=${state != 'CORRECTED'} ?complete=${state == 'CORRECTED'}>
-        <mwc-icon>shield</mwc-icon>
-        <div>DATA OOC <span field-state>${state || ''}</span></div>
-      </h3>
-
-      ${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}
+      <ox-data-ooc-badge .state=${state}></ox-data-ooc-badge>
+      <ox-data-ooc-correction-part .dataOoc=${this.dataOoc}></ox-data-ooc-correction-part>
     `
   }
 }

package/src/ox-data-ooc-correction-part.ts

@@ -0,0 +1,107 @@
+import '@operato/input/ox-input-file.js'
+import '@material/web/icon/icon.js'
+
+import { css, html, LitElement, nothing } from 'lit'
+import { customElement, property } from 'lit/decorators.js'
+
+import { i18next } from '@operato/i18n'
+
+import { DataOoc } from './types.js'
+
+@customElement('ox-data-ooc-correction-part')
+export class OxDataOocCorrectionPart extends LitElement {
+  static styles = css`
+    :host {
+      display: flex;
+      flex-direction: column;
+
+      position: relative;
+    }
+
+    h3 {
+      margin: var(--title-margin);
+      padding-top: 12px;
+      font: var(--title-font);
+      color: var(--title-text-color);
+      font-size: 20px;
+    }
+
+    md-icon {
+      font-size: 16px;
+    }
+
+    [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);
+    }
+
+    p {
+      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);
+    }
+
+    md-icon {
+      position: relative;
+      top: 3px;
+      margin: 0 2px 0 10px;
+    }
+
+    [field-info] {
+      opacity: 0.7;
+    }
+
+    strong {
+      display: block;
+      font-weight: bold;
+      font-size: 0.9rem;
+    }
+  `
+
+  @property({ type: Object }) dataOoc?: DataOoc
+
+  render() {
+    const {
+      correctiveInstruction = '',
+      correctiveAction = '',
+      reviewer,
+      reviewedAt,
+      corrector,
+      correctedAt
+    } = this.dataOoc || {}
+    const formatter = new Intl.DateTimeFormat(navigator.language, { dateStyle: 'full', timeStyle: 'short' })
+
+    return html`
+      ${reviewer
+        ? html`
+            <h3>${i18next.t('label.corrective instruction')}</h3>
+            <p>
+              <span field-info
+                >${formatter.format(new Date(reviewedAt!))} <md-icon>account_circle</md-icon>${reviewer.name}</span
+              >
+              <strong>${correctiveInstruction}</strong>
+            </p>
+          `
+        : nothing}
+      ${corrector
+        ? html`
+            <h3>${i18next.t('label.corrective action')}</h3>
+            <p>
+              <span field-info
+                >${formatter.format(new Date(correctedAt!))} <md-icon>account_circle</md-icon>${corrector.name}</span
+              >
+              <strong>${correctiveAction}</strong>
+            </p>
+          `
+        : nothing}
+    `
+  }
+}

package/src/ox-data-ooc-history.ts

@@ -0,0 +1,74 @@
+import '@operato/input/ox-input-file.js'
+import './ox-data-sample-view'
+import '@material/web/icon/icon.js'
+
+import { css, html, LitElement } from 'lit'
+import { customElement, property } from 'lit/decorators.js'
+
+import { DataOoc } from './types.js'
+
+@customElement('ox-data-ooc-history')
+export class OxDataOocHistory extends LitElement {
+  static styles = css`
+    md-icon {
+      font-size: 16px;
+    }
+
+    [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);
+    }
+
+    p {
+      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);
+    }
+
+    md-icon {
+      position: relative;
+      top: 3px;
+      margin: 0 2px 0 10px;
+    }
+
+    [field-info] {
+      opacity: 0.7;
+    }
+
+    strong {
+      display: block;
+      font-weight: bold;
+      font-size: 0.9rem;
+    }
+  `
+
+  @property({ type: Object }) dataOoc?: DataOoc
+
+  render() {
+    const { history = [] } = this.dataOoc || {}
+    const formatter = new Intl.DateTimeFormat(navigator.language, { dateStyle: 'full', timeStyle: 'short' })
+
+    return html`
+      ${history.map(
+        ({ user, state, comment, timestamp }) => html`
+          <p page-history>
+            <!--상태에 따라 추가로 danger, complete를 어트리뷰트로 추가시 배경컬러 변경되도록 해두었습니다-->
+            <span field-info
+              >${formatter.format(new Date(timestamp))} <md-icon>account_circle</md-icon>${user.name}</span
+            >
+            <span field-state>${state}</span>
+            <strong>${comment}</strong>
+          </p>
+        `
+      )}
+    `
+  }
+}

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

@@ -1,6 +1,7 @@
 import '@operato/input/ox-input-file.js'
 import './ox-data-sample-view'
-import '@material/mwc-icon'
+import './ox-data-ooc-history'
+import '@material/web/icon/icon.js'
 
 import { css, html, LitElement } from 'lit'
 import { customElement, property } from 'lit/decorators.js'
@@ -18,88 +19,17 @@ export class OxDataOocView extends LitElement {
     :host {
       display: flex;
       flex-direction: column;
-      background-color: var(--main-section-background-color);
 
       position: relative;
     }
 
-    h3 {
-      margin: var(--title-margin);
-      padding-top: 12px;
-      font: var(--title-font);
-      color: var(--title-text-color);
-    }
-
-    h3[state] {
+    ox-data-ooc-badge {
       position: absolute;
+
       margin: 0;
       padding: 0;
       right: 10px;
       width: 90px;
-      text-align: center;
-    }
-
-    mwc-icon {
-      font-size: 16px;
-    }
-    [state] mwc-icon {
-      font-size: 80px;
-      opacity: 0.4;
-      color: var(--primary-background-color);
-    }
-
-    [state] div {
-      position: absolute;
-      top: 22px;
-      left: 0;
-      right: 0;
-      font-size: 10px;
-      color: var(--theme-white-color);
-    }
-    [state] [field-state] {
-      display: block;
-      border-radius: 4px;
-      background-color: var(--primary-color);
-      box-shadow: var(--box-shadow);
-      margin-top: var(--margin-narrow);
-      padding: 1px 3px;
-      font-size: 0.8rem;
-    }
-    [danger] [field-state] {
-      background-color: var(--status-danger-color);
-    }
-    [complete] [field-state] {
-      background-color: var(--status-info-color);
-    }
-    [page-history] [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);
-    }
-    [page-history] {
-      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);
-    }
-    [page-history] mwc-icon {
-      position: relative;
-      top: 3px;
-      margin: 0 2px 0 10px;
-    }
-    [field-info] {
-      opacity: 0.7;
-    }
-    [page-history] strong {
-      display: block;
-      font-weight: bold;
-      font-size: 0.9rem;
     }
   `
 
@@ -107,30 +37,15 @@ export class OxDataOocView extends LitElement {
   @property({ type: Object }) dataOoc?: DataOoc
 
   render() {
-    const { history = [], state } = this.dataOoc || {}
-    const formatter = new Intl.DateTimeFormat(navigator.language, { dateStyle: 'full', timeStyle: 'short' })
+    const { state } = this.dataOoc || {}
 
     return html`
       <ox-data-sample-view .dataSample=${this.dataOoc}></ox-data-sample-view>
 
-      <h3 state ?danger=${state != 'CORRECTED'} ?complete=${state == 'CORRECTED'}>
-        <mwc-icon>shield</mwc-icon>
-        <div>DATA OOC <span field-state>${state || ''}</span></div>
-      </h3>
+      <ox-data-ooc-badge .state=${state}></ox-data-ooc-badge>
 
       <h3>${i18next.t('title.history')}</h3>
-      ${history.map(
-        ({ user, state, comment, timestamp }) => html`
-          <p page-history>
-            <!--상태에 따라 추가로 danger, complete를 어트리뷰트로 추가시 배경컬러 변경되도록 해두었습니다-->
-            <span field-info
-              >${formatter.format(new Date(timestamp))} <mwc-icon>account_circle</mwc-icon>${user.name}</span
-            >
-            <span field-state>${state}</span>
-            <strong>${comment}</strong>
-          </p>
-        `
-      )}
+      <ox-data-ooc-history .dataOoc=${this.dataOoc}></ox-data-ooc-history>
     `
   }
 }

package/src/ox-data-sample-subgroup-view.ts

@@ -39,6 +39,7 @@ export class OxDataSampleSubgroupView extends LitElement {
       font-weight: bold;
       color: var(--th-color);
       text-align: center;
+      white-space: nowrap;
     }
 
     th.label,
@@ -69,13 +70,12 @@ export class OxDataSampleSubgroupView extends LitElement {
       border-left: none;
     }
 
-    td mwc-icon {
+    td md-icon {
       color: var(--status-danger-color);
     }
 
     pre {
       tab-size: 2;
-      text-wrap: wrap;
       text-align: left;
     }
   `
@@ -109,19 +109,18 @@ export class OxDataSampleSubgroupView extends LitElement {
           ${subgroupDataItems.map(dataItem => html` <td>${dataItem.description}</td> `)}
         </tr>
         ${Array.from({ length: records }, (_, index) => index).map(
-          index =>
-            html`
-              <tr>
-                <td class="label">${records > 1 ? index + 1 : i18next.t('field.value')}</td>
-                ${subgroupDataItems.map(dataItem => {
-                  const { tag = '', type } = dataItem
-                  const valueArray = data[tag]
-                  const value = Array.isArray(valueArray) ? valueArray[index] : index == 0 ? valueArray : undefined
-
-                  return html` <td>${this.buildValue(type, value)}</td> `
-                })}
-              </tr>
-            `
+          index => html`
+            <tr>
+              <td class="label">${records > 1 ? index + 1 : i18next.t('field.value')}</td>
+              ${subgroupDataItems.map(dataItem => {
+                const { tag = '', type } = dataItem
+                const valueArray = data[tag]
+                const value = Array.isArray(valueArray) ? valueArray[index] : index == 0 ? valueArray : undefined
+
+                return html` <td>${this.buildValue(type, value)}</td> `
+              })}
+            </tr>
+          `
         )}
         <tr>
           <td class="label">${i18next.t('field.spec')}</td>
@@ -132,13 +131,13 @@ export class OxDataSampleSubgroupView extends LitElement {
         <tr>
           <td class="label">${i18next.t('field.ooc')}</td>
           ${subgroupDataItems.map(
-            dataItem => html` <td>${judgment?.[dataItem.tag]?.ooc ? html`<mwc-icon>done</mwc-icon>` : nothing}</td> `
+            dataItem => html` <td>${judgment?.[dataItem.tag]?.ooc ? html`<md-icon>done</md-icon>` : nothing}</td> `
           )}
         </tr>
         <tr>
           <td class="label">${i18next.t('field.oos')}</td>
           ${subgroupDataItems.map(
-            dataItem => html` <td>${judgment?.[dataItem.tag]?.oos ? html`<mwc-icon>done</mwc-icon>` : nothing}</td> `
+            dataItem => html` <td>${judgment?.[dataItem.tag]?.oos ? html`<md-icon>done</md-icon>` : nothing}</td> `
           )}
         </tr>
       </table>`

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

@@ -1,7 +1,7 @@
 import '@operato/input/ox-input-file.js'
 import './ox-data-sample-subgroup-view.js'
 
-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'
@@ -40,7 +40,7 @@ export class OxDataSampleView extends LitElement {
     [page-description] * {
       vertical-align: middle;
     }
-    [page-description] mwc-icon {
+    [page-description] md-icon {
       margin-top: -2px;
       font-size: 0.9rem;
       color: var(--page-description-color);
@@ -58,6 +58,7 @@ export class OxDataSampleView extends LitElement {
       font: var(--th-font);
       color: var(--th-color);
       text-align: left;
+      white-space: nowrap;
     }
     th[item] {
       min-width: 100px;
@@ -87,13 +88,25 @@ export class OxDataSampleView extends LitElement {
     td[name] {
       font-weight: bold;
     }
-    td mwc-icon {
+    td md-icon {
       color: var(--status-danger-color);
     }
 
     pre {
       tab-size: 2;
     }
+
+    @media print {
+      :host {
+        display: block;
+      }
+    }
+
+    @media screen and (max-width: 480px) {
+      th {
+        min-width: 50px;
+      }
+    }
   `
 
   @property({ type: Object }) dataSample?: DataSample
@@ -121,43 +134,47 @@ export class OxDataSampleView extends LitElement {
 
     return html` <h2>${name}</h2>
       <p page-description>
-        <mwc-icon>info_outline</mwc-icon> ${description}<br />
-        <mwc-icon>alarm</mwc-icon> ${i18next.t('field.work-date')}: ${workDate} ${workShift} |
-        <mwc-icon>pending_actions</mwc-icon> ${i18next.t('field.collected-at')}:
+        <md-icon>info</md-icon> ${description}<br />
+        <md-icon>alarm</md-icon> ${i18next.t('field.work-date')}: ${workDate} ${workShift} |
+        <md-icon>pending_actions</md-icon> ${i18next.t('field.collected-at')}:
         ${formatter.format(new Date(collectedAt!))}
       </p>
 
       <form>
-        <table>
-          <tr>
-            <th item>${i18next.t('field.item')}</th>
-            <th>${i18next.t('field.description')}</th>
-            <th>${i18next.t('field.finalizing-function')}</th>
-            <th>${i18next.t('field.unit')}</th>
-            <th value>${i18next.t('field.value')}</th>
-            <th>${i18next.t('field.spec')}</th>
-            <th>${i18next.t('field.ooc')}</th>
-            <th>${i18next.t('field.oos')}</th>
-          </tr>
-          ${nonGroupDataItems.map(dataItem => {
-            const { name = '', tag = '', description = '', stat, unit = '', spec = {}, type } = dataItem
-            const value = data[tag]
-            const { ooc, oos } = judgment?.[tag] || {}
-
-            return html`
-              <tr ?ooc=${ooc} ?oos=${oos}>
-                <td name>${name}</td>
-                <td>${description}</td>
-                <td>${stat}</td>
-                <td>${unit}</td>
-                <td>${this.buildValue(type, value)}</td>
-                <td><pre>${this.buildSpec(useCaseNames, spec)}</pre></td>
-                <td>${ooc ? html`<mwc-icon>done</mwc-icon>` : ''}</td>
-                <td>${oos ? html`<mwc-icon>done</mwc-icon>` : ''}</td>
-              </tr>
+        ${nonGroupDataItems.length > 0
+          ? html`
+              <table>
+                <tr>
+                  <th item>${i18next.t('field.item')}</th>
+                  <th>${i18next.t('field.description')}</th>
+                  <th>${i18next.t('field.finalizing-function')}</th>
+                  <th>${i18next.t('field.unit')}</th>
+                  <th value>${i18next.t('field.value')}</th>
+                  <th>${i18next.t('field.spec')}</th>
+                  <th>${i18next.t('field.ooc')}</th>
+                  <th>${i18next.t('field.oos')}</th>
+                </tr>
+                ${nonGroupDataItems.map(dataItem => {
+                  const { name = '', tag = '', description = '', stat, unit = '', spec = {}, type } = dataItem
+                  const value = data[tag]
+                  const { ooc, oos } = judgment?.[tag] || {}
+
+                  return html`
+                    <tr ?ooc=${ooc} ?oos=${oos}>
+                      <td name>${name}</td>
+                      <td>${description}</td>
+                      <td>${stat}</td>
+                      <td>${unit}</td>
+                      <td>${this.buildValue(type, value)}</td>
+                      <td><pre>${this.buildSpec(useCaseNames, spec)}</pre></td>
+                      <td>${ooc ? html`<md-icon>done</md-icon>` : ''}</td>
+                      <td>${oos ? html`<md-icon>done</md-icon>` : ''}</td>
+                    </tr>
+                  `
+                })}
+              </table>
             `
-          })}
-        </table>
+          : nothing}
         ${Object.keys(dataItemSubgroups).map(subgroup => {
           return html`
             <ox-data-sample-subgroup-view