@operato/dataset 2.0.0-alpha.5 → 2.0.0-alpha.52

package/package.json

@@ -2,7 +2,7 @@
   "name": "@operato/dataset",
   "description": "WebApplication dataset supporting components following open-wc recommendations",
   "author": "heartyoh",
-  "version": "2.0.0-alpha.5",
+  "version": "2.0.0-alpha.52",
   "main": "dist/src/index.js",
   "module": "dist/src/index.js",
   "exports": {
@@ -16,6 +16,9 @@
     "./ox-data-item-spec.js": "./dist/src/ox-data-item-spec.js",
     "./ox-data-ooc-brief-view.js": "./dist/src/ox-data-ooc-brief-view.js",
     "./ox-data-ooc-view.js": "./dist/src/ox-data-ooc-view.js",
+    "./ox-data-ooc-correction-part.js": "./dist/src/ox-data-ooc-correction-part.js",
+    "./ox-data-ooc-badge.js": "./dist/src/ox-data-ooc-badge.js",
+    "./ox-data-ooc-history.js": "./dist/src/ox-data-ooc-history.js",
     "./ox-data-sample-view.js": "./dist/src/ox-data-sample-view.js",
     "./ox-data-summary-view.js": "./dist/src/ox-data-summary-view.js",
     "./ox-input-ccp-limits.js": "./dist/src/usecase/ccp/ox-input-ccp-limits.js",
@@ -47,6 +50,18 @@
       "ox-data-ooc-view.js": [
         "dist/src/ox-data-ooc-view.d.ts"
       ],
+      "ox-data-ooc-brief-view.js": [
+        "dist/src/ox-data-ooc-brief-view.d.ts"
+      ],
+      "ox-data-ooc-correction-part.js": [
+        "dist/src/ox-data-ooc-correction-part.d.ts"
+      ],
+      "ox-data-ooc-badge.js": [
+        "dist/src/ox-data-ooc-badge.d.ts"
+      ],
+      "ox-data-ooc-history.js": [
+        "dist/src/ox-data-ooc-history.d.ts"
+      ],
       "ox-data-sample-view.js": [
         "dist/src/ox-data-sample-view.d.ts"
       ],
@@ -93,34 +108,34 @@
     "@material/mwc-button": "^0.27.0",
     "@material/mwc-icon": "^0.27.0",
     "@material/mwc-icon-button": "^0.27.0",
-    "@operato/data-grist": "^2.0.0-alpha.5",
-    "@operato/graphql": "^2.0.0-alpha.0",
-    "@operato/grist-editor": "^2.0.0-alpha.5",
-    "@operato/i18n": "^2.0.0-alpha.0",
-    "@operato/input": "^2.0.0-alpha.4",
-    "@operato/popup": "^2.0.0-alpha.4",
-    "@operato/property-editor": "^2.0.0-alpha.5",
-    "@operato/shell": "^2.0.0-alpha.0",
-    "@operato/styles": "^2.0.0-alpha.0",
-    "@operato/utils": "^2.0.0-alpha.0",
-    "lit": "^2.5.0"
+    "@operato/data-grist": "^2.0.0-alpha.52",
+    "@operato/graphql": "^2.0.0-alpha.51",
+    "@operato/grist-editor": "^2.0.0-alpha.52",
+    "@operato/i18n": "^2.0.0-alpha.51",
+    "@operato/input": "^2.0.0-alpha.52",
+    "@operato/popup": "^2.0.0-alpha.52",
+    "@operato/property-editor": "^2.0.0-alpha.52",
+    "@operato/shell": "^2.0.0-alpha.52",
+    "@operato/styles": "^2.0.0-alpha.51",
+    "@operato/utils": "^2.0.0-alpha.35",
+    "lit": "^3.1.2"
   },
   "devDependencies": {
-    "@custom-elements-manifest/analyzer": "^0.8.1",
+    "@custom-elements-manifest/analyzer": "^0.9.2",
     "@hatiolab/prettier-config": "^1.0.0",
-    "@open-wc/eslint-config": "^10.0.0",
+    "@open-wc/eslint-config": "^12.0.3",
     "@open-wc/testing": "^3.1.6",
-    "@typescript-eslint/eslint-plugin": "^5.59.1",
-    "@typescript-eslint/parser": "^5.59.1",
+    "@typescript-eslint/eslint-plugin": "^7.0.1",
+    "@typescript-eslint/parser": "^7.0.1",
     "@web/dev-server": "^0.3.0",
-    "@web/dev-server-storybook": "^0.7.4",
-    "@web/test-runner": "^0.17.0",
+    "@web/dev-server-storybook": "^2.0.1",
+    "@web/test-runner": "^0.18.0",
     "concurrently": "^8.0.1",
     "eslint": "^8.39.0",
-    "eslint-config-prettier": "^8.3.0",
-    "husky": "^8.0.1",
-    "lint-staged": "^13.2.2",
-    "prettier": "^2.4.1",
+    "eslint-config-prettier": "^9.1.0",
+    "husky": "^9.0.11",
+    "lint-staged": "^15.2.2",
+    "prettier": "^3.2.5",
     "tslib": "^2.3.1",
     "typescript": "^5.0.4"
   },
