@operato/dataset 7.1.31 → 7.1.33

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

@@ -1,303 +0,0 @@
-import '@operato/input/ox-input-file.js'
-import '@operato/input/ox-input-signature.js'
-import './ox-data-entry-subgroup-form.js'
-
-import { css, html, LitElement, TemplateResult } from 'lit'
-import { customElement, property, queryAll } from 'lit/decorators.js'
-
-import { DataSet, DataItem, DataSample } from './types.js'
-import { OxDataEntrySubgroupForm } from './ox-data-entry-subgroup-form.js'
-
-@customElement('ox-data-entry-form')
-export class OxDataEntryForm extends LitElement {
-  static styles = css`
-    :host {
-      --item-description-font: normal 0.8rem/1rem var(--theme-font);
-      --item-description-color: var(--page-description-color);
-    }
-
-    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;
-    }
-
-    form {
-      display: flex;
-      flex-direction: column;
-      overflow: hidden;
-    }
-
-    form > div[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(--spacing-medium);
-
-      &:nth-child(odd) {
-        background-color: var(--md-sys-color-background);
-        padding: var(--padding-default) 0;
-      }
-    }
-
-    div[name] {
-      grid-area: name;
-      font: var(--label-font);
-      color: var(--label-color, var(--md-sys-color-on-surface));
-      text-align: right;
-    }
-    div[description] {
-      grid-area: description;
-      opacity: 0.7;
-      font: var(--item-description-font);
-      color: var(--item-description-color);
-      text-align: left;
-
-      * {
-        vertical-align: middle;
-      }
-
-      md-icon {
-        font-size: 0.9rem;
-      }
-    }
-
-    div[elements] {
-      grid-area: inputs;
-      display: flex;
-      flex-direction: row;
-      flex-wrap: wrap;
-      gap: 10px;
-      padding-right: var(--padding-default);
-
-      * {
-        flex: 1;
-      }
-
-      input,
-      select {
-        border: var(--input-field-border);
-        border-radius: var(--input-field-border-radius);
-        padding: var(--input-field-padding);
-        font: var(--input-field-font);
-      }
-    }
-
-    div[subgroup] {
-      grid-column: 1 / 3;
-      grid-row: 2;
-    }
-
-    @media only screen and (max-width: 460px) {
-      form > div[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(--spacing-medium);
-      }
-
-      div[name] {
-        text-align: left;
-      }
-    }
-  `
-
-  @property({ type: Object }) dataSet?: DataSet
-  @property({ type: Object }) value?: { [tag: string]: any }
-
-  @queryAll('ox-data-entry-subgroup-form') subgroups!: NodeListOf<OxDataEntrySubgroupForm>
-
-  render() {
-    return html` <form @change=${(e: Event) => this.onChange(e)}>
-      <h2>${this.dataSet?.name || ''}</h2>
-      <h3>${this.dataSet?.description || ''}</h3>
-      ${this.buildInputs()}
-    </form>`
-  }
-
-  private onChange(e: Event) {
-    this.value = this.buildValue()
-
-    this.dispatchEvent(
-      new CustomEvent('change', {
-        bubbles: true,
-        composed: true,
-        detail: this.value
-      })
-    )
-  }
-
-  private buildInputs() {
-    const dataItems = this.dataSet?.dataItems.filter(item => item.active) || []
-    const nonGroupDataItems = dataItems.filter(dataItem => !dataItem.group)
-    const dataItemSubgroups = Object.entries(this.groupDataItemsByGroup(dataItems)).map(([subgroup, dataItems]) => {
-      const tags = dataItems.map(dataItem => dataItem.tag)
-      const value = tags.reduce((partial, key) => {
-        partial[key] = this.value?.[key]
-        return partial
-      }, {} as any)
-
-      return this.buildInputs4Subgroup(subgroup, dataItems, value)
-    })
-
-    return [...this.buildInputs4NonGrouped(nonGroupDataItems), ...dataItemSubgroups]
-  }
-
-  private buildInputs4Subgroup(subgroup: string, dataItems: DataItem[], value: { [tag: string]: any }): TemplateResult {
-    return html`
-      <div label>
-        <div name>${subgroup}</div>
-        <div subgroup>
-          <ox-data-entry-subgroup-form
-            .subgroup=${subgroup}
-            .dataItems=${dataItems}
-            .value=${value}
-            @change=${(e: Event) => this.onChange(e)}
-          ></ox-data-entry-subgroup-form>
-        </div>
-      </div>
-    `
-  }
-
-  private buildInputs4NonGrouped(dataItems: DataItem[]): TemplateResult[] {
-    return (dataItems || []).map(dataItem => {
-      const { name, description, tag, type, quota = 1, options = {}, unit } = dataItem
-
-      const samples = new Array(quota).fill(0)
-      const value = this.value && this.value[tag]
-
-      const elements = samples.map((_, idx) => {
-        const v = value instanceof Array ? value[idx] : idx === 0 ? value : undefined
-
-        switch (type) {
-          case 'select':
-            return html` <select .name=${tag}>
-              <option value=""></option>
-              ${(options.options || []).map(
-                option => html`<option value=${option.value} ?selected=${option.value === v}>${option.text}</option>`
-              )}
-            </select>`
-
-          case 'radio':
-            return html`<div
-              @change=${(e: Event) => {
-                const div = e.currentTarget as HTMLElement
-                const inputHidden = div.querySelector(`input[name="${tag}"]`) as HTMLInputElement
-                inputHidden.value = (e.target as HTMLInputElement).value
-              }}
-            >
-              <input type="hidden" name=${tag} />
-
-              ${(options.options || []).map(
-                option =>
-                  html`<label>
-                    <input
-                      type="radio"
-                      name=${'$' + tag + '-' + idx}
-                      .value=${option.value}
-                      ?checked=${option.value === v}
-                    />
-                    ${option.text}
-                  </label>`
-              )}
-            </div>`
-
-          case 'boolean':
-            return html` <input type="checkbox" name=${tag} .checked=${v} />`
-
-          case 'number':
-            return html` <input type="number" name=${tag} value=${v} />`
-
-          case 'date':
-            return html` <input type="date" name=${tag} value=${v} />`
-
-          case 'datetime':
-            return html` <input type="datetime-local" name=${tag} value=${v} />`
-
-          case 'file':
-            return html`<ox-input-file name=${tag} multiple .value=${v}></ox-input-file>`
-
-          case 'signature':
-            return html`<ox-input-signature name=${tag} value=${v}></ox-input-signature>`
-
-          case 'string':
-          default:
-            return html` <input type="text" name=${tag} value=${v} />`
-        }
-      })
-
-      return html` <div label>
-        <div name>${name}${unit ? `(${unit})` : ''}</div>
-        <div description><md-icon>info</md-icon> ${description}</div>
-        <div elements>${elements}</div>
-      </div>`
-    })
-  }
-
-  private buildValue() {
-    const dataItems = this.dataSet!.dataItems
-    const nonGroupDataItems = dataItems.filter(dataItem => !dataItem.group)
-
-    const nonGroupValue = (nonGroupDataItems || []).reduce(
-      (sum, dataItem) => {
-        const { tag, type } = dataItem
-
-        const editors = Array.prototype.slice.call(
-          this.renderRoot.querySelectorAll(`[name=${tag}]`) as NodeListOf<HTMLInputElement>
-        ) as HTMLInputElement[]
-
-        if (editors.length > 0) {
-          sum[tag] = editors.map(editor => (type === 'boolean' ? editor.checked : editor.value))
-        }
-
-        return sum
-      },
-      {} as { [tag: string]: any }
-    )
-
-    return Array.from(this.subgroups).reduce((value, subgroup) => {
-      return {
-        ...value,
-        ...subgroup.buildValue()
-      }
-    }, nonGroupValue || {})
-  }
-
-  private groupDataItemsByGroup(dataItems: DataItem[]): { [group: string]: DataItem[] } {
-    const groupedDataItems: { [group: string]: DataItem[] } = {}
-
-    for (const dataItem of dataItems) {
-      const { group } = dataItem
-
-      if (group) {
-        if (!groupedDataItems[group]) {
-          groupedDataItems[group] = []
-        }
-
-        groupedDataItems[group].push(dataItem)
-      }
-    }
-
-    return groupedDataItems
-  }
-}

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

