@operato/dataset 1.13.13 → 1.13.15

package/package.json

@@ -2,7 +2,7 @@
   "name": "@operato/dataset",
   "description": "WebApplication dataset supporting components following open-wc recommendations",
   "author": "heartyoh",
-  "version": "1.13.13",
+  "version": "1.13.15",
   "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,13 +108,13 @@
     "@material/mwc-button": "^0.27.0",
     "@material/mwc-icon": "^0.27.0",
     "@material/mwc-icon-button": "^0.27.0",
-    "@operato/data-grist": "^1.13.13",
+    "@operato/data-grist": "^1.13.14",
     "@operato/graphql": "^1.12.9",
-    "@operato/grist-editor": "^1.13.13",
+    "@operato/grist-editor": "^1.13.14",
     "@operato/i18n": "^1.5.14",
-    "@operato/input": "^1.13.12",
+    "@operato/input": "^1.13.14",
     "@operato/popup": "^1.13.9",
-    "@operato/property-editor": "^1.13.13",
+    "@operato/property-editor": "^1.13.14",
     "@operato/shell": "^1.13.9",
     "@operato/styles": "^1.12.3",
     "@operato/utils": "^1.13.9",
@@ -137,5 +152,5 @@
       "prettier --write"
     ]
   },
-  "gitHead": "6766fca022dffd2897fd2c2e56546a5b1ee9f3c0"
+  "gitHead": "a5b975befe5a5788bb40d900bbd8ef6d9cf74980"
 }

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 {
@@ -20,135 +20,25 @@ export class OxDataOocBriefView extends LitElement {
       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,108 @@
+import '@operato/input/ox-input-file.js'
+import '@material/mwc-icon'
+
+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;
+      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);
+      font-size: 20px;
+    }
+
+    mwc-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);
+    }
+
+    mwc-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!))} <mwc-icon>account_circle</mwc-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!))} <mwc-icon>account_circle</mwc-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/mwc-icon'
+
+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`
+    mwc-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);
+    }
+
+    mwc-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))} <mwc-icon>account_circle</mwc-icon>${user.name}</span
+            >
+            <span field-state>${state}</span>
+            <strong>${comment}</strong>
+          </p>
+        `
+      )}
+    `
+  }
+}

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

@@ -1,5 +1,6 @@
 import '@operato/input/ox-input-file.js'
 import './ox-data-sample-view'
+import './ox-data-ooc-history'
 import '@material/mwc-icon'
 
 import { css, html, LitElement } from 'lit'
@@ -23,83 +24,13 @@ export class OxDataOocView extends LitElement {
       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 +38,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>
     `
   }
 }