@@ -137,5 +152,5 @@
       "prettier --write"
     ]
   },
-  "gitHead": "45ed2c243777f7d06668edc5248c5dcf493526dd"
+  "gitHead": "444fbc70ae236f0d5279554d74f1988a4ece21e9"
 }

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

@@ -11,8 +11,6 @@ import { OxDataEntrySubgroupForm } from './ox-data-entry-subgroup-form.js'
 export class OxDataEntryForm 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);
     }
@@ -34,13 +32,12 @@ export class OxDataEntryForm extends LitElement {
     }
 
     form {
-      flex: 1;
-
       display: flex;
       flex-direction: column;
+      overflow: hidden;
     }
 
-    label {
+    form > div[label] {
       display: grid;
 
       grid-template-rows: auto 1fr;
@@ -50,11 +47,11 @@ export class OxDataEntryForm extends LitElement {
       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;
+      &:nth-child(odd) {
+        background-color: var(--main-section-background-color);
+        padding: var(--padding-default) 0;
+      }
     }
 
     div[name] {
@@ -69,15 +66,15 @@ export class OxDataEntryForm extends LitElement {
       font: var(--item-description-font);
       color: var(--item-description-color);
       text-align: left;
-    }
 
-    div[description] * {
-      vertical-align: middle;
-    }
+      * {
+        vertical-align: middle;
+      }
 
-    div[description] mwc-icon {
-      margin-top: -3px;
-      font-size: 0.9rem;
+      mwc-icon {
+        margin-top: -3px;
+        font-size: 0.9rem;
+      }
     }
 
     div[elements] {
@@ -87,18 +84,18 @@ export class OxDataEntryForm extends LitElement {
       flex-wrap: wrap;
       gap: 10px;
       padding-right: var(--padding-default);
-    }
 
-    div[elements] * {
-      flex: 1;
-    }
+      * {
+        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);
+      input,
+      select {
+        border: var(--input-field-border);
+        border-radius: var(--input-field-border-radius);
+        padding: var(--input-field-padding);
+        font: var(--input-field-font);
+      }
     }
 
     div[subgroup] {
@@ -107,7 +104,7 @@ export class OxDataEntryForm extends LitElement {
     }
 
     @media only screen and (max-width: 460px) {
-      label {
+      form > div[label] {
         display: grid;
 
         grid-template-rows: auto auto 1fr;
@@ -168,7 +165,7 @@ export class OxDataEntryForm extends LitElement {
 
   private buildInputs4Subgroup(subgroup: string, dataItems: DataItem[], value: { [tag: string]: any }): TemplateResult {
     return html`
-      <label>
+      <div label>
         <div name>${subgroup}</div>
         <div subgroup>
           <ox-data-entry-subgroup-form
@@ -177,7 +174,7 @@ export class OxDataEntryForm extends LitElement {
             .value=${value}
           ></ox-data-entry-subgroup-form>
         </div>
-      </label>
+      </div>
     `
   }
 
@@ -199,23 +196,42 @@ export class OxDataEntryForm extends LitElement {
                 option => html`<option value=${option.value} ?selected=${option.value === v}>${option.text}</option>`
               )}
             </select>`
-            break
+
+          case 'radio':
+            return html`<div
+              @change=${(e: Event) => {
+                const div = e.currentTarget as HTMLElement
+                const inputHidden = div.querySelector(`input[name="${tag}"]`) as HTMLInputElement
+                inputHidden.value = (e.target as HTMLInputElement).value
+              }}
+            >
+              <input type="hidden" name=${tag} />
+
+              ${(options.options || []).map(
+                option =>
+                  html`<label>
+                    <input
+                      type="radio"
+                      name=${'$' + tag + '-' + idx}
+                      .value=${option.value}
+                      ?checked=${option.value === v}
+                    />
+                    ${option.text}
+                  </label>`
+              )}
+            </div>`
 
           case 'boolean':
             return html` <input type="checkbox" name=${tag} .checked=${v} />`
-            break
 
           case 'number':
             return html` <input type="number" name=${tag} value=${v} />`
-            break
 
           case 'date':
             return html` <input type="date" name=${tag} value=${v} />`
-            break
 
           case 'datetime':
             return html` <input type="datetime-local" name=${tag} value=${v} />`
-            break
 
           case 'file':
             return html`<ox-input-file name=${tag} label="Attach Files" accept="*/*" multiple="true"></ox-input-file>`
@@ -226,11 +242,11 @@ export class OxDataEntryForm extends LitElement {
         }
       })
 
-      return html` <label .title=${description}>
+      return html` <div label>
         <div name>${name}${unit ? `(${unit})` : ''}</div>
         <div description><mwc-icon>info_outline</mwc-icon> ${description}</div>
         <div elements>${elements}</div>
-      </label>`
+      </div>`
     })
   }
 
@@ -238,19 +254,22 @@ export class OxDataEntryForm extends LitElement {
     const dataItems = this.dataSet!.dataItems
     const nonGroupDataItems = dataItems.filter(dataItem => !dataItem.group)
 
-    const nonGroupValue = (nonGroupDataItems || []).reduce((sum, dataItem) => {
-      const { tag, type } = dataItem
+    const nonGroupValue = (nonGroupDataItems || []).reduce(
+      (sum, dataItem) => {
+        const { tag, type } = dataItem
 
-      const editors = Array.prototype.slice.call(
-        this.renderRoot.querySelectorAll(`[name=${tag}]`) as NodeListOf<HTMLInputElement>
-      ) as HTMLInputElement[]
+        const editors = Array.prototype.slice.call(
+          this.renderRoot.querySelectorAll(`[name=${tag}]`) as NodeListOf<HTMLInputElement>
+        ) as HTMLInputElement[]
 
-      if (editors.length > 0) {
-        sum[tag] = editors.map(editor => (type === 'boolean' ? editor.checked : editor.value))
-      }
+        if (editors.length > 0) {
+          sum[tag] = editors.map(editor => (type === 'boolean' ? editor.checked : editor.value))
+        }
 
-      return sum
-    }, {} as { [tag: string]: any })
+        return sum
+      },
+      {} as { [tag: string]: any }
+    )
 
     return Array.from(this.subgroups).reduce((value, subgroup) => {
       return {

package/src/ox-data-entry-subgroup-form.ts

@@ -58,6 +58,8 @@ export class OxDataEntrySubgroupForm extends LitElement {
 
       switch (type) {
         case 'select':
+        case 'radio': // 그리드안에 radio가 들어갈수 없어서 select로 변환
+          columnConfig.type = 'select'
           columnConfig.record.options = [
             '',
             ...(options.options || []).map((option: any) => {

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

@@ -1,6 +1,6 @@
 import '@operato/input/ox-input-file.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'
@@ -57,6 +57,7 @@ export class OxDataEntryView extends LitElement {
       font: var(--th-font);
       color: var(--th-color);
       text-align: left;
+      white-space: nowrap;
     }
     th[item] {
       min-width: 100px;
@@ -93,6 +94,12 @@ export class OxDataEntryView extends LitElement {
     pre {
       tab-size: 2;
     }
+
+    @media screen and (max-width: 480px) {
+      th {
+        min-width: 50px;
+      }
+    }
   `
 
   @property({ type: Object }) dataSet?: DataSet
@@ -161,6 +168,10 @@ export class OxDataEntryView extends LitElement {
   }
 
   render() {
+    if (!this.dataSet) {
+      return nothing
+    }
+
     const { name, description, useCase, dataItems = [] } = this.dataSet!
 
     const data = this.value || {}
@@ -174,7 +185,7 @@ export class OxDataEntryView extends LitElement {
           <tr>
             <th item>${i18next.t('field.item')}</th>
             <th>${i18next.t('field.description')}</th>
-            <th>${i18next.t('field.stat-function')}</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>

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

@@ -0,0 +1,64 @@
+import '@operato/input/ox-input-file.js'
+import './ox-data-sample-view'
+import '@material/mwc-icon'
+
+import { css, html, LitElement, nothing } from 'lit'
+import { customElement, property } from 'lit/decorators.js'
+
+@customElement('ox-data-ooc-badge')
+export class OxDataOocBadge extends LitElement {
+  static styles = css`
+    h3 {
+      margin: var(--title-margin);
+      font: var(--title-font);
+      color: var(--title-text-color);
+      text-align: center;
+    }
+
+    mwc-icon {
+      font-size: 80px;
+      opacity: 0.4;
+      color: var(--primary-background-color);
+    }
+
+    div {
+      position: absolute;
+      top: 22px;
+      left: 0;
+      right: 0;
+      font-size: 10px;
+      color: var(--theme-white-color);
+    }
+
+    [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);
+    }
+  `
+
+  @property({ type: String }) state?: string
+
+  render() {
+    const state = this.state
+
+    return html`
+      <h3 ?danger=${state != 'CORRECTED'} ?complete=${state == 'CORRECTED'}>
+        <mwc-icon>shield</mwc-icon>
+        <div>DATA OOC <span field-state>${state || ''}</span></div>
+      </h3>
+    `
+  }
+}

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 './ox-data-ooc-badge'
+import './ox-data-ooc-correction-part'
 import '@material/mwc-icon'
 
-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>
     `
   }
 }