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

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

@@ -0,0 +1,67 @@
+import '@operato/input/ox-input-file.js'
+import './ox-data-sample-view'
+
+import { DataOoc, DataSet } from './types.js'
+import { LitElement, css, html } from 'lit'
+import { customElement, property } from 'lit/decorators.js'
+
+@customElement('ox-data-ooc-view')
+export class OxDataOocView extends LitElement {
+  static styles = css`
+    :host {
+      display: flex;
+      flex-direction: column;
+      background-color: var(--main-section-background-color);
+      padding: var(--padding-wide);
+
+      position: relative;
+    }
+
+    h3 {
+      margin: var(--title-margin);
+      padding-top: 12px;
+      font: var(--title-font);
+      color: var(--title-text-color);
+    }
+
+    h3[state] {
+      position: absolute;
+
+      right: 20px;
+      top: 25px;
+    }
+
+    [page-description] {
+      margin: var(--page-description-margin);
+      font: var(--page-description-font);
+      color: var(--page-description-color);
+    }
+  `
+
+  @property({ type: Object }) dataSet?: DataSet
+  @property({ type: Object }) dataOoc?: DataOoc
+
+  render() {
+    const history = this.dataOoc?.history || []
+    const formatter = new Intl.DateTimeFormat(navigator.language, { dateStyle: 'full', timeStyle: 'short' })
+
+    return html`
+      <ox-data-sample-view .dataSample=${this.dataOoc} .dataSet=${this.dataSet}></ox-data-sample-view>
+
+      <h3 state>${this.dataOoc?.state || ''}</h3>
+
+      <h3>history</h3>
+      ${history.map(
+        ({ user, state, comment, timestamp }) => html`
+          <p page-description>
+            ${formatter.format(new Date(timestamp))}
+            <br />
+            ${state} by ${user.name}
+            <br />
+            ${comment}
+          </p>
+        `
+      )}
+    `
+  }
+}

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

@@ -13,7 +13,6 @@ export class OxDataSampleView extends LitElement {
       display: flex;
       flex-direction: column;
       background-color: var(--main-section-background-color);
-      padding: var(--padding-wide);
     }
 
     form {
@@ -22,48 +21,7 @@ export class OxDataSampleView extends LitElement {
       display: flex;
       flex-direction: column;
     }
-    label {
-      font: var(--label-font);
-      color: var(--label-color);
-    }
-    label * {
-      text-align: middle;
-    }
-    label:nth-child(even) {
-      background-color: var(--main-section-background-color);
-      padding: var(--padding-default) 0;
-    }
-    label mwc-icon {
-      position: relative;
-      top: 4px;
-      font-size: 18px;
-      color: var(--status-danger-color);
-    }
 
-    div[name] {
-      grid-column: span 2 / auto;
-      font: var(--label-font);
-      color: var(--label-color);
-      text-align: right;
-    }
-    div[elements] {
-      grid-column: span 10 / auto;
-      display: flex;
-      flex-direction: row;
-      flex-wrap: wrap;
-      gap: 10px;
-      padding-right: var(--padding-default);
-    }
-    div[elements] * {
-      flex: 1;
-    }
-    div[elements] input,
-    div[elements] select {
-      border: var(--input-field-border);
-      border-radius: var(--input-field-border-radius);
-      padding: var(--input-field-padding);
-      font: var(--input-field-font);
-    }
     h2 {
       margin: var(--title-margin);
       padding-top: 25px;
@@ -75,6 +33,7 @@ export class OxDataSampleView extends LitElement {
       font: var(--page-description-font);
       color: var(--page-description-color);
     }
+
     table {
       border-collapse: collapse;
       margin-bottom: var(--margin-default);
@@ -88,6 +47,12 @@ export class OxDataSampleView extends LitElement {
       color: var(--th-color);
       text-align: left;
     }
+    th[item] {
+      min-width: 100px;
+    }
+    th[value] {
+      min-width: 100px;
+    }
     tr {
       background-color: var(--tr-background-color);
     }
@@ -97,7 +62,8 @@ export class OxDataSampleView extends LitElement {
     tr:hover {
       background-color: var(--tr-background-hover-color);
     }
-    tr[ooc] tr[oos] {
+    tr[ooc],
+    tr[oos] {
       background-color: #fefbdf;
     }
     td {
@@ -112,20 +78,9 @@ export class OxDataSampleView extends LitElement {
     td mwc-icon {
       color: var(--status-danger-color);
     }
-    textarea {
-      border: var(--input-field-border);
-      border-radius: var(--input-border-radius);
-      padding: var(--input-field-padding);
-      font: var(--input-field-font);
-    }
 
-    @media only screen and (max-width: 460px) {
-      div[name] {
-        grid-column: span 3 / auto;
-      }
-      div[elements] {
-        grid-column: span 9 / auto;
-      }
+    pre {
+      tab-size: 2;
     }
   `
 
@@ -140,39 +95,35 @@ export class OxDataSampleView extends LitElement {
     return html` <h2>${this.dataSample?.name}</h2>
       <p page-description>
         ${this.dataSample?.description}<br /><br />
-        collected at: ${formatter.format(new Date(this.dataSample?.collectedAt!))}
+        collected at: ${this.dataSample && formatter.format(new Date(this.dataSample?.collectedAt!))}
       </p>
 
       <form @change=${(e: Event) => this.onChange(e)}>
         <table>
           <tr>
-            <th>item</th>
+            <th item>item</th>
             <th>description</th>
             <th>unit</th>
-            <th>value</th>
+            <th value>value</th>
             <th>specification</th>
-            <th>ooc</th>
-            <th>oos</th>
+            <th>OOC</th>
+            <th>OOS</th>
           </tr>
           ${dataItems.map(dataItem => {
             const { ooc, oos } = this.evaluateOOC(dataItem, data?.[dataItem.tag]) || {}
             return html`
-              <tr>
-                <!--tr에다가 ooc, oos를 어트리뷰트로 넣어주시면 배경이 살짝 하일라이트 되도록 style 넣어놨습니다 -->
+              <tr ?ooc=${ooc} ?oos=${oos}>
                 <td name>${dataItem.name}</td>
                 <td>${dataItem.description}</td>
                 <td>${dataItem.unit}</td>
                 <td>${this.buildValue(dataItem)}</td>
                 <td><pre>${this.buildSpec(dataItem)}</pre></td>
-                <td>${ooc ? html`<mwc-icon>checked</mwc-icon>` : ''}</td>
-                <td>${oos ? html`<mwc-icon>checked</mwc-icon>` : ''}</td>
+                <td>${ooc ? html`<mwc-icon>done</mwc-icon>` : ''}</td>
+                <td>${oos ? html`<mwc-icon>done</mwc-icon>` : ''}</td>
               </tr>
             `
           })}
         </table>
-
-        <label><mwc-icon>build_circle</mwc-icon> correction activity</label>
-        <textarea name="correctionActivity"> </textarea>
       </form>`
   }
 

package/src/types.ts

@@ -51,4 +51,20 @@ export type DataSample = {
   collectedAt: Date
 }
 
+export type DataOocState = 'CREATED' | 'REVIEWED' | 'CORRECTED'
+
+export type DataOoc = DataSample & {
+  state: DataOocState
+  correctiveAction: string
+  history: {
+    user: {
+      id: string
+      name: string
+    }
+    state: DataOocState
+    comment: string
+    timestamp: number
+  }[]
+}
+
 export type EvaluationResult = { oos: boolean; ooc: boolean }