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

package/src/{ox-data-use-case.ts → usecase/ox-data-use-case.ts}

@@ -1,4 +1,4 @@
-import { DataItem, DataItemSpecSet, DataSet, EvaluationResult } from './types'
+import { DataItem, DataSet, DataSpecLimitSet, EvaluationResult, UseCaseDefinition } from '../types'
 
 export abstract class OxDataUseCase {
   static registry: { [name: string]: OxDataUseCase } = {}
@@ -19,39 +19,35 @@ export abstract class OxDataUseCase {
     return OxDataUseCase.registry[name]
   }
 
-  public static elaborateDataItemSpec(dataSet: DataSet, dataItem: DataItem): string {
-    if (!dataSet.useCase) {
-      return ''
-    }
+  public static elaborateDataItemSpec(spec: DataSpecLimitSet): string {
+    const useCaseNames = Object.keys(spec || {})
 
-    const useCaseNames = dataSet.useCase.split(',').map(useCaseName => useCaseName.trim())
-    const useCases = useCaseNames.map(useCaseName => OxDataUseCase.getUseCase(useCaseName)).filter(useCase => !!useCase)
+    var texts: string[] = []
 
-    var texts = []
-
-    for (let j = 0; j < useCases.length; j++) {
-      const useCase = useCases[j]
+    useCaseNames.forEach(useCaseName => {
+      const useCase = OxDataUseCase.getUseCase(useCaseName)
       if (!useCase) {
-        continue
+        return
       }
 
-      const specs = dataItem.spec?.[dataSet.useCase]
-      if (!specs) {
-        continue
+      const limits = spec?.[useCaseName]
+      if (!limits) {
+        return
       }
 
-      const result = useCase.elaborateUseCaseSpec(dataItem.spec)
+      const result = useCase.elaborateUseCaseSpec(limits)
       if (!result) {
-        continue
+        return
       }
 
+      texts.push(`[ ${useCaseName} ]`)
       texts.push(result)
-    }
+    })
 
     return texts.join('\n')
   }
 
-  public static evaluate(dataSet: DataSet, dataItems: DataItem[], data: any): EvaluationResult | undefined {
+  public static evaluate(dataSet: DataSet, dataItems: DataItem[], data: any): EvaluationResult {
     var ooc = false
     var oos = false
 
@@ -86,7 +82,7 @@ export abstract class OxDataUseCase {
           continue
         }
 
-        const result = useCase?.evaluate(specs, values)
+        const result = useCase!.evaluate(specs, values)
 
         if (result) {
           ooc ||= result.ooc
@@ -98,22 +94,10 @@ export abstract class OxDataUseCase {
     return { ooc, oos }
   }
 
-  public static evaluateItem(dataSet: DataSet, dataItem: DataItem, values: any | any[]): EvaluationResult | undefined {
+  public static evaluateItem(spec: DataSpecLimitSet, values: any | any[]): EvaluationResult | undefined {
     var ooc = false
     var oos = false
 
-    if (!dataSet.useCase) {
-      return { ooc, oos }
-    }
-
-    const useCaseNames = dataSet.useCase.split(',').map(useCaseName => useCaseName.trim())
-    const useCases = useCaseNames.map(useCaseName => OxDataUseCase.getUseCase(useCaseName)).filter(useCase => !!useCase)
-
-    const { active, tag } = dataItem
-    if (!active || !tag) {
-      return
-    }
-
     if (typeof values === 'undefined') {
       return // TODO what if in case no value ?
     }
@@ -122,26 +106,30 @@ export abstract class OxDataUseCase {
       values = [values]
     }
 
-    for (let j = 0; j < useCases.length; j++) {
-      const useCase = useCases[j]
+    const useCaseNames = Object.keys(spec || {})
+
+    if (useCaseNames.length === 0) {
+      return { ooc, oos }
+    }
 
-      const specs = dataItem.spec?.[dataSet.useCase]
-      if (!specs) {
+    useCaseNames.forEach(useCaseName => {
+      const useCase = OxDataUseCase.getUseCase(useCaseName)
+      if (!useCase) {
         return
       }
 
-      const result = useCase?.evaluate(specs, values)
+      const result = useCase?.evaluate(spec[useCaseName], values)
 
       if (result) {
         ooc ||= result.ooc
         oos ||= result.oos
       }
-    }
+    })
 
     return { ooc, oos }
   }
 
   public abstract evaluate(specs: any, values: any[]): EvaluationResult | undefined
   public abstract elaborateUseCaseSpec(spec: any): string | undefined
-  public abstract getSpecification(dataItem: DataItem): DataItemSpecSet
+  public abstract getSpecification(dataItem: DataItem): UseCaseDefinition
 }

package/src/usecase/qc/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.js'
+import { OxDataUseCaseQC } from './ox-data-use-case-qc.js'
+
+// OxPropertyEditor.register({
+//   'qc-limits': 'ox-property-editor-qc-limits'
+// })
+
+OxDataUseCase.registerUseCase('QC', new OxDataUseCaseQC())

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

@@ -0,0 +1,72 @@
+import i18next from 'i18next' // Since this is a common module, @operato/i18n was deliberately avoided.
+
+import { DataItem, EvaluationResult, UseCaseDefinition } from '../../types.js'
+import { OxDataUseCase } from '../ox-data-use-case.js'
+
+export class OxDataUseCaseQC implements OxDataUseCase {
+  getSpecification(dataItem: DataItem): UseCaseDefinition {
+    return {
+      name: 'QC',
+      description: 'Quality Control Data Spec',
+      help: '',
+      specs: [
+        {
+          type: 'qc-limits' /* 'A value which seperates acceptability from unacceptability' */,
+          label: 'pass-limits',
+          name: 'passLimits',
+          property: dataItem
+        }
+      ]
+    }
+  }
+
+  evaluate(spec: any, values: any[]): EvaluationResult {
+    const { minimum, maximum, acceptables } = spec['passLimits']
+
+    for (let i = 0; i < values.length; i++) {
+      const value = values[i]
+
+      if (typeof minimum !== 'undefined' && value < minimum) {
+        return { oos: true, ooc: true }
+      }
+
+      if (typeof maximum !== 'undefined' && value > maximum) {
+        return { oos: true, ooc: true }
+      }
+
+      if (typeof acceptables !== 'undefined' && !acceptables.includes(value)) {
+        return { oos: true, ooc: true }
+      }
+    }
+
+    return { oos: false, ooc: false }
+  }
+
+  elaborateUseCaseSpec(limits: any): string | undefined {
+    if (!limits) {
+      return
+    }
+
+    var text = ''
+
+    const { minimum, maximum, acceptables } = limits['passLimits'] || {}
+
+    if (minimum !== undefined || maximum !== undefined || acceptables !== undefined) {
+      text += `${i18next.t('label.pass-limits')}\n`
+    }
+
+    if (minimum !== undefined) {
+      text += `\t${i18next.t('label.minimum value')} : ${minimum}\n`
+    }
+    if (maximum !== undefined) {
+      text += `\t${i18next.t('label.maximum value')} : ${maximum}\n`
+    }
+    if (acceptables !== undefined) {
+      text += `\t${i18next.t('label.acceptables')} : ${
+        acceptables instanceof Array ? acceptables.join(', ') : acceptables
+      }\n`
+    }
+
+    return text
+  }
+}

package/src/usecase/qc/ox-input-qc-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 QcLimitValue = {
+  minimum?: number
+  maximum?: number
+  acceptables?: string[]
+}
+
+/**
+ element for QC limits
+ 
+ Example:
+ 
+   <ox-input-qc-limits
+     .value=${value}
+     .type=${type}>
+   </ox-input-qc-limits>
+ */
+@customElement('ox-input-qc-limits')
+export class OxInputQcLimits 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: QcLimitValue = {}
+  @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/qc/ox-property-editor-qc-limits.ts

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

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

@@ -0,0 +1,165 @@
+import '@operato/i18n'
+import '../src/ox-data-entry-form.js'
+import '../src/usecase/ccp' /* register usecase CCP */
+import '@material/mwc-icon'
+
+import { html, TemplateResult } from 'lit'
+
+export default {
+  title: 'ox-data-entry-form',
+  component: 'ox-data-entry-form',
+  argTypes: {}
+}
+
+interface Story<T> {
+  (args: T): TemplateResult
+  args?: Partial<T>
+  argTypes?: Record<string, unknown>
+}
+
+interface ArgTypes {}
+
+const dataSet = {
+  name: 'sample',
+  description: 'sample description',
+  useCase: 'CCP',
+  dataItems: [
+    {
+      name: '창고 온도',
+      description: '창고 온도는 섭씨 0도 이하로 유지되어야 합니다.',
+      sequence: 1,
+      tag: 'temp',
+      type: 'number',
+      quota: 1,
+      active: true,
+      unit: '℃',
+      spec: {
+        CCP: {
+          criticalLimits: {
+            minimum: 100,
+            maximum: 200
+          },
+          targetLimits: {
+            minimum: 120,
+            maximum: 180
+          }
+        }
+      }
+    },
+    {
+      name: '창고 습도',
+      description: '창고 습도는 30% 이하로 유지되어야 합니다.',
+      sequence: 2,
+      tag: 'humid',
+      type: 'number',
+      quota: 5,
+      active: true,
+      unit: '%',
+      spec: {
+        CCP: {
+          criticalLimits: {
+            minimum: 10,
+            maximum: 50
+          },
+          targetLimits: {
+            minimum: 20,
+            maximum: 40
+          }
+        }
+      }
+    },
+    {
+      name: '육안 검사',
+      description: '육안 검사는 포장전 30분 내로 실행되어야 합니다.',
+      sequence: 3,
+      tag: 'inspection',
+      type: 'boolean',
+      quota: 3,
+      active: true,
+      spec: {
+        CCP: {
+          criticalLimits: {
+            acceptables: true
+          },
+          targetLimits: {
+            acceptables: true
+          }
+        }
+      }
+    },
+    {
+      name: '품평',
+      description: '품평은 최우수/우수/보통/미달을 포함하여 간단히 평가.',
+      sequence: 4,
+      tag: 'evaluation',
+      type: 'select',
+      options: {
+        options: [
+          { text: '최우수', value: '최우수' },
+          { text: '우수', value: '우수' },
+          { text: '보통', value: '보통' },
+          { text: '미달', value: '미달' }
+        ]
+      },
+      quota: 3,
+      active: true,
+      spec: {
+        CCP: {
+          criticalLimits: {
+            acceptables: ['최우수', '우수', '보통']
+          },
+          targetLimits: {
+            acceptables: ['최우수', '우수']
+          }
+        }
+      }
+    },
+    {
+      name: '코멘트',
+      description: '특이사항을 기록함.',
+      sequence: 4,
+      tag: 'comment',
+      type: 'string',
+      quota: 1,
+      active: true
+    },
+    {
+      name: '첨부파일',
+      description: '참조 첨부 파일.',
+      sequence: 4,
+      tag: 'attachment',
+      type: 'file',
+      quota: 1,
+      active: true
+    }
+  ]
+}
+var value = {
+  temp: 1000,
+  humid: [20, 23, 21, 26, 27],
+  inspection: [true, false, true],
+  evaluation: ['최우수', '보통', '우수'],
+  comment: '이것이 코멘트입니다.'
+}
+
+const Template: Story<ArgTypes> = ({}: ArgTypes) =>
+  html`
+    <link href="/themes/app-theme.css" rel="stylesheet" />
+    <link href="https://fonts.googleapis.com/css?family=Material+Icons&display=block" rel="stylesheet" />
+    <style>
+      body {
+      }
+    </style>
+
+    <ox-data-entry-form
+      .dataSet=${dataSet}
+      .value=${value}
+      @change=${(e: CustomEvent) => {
+        value = e.detail
+        console.log('change', value)
+      }}
+    ></ox-data-entry-form>
+  `
+
+export const Regular = Template.bind({})
+Regular.args = {}

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

@@ -0,0 +1,121 @@
+import '@operato/i18n'
+import '@material/mwc-icon'
+import '@operato/property-editor/ox-property-editor-checkbox.js'
+import '@operato/property-editor/ox-property-editor-number.js'
+import '@operato/property-editor/ox-property-editor-string.js'
+import '@operato/property-editor/ox-properties-dynamic-view.js'
+import '../src/ox-data-item-spec.js'
+import '../src/usecase/ccp' /* register usecase CCP */
+import '../src/usecase/qc' /* register usecase QC */
+import '../src/usecase/ccp/ox-property-editor-ccp-limits.js'
+import '../src/usecase/qc/ox-property-editor-qc-limits.js'
+
+import { html, TemplateResult } from 'lit'
+
+import { OxPropertyEditor } from '@operato/property-editor'
+
+OxPropertyEditor.register({
+  number: 'ox-property-editor-number',
+  string: 'ox-property-editor-string',
+  boolean: 'ox-property-editor-checkbox',
+  'ccp-limits': 'ox-property-editor-ccp-limits',
+  'qc-limits': 'ox-property-editor-qc-limits'
+})
+
+export default {
+  title: 'ox-data-item-spec',
+  component: 'ox-data-item-spec',
+  argTypes: {}
+}
+
+interface Story<T> {
+  (args: T): TemplateResult
+  args?: Partial<T>
+  argTypes?: Record<string, unknown>
+}
+
+interface ArgTypes {}
+
+const dataItemA = {
+  name: '창고 온도',
+  description: '창고 온도는 섭씨 0도 이하로 유지되어야 합니다.',
+  sequence: 1,
+  tag: 'temp',
+  unit: '℃',
+  type: 'number',
+  quota: 1
+}
+
+const dataItemB = {
+  name: '품평',
+  description: '품평은 최우수/우수/보통/미달을 포함하여 간단히 평가.',
+  sequence: 4,
+  tag: 'evaluation',
+  type: 'select',
+  options: {
+    options: [
+      { text: '최우수', value: '최우수' },
+      { text: '우수', value: '우수' },
+      { text: '보통', value: '보통' },
+      { text: '미달', value: '미달' }
+    ]
+  },
+  quota: 3
+}
+
+const dataItemC = {
+  name: '코멘트',
+  description: '특이사항을 기록함.',
+  sequence: 4,
+  tag: 'comment',
+  type: 'string',
+  quota: 1
+}
+
+var specA = {
+  CCP: {
+    criticalLimits: {
+      minimum: 100,
+      maximum: 200
+    },
+    targetLimits: {
+      minimum: 120,
+      maximum: 180
+    }
+  },
+  QC: {
+    passLimits: {
+      minimum: 320,
+      maximum: 440
+    }
+  }
+}
+
+var specB = {
+  CCP: { accpetables: ['최우수', '우수'] },
+  QC: { accpetables: ['최우수', '우수'] }
+}
+
+const Template: Story<ArgTypes> = ({}: ArgTypes) =>
+  html`
+    <link href="/themes/app-theme.css" rel="stylesheet" />
+    <link href="https://fonts.googleapis.com/css?family=Material+Icons&display=block" rel="stylesheet" />
+    <style>
+      body {
+      }
+    </style>
+
+    <script type="module"></script>
+
+    <ox-data-item-spec
+      .dataItem=${dataItemA}
+      .value=${specA}
+      @change=${(e: CustomEvent) => {
+        specA = e.detail
+        console.log('change', specA)
+      }}
+    ></ox-data-item-spec>
+  `
+
+export const Regular = Template.bind({})
+Regular.args = {}