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

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

@@ -4,6 +4,7 @@ import { css, html, LitElement } from 'lit'
 import { customElement, property } from 'lit/decorators.js'
 
 import { i18next } from '@operato/i18n'
+import { closePopup } from '@operato/popup'
 import { ScrollbarStyles } from '@operato/styles'
 
 import { DataItem } from '../types.js'
@@ -82,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-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 {
@@ -87,7 +87,7 @@ export class OxDataItemSpec extends LitElement {
   @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 }>
 

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

@@ -108,7 +108,7 @@ 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>
         <!--상태에 따라 추가로 danger, complate를 어트리뷰트로 추가시 배경컬러 변경되도록 해두었습니다-->

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 {
@@ -95,16 +95,23 @@ 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 { data = {}, spec: dataItems = [] } = this.dataSample || {}
     const formatter = new Intl.DateTimeFormat(navigator.language, { dateStyle: 'full', timeStyle: 'short' })
 
     const { name, description, collectedAt, workDate, workShift } = this.dataSample || {}
 
+    /* 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>
         <mwc-icon>info_outline</mwc-icon> ${description}<br />
@@ -125,15 +132,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 } = this.evaluateOOC(spec, value) || {}
+
             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(spec)}</pre></td>
                 <td>${ooc ? html`<mwc-icon>done</mwc-icon>` : ''}</td>
                 <td>${oos ? html`<mwc-icon>done</mwc-icon>` : ''}</td>
               </tr>
@@ -145,43 +154,31 @@ export class OxDataSampleView extends LitElement {
 
   private onChange(e: Event) {}
 
-  private buildSpec(dataItem: DataItem) {
-    return OxDataUseCase.elaborateDataItemSpec(this.dataSet!, dataItem)
+  private buildSpec(spec: DataSpecLimitSet) {
+    return OxDataUseCase.elaborateDataItemSpec(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(', ')
+    return typeof values[0] === 'boolean' ? elements : elements.join(', ')
   }
 
-  private evaluateOOC(dataItem: DataItem, value: any) {
-    return OxDataUseCase.evaluateItem(this.dataSet!, dataItem, value)
+  private evaluateOOC(spec: DataSpecLimitSet, value: any) {
+    return OxDataUseCase.evaluateItem(spec, value)
   }
 }

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,38 @@ 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 DataSample = {
   name: string
   description: string
-  data: any
-  spec: any
+  useCase: string
+  data?: DataCollection
+  spec?: 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())

package/src/usecase/ccp/ox-data-use-case-ccp.ts

@@ -0,0 +1,147 @@
+import i18next from 'i18next' // Since this is a common module, @operato/i18n was deliberately avoided.
+
+import { DataItem, EvaluationResult, UseCaseDefinition } from '../../types'
+import { OxDataUseCase } from '../ox-data-use-case.js'
+
+export class OxDataUseCaseCCP extends OxDataUseCase {
+  getSpecification(dataItem: DataItem): UseCaseDefinition {
+    return {
+      name: 'CCP',
+      description: 'Critical Control Point Data Spec',
+      help: '',
+      specs: [
+        {
+          type: 'ccp-limits' /* A value which seperates acceptability from unacceptability */,
+          label: 'critical-limits',
+          name: 'criticalLimits',
+          property: dataItem
+        },
+        {
+          type: 'ccp-limits',
+          label: 'target-limits',
+          name: 'targetLimits',
+          property: dataItem
+        }
+      ]
+    }
+  }
+
+  evaluate(spec: any, values: any | any[]): EvaluationResult | undefined {
+    if (!spec || typeof values === 'undefined') {
+      return
+    }
+
+    if (!(values instanceof Array)) {
+      values = [values]
+    }
+
+    const {
+      minimum: criticalMinimum,
+      maximum: criticalMaximum,
+      acceptables: criticalAcceptables
+    } = spec['criticalLimits'] || {}
+
+    const {
+      minimum: targetMinimum,
+      maximum: targetMaximum,
+      acceptables: targetAcceptables
+    } = spec['targetLimits'] || {}
+
+    var oos = false
+    var ooc = false
+
+    for (let i = 0; i < values.length; i++) {
+      const value = values[i]
+
+      if (typeof criticalMinimum !== 'undefined' && value < criticalMinimum) {
+        oos = true
+        break
+      }
+
+      if (typeof criticalMaximum !== 'undefined' && value > criticalMaximum) {
+        oos = true
+        break
+      }
+
+      if (typeof criticalAcceptables !== 'undefined' && !criticalAcceptables.includes(value)) {
+        oos = true
+        break
+      }
+    }
+
+    for (let i = 0; i < values.length; i++) {
+      const value = values[i]
+
+      if (typeof targetMinimum !== 'undefined' && value < targetMinimum) {
+        ooc = true
+        break
+      }
+
+      if (typeof targetMaximum !== 'undefined' && value > targetMaximum) {
+        ooc = true
+        break
+      }
+
+      if (typeof targetAcceptables !== 'undefined' && !targetAcceptables.includes(value)) {
+        ooc = true
+        break
+      }
+    }
+
+    return { oos, ooc }
+  }
+
+  elaborateUseCaseSpec(limits: any): string | undefined {
+    if (!limits) {
+      return
+    }
+
+    var text = ''
+
+    const {
+      minimum: criticalMinimum,
+      maximum: criticalMaximum,
+      acceptables: criticalAcceptables
+    } = limits['criticalLimits'] || {}
+
+    if (criticalMinimum !== undefined || criticalMaximum !== undefined || criticalAcceptables !== undefined) {
+      text += `${i18next.t('label.critical-limits')}\n`
+    }
+
+    if (criticalMinimum !== undefined) {
+      text += `\t${i18next.t('label.minimum value')} : ${criticalMinimum}\n`
+    }
+    if (criticalMaximum !== undefined) {
+      text += `\t${i18next.t('label.maximum value')} : ${criticalMaximum}\n`
+    }
+    if (criticalAcceptables !== undefined) {
+      text += `\t${i18next.t('label.acceptables')} : ${
+        criticalAcceptables instanceof Array ? criticalAcceptables.join(', ') : criticalAcceptables
+      }\n`
+    }
+
+    const {
+      minimum: targetMinimum,
+      maximum: targetMaximum,
+      acceptables: targetAcceptables
+    } = limits['targetLimits'] || {}
+
+    if (targetMinimum !== undefined || targetMaximum !== undefined || targetAcceptables !== undefined) {
+      text += `${i18next.t('label.target-limits')}\n`
+    }
+
+    if (targetMinimum !== undefined) {
+      text += `\t${i18next.t('label.minimum value')} : ${targetMinimum}\n`
+    }
+    if (targetMaximum !== undefined) {
+      text += `\t${i18next.t('label.maximum value')} : ${targetMaximum}\n`
+    }
+    if (targetAcceptables !== undefined) {
+      text += `\t${i18next.t('label.acceptables')} : ${
+        targetAcceptables instanceof Array ? targetAcceptables.join(', ') : targetAcceptables
+      }\n`
+    }
+
+    return text
+  }
+}

