@operato/dataset 7.1.30 → 7.1.32

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

@@ -1,51 +0,0 @@
-import '@operato/input/ox-input-file.js'
-import './ox-data-sample-view'
-import './ox-data-ooc-history'
-import '@material/web/icon/icon.js'
-
-import { css, html, LitElement } from 'lit'
-import { customElement, property } from 'lit/decorators.js'
-
-import { i18next } from '@operato/i18n'
-
-import { DataOoc, DataSet } from './types.js'
-
-/**
- * @deprecated by ox-data-ooc-brief-view
- */
-@customElement('ox-data-ooc-view')
-export class OxDataOocView 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 }) dataSet?: DataSet
-  @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>
-
-      <h3>${i18next.t('title.history')}</h3>
-      <ox-data-ooc-history .dataOoc=${this.dataOoc}></ox-data-ooc-history>
-    `
-  }
-}

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

@@ -1,210 +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, DataSpecLimitSet } from './types.js'
-import { OxDataUseCase } from './usecase/ox-data-use-case.js'
-
-@customElement('ox-data-sample-subgroup-view')
-export class OxDataSampleSubgroupView 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 }) dataSample?: DataSample
-  @property({ type: String }) subgroup?: string
-
-  render() {
-    if (!this.dataSample) {
-      return html``
-    }
-
-    const { useCase, data = {}, judgment, dataItems = [] } = this.dataSample
-    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)
-
-    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(', ')
-  }
-}

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

@@ -1,271 +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-sample-subgroup-view.js'
-
-import { css, html, LitElement, nothing } from 'lit'
-import { customElement, property } from 'lit/decorators.js'
-
-import { i18next } from '@operato/i18n'
-
-import { DataItem, DataSample, DataSpecLimitSet } from './types.js'
-import { OxDataUseCase } from './usecase/ox-data-use-case.js'
-
-@customElement('ox-data-sample-view')
-export class OxDataSampleView 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;
-    }
-
-    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);
-    }
-
-    @media print {
-      :host {
-        display: block;
-      }
-    }
-
-    @media screen and (max-width: 480px) {
-      th {
-        min-width: 50px;
-      }
-    }
-  `
-
-  @property({ type: Object }) dataSample?: DataSample
-
-  render() {
-    if (!this.dataSample) {
-      return html``
-    }
-
-    const {
-      name,
-      description,
-      collectedAt,
-      workDate,
-      workShift,
-      useCase,
-      data = {},
-      judgment,
-      dataItems = []
-    } = this.dataSample
-    const formatter = new Intl.DateTimeFormat(navigator.language, { dateStyle: 'full', timeStyle: 'short' })
-    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 />
-        <md-icon>alarm</md-icon> ${i18next.t('field.work-date')}: ${workDate} ${workShift} |
-        <md-icon>pending_actions</md-icon> ${i18next.t('field.collected-at')}:
-        ${formatter.format(new Date(collectedAt!))}
-      </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 } = judgment?.[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-sample-subgroup-view
-              .subgroup=${subgroup}
-              .dataSample=${this.dataSample}
-            ></ox-data-sample-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><md-icon>description</md-icon>${file.name}</a>`)
-    }
-
-    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(', ')
-  }
-}