@@ -1,157 +0,0 @@
-import '@operato/input/ox-input-file.js'
-import '@operato/data-grist/ox-grist.js'
-
-import { css, html, LitElement } from 'lit'
-import { customElement, property, state, query } from 'lit/decorators.js'
-
-import { ScrollbarStyles } from '@operato/styles'
-import { isMobileDevice } from '@operato/utils'
-
-import { DataItem } from './types.js'
-import { DataGrist, FetchOption } from '@operato/data-grist'
-
-@customElement('ox-data-entry-subgroup-form')
-export class OxDataEntrySubgroupForm extends LitElement {
-  static styles = [
-    ScrollbarStyles,
-    css`
-      :host {
-        display: flex;
-        flex-direction: column;
-
-        width: 100%;
-        min-height: 100px;
-      }
-    `
-  ]
-
-  @property({ type: String }) subgroup?: string
-  @property({ type: Array }) dataItems?: DataItem[]
-  @property({ type: Object }) value?: { [tag: string]: any }
-
-  @state() gristConfig = this.buildGristConfiguration()
-  @query('ox-grist') grist!: DataGrist
-
-  render() {
-    return html`
-      <ox-grist
-        .mode=${isMobileDevice() ? 'LIST' : 'GRID'}
-        .config=${this.buildGristConfiguration()}
-        .fetchHandler=${this.fetchHandler.bind(this)}
-        @field-change=${this.onFieldChange.bind(this)}
-      >
-      </ox-grist>
-    `
-  }
-
-  private buildGristConfiguration() {
-    const columns = (this.dataItems || []).map(dataItem => {
-      const { name, description, tag, type, options = {}, unit } = dataItem
-      const columnConfig = {
-        type,
-        name: tag,
-        header: `${name}${unit ? ` (${unit})` : ''}`,
-        record: {
-          editable: true
-        },
-        width: 200
-      } as any
-
-      switch (type) {
-        case 'select':
-        case 'radio': // 그리드안에 radio가 들어갈수 없어서 select로 변환
-          columnConfig.type = 'select'
-          columnConfig.record.options = [
-            '',
-            ...(options.options || []).map((option: any) => {
-              if (typeof option == 'string') {
-                return option
-              }
-              const { display, text, value } = option || {}
-
-              return {
-                display: display || text,
-                value
-              }
-            })
-          ]
-          return columnConfig
-
-        case 'boolean':
-          columnConfig.record.align = 'center'
-          return columnConfig
-
-        case 'number':
-          columnConfig.record.align = 'right'
-          return columnConfig
-
-        case 'date':
-          return columnConfig
-
-        case 'datetime':
-          return columnConfig
-
-        case 'file':
-          columnConfig.record.multiple = true
-          return columnConfig
-
-        case 'signature':
-          return columnConfig
-
-        case 'string':
-          return columnConfig
-
-        default:
-          return columnConfig
-      }
-    })
-
-    return {
-      list: { fields: ['name', 'data'] },
-      columns: [{ type: 'gutter', gutterName: 'sequence' }, ...columns],
-      rows: {
-        appendable: true
-      },
-      pagination: { infinite: true }
-    }
-  }
-
-  async fetchHandler({ page = 1, limit = 100, sortings = [], filters = [] }: FetchOption) {
-    const length = Object.entries(this.value || {}).reduce((max, [tag, value]) => {
-      return Math.max(max, Array.isArray(value) ? value.length : 1)
-    }, 0)
-
-    const tags = (this.dataItems || []).map(dataItem => dataItem.tag)
-
-    const records = Array.from({ length }, (_, index) => index).map(index => {
-      return tags.reduce((partial, tag) => {
-        const v = this.value?.[tag]
-        partial[tag] = Array.isArray(v) ? v[index] : index == 0 ? v : undefined
-        return partial
-      }, {} as any)
-    })
-
-    return {
-      total: records.length || 0,
-      records: records
-    }
-  }
-
-  public buildValue() {
-    const records = this.grist._data.records || []
-    const tags = (this.dataItems || []).map(dataItem => dataItem.tag)
-    this.grist.commit()
-
-    return tags.reduce((partial, tag) => {
-      partial[tag] = Array.from({ length: records.length }, (_, index) => index).map(index => {
-        const record = records[index]
-        return record?.[tag]
-      })
-      return partial
-    }, {} as any)
-  }
-
-  onFieldChange(e: CustomEvent) {
-    this.dispatchEvent(new CustomEvent('change', { detail: this.grist.dirtyData }))
-  }
-}

