@operato/dataset 2.0.0-alpha.14 → 2.0.0-alpha.141

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

@@ -0,0 +1,182 @@
+/**
+ * @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 SpcLimitValue = {
+  minimum?: number
+  maximum?: number
+  acceptables?: string[] | boolean[]
+}
+
+/**
+ element for SPC limits
+ 
+ Example:
+ 
+   <ox-input-spc-limits
+     .value=${value}
+     .type=${type}>
+   </ox-input-spc-limits>
+ */
+@customElement('ox-input-spc-limits')
+export class OxInputSpcLimits 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: SpcLimitValue = {}
+  @property({ type: String }) type: DataItemType = DataItemType.number
+  @property({ type: String }) unit?: string
+  @property({ type: Object }) 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=${String(minimum)} />
+                <div unit>${this.unit}</div>
+              </select>
+              </label>
+              <label>
+                <div name>${i18next.t('text.maximum value')}</div>
+                <input type="number" name="maximum" .value=${String(maximum)} />
+                <div unit>${this.unit}</div>
+              </label>
+            `
+          : this.type === DataItemType.select
+          ? html`
+              <!-- <div>Acceptables</div> -->
+              ${this.options?.options?.map(
+                option => html`
+                  <div>
+                    <input
+                      type="checkbox"
+                      data-value=${option.value}
+                      ?checked=${(acceptables as string[]).includes(option.value)}
+                    />
+                    <span>${option.text}</span>
+                    <span value>(${option.value})</span>
+                  </div>
+                `
+              )}
+            `
+          : this.type === DataItemType.boolean
+          ? html`
+              <div>
+                <input type="checkbox" data-value=${true} ?checked=${(acceptables as boolean[]).includes(true)} />
+                <span value>true</span>
+              </div>
+              <div>
+                <input type="checkbox" data-value=${false} ?checked=${(acceptables as boolean[]).includes(false)} />
+                <span value>false</span>
+              </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 if (this.type === DataItemType.boolean) {
+      this.value = {
+        acceptables: Array.from(this.checkedAll).map(checked => {
+          const x = checked.getAttribute('data-value')! === 'true'
+          console.log(x)
+          return x
+        })
+      }
+    } else {
+      this.value = {}
+    }
+
+    this.dispatchEvent(new CustomEvent('change', { bubbles: true, composed: true, detail: this.value }))
+  }
+}

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

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

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

@@ -1,7 +1,7 @@
 import '@operato/i18n'
 import '../src/ox-data-entry-form.js'
 import '../src/usecase/ccp' /* register usecase CCP */
-import '@material/mwc-icon'
+import '@material/web/icon/icon.js'
 
 import { html, TemplateResult } from 'lit'
 
@@ -102,7 +102,8 @@ const dataSet = {
           { text: '최우수', value: '최우수' },
           { text: '우수', value: '우수' },
           { text: '보통', value: '보통' },
-          { text: '미달', value: '미달' }
+          { text: '미달', value: '미달' },
+          { text: '등외', value: '등외' }
         ]
       },
       quota: 3,
@@ -127,6 +128,50 @@ const dataSet = {
       quota: 1,
       active: true
     },
