@operato/dataset 7.1.31 → 7.1.32

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

@@ -1,241 +0,0 @@
-import '@material/web/icon/icon.js'
-import '@operato/input/ox-input-file.js'
-import '@operato/input/ox-input-signature.js'
-import './ox-data-entry-subgroup-view.js'
-
-import { css, html, LitElement, nothing } from 'lit'
-import { customElement, property } from 'lit/decorators.js'
-
-import { i18next } from '@operato/i18n'
-
-import { DataItem, DataSet, DataSpecLimitSet } from './types.js'
-import { OxDataUseCase } from './usecase/ox-data-use-case.js'
-
-@customElement('ox-data-entry-view')
-export class OxDataEntryView extends LitElement {
-  static styles = css`
-    :host {
-      display: flex;
-      flex-direction: column;
-
-      --signature-min-width: 100px;
-      --signature-min-height: 60px;
-    }
-
-    form {
-      flex: 1;
-
-      display: flex;
-      flex-direction: column;
-    }
-
-    h2 {
-      margin: var(--title-margin);
-      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(--md-sys-color-on-secondary-container);
-      text-transform: capitalize;
-    }
-    [page-description] * {
-      vertical-align: middle;
-    }
-    [page-description] md-icon {
-      margin-top: -2px;
-      font-size: 0.9rem;
-      color: var(--page-description-color);
-    }
-
-    table {
-      border-collapse: collapse;
-      margin-bottom: var(--spacing-medium);
-    }
-    th {
-      padding: var(--th-padding);
-      border-top: var(--th-border-top);
-      border-bottom: var(--td-border-bottom);
-      text-transform: var(--th-text-transform);
-      font: var(--th-font);
-      color: var(--th-color);
-      text-align: left;
-      white-space: nowrap;
-    }
-    th[item] {
-      min-width: 100px;
-    }
-    th[value] {
-      min-width: 100px;
-    }
-    tr {
-      background-color: var(--tr-background-color);
-    }
-    tr:nth-child(odd) {
-      background-color: var(--tr-background-odd-color);
-    }
-    tr:hover {
-      background-color: var(--tr-background-hover-color);
-    }
-    tr[ooc],
-    tr[oos] {
-      background-color: #fefbdf;
-    }
-    td {
-      border-bottom: var(--td-border-bottom);
-      padding: var(--td-padding);
-      font: var(--td-font);
-      color: var(--td-color);
-    }
-    td[name] {
-      font-weight: bold;
-    }
-    td md-icon {
-      color: var(--md-sys-color-error);
-    }
-
-    pre {
-      tab-size: 2;
-    }
-
-    @media screen and (max-width: 480px) {
-      th {
-        min-width: 50px;
-      }
-    }
-  `
-
-  @property({ type: Object }) dataSet?: DataSet
-  @property({ type: Object }) value?: { [tag: string]: any }
-
-  render() {
-    if (!this.dataSet) {
-      return nothing
-    }
-
-    const { name, description, useCase, dataItems = [] } = this.dataSet!
-
-    const data = this.value || {}
-
-    const useCaseNames = useCase?.split(',').filter(useCase => useCase.trim()) || []
-    const nonGroupDataItems = dataItems.filter(dataItem => !dataItem.group && !dataItem.hidden)
-    const dataItemSubgroups = this.groupDataItemsByGroup(dataItems)
-
-    return html` <h2>${name}</h2>
-      <p page-description><md-icon>info</md-icon> ${description}<br /></p>
-
-      <form>
-        ${nonGroupDataItems.length > 0
-          ? html`
-              <table>
-                <tr>
-                  <th item>${i18next.t('field.item')}</th>
-                  <th>${i18next.t('field.description')}</th>
-                  <th>${i18next.t('field.finalizing-function')}</th>
-                  <th>${i18next.t('field.unit')}</th>
-                  <th value>${i18next.t('field.value')}</th>
-                  <th>${i18next.t('field.spec')}</th>
-                  <th>${i18next.t('field.ooc')}</th>
-                  <th>${i18next.t('field.oos')}</th>
-                </tr>
-                ${nonGroupDataItems.map(dataItem => {
-                  const { name = '', tag = '', description = '', stat, unit = '', spec = {}, type } = dataItem
-                  const value = data[tag]
-                  const { ooc, oos } = OxDataUseCase.evaluateTag(this.dataSet!, dataItems, data, tag) || {}
-
-                  return html`
-                    <tr ?ooc=${ooc} ?oos=${oos}>
-                      <td name>${name}</td>
-                      <td>${description}</td>
-                      <td>${stat}</td>
-                      <td>${unit}</td>
-                      <td>${this.buildValue(type, value)}</td>
-                      <td><pre>${this.buildSpec(useCaseNames, spec)}</pre></td>
-                      <td>${ooc ? html`<md-icon>done</md-icon>` : ''}</td>
-                      <td>${oos ? html`<md-icon>done</md-icon>` : ''}</td>
-                    </tr>
-                  `
-                })}
-              </table>
-            `
-          : nothing}
-        ${Object.keys(dataItemSubgroups).map(subgroup => {
-          return html`
-            <ox-data-entry-subgroup-view
-              .subgroup=${subgroup}
-              .dataSet=${this.dataSet}
-              .data=${this.value}
-            ></ox-data-entry-subgroup-view>
-          `
-        })}
-      </form>`
-  }
-
-  private groupDataItemsByGroup(dataItems: DataItem[]): { [group: string]: DataItem[] } {
-    const groupedDataItems: { [group: string]: DataItem[] } = {}
-
-    for (const dataItem of dataItems) {
-      const { group, hidden } = dataItem
-
-      if (group && !hidden) {
-        if (!groupedDataItems[group]) {
-          groupedDataItems[group] = []
-        }
-
-        groupedDataItems[group].push(dataItem)
-      }
-    }
-
-    return groupedDataItems
-  }
-
-  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 => html`<a @click=${() => this.download(file)}>${file.name}</a></br>`)
-    }
-
-    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(', ')
-  }
-}

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

