@operato/dataset 1.2.17 → 1.2.19

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

@@ -0,0 +1,186 @@
+import '@operato/input/ox-input-file.js'
+
+import { css, html, LitElement } from 'lit'
+import { customElement, property } from 'lit/decorators.js'
+
+import { DataSet } from './types.js'
+
+@customElement('ox-data-entry-view')
+export class OxDataEntryView extends LitElement {
+  static styles = css`
+    :host {
+      display: flex;
+      flex-direction: row;
+
+      --item-description-font: normal 0.8rem/1rem var(--theme-font);
+      --item-description-color: var(--page-description-color);
+    }
+
+    h2 {
+      margin: var(--title-margin);
+      font: var(--title-font);
+      color: var(--title-text-color);
+      text-transform: capitalize;
+      text-align: center;
+    }
+    h3 {
+      margin: var(--page-description-margin);
+      font: var(--page-description-font);
+      color: var(--page-description-color);
+      text-transform: capitalize;
+      text-align: center;
+    }
+
+    form {
+      flex: 1;
+
+      display: flex;
+      flex-direction: column;
+    }
+
+    label {
+      display: grid;
+
+      grid-template-rows: auto 1fr;
+      grid-template-columns: 1fr 5fr;
+      grid-template-areas: 'name description' 'empty inputs';
+
+      grid-gap: 9px;
+      align-items: center;
+      margin-bottom: var(--margin-default);
+    }
+
+    label:nth-child(odd) {
+      background-color: var(--main-section-background-color);
+      padding: var(--padding-default) 0;
+    }
+
+    div[name] {
+      grid-area: name;
+      font: var(--label-font);
+      color: var(--label-color);
+      text-align: right;
+    }
+
+    div[description] {
+      grid-area: description;
+      opacity: 0.7;
+      font: var(--item-description-font);
+      color: var(--item-description-color);
+      text-align: left;
+    }
+
+    div[description] * {
+      vertical-align: middle;
+    }
+
+    div[description] mwc-icon {
+      margin-top: -3px;
+      font-size: 0.9rem;
+    }
+
+    div[elements] {
+      grid-area: inputs;
+      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);
+    }
+
+    @media only screen and (max-width: 460px) {
+      label {
+        display: grid;
+
+        grid-template-rows: auto auto 1fr;
+        grid-template-columns: 1fr;
+        grid-template-areas: 'name' 'description' 'inputs';
+
+        grid-gap: 9px;
+        align-items: center;
+        margin-bottom: var(--margin-default);
+      }
+
+      div[name] {
+        text-align: left;
+      }
+    }
+  `
+
+  @property({ type: Object }) dataSet?: DataSet
+  @property({ type: Object }) value?: { [tag: string]: any }
+
+  render() {
+    return html`<form>
+      <h2>${this.dataSet?.name || ''}</h2>
+      <h3>${this.dataSet?.description || ''}</h3>
+      ${this.buildEntryViews()}
+    </form> `
+  }
+
+  private buildEntryViews() {
+    const dataItems = this.dataSet?.dataItems.filter(item => item.active)
+
+    return (dataItems || []).map(dataItem => {
+      const { name, description, tag, type, quota = 1, options = {}, unit } = dataItem
+
+      const samples = new Array(quota).fill(0)
+      const value = this.value && this.value[tag]
+
+      const elements = samples.map((_, idx) => {
+        const v = value instanceof Array ? value[idx] : idx === 0 ? value : undefined
+
+        switch (type) {
+          case 'select':
+            return html` <select .name=${tag} disabled>
+              <option value=""></option>
+              ${(options.options || []).map(
+                option => html`<option value=${option.value} ?selected=${option.value === v}>${option.text}</option>`
+              )}
+            </select>`
+            break
+
+          case 'boolean':
+            return html` <input type="checkbox" name=${tag} .checked=${v} disabled />`
+            break
+
+          case 'number':
+            return html` <input type="number" name=${tag} value=${v} disabled />`
+            break
+
+          case 'file':
+            return html`<ox-input-file
+              name=${tag}
+              label="Attach Files"
+              accept="*/*"
+              multiple="true"
+              hide-filelist
+              disabled
+            ></ox-input-file>`
+
+          case 'string':
+          default:
+            return html` <input type="text" name=${tag} value=${v} disabled />`
+        }
+      })
+
+      return html` <label .title=${description}>
+        <div name>${name}${unit ? `(${unit})` : ''}</div>
+        <div description><mwc-icon>info_outline</mwc-icon> ${description}</div>
+        <div elements>${elements}</div>
+      </label>`
+    })
+  }
+}

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