+    {
+      name: '라디오',
+      description: '라디오 그룹',
+
+      group: '측정데이타',
+      sequence: 5,
+      tag: 'check1',
+      type: 'radio',
+      options: {
+        options: [
+          {
+            text: '예',
+            value: 'Y'
+          },
+          {
+            text: '아니오',
+            value: 'N'
+          }
+        ]
+      },
+      quota: 3,
+      active: true
+    },
+    {
+      name: '라디오2',
+      description: '라디오 그룹2',
+      sequence: 5,
+      tag: 'check2',
+      type: 'radio',
+      options: {
+        options: [
+          {
+            text: '예',
+            value: 'Y'
+          },
+          {
+            text: '아니오',
+            value: 'N'
+          }
+        ]
+      },
+      quota: 1,
+      active: true
+    },
     {
       name: '첨부파일',
       description: '참조 첨부 파일.',
@@ -146,27 +191,38 @@ var value = {
   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>
-    <link href="/themes/app-theme.css" rel="stylesheet" />
-    <link href="/themes/oops-theme.css" rel="stylesheet" />
-    <link href="/themes/grist-theme.css" rel="stylesheet" />
+const Template: Story<ArgTypes> = ({}: ArgTypes) => html`
+  <link href="/themes/app-theme.css" rel="stylesheet" />
+  <link
+    href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL@20..48,100..700,0..1"
+    rel="stylesheet"
+  />
+  <link
+    href="https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:opsz,wght,FILL@20..48,100..700,0..1"
+    rel="stylesheet"
+  />
+  <link
+    href="https://fonts.googleapis.com/css2?family=Material+Symbols+Sharp:opsz,wght,FILL@20..48,100..700,0..1"
+    rel="stylesheet"
+  />
+
+  <style>
+    body {
+    }
+  </style>
+  <link href="/themes/app-theme.css" rel="stylesheet" />
+  <link href="/themes/oops-theme.css" rel="stylesheet" />
+  <link href="/themes/grist-theme.css" rel="stylesheet" />
 
-    <ox-data-entry-form
-      .dataSet=${dataSet}
-      .value=${value}
-      @change=${(e: CustomEvent) => {
-        value = e.detail
-        console.log('change', value)
-      }}
-    ></ox-data-entry-form>
-  `
+  <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

@@ -1,5 +1,5 @@
 import '@operato/i18n'
-import '@material/mwc-icon'
+import '@material/web/icon/icon.js'
 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'
@@ -107,7 +107,19 @@ var specB = {
 
 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" />
+    <link
+      href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL@20..48,100..700,0..1"
+      rel="stylesheet"
+    />
+    <link
+      href="https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:opsz,wght,FILL@20..48,100..700,0..1"
+      rel="stylesheet"
+    />
+    <link
+      href="https://fonts.googleapis.com/css2?family=Material+Symbols+Sharp:opsz,wght,FILL@20..48,100..700,0..1"
+      rel="stylesheet"
+    />
+
     <style>
       body {
       }

package/stories/ox-data-ooc-brief-view.stories.ts

@@ -1,7 +1,7 @@
 import '@operato/i18n'
 import '../src/ox-data-ooc-brief-view.js'
 import '../src/usecase/ccp/index.js' /* register usecase CCP */
-import '@material/mwc-icon'
+import '@material/web/icon/icon.js'
 
 import { html, TemplateResult } from 'lit'
 
@@ -263,21 +263,32 @@ var dataOoc = {
   ]
 }
 
-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>
+const Template: Story<ArgTypes> = ({}: ArgTypes) => html`
+  <link href="/themes/app-theme.css" rel="stylesheet" />
+  <link
+    href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL@20..48,100..700,0..1"
+    rel="stylesheet"
+  />
+  <link
+    href="https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:opsz,wght,FILL@20..48,100..700,0..1"
+    rel="stylesheet"
+  />
+  <link
+    href="https://fonts.googleapis.com/css2?family=Material+Symbols+Sharp:opsz,wght,FILL@20..48,100..700,0..1"
+    rel="stylesheet"
+  />
+
+  <style>
+    body {
+    }
+  </style>
 
-    <ox-data-ooc-brief-view
-      .dataSet=${dataSet}
-      .dataOoc=${dataOoc}
-      @change=${(e: CustomEvent) => console.log(e.detail)}
-    ></ox-data-ooc-brief-view>
-  `
+  <ox-data-ooc-brief-view
+    .dataSet=${dataSet}
+    .dataOoc=${dataOoc}
+    @change=${(e: CustomEvent) => console.log(e.detail)}
+  ></ox-data-ooc-brief-view>
+`
 
 export const Regular = Template.bind({})
 Regular.args = {}

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

@@ -1,7 +1,7 @@
 import '@operato/i18n'
 import '../src/ox-data-ooc-view.js'
 import '../src/usecase/ccp' /* register usecase CCP */
-import '@material/mwc-icon'
+import '@material/web/icon/icon.js'
 
 import { html, TemplateResult } from 'lit'
 
@@ -254,21 +254,32 @@ var dataOoc = {
   ]
 }
 
-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>
+const Template: Story<ArgTypes> = ({}: ArgTypes) => html`
+  <link href="/themes/app-theme.css" rel="stylesheet" />
+  <link
+    href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL@20..48,100..700,0..1"
+    rel="stylesheet"
+  />
+  <link
+    href="https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:opsz,wght,FILL@20..48,100..700,0..1"
+    rel="stylesheet"
+  />
+  <link
+    href="https://fonts.googleapis.com/css2?family=Material+Symbols+Sharp:opsz,wght,FILL@20..48,100..700,0..1"
+    rel="stylesheet"
+  />
+
+  <style>
+    body {
+    }
+  </style>
 
-    <ox-data-ooc-view
-      .dataSet=${dataSet}
-      .dataOoc=${dataOoc}
-      @change=${(e: CustomEvent) => console.log(e.detail)}
-    ></ox-data-ooc-view>
-  `
+  <ox-data-ooc-view
+    .dataSet=${dataSet}
+    .dataOoc=${dataOoc}
+    @change=${(e: CustomEvent) => console.log(e.detail)}
+  ></ox-data-ooc-view>
+`
 
 export const Regular = Template.bind({})
 Regular.args = {}

package/stories/ox-data-sample-view.stories.ts

@@ -1,7 +1,7 @@
 import '@operato/i18n'
 import '../src/ox-data-sample-view.js'
 import '../src/usecase/ccp' /* register usecase CCP */
-import '@material/mwc-icon'
+import '@material/web/icon/icon.js'
 
 import { html, TemplateResult } from 'lit'
 
@@ -227,17 +227,28 @@ var dataSample = {
   collectedAt: Date.now()
 }
 
-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>
+const Template: Story<ArgTypes> = ({}: ArgTypes) => html`
+  <link href="/themes/app-theme.css" rel="stylesheet" />
+  <link
+    href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL@20..48,100..700,0..1"
+    rel="stylesheet"
+  />
+  <link
+    href="https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:opsz,wght,FILL@20..48,100..700,0..1"
+    rel="stylesheet"
+  />
+  <link
+    href="https://fonts.googleapis.com/css2?family=Material+Symbols+Sharp:opsz,wght,FILL@20..48,100..700,0..1"
+    rel="stylesheet"
+  />
+
+  <style>
+    body {
+    }
+  </style>
 
-    <ox-data-sample-view .dataSample=${dataSample}></ox-data-sample-view>
-  `
+  <ox-data-sample-view .dataSample=${dataSample}></ox-data-sample-view>
+`
 
 export const Regular = Template.bind({})
 Regular.args = {}

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

@@ -1,4 +1,4 @@
-import '@material/mwc-icon'
+import '@material/web/icon/icon.js'
 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'
@@ -306,9 +306,9 @@ class GristDemo extends LitElement {
 
         <div slot="headroom" id="headroom">
           <div id="modes">
-            <mwc-icon @click=${() => (this.mode = 'GRID')} ?active=${mode == 'GRID'}>view_list</mwc-icon>
-            <mwc-icon @click=${() => (this.mode = 'LIST')} ?active=${mode == 'LIST'}>menu</mwc-icon>
-            <mwc-icon @click=${() => (this.mode = 'CARD')} ?active=${mode == 'CARD'}>apps</mwc-icon>
+            <md-icon @click=${() => (this.mode = 'GRID')} ?active=${mode == 'GRID'}>view_list</md-icon>
+            <md-icon @click=${() => (this.mode = 'LIST')} ?active=${mode == 'LIST'}>menu</md-icon>
+            <md-icon @click=${() => (this.mode = 'CARD')} ?active=${mode == 'CARD'}>apps</md-icon>
           </div>
         </div>
       </ox-grist>
@@ -332,67 +332,78 @@ interface Story<T> {
 
 interface ArgTypes {}
 
-const Template: Story<ArgTypes> = ({}: ArgTypes) =>
-  html`
-    <link href="https://fonts.googleapis.com/css?family=Material+Icons&display=block" rel="stylesheet" />
-    <link href="/themes/app-theme.css" rel="stylesheet" />
-    <link href="/themes/oops-theme.css" rel="stylesheet" />
-    <link href="/themes/grist-theme.css" rel="stylesheet" />
+const Template: Story<ArgTypes> = ({}: ArgTypes) => html`
+  <link
+    href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL@20..48,100..700,0..1"
+    rel="stylesheet"
+  />
+  <link
+    href="https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:opsz,wght,FILL@20..48,100..700,0..1"
+    rel="stylesheet"
+  />
+  <link
+    href="https://fonts.googleapis.com/css2?family=Material+Symbols+Sharp:opsz,wght,FILL@20..48,100..700,0..1"
+    rel="stylesheet"
+  />
 
-    <style>
-      [slot='headroom'] {
-        display: flex;
-        flex-direction: row;
-        align-items: center;
-        padding: var(--padding-default) var(--padding-wide);
-        background-color: var(--theme-white-color);
-        box-shadow: var(--box-shadow);
+  <link href="/themes/app-theme.css" rel="stylesheet" />
+  <link href="/themes/oops-theme.css" rel="stylesheet" />
+  <link href="/themes/grist-theme.css" rel="stylesheet" />
 
-        --mdc-icon-size: 24px;
-      }
-      #sorters mwc-icon,
-      #modes mwc-icon {
-        --mdc-icon-size: 18px;
-      }
-      #sorters {
-        margin-left: auto;
-        margin-right: var(--margin-default);
-        padding-left: var(--padding-narrow);
-        border-bottom: var(--border-dark-color);
-        position: relative;
-        color: var(--secondary-color);
-        font-size: var(--fontsize-default);
-        user-select: none;
-      }
+  <style>
+    [slot='headroom'] {
+      display: flex;
+      flex-direction: row;
+      align-items: center;
+      padding: var(--padding-default) var(--padding-wide);
+      background-color: var(--theme-white-color);
+      box-shadow: var(--box-shadow);
 
-      #sorters > * {
-        padding: var(--padding-narrow);
-        vertical-align: middle;
-      }
+      --md-icon-size: 24px;
+    }
+    #sorters md-icon,
+    #modes md-icon {
+      --md-icon-size: 18px;
+    }
+    #sorters {
+      margin-left: auto;
+      margin-right: var(--margin-default);
+      padding-left: var(--padding-narrow);
+      border-bottom: var(--border-dark-color);
+      position: relative;
+      color: var(--secondary-color);
+      font-size: var(--fontsize-default);
+      user-select: none;
+    }
 
-      #filters {
-        display: flex;
-        justify-content: center;
-        align-items: center;
-      }
+    #sorters > * {
+      padding: var(--padding-narrow);
+      vertical-align: middle;
+    }
 
-      #filters * {
-        margin-right: var(--margin-default);
-      }
+    #filters {
+      display: flex;
+      justify-content: center;
+      align-items: center;
+    }
 
-      @media only screen and (max-width: 460px) {
-        #filters {
-          flex-direction: column;
-        }
+    #filters * {
+      margin-right: var(--margin-default);
+    }
 
-        #modes {
-          display: none;
-        }
+    @media only screen and (max-width: 460px) {
+      #filters {
+        flex-direction: column;
+      }
+
+      #modes {
+        display: none;
       }
-    </style>
+    }
+  </style>
 
-    <ox-data-items mode="LIST"></ox-data-items>
-  `
+  <ox-data-items mode="LIST"></ox-data-items>
+`
 
 export const Regular = Template.bind({})
 Regular.args = {}

package/themes/grist-theme.css

@@ -35,6 +35,8 @@ body {
   --grid-header-filter-title-font: normal 12px var(--theme-font);
   --grid-header-filter-title-icon-color: var(--primary-color);
 
+  --grid-body-bottom-border: 1px solid rgba(var(--secondary-color-rgb), 0.2);
+
   --grid-record-background-color: var(--theme-white-color);
   --grid-record-odd-background-color: #f9f7f5;
   --grid-record-padding: 0 5px 0 5px;