@@ -1,131 +0,0 @@
-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 { DataItem, UseCaseDefinition } from './types.js'
-import { OxDataUseCase } from './usecase/ox-data-use-case.js'
-
-@customElement('ox-data-item-spec')
-export class OxDataItemSpec extends LitElement {
-  static styles = css`
-    :host {
-      display: flex;
-      flex-direction: row;
-      --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(--spacing-medium);
-    }
-    label: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;
-    }
-    div[description] * {
-      vertical-align: middle;
-    }
-    div[description] md-icon {
-      font-size: 0.9rem;
-    }
-    ox-properties-dynamic-view {
-      grid-area: inputs;
-      display: flex;
-      flex-direction: column;
-      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(--spacing-medium);
-      }
-
-      div[name] {
-        text-align: left;
-      }
-    }
-  `
-
-  @property({ type: Object }) value?: { [specSetName: string]: any }
-  @property({ type: Object }) dataItem?: DataItem
-
-  @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` <label
-            ><div name>${name}</div>
-            <div description><md-icon>info</md-icon> ${description}</div>
-            <ox-properties-dynamic-view data-name=${name} .props=${specs} .value=${this.value?.[name]}>
-            </ox-properties-dynamic-view
-          ></label>`
-      )}
-    </form>`
-  }
-
-  updated(changes: PropertyValues<this>) {
-    if (changes.has('dataItem')) {
-      this.dataItemSpecSets = OxDataUseCase.getUseCases().map(useCase => useCase.getSpecification(this.dataItem!))
-    }
-  }
-
-  private onChange(e: Event) {
-    this.value = this.buildValue()
-
-    this.dispatchEvent(
-      new CustomEvent('change', {
-        bubbles: true,
-        composed: true,
-        detail: { ...this.value }
-      })
-    )
-  }
-
-  private buildValue() {
-    var value = {} as any
-    this.specSetViews.forEach(view => (value[view.getAttribute('data-name')!] = view.value))
-
-    return value
-  }
-}

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

@@ -1,73 +0,0 @@
-import '@material/web/icon/icon.js'
-import '@operato/input/ox-input-file.js'
-import './ox-data-sample-view'
-
-import { css, html, LitElement, nothing } from 'lit'
-import { customElement, property } from 'lit/decorators.js'
-
-@customElement('ox-data-ooc-badge')
-export class OxDataOocBadge extends LitElement {
-  static styles = css`
-    h3 {
-      text-align: center;
-      font: var(--title-font);
-      margin: var(--spacing-small) 0;
-    }
-
-    md-icon {
-      --md-icon-size: 80px;
-      opacity: 0.4;
-      color: var(--md-sys-color-secondary);
-    }
-
-    md-icon[filled] {
-      font-variation-settings: 'FILL' 1;
-    }
-
-    div {
-      position: absolute;
-      top: 22px;
-      left: 0;
-      right: 0;
-      font-size: 10px;
-      color: var(--md-sys-color-surface);
-    }
-
-    [field-state] {
-      display: block;
-      border-radius: 4px;
-      color: var(--md-sys-color-on-primary);
-      background-color: var(--md-sys-color-primary);
-      border-color: var(--md-sys-color-primary);
-      box-shadow: var(--box-shadow);
-      margin-top: var(--spacing-small);
-      padding: 1px 3px;
-      font-size: 0.8rem;
-    }
-
-    [danger] [field-state] {
-      color: var(--md-sys-color-on-error);
-      background-color: var(--md-sys-color-error);
-      border-color: var(--md-sys-color-error);
-    }
-
-    [complete] [field-state] {
-      color: var(--md-sys-color-on-error);
-      background-color: var(--status-info-color);
-      border-color: var(--status-info-color);
-    }
-  `
-
-  @property({ type: String }) state?: string
-
-  render() {
-    const state = this.state
-
-    return html`
-      <h3 ?danger=${state != 'CORRECTED'} ?complete=${state == 'CORRECTED'}>
-        <md-icon filled>shield</md-icon>
-        <div>DATA OOC <span field-state>${state || ''}</span></div>
-      </h3>
-    `
-  }
-}

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

@@ -1,43 +0,0 @@
-import '@operato/input/ox-input-file.js'
-import './ox-data-sample-view'
-import './ox-data-ooc-badge'
-import './ox-data-ooc-correction-part'
-import '@material/web/icon/icon.js'
-
-import { css, html, LitElement } from 'lit'
-import { customElement, property } from 'lit/decorators.js'
-
-import { DataOoc } from './types.js'
-
-@customElement('ox-data-ooc-brief-view')
-export class OxDataOocBriefView extends LitElement {
-  static styles = css`
-    :host {
-      display: flex;
-      flex-direction: column;
-
-      position: relative;
-    }
-
-    ox-data-ooc-badge {
-      position: absolute;
-
-      margin: 0;
-      padding: 0;
-      right: 10px;
-      width: 90px;
-    }
-  `
-
-  @property({ type: Object }) dataOoc?: DataOoc
-
-  render() {
-    const { state } = this.dataOoc || {}
-
-    return html`
-      <ox-data-sample-view .dataSample=${this.dataOoc}></ox-data-sample-view>
-      <ox-data-ooc-badge .state=${state}></ox-data-ooc-badge>
-      <ox-data-ooc-correction-part .dataOoc=${this.dataOoc}></ox-data-ooc-correction-part>
-    `
-  }
-}

package/src/ox-data-ooc-correction-part.ts

@@ -1,107 +0,0 @@
-import '@operato/input/ox-input-file.js'
-import '@material/web/icon/icon.js'
-
-import { css, html, LitElement, nothing } from 'lit'
-import { customElement, property } from 'lit/decorators.js'
-
-import { i18next } from '@operato/i18n'
-
-import { DataOoc } from './types.js'
-
-@customElement('ox-data-ooc-correction-part')
-export class OxDataOocCorrectionPart extends LitElement {
-  static styles = css`
-    :host {
-      display: flex;
-      flex-direction: column;
-
-      position: relative;
-    }
-
-    h3 {
-      margin: var(--title-margin);
-      padding-top: 12px;
-      font: var(--title-font);
-      color: var(--title-text-color);
-      font-size: 20px;
-    }
-
-    md-icon {
-      font-size: 16px;
-    }
-
-    [field-state] {
-      border-radius: 2px;
-      background-color: var(--md-sys-color-on-primary-container);
-      margin-left: var(--spacing-medium);
-      padding: 1px 2px;
-      font-size: 0.7rem;
-      color: var(--md-sys-color-surface);
-    }
-
-    p {
-      background-color: var(--md-sys-color-surface);
-      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(--md-sys-color-on-secondary-container);
-    }
-
-    md-icon {
-      position: relative;
-      top: 3px;
-      margin: 0 2px 0 10px;
-    }
-
-    [field-info] {
-      opacity: 0.7;
-    }
-
-    strong {
-      display: block;
-      font-weight: bold;
-      font-size: 0.9rem;
-    }
-  `
-
-  @property({ type: Object }) dataOoc?: DataOoc
-
-  render() {
-    const {
-      correctiveInstruction = '',
-      correctiveAction = '',
-      reviewer,
-      reviewedAt,
-      corrector,
-      correctedAt
-    } = this.dataOoc || {}
-    const formatter = new Intl.DateTimeFormat(navigator.language, { dateStyle: 'full', timeStyle: 'short' })
-
-    return html`
-      ${reviewer
-        ? html`
-            <h3>${i18next.t('label.corrective instruction')}</h3>
-            <p>
-              <span field-info
-                >${formatter.format(new Date(reviewedAt!))} <md-icon>account_circle</md-icon>${reviewer.name}</span
-              >
-              <strong>${correctiveInstruction}</strong>
-            </p>
-          `
-        : nothing}
-      ${corrector
-        ? html`
-            <h3>${i18next.t('label.corrective action')}</h3>
-            <p>
-              <span field-info
-                >${formatter.format(new Date(correctedAt!))} <md-icon>account_circle</md-icon>${corrector.name}</span
-              >
-              <strong>${correctiveAction}</strong>
-            </p>
-          `
-        : nothing}
-    `
-  }
-}

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

@@ -1,74 +0,0 @@
-import '@operato/input/ox-input-file.js'
-import './ox-data-sample-view'
-import '@material/web/icon/icon.js'
-
-import { css, html, LitElement } from 'lit'
-import { customElement, property } from 'lit/decorators.js'
-
-import { DataOoc } from './types.js'
-
-@customElement('ox-data-ooc-history')
-export class OxDataOocHistory extends LitElement {
-  static styles = css`
-    md-icon {
-      font-size: 16px;
-    }
-
-    [field-state] {
-      border-radius: 2px;
-      background-color: var(--md-sys-color-on-primary-container);
-      margin-left: var(--spacing-medium);
-      padding: 1px 2px;
-      font-size: 0.7rem;
-      color: var(--md-sys-color-surface);
-    }
-
-    p {
-      background-color: var(--md-sys-color-surface);
-      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(--md-sys-color-on-secondary-container);
-    }
-
-    md-icon {
-      position: relative;
-      top: 3px;
-      margin: 0 2px 0 10px;
-    }
-
-    [field-info] {
-      opacity: 0.7;
-    }
-
-    strong {
-      display: block;
-      font-weight: bold;
-      font-size: 0.9rem;
-    }
-  `
-
-  @property({ type: Object }) dataOoc?: DataOoc
-
-  render() {
-    const { history = [] } = this.dataOoc || {}
-    const formatter = new Intl.DateTimeFormat(navigator.language, { dateStyle: 'full', timeStyle: 'short' })
-
-    return html`
-      ${history.map(
-        ({ user, state, comment, timestamp }) => html`
-          <p page-history>
-            <!--상태에 따라 추가로 danger, complete를 어트리뷰트로 추가시 배경컬러 변경되도록 해두었습니다-->
-            <span field-info
-              >${formatter.format(new Date(timestamp))} <md-icon>account_circle</md-icon>${user.name}</span
-            >
-            <span field-state>${state}</span>
-            <strong>${comment}</strong>
-          </p>
-        `
-      )}
-    `
-  }
-}