@operato/dataset 1.0.0-beta.7 → 1.0.0

package/package.json

@@ -3,18 +3,23 @@
   "description": "WebApplication dataset supporting components following open-wc recommendations",
   "license": "MIT",
   "author": "heartyoh",
-  "version": "1.0.0-beta.7",
+  "version": "1.0.0",
   "main": "dist/src/index.js",
   "module": "dist/src/index.js",
   "exports": {
     ".": "./dist/src/index.js",
+    "./usecase/ccp": "./dist/src/usecase/ccp/index.js",
+    "./usecase/qc": "./dist/src/usecase/qc/index.js",
     "./grist-editor": "./dist/src/grist-editor/index.js",
     "./grist-editor/ox-grist-editor-data-item-spec.js": "./dist/src/grist-editor/ox-grist-editor-data-item-spec.js",
     "./ox-data-entry-form.js": "./dist/src/ox-data-entry-form.js",
     "./ox-data-item-spec.js": "./dist/src/ox-data-item-spec.js",
     "./ox-data-ooc-view.js": "./dist/src/ox-data-ooc-view.js",
     "./ox-data-sample-view.js": "./dist/src/ox-data-sample-view.js",
-    "./ox-data-use-case.js": "./dist/src/ox-data-use-case.js",
+    "./ox-input-ccp-limits.js": "./dist/src/usecase/ccp/ox-input-ccp-limits.js",
+    "./ox-property-editor-ccp-limits.js": "./dist/src/usecase/ccp/ox-property-editor-ccp-limits.js",
+    "./ox-input-qc-limits.js": "./dist/src/usecase/qc/ox-input-qc-limits.js",
+    "./ox-property-editor-qc-limits.js": "./dist/src/usecase/qc/ox-property-editor-qc-limits.js",
     "./types.js": "./dist/src/types.js"
   },
   "publishConfig": {
@@ -39,19 +44,20 @@
     "storybook:build": "tsc && npm run analyze -- --exclude dist && build-storybook"
   },
   "dependencies": {
-    "@material/mwc-button": "^0.25.3",
-    "@material/mwc-icon": "^0.25.3",
-    "@material/mwc-icon-button": "^0.25.3",
-    "@operato/data-grist": "^1.0.0-beta.7",
-    "@operato/graphql": "^1.0.0-beta.7",
-    "@operato/i18n": "^1.0.0-beta.7",
-    "@operato/input": "^1.0.0-beta.7",
-    "@operato/layout": "^1.0.0-beta.7",
-    "@operato/property-editor": "^1.0.0-beta.7",
-    "@operato/shell": "^1.0.0-beta.7",
-    "@operato/styles": "^1.0.0-beta.7",
-    "@operato/utils": "^1.0.0-beta.7",
-    "lit": "^2.2.1"
+    "@material/mwc-button": "^0.26.1",
+    "@material/mwc-icon": "^0.26.1",
+    "@material/mwc-icon-button": "^0.26.1",
+    "@operato/data-grist": "^1.0.0",
+    "@operato/graphql": "^1.0.0",
+    "@operato/grist-editor": "^1.0.0",
+    "@operato/i18n": "^1.0.0",
+    "@operato/input": "^1.0.0",
+    "@operato/popup": "^1.0.0",
+    "@operato/property-editor": "^1.0.0",
+    "@operato/shell": "^1.0.0",
+    "@operato/styles": "^1.0.0",
+    "@operato/utils": "^1.0.0",
+    "lit": "^2.2.7"
   },
   "devDependencies": {
     "@custom-elements-manifest/analyzer": "^0.4.17",
@@ -61,12 +67,12 @@
     "@typescript-eslint/eslint-plugin": "^4.33.0",
     "@typescript-eslint/parser": "^4.33.0",
     "@web/dev-server": "^0.1.29",
-    "@web/dev-server-storybook": "next",
+    "@web/dev-server-storybook": "^0.5.0",
     "@web/test-runner": "next",
     "concurrently": "^5.3.0",
     "eslint": "^7.32.0",
     "eslint-config-prettier": "^8.3.0",
-    "husky": "^4.3.8",
+    "husky": "^7.0.2",
     "lint-staged": "^10.5.4",
     "prettier": "^2.4.1",
     "tslib": "^2.3.1",
@@ -85,5 +91,5 @@
       "prettier --write"
     ]
   },
-  "gitHead": "feabccbb32d6d8487d761e5c9f1d21a22ab1c34a"
+  "gitHead": "c383e4b11cb4195f32be9b0daa4342dda0bbb2ab"
 }

package/src/grist-editor/ox-grist-editor-data-item-spec.ts

@@ -10,7 +10,7 @@ import { cloneDeep } from 'lodash-es'
 
 import { OxGristEditor } from '@operato/data-grist'
 import { i18next } from '@operato/i18n'