package/src/usecase/ccp/ox-input-ccp-limits.ts

@@ -0,0 +1,161 @@
+/**
+ * @license Copyright © HatioLab Inc. All rights reserved.
+ */
+
+import { css, html, LitElement } from 'lit'
+import { customElement, property, query, queryAll } from 'lit/decorators.js'
+
+import { i18next } from '@operato/i18n'
+
+export enum DataItemType {
+  number = 'number',
+  text = 'text',
+  boolean = 'boolean',
+  select = 'select',
+  file = 'file'
+}
+
+export type CcpLimitValue = {
+  minimum?: number
+  maximum?: number
+  acceptables?: string[]
+}
+
+/**
+ element for CCP limits
+ 
+ Example:
+ 
+   <ox-input-ccp-limits
+     .value=${value}
+     .type=${type}>
+   </ox-input-ccp-limits>
+ */
+@customElement('ox-input-ccp-limits')
+export class OxInputCcpLimits extends LitElement {
+  static styles = css`
+    :host {
+      display: flex;
+      flex-direction: column;
+      align-content: center;
+    }
+
+    label {
+      margin: 0 var(--margin-default) var(--margin-default) 0;
+    }
+
+    label div > * {
+      vertical-align: middle;
+    }
+
+    button {
+      width: 20px;
+      text-align: center;
+    }
+
+    div[name],
+    input[type='checkbox'] + span {
+      display: inline-block;
+      font: var(--label-font);
+      color: var(--label-color);
+      text-align: right;
+    }
+    input,
+    select {
+      border: var(--input-field-border);
+      border-radius: var(--input-field-border-radius);
+      padding: var(--input-field-padding);
+      font: var(--input-field-font);
+    }
+
+    input[type='checkbox'] {
+      width: initial;
+    }
+    input[checked] + span {
+      font-weight: bold;
+    }
+    [unit],
+    [value] {
+      display: inline-block;
+      opacity: 0.7;
+      font: var(--form-sublabel-font);
+    }
+    [properties] {
+      font: var(--input-field-font);
+      color: var(--label-color);
+    }
+  `
+
+  @property({ type: Object }) value: CcpLimitValue = {}
+  @property({ type: String }) type: DataItemType = DataItemType.number
+  @property({ type: String }) unit?: string
+  @property({ type: Array }) options: { options?: { text: string; value: string }[] } = {}
+
+  @query('[name=minimum]') minimum!: HTMLInputElement
+  @query('[name=maximum]') maximum!: HTMLInputElement
+  @queryAll('[type=checkbox]:checked') checkedAll!: NodeListOf<HTMLInputElement>
+
+  firstUpdated() {
+    this.renderRoot.addEventListener('change', this.onChange.bind(this))
+  }
+
+  render() {
+    const { minimum, maximum, acceptables = [] } = this.value || {}
+
+    return html`
+      <div>
+        ${this.type === DataItemType.number
+          ? html`
+              <label>
+                <div name>${i18next.t('text.minimum value')}</div>
+                <input type="number" name="minimum" .value=${minimum} />
+                <div unit>${this.unit}</div>
+              </select>
+              </label>
+              <label>
+                <div name>${i18next.t('text.maximum value')}</div>
+                <input type="number" name="maximum" .value=${maximum} />
+                <div unit>${this.unit}</div>
+              </label>
+            </div>
+            `
+          : this.type === DataItemType.select
+          ? html`
+              <!-- <div>Acceptables</div> -->
+              ${this.options?.options?.map(
+                option => html`
+                  <div>
+                    <input type="checkbox" data-value=${option.value} ?checked=${acceptables.includes(option.value)} />
+                    <span>${option.text}</span>
+                    <span value>(${option.value})</span>
+                  </div>
+                `
+              )}
+          </div>
+          `
+          : html` <div properties>${i18next.t('text.no properties to set')}</div> `}
+      </div>
+    `
+  }
+
+  private onChange(e: Event) {
+    if (this.type === DataItemType.number) {
+      this.value = {
+        minimum: this.minimum.valueAsNumber,
+        maximum: this.maximum.valueAsNumber
+      }
+    } else if (this.type === DataItemType.select) {
+      this.value = {
+        acceptables: Array.from(this.checkedAll).map(checked => {
+          const x = checked.getAttribute('data-value')!
+          console.log(x)
+          return x
+        })
+      }
+    } else {
+      this.value = {}
+    }
+
+    this.dispatchEvent(new CustomEvent('change', { bubbles: true, composed: true, detail: this.value }))
+  }
+}

package/src/usecase/ccp/ox-property-editor-ccp-limits.ts

@@ -0,0 +1,23 @@
+import './ox-input-ccp-limits.js'
+
+import { html } from 'lit'
+import { customElement } from 'lit/decorators.js'
+
+import { OxPropertyEditor } from '@operato/property-editor'
+
+@customElement('ox-property-editor-ccp-limits')
+export class OxPropertyEditorCcpLimits extends OxPropertyEditor {
+  editorTemplate() {
+    const { type, options, unit } = this.property || {}
+
+    return html`
+      <ox-input-ccp-limits
+        id="editor"
+        .value=${this.value}
+        .type=${type}
+        .unit=${unit}
+        .options=${options}
+      ></ox-input-ccp-limits>
+    `
+  }
+}