@@ -0,0 +1,151 @@
+import '@operato/input/ox-input-file.js'
+import './ox-data-sample-view'
+import '@material/mwc-icon'
+
+import { css, html, LitElement } from 'lit'
+import { customElement, property } from 'lit/decorators.js'
+
+import { i18next } from '@operato/i18n'
+
+import { DataOoc, DataSet } from './types.js'
+
+@customElement('ox-data-ooc-brief-view')
+export class OxDataOocBriefView extends LitElement {
+  static styles = css`
+    :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] {
+      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);
+    }
+
+    div[instruction] {
+      display: flex;
+      flex-direction: column;
+
+      padding: var(--padding-wide);
+    }
+
+    div[instruction] div {
+      display: flex;
+    }
+
+    div[instruction] div[content] {
+      display: flex;
+      min-height: 50px;
+    }
+
+    div[action] {
+      display: flex;
+      flex-direction: column;
+
+      padding: var(--padding-wide);
+    }
+
+    div[action] div {
+      display: flex;
+    }
+
+    div[action] div[content] {
+      display: flex;
+      min-height: 50px;
+    }
+  `
+
+  @property({ type: Object }) dataSet?: DataSet
+  @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' })
+
+    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>
+
+      <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>
+    `
+  }
+}

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

@@ -9,6 +9,9 @@ import { i18next } from '@operato/i18n'
 
 import { DataOoc, DataSet } from './types.js'
 
+/**
+ * @deprecated by ox-data-ooc-brief-view
+ */
 @customElement('ox-data-ooc-view')
 export class OxDataOocView extends LitElement {
   static styles = css`
@@ -65,7 +68,7 @@ export class OxDataOocView extends LitElement {
     [danger] [field-state] {
       background-color: var(--status-danger-color);
     }
-    [complate] [field-state] {
+    [complete] [field-state] {
       background-color: var(--status-info-color);
     }
     [page-history] [field-state] {
@@ -104,23 +107,22 @@ export class OxDataOocView extends LitElement {
   @property({ type: Object }) dataOoc?: DataOoc
 
   render() {
-    const history = this.dataOoc?.history || []
+    const { history = [], state } = this.dataOoc || {}
     const formatter = new Intl.DateTimeFormat(navigator.language, { dateStyle: 'full', timeStyle: 'short' })
 
     return html`
       <ox-data-sample-view .dataSample=${this.dataOoc}></ox-data-sample-view>
 
-      <h3 state>
-        <!--상태에 따라 추가로 danger, complate를 어트리뷰트로 추가시 배경컬러 변경되도록 해두었습니다-->
+      <h3 state ?danger=${state != 'CORRECTED'} ?complete=${state == 'CORRECTED'}>
         <mwc-icon>shield</mwc-icon>
-        <div>${name} <span field-state>${this.dataOoc?.state || ''}</span></div>
+        <div>DATA OOC <span field-state>${state || ''}</span></div>
       </h3>
 
       <h3>${i18next.t('title.history')}</h3>
       ${history.map(
         ({ user, state, comment, timestamp }) => html`
           <p page-history>
-            <!--상태에 따라 추가로 danger, complate를 어트리뷰트로 추가시 배경컬러 변경되도록 해두었습니다-->
+            <!--상태에 따라 추가로 danger, complete를 어트리뷰트로 추가시 배경컬러 변경되도록 해두었습니다-->
             <span field-info
               >${formatter.format(new Date(timestamp))} <mwc-icon>account_circle</mwc-icon>${user.name}</span
             >

package/src/types.ts

@@ -82,7 +82,18 @@ export type DataOocState = 'CREATED' | 'REVIEWED' | 'CORRECTED'
 
 export type DataOoc = DataSample & {
   state: DataOocState
-  correctiveAction: string
+  correctiveInstruction?: string
+  correctiveAction?: string
+  reviewer?: {
+    id: string
+    name: string
+  }
+  reviewedAt?: Date
+  corrector?: {
+    id: string
+    name: string
+  }
+  correctedAt?: Date
   history: {
     user: {
       id: string