-import { openPopup, PopupHandle } from '@operato/layout'
+import { openPopup, PopupHandle } from '@operato/popup'
 
 @customElement('ox-grist-editor-data-item-spec')
 export class OxGristEditorDataItemSpec extends OxGristEditor {

package/src/grist-editor/ox-popup-data-item-spec.ts

@@ -1,11 +1,13 @@
 import '../ox-data-item-spec.js'
 
-import { LitElement, css, html } from 'lit'
+import { css, html, LitElement } from 'lit'
 import { customElement, property } from 'lit/decorators.js'
 
-import { DataItem } from '../types.js'
-import { ScrollbarStyles } from '@operato/styles'
 import { i18next } from '@operato/i18n'
+import { closePopup } from '@operato/popup'
+import { ScrollbarStyles } from '@operato/styles'
+
+import { DataItem } from '../types.js'
 
 @customElement('ox-popup-data-item-spec')
 export class OxPopupDataItemSpec extends LitElement {
@@ -25,6 +27,7 @@ export class OxPopupDataItemSpec extends LitElement {
       ox-data-item-spec {
         flex: 1;
         overflow-y: auto;
+        padding: var(--padding-wide);
       }
 
       span {
@@ -80,11 +83,11 @@ export class OxPopupDataItemSpec extends LitElement {
   }
 
   private onCancel(e: Event) {
-    history.back()
+    closePopup(this)
   }
 
   private onConfirm(e: Event) {
     this.confirmCallback && this.confirmCallback(this.value)
-    history.back()
+    closePopup(this)
   }
 }

package/src/index.ts

@@ -1,6 +1,2 @@
-export * from './ox-data-entry-form.js'
-export * from './ox-data-sample-view.js'
-export * from './ox-data-ooc-view.js'
-export * from './ox-data-item-spec.js'
-export * from './ox-data-use-case'
 export * from './types.js'
+export * from './usecase/ox-data-use-case.js'

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

@@ -11,10 +11,22 @@ export class OxDataEntryForm extends LitElement {
     :host {
       display: flex;
       flex-direction: row;
+      --item-description-font: normal 0.8rem/1rem var(--theme-font);
+      --item-description-color: var(--page-description-color);
     }
 
-    h2,
+    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;
     }
 
@@ -48,10 +60,18 @@ export class OxDataEntryForm extends LitElement {
     }
     div[description] {
       grid-area: description;
-      font: var(--page-description-font);
-      color: var(--page-description-color);
+      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;
@@ -160,7 +180,7 @@ export class OxDataEntryForm extends LitElement {
 
       return html` <label .title=${description}>
         <div name>${name}${unit ? `(${unit})` : ''}</div>
-        <div description>${description}</div>
+        <div description><mwc-icon>info_outline</mwc-icon> ${description}</div>
         <div elements>${elements}</div>
       </label>`
     })

package/src/ox-data-item-spec.ts

@@ -3,8 +3,8 @@ import '@operato/property-editor/ox-properties-dynamic-view.js'
 import { css, html, LitElement, PropertyValues } from 'lit'
 import { customElement, property, queryAll, state } from 'lit/decorators.js'
 
-import { OxDataUseCase } from './ox-data-use-case.js'
-import { DataItem, DataItemSpecSet } from './types.js'
+import { DataItem, UseCaseDefinition } from './types.js'
+import { OxDataUseCase } from './usecase/ox-data-use-case.js'
 
 @customElement('ox-data-item-spec')
 export class OxDataItemSpec extends LitElement {
@@ -12,37 +12,94 @@ export class OxDataItemSpec extends LitElement {
     :host {
       display: flex;
       flex-direction: row;
-      border-bottom: var(--border-dark-color);
-      padding: var(--margin-default) 0;
-    }
-    [specName] {
-      font: var(--legend-font);
-      color: var(--legend-text-color);
-    }
-    [description] {
-      font: var(--form-sublabel-font);
-      opacity: 0.8;
+      --item-description-font: normal 0.8rem/1rem var(--theme-font);
+      --item-description-color: var(--page-description-color);
     }
 
     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;
+    }
+    ox-properties-dynamic-view {
+      grid-area: inputs;
+      display: flex;
+      flex-direction: row;
+      flex-wrap: wrap;
+      gap: 10px;
+      padding-right: var(--padding-default);
+    }
+
+    @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 }) value?: { [specSetName: string]: any }
   @property({ type: Object }) dataItem?: DataItem
 
-  @state() dataItemSpecSets: DataItemSpecSet[] = []
+  @state() dataItemSpecSets: UseCaseDefinition[] = []
 
   @queryAll('ox-properties-dynamic-view') specSetViews!: NodeListOf<HTMLElement & { value: any }>
 
   render() {
     return html`<form @property-change=${(e: Event) => this.onChange(e)}>
       ${this.dataItemSpecSets.map(
-        ({ name, description, specs }) => html` <div specName>${name}</div>
-          <div description>${description}</div>
+        ({ name, description, specs }) => html` <label
+          ><div name>${name}</div>
+          <div description><mwc-icon>info_outline</mwc-icon> ${description}</div>
           <ox-properties-dynamic-view data-name=${name} .props=${specs} .value=${this.value?.[name]}>
-          </ox-properties-dynamic-view>`
+          </ox-properties-dynamic-view
+        ></label>`
       )}
     </form>`
   }

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

@@ -16,7 +16,6 @@ export class OxDataOocView extends LitElement {
       display: flex;
       flex-direction: column;
       background-color: var(--main-section-background-color);
-      padding: var(--padding-wide);
 
       position: relative;
     }
@@ -30,19 +29,74 @@ export class OxDataOocView extends LitElement {
 
     h3[state] {
       position: absolute;
-
-      right: 20px;
-      top: 25px;
+      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);
+    }
 
-    [page-description] {
+    [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);
+    }
+    [complate] [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(--page-description-color);
+      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;
     }
   `
 
@@ -54,19 +108,24 @@ export class OxDataOocView extends LitElement {
     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>
+      <ox-data-sample-view .dataSample=${this.dataOoc}></ox-data-sample-view>
 
-      <h3 state>${this.dataOoc?.state || ''}</h3>
+      <h3 state>
+        <!--상태에 따라 추가로 danger, complate를 어트리뷰트로 추가시 배경컬러 변경되도록 해두었습니다-->
+        <mwc-icon>shield</mwc-icon>
+        <div>${name} <span field-state>${this.dataOoc?.state || ''}</span></div>
+      </h3>
 
       <h3>${i18next.t('title.history')}</h3>
       ${history.map(
         ({ user, state, comment, timestamp }) => html`
-          <p page-description>
-            ${formatter.format(new Date(timestamp))}
-            <br />
-            ${state} <mwc-icon>account_circle</mwc-icon> ${user.name}
-            <br />
-            ${comment}
+          <p page-history>
+            <!--상태에 따라 추가로 danger, complate를 어트리뷰트로 추가시 배경컬러 변경되도록 해두었습니다-->
+            <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-sample-view.ts

@@ -5,8 +5,8 @@ import { customElement, property } from 'lit/decorators.js'
 
 import { i18next } from '@operato/i18n'
 
-import { OxDataUseCase } from './ox-data-use-case.js'
-import { DataItem, DataSample, DataSet } from './types.js'
+import { DataSample, DataSpecLimitSet } from './types.js'
+import { OxDataUseCase } from './usecase/ox-data-use-case.js'
 
 @customElement('ox-data-sample-view')
 export class OxDataSampleView extends LitElement {
@@ -14,7 +14,6 @@ export class OxDataSampleView extends LitElement {
     :host {
       display: flex;
       flex-direction: column;
-      background-color: var(--main-section-background-color);
     }
 
     form {
@@ -26,13 +25,23 @@ export class OxDataSampleView extends LitElement {
 
     h2 {
       margin: var(--title-margin);
-      padding-top: 25px;
       font: var(--title-font);
       color: var(--title-text-color);
+      text-transform: capitalize;
     }
     [page-description] {
       margin: var(--page-description-margin);
+      opacity: 0.7;
       font: var(--page-description-font);
+      color: var(--secondary-color);
+      text-transform: capitalize;
+    }
+    [page-description] * {
+      vertical-align: middle;
+    }
+    [page-description] mwc-icon {
+      margin-top: -2px;
+      font-size: 0.9rem;
       color: var(--page-description-color);
     }
 
@@ -86,21 +95,30 @@ export class OxDataSampleView extends LitElement {
     }
   `
 
-  @property({ type: Object }) dataSet?: DataSet
   @property({ type: Object }) dataSample?: DataSample
 
   render() {
-    const dataItems = this.dataSet?.dataItems.filter(item => item.active) || []
-    const data = this.dataSample?.data || {}
+    var { useCase, data = {}, judgment, dataItems = [] } = this.dataSample || {}
     const formatter = new Intl.DateTimeFormat(navigator.language, { dateStyle: 'full', timeStyle: 'short' })
+    const useCaseNames = useCase?.split(',').filter(useCase => useCase.trim()) || []
 
     const { name, description, collectedAt, workDate, workShift } = this.dataSample || {}
 
-    return html` <h2>${i18next.t('field.name')}</h2>
+    /* TODO below converting logic should be removed after dataset migration */
+    if (!(dataItems instanceof Array)) {
+      dataItems = Object.keys(dataItems).map(tag => {
+        var dataItem = (dataItems as any)[tag]
+        dataItem.tag = tag
+        return dataItem
+      })
+    }
+
+    return html` <h2>${name}</h2>
       <p page-description>
-        ${i18next.t('field.description')}<br /><br />
-        ${i18next.t('field.work-date')}: ${workDate} ${workShift}<br />
-        ${i18next.t('field.collected-at')}: ${formatter.format(new Date(collectedAt!))}
+        <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')}:
+        ${formatter.format(new Date(collectedAt!))}
       </p>
 
       <form @change=${(e: Event) => this.onChange(e)}>
@@ -115,15 +133,17 @@ export class OxDataSampleView extends LitElement {
             <th>${i18next.t('field.oos')}</th>
           </tr>
           ${dataItems.map(dataItem => {
-            const { ooc, oos } = this.evaluateOOC(dataItem, data?.[dataItem.tag]) || {}
-            const { name, description, unit } = dataItem
+            const { name = '', tag = '', description = '', unit = '', spec = {} } = 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>${unit}</td>
-                <td>${this.buildValue(dataItem)}</td>
-                <td><pre>${this.buildSpec(dataItem)}</pre></td>
+                <td>${this.buildValue(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>
@@ -135,43 +155,27 @@ export class OxDataSampleView extends LitElement {
 
   private onChange(e: Event) {}
 
-  private buildSpec(dataItem: DataItem) {
-    return OxDataUseCase.elaborateDataItemSpec(this.dataSet!, dataItem)
+  private buildSpec(useCaseNames: string[], spec: DataSpecLimitSet): string {
+    return OxDataUseCase.elaborateDataItemSpec(useCaseNames, spec)
   }
 
-  private buildValue(dataItem: DataItem) {
-    const { tag, type } = dataItem
-
-    if (!this.dataSample) {
-      return ''
-    }
-
-    const value = this.dataSample?.data[dataItem.tag]
+  private buildValue(value: any | any[]) {
     if (value === undefined) {
       return ''
     }
     const values = value instanceof Array ? value : [value]
 
-    const elements = values.map((_: any, idx) => {
-      const v = value[idx]
-
-      switch (type) {
+    const elements = values.map((v: any, idx) => {
+      switch (typeof v) {
         case 'boolean':
-          return html` <input type="checkbox" name=${tag} .checked=${v} disabled />`
+          return html` <input type="checkbox" .checked=${v} disabled />`
           break
 
-        case 'select':
-        case 'number':
-        case 'string':
         default:
-          return String(v === undefined ? '' : v)
+          return v === undefined ? '' : v
       }
     })
 
-    return type === 'boolean' ? elements : elements.join(', ')
-  }
-
-  private evaluateOOC(dataItem: DataItem, value: any) {
-    return OxDataUseCase.evaluateItem(this.dataSet!, dataItem, value)
+    return typeof values[0] === 'boolean' ? elements : elements.join(', ')
   }
 }

package/src/types.ts

@@ -15,7 +15,11 @@ export type DataItem = {
   options: TypeOptions
   unit: string
   quota: number
-  spec: { [useCase: string]: any }
+  spec: {
+    [useCase: string]: {
+      [limit: string]: number | string | string[] | boolean
+    }
+  }
 }
 
 export type DataSet = {
@@ -28,25 +32,46 @@ export type DataSet = {
   spec: { [dataItem: string]: { [useCase: string]: any } }
 }
 
-export type DataItemSpec = {
+export type DataSpecDefinition = {
   type: string
   label: string
   name: string
   property?: { [option: string]: any }
 }
 
-export type DataItemSpecSet = {
+export type UseCaseDefinition = {
   name: string
   description: string
   help: string
-  specs: DataItemSpec[]
+  specs: DataSpecDefinition[]
+}
+
+export type DataSpecLimit = {
+  [limit: string]: number | string | string[] | boolean
+}
+
+export type DataSpecLimitSet = {
+  [useCase: string]: DataSpecLimit
+}
+
+export type DataCollection = {
+  [tag: string]: any
+}
+
+export type Judgment = {
+  [tag: string]: {
+    ooc: boolean
+    oos: boolean
+  }
 }
 
 export type DataSample = {
   name: string
   description: string
-  data: any
-  spec: any
+  useCase: string
+  data?: DataCollection
+  judgment?: Judgment
+  dataItems?: DataItem[]
   quota: number
   workDate: string
   workShift: string

package/src/usecase/ccp/index.ts

@@ -0,0 +1,10 @@
+/* Here, only the common module of client and server is imported/exported. Be careful not to use a module dedicated to client or server. */
+
+import { OxDataUseCase } from '../ox-data-use-case'
+import { OxDataUseCaseCCP } from './ox-data-use-case-ccp'
+
+// OxPropertyEditor.register({
+//   'ccp-limits': 'ox-property-editor-ccp-limits'
+// })
+
+OxDataUseCase.registerUseCase('CCP', new OxDataUseCaseCCP())