package/src/ox-data-entry-subgroup-view.ts

@@ -1,221 +0,0 @@
-import '@material/web/icon/icon.js'
-import '@operato/input/ox-input-file.js'
-import '@operato/input/ox-input-signature.js'
-
-import { css, html, LitElement, nothing } from 'lit'
-import { customElement, property } from 'lit/decorators.js'
-
-import { i18next } from '@operato/i18n'
-
-import { DataSample, DataSet, DataSpecLimitSet } from './types.js'
-import { OxDataUseCase } from './usecase/ox-data-use-case.js'
-
-@customElement('ox-data-entry-subgroup-view')
-export class OxDataEntrySubgroupView extends LitElement {
-  static styles = css`
-    :host {
-      display: flex;
-      flex-direction: column;
-    }
-
-    h3 {
-      margin: var(--title-margin);
-      font: var(--title-font);
-      font-size: 20px;
-      color: var(--title-text-color);
-      text-transform: capitalize;
-    }
-
-    table {
-      border-collapse: collapse;
-      margin-bottom: var(--spacing-medium);
-    }
-
-    th {
-      padding: var(--th-padding);
-      border-top: var(--th-border-top);
-      border-left: var(--td-border-line, 1px solid rgba(0, 0, 0, 0.05));
-      border-bottom: var(--td-border-bottom);
-      text-transform: var(--th-text-transform);
-      font: var(--th-font);
-      font-weight: bold;
-      color: var(--th-color);
-      text-align: center;
-      white-space: nowrap;
-    }
-
-    th.label,
-    td.label {
-      background-color: var(--label-cell-background-color, #f6f6f6);
-      width: 120px;
-      text-transform: var(--th-text-transform);
-    }
-
-    tr {
-      background-color: var(--tr-background-color);
-    }
-
-    tr:hover {
-      background-color: var(--tr-background-hover-color);
-    }
-
-    td {
-      border-left: var(--td-border-line, 1px solid rgba(0, 0, 0, 0.05));
-      border-bottom: var(--td-border-bottom);
-      padding: var(--td-padding);
-      font: var(--td-font);
-      color: var(--td-color);
-      text-align: center;
-    }
-    tr th:first-child,
-    tr td:first-child {
-      border-left: none;
-    }
-
-    td md-icon {
-      color: var(--md-sys-color-error);
-    }
-
-    pre {
-      tab-size: 2;
-      text-align: left;
-    }
-
-    a[file] {
-      display: flex;
-      align-items: center;
-      gap: var(--spacing-small);
-    }
-
-    a[file] md-icon {
-      --md-icon-size: 16px;
-      color: var(--md-sys-color-primary);
-    }
-  `
-
-  @property({ type: Object }) dataSet?: DataSet
-  @property({ type: Object }) data?: any
-  @property({ type: String }) subgroup?: string
-
-  render() {
-    if (!this.data || !this.dataSet) {
-      return html``
-    }
-
-    const { useCase, dataItems = [] } = this.dataSet
-
-    const { data } = this
-    const useCaseNames = useCase?.split(',').filter(useCase => useCase.trim()) || []
-    const subgroupDataItems = dataItems.filter(dataItem => dataItem.group == this.subgroup && !dataItem.hidden)
-    const records = subgroupDataItems.reduce((max, dataItem) => {
-      const value = data[dataItem.tag]
-      return Math.max(max, Array.isArray(value) ? value.length : 1)
-    }, 0)
-    const judgment = subgroupDataItems.reduce(
-      (judgment, dataItem) => {
-        const tag = dataItem.tag
-        judgment[tag] = OxDataUseCase.evaluateTag(this.dataSet!, dataItems, data, tag) || {}
-        return judgment
-      },
-      {} as { [tag: string]: { ooc: boolean; oos: boolean } }
-    )
-
-    return html` <h3>${this.subgroup}</h3>
-      <table>
-        <tr>
-          <th class="label">${i18next.t('field.name')}</th>
-          ${subgroupDataItems.map(
-            dataItem => html` <th>${dataItem.name} ${dataItem.unit ? `(${dataItem.unit})` : ''}</th> `
-          )}
-        </tr>
-        <tr>
-          <td class="label">${i18next.t('field.description')}</td>
-          ${subgroupDataItems.map(dataItem => html` <td>${dataItem.description}</td> `)}
-        </tr>
-        ${Array.from({ length: records }, (_, index) => index).map(
-          index => html`
-            <tr>
-              <td class="label">${records > 1 ? index + 1 : i18next.t('field.value')}</td>
-              ${subgroupDataItems.map(dataItem => {
-                const { tag = '', type } = dataItem
-                const valueArray = data[tag]
-                const value = Array.isArray(valueArray) ? valueArray[index] : index == 0 ? valueArray : undefined
-
-                return html` <td>${this.buildValue(type, value)}</td> `
-              })}
-            </tr>
-          `
-        )}
-        <tr>
-          <td class="label">${i18next.t('field.spec')}</td>
-          ${subgroupDataItems.map(
-            dataItem => html` <td><pre>${this.buildSpec(useCaseNames, dataItem.spec)}</pre></td> `
-          )}
-        </tr>
-        <tr>
-          <td class="label">${i18next.t('field.ooc')}</td>
-          ${subgroupDataItems.map(
-            dataItem => html` <td>${judgment?.[dataItem.tag]?.ooc ? html`<md-icon>done</md-icon>` : nothing}</td> `
-          )}
-        </tr>
-        <tr>
-          <td class="label">${i18next.t('field.oos')}</td>
-          ${subgroupDataItems.map(
-            dataItem => html` <td>${judgment?.[dataItem.tag]?.oos ? html`<md-icon>done</md-icon>` : nothing}</td> `
-          )}
-        </tr>
-      </table>`
-  }
-
-  private buildSpec(useCaseNames: string[], spec: DataSpecLimitSet): string {
-    return OxDataUseCase.elaborateDataItemSpec(useCaseNames, spec)
-  }
-
-  private download(file: { mimetype: string; name: string; fullpath: string }) {
-    const element = document.createElement('a')
-    element.setAttribute('href', file.fullpath)
-    element.setAttribute('download', file.name!)
-    document.body.appendChild(element)
-    element.click()
-  }
-
-  private buildValue(type: string, value: any | any[]) {
-    if (value === undefined) {
-      return ''
-    }
-    const values = value instanceof Array ? value : [value]
-
-    if (type == 'file') {
-      const files = values.flat() as { mimetype: string; name: string; fullpath: string }[]
-
-      return files.filter(Boolean).map(
-        (file, idx) => html`
-          <a @click=${() => this.download(file)} file><md-icon>description</md-icon>${file.name}</a>
-          ${files.length - 1 == idx ? html`</br>` : nothing}
-        `
-      )
-    }
-
-    if (type == 'signature') {
-      return html` <ox-input-signature .value=${value} disabled></ox-input-signature>`
-    }
-
-    const elements = values.map((v: any, idx) => {
-      switch (typeof v) {
-        case 'boolean':
-          return html` <input type="checkbox" .checked=${v} disabled />`
-          break
-
-        default:
-          if (type == 'date') {
-            return v ? new Date(v).toLocaleDateString() : ''
-          } else if (type == 'datetime') {
-            return v ? new Date(v).toLocaleString() : ''
-          }
-          return v ?? ''
-      }
-    })
-
-    return typeof values[0] === 'boolean' ? elements : elements.join(', ')
-  }
-}