@things-factory/dataset 6.0.25 → 6.0.27

package/client/pages/data-ooc/{data-ooc-view.js → data-ooc-view.ts}

@@ -2,109 +2,101 @@ import '@operato/dataset/ox-data-ooc-view.js'
 
 import gql from 'graphql-tag'
 import { css, html, LitElement } from 'lit'
+import { customElement, property, query, state } from 'lit/decorators.js'
 
 import { client } from '@operato/graphql'
 import { i18next, localize } from '@operato/i18n'
 import { ScrollbarStyles } from '@operato/styles'
+import { DataSet } from '@operato/dataset'
 
+@customElement('data-ooc-view')
 class DataOocView extends localize(i18next)(LitElement) {
-  static get styles() {
-    return [
-      ScrollbarStyles,
-      css`
-        :host {
-          display: flex;
-          flex-direction: column;
-
-          background-color: #fff;
-        }
+  static styles = [
+    ScrollbarStyles,
+    css`
+      :host {
+        display: flex;
+        flex-direction: column;
+
+        background-color: #fff;
+      }
 
-        div[content] {
-          flex: 1;
+      div[content] {
+        flex: 1;
 
-          display: flex;
-          overflow: auto;
-        }
+        display: flex;
+        overflow: auto;
+      }
 
-        ox-data-ooc-view {
-          flex: 1;
-          padding: var(--padding-wide);
-          overflow: auto;
-        }
+      ox-data-ooc-view {
+        flex: 1;
+        padding: var(--padding-wide);
+        overflow: auto;
+      }
 
-        label[comment] {
-          display: flex;
-          flex-direction: column;
+      label[comment] {
+        display: flex;
+        flex-direction: column;
 
-          padding: var(--padding-wide);
-        }
+        padding: var(--padding-wide);
+      }
 
-        label[comment] div {
-          display: flex;
-        }
+      label[comment] div {
+        display: flex;
+      }
 
-        mwc-icon {
-          color: var(--status-danger-color);
-        }
+      mwc-icon {
+        color: var(--status-danger-color);
+      }
 
-        textarea {
-          border: var(--input-field-border);
-          border-radius: var(--input-border-radius);
-          padding: var(--input-field-padding);
-          font: var(--input-field-font);
-        }
+      textarea {
+        border: var(--input-field-border);
+        border-radius: var(--input-border-radius);
+        padding: var(--input-field-padding);
+        font: var(--input-field-font);
+      }
 
-        .button-container {
-          display: flex;
-          margin-left: auto;
-          padding: var(--padding-default);
-        }
-      `
-    ]
-  }
+      .button-container {
+        display: flex;
+        margin-left: auto;
+        padding: var(--padding-default);
+      }
+    `
+  ]
 
-  static get properties() {
-    return {
-      dataSet: Object,
-      dataOoc: Object
-    }
-  }
+  @property({ type: Object }) dataSet?: DataSet
+  @property({ type: Object }) dataOoc?: any
 
-  get sampleView() {
-    return this.renderRoot.querySelector('ox-data-ooc-view')
-  }
+  @query('textarea') commentTextArea!: HTMLTextAreaElement
+  @query('ox-data-ooc-view') sampleView!: HTMLTextAreaElement
 
   render() {
-    const state = this.dataOoc.state
+    const state = this.dataOoc?.state
 
     return html`
       <div content>
         <ox-data-ooc-view .dataSet=${this.dataSet} .dataOoc=${this.dataOoc}></ox-data-ooc-view>
       </div>
 
-      ${
-        state === 'CREATED' || state === 'REVIEWED'
-          ? html`
+      ${state === 'CREATED' || state === 'REVIEWED'
+        ? html`
             <label comment>
               <div><mwc-icon>build_circle</mwc-icon> <span>correction activity</span></div>
               <textarea placeholder="조치 내용을 입력해주세요."></textarea>
             </label>
           `
-          : html``
-      }
+        : html``}
 
       <div class="button-container">
-        ${
-          state === 'CREATED'
-            ? html`<mwc-button raised @click=${() => this._processOoc('REVIEWED')}
-                >${i18next.t('button.reviewed')}</mwc-button
-              >`
-            : state === 'REVIEWED'
-            ? html`<mwc-button raised @click=${() => this._processOoc('CORRECTED')}
-                >${i18next.t('button.corrected')}</mwc-button
-              >`
-            : html``
-        }
+        ${state === 'CREATED'
+          ? html`<mwc-button raised @click=${() => this._processOoc('REVIEWED')}
+              >${i18next.t('button.reviewed')}</mwc-button
+            >`
+          : state === 'REVIEWED'
+          ? html`<mwc-button raised @click=${() => this._processOoc('CORRECTED')}
+              >${i18next.t('button.corrected')}</mwc-button
+            >`
+          : html``}
       </div>
     `
   }
@@ -142,7 +134,7 @@ class DataOocView extends localize(i18next)(LitElement) {
           }
         `,
         variables: {
-          id: this.dataOoc.dataSet.id
+          id: this.dataOoc?.dataSet?.id
         }
       })
 
@@ -151,7 +143,7 @@ class DataOocView extends localize(i18next)(LitElement) {
   }
 
   async _processOoc(state) {
-    const commentTextArea = this.renderRoot.querySelector('textarea')
+    const commentTextArea = this.commentTextArea
     const comment = commentTextArea && commentTextArea.value
     if (!comment || !comment.trim()) {
       commentTextArea.focus()
@@ -172,7 +164,7 @@ class DataOocView extends localize(i18next)(LitElement) {
         }
       `,
       variables: {
-        id: this.dataOoc.id,
+        id: this.dataOoc?.id,
         patch
       }
     })
@@ -184,5 +176,3 @@ class DataOocView extends localize(i18next)(LitElement) {
     }
   }
 }
-
-window.customElements.define('data-ooc-view', DataOocView)

package/client/pages/data-report/{data-report-embed-page.js → data-report-embed-page.ts}

@@ -6,41 +6,34 @@ import '@operato/data-grist'
 import '@things-factory/form-ui'
 
 import { css, html } from 'lit'
+import { customElement, property, query, state } from 'lit/decorators.js'
 
+import { PageView } from '@operato/shell'
 import { i18next, localize } from '@operato/i18n'
 import { CommonButtonStyles, ScrollbarStyles } from '@operato/styles'
-import { PageView } from '@things-factory/shell'
-import { encodeUrlParams, getCookie } from '@things-factory/utils'
+import { encodeUrlParams } from '@operato/utils'
 
-class DataReportEmbedPage extends localize(i18next)(PageView) {
-  static get properties() {
-    return {
-      _grnNo: String,
-      _status: String,
-      resourceId: String,
-      params: Object
-    }
-  }
+@customElement('data-report-embed-page')
+export class DataReportEmbedPage extends localize(i18next)(PageView) {
+  static styles = [
+    ScrollbarStyles,
+    css`
+      :host {
+        display: flex;
+        flex-direction: column;
+        padding: 0;
+      }
 
-  static get styles() {
-    return [
-      ScrollbarStyles,
-      css`
-        :host {
-          display: flex;
-          flex-direction: column;
-          padding: 0;
-        }
+      #container {
+        flex: 1;
+        padding: 0;
+        margin: 0;
+        border: 0;
+      }
+    `
+  ]
 
-        #container {
-          flex: 1;
-          padding: 0;
-          margin: 0;
-          border: 0;
-        }
-      `
-    ]
-  }
+  @query('iframe') iframe!: HTMLIFrameElement
 
   get context() {
     const filters = [
@@ -55,7 +48,7 @@ class DataReportEmbedPage extends localize(i18next)(PageView) {
       {
         title: i18next.t('button.print'),
         action: () => {
-          this.renderRoot.querySelector('iframe').contentWindow.print()
+          this.iframe.contentWindow?.print()
         },
         ...CommonButtonStyles.print
       }
@@ -76,7 +69,7 @@ class DataReportEmbedPage extends localize(i18next)(PageView) {
         }}
         ?url-params-sensitive=${this.active}
       ></ox-filters-form-base>
-      <iframe id="container" frameborder="0" style="border:0"></iframe>
+      <iframe frameborder="0" style="border:0"></iframe>
     `
   }
 
@@ -110,8 +103,6 @@ class DataReportEmbedPage extends localize(i18next)(PageView) {
 
     const encodedUrlParams = encodeUrlParams(urlParams)
 
-    this.shadowRoot.querySelector('#container').src = `/data-report/${reportType}/?${encodedUrlParams}`
+    this.iframe.src = `/data-report/${reportType}/?${encodedUrlParams}`
   }
 }
-
-window.customElements.define('data-report-embed-page', DataReportEmbedPage)

package/client/pages/data-report/{data-report-list-page.js → data-report-list-page.ts}

@@ -3,17 +3,20 @@ import '@operato/board/ox-board-viewer.js'
 
 import gql from 'graphql-tag'
 import { css, html } from 'lit'
+import { customElement, property, query, state } from 'lit/decorators.js'
 import { connect } from 'pwa-helpers/connect-mixin'
 
-import { getRenderer } from '@operato/data-grist'
+import { getEditor, getRenderer, ColumnConfig, DataGrist, FetchOption, SortersControl } from '@operato/data-grist'
 import { OxDataUseCase } from '@operato/dataset'
 import { client } from '@operato/graphql'
 import { i18next, localize } from '@operato/i18n'
 import { openPopup } from '@operato/layout'
 import { navigate, PageView, store } from '@operato/shell'
 import { CommonGristStyles, ScrollbarStyles } from '@operato/styles'
+import { OxPopup } from '@operato/popup'
+import { encodeUrlParams } from '@operato/utils'
+
 import { provider } from '@things-factory/board-ui'
-import { encodeUrlParams } from '@things-factory/utils'
 
 const USECASE_OPTIONS = () => {
   return ['', ...OxDataUseCase.getUseCaseNames()].map(name => {
@@ -62,6 +65,9 @@ const showMonitorView = (columns, data, column, record, rowIndex) => {
       // navigate(`board-viewer/${monitorView}?interactive=true&title=${title}`)
       break
 
+    case 'custom-element':
+      break
+
     case 'page':
       navigate(monitorView)
       break
@@ -73,8 +79,8 @@ const showMonitorView = (columns, data, column, record, rowIndex) => {
 }
 
 const showReportView = (columns, data, column, record, rowIndex) => {
-  const { id:datasetId, dataKeySet, name, reportType, reportView, reportTemplate } = record
-  const { id:dataKeySetId } = dataKeySet || { id: '' }
+  const { id: datasetId, dataKeySet, name, reportType, reportView, reportTemplate } = record
+  const { id: dataKeySetId } = dataKeySet || { id: '' }
   const title = `${name} - ${i18next.t('title.data-report-view')}`
 
   switch (reportType) {
@@ -89,55 +95,63 @@ const showReportView = (columns, data, column, record, rowIndex) => {
     case 'embed':
       break
 
+    case 'custom-element':
+      break
+
     case 'page':
       break
 
     case 'external':
       window.open(reportView, '_blank')
       break
-    
+
     case 'jasper':
     case 'shiny':
       const encodedUrlParams = encodeUrlParams({ datasetId, dataKeySetId, reportType, reportView, reportTemplate })
       navigate(`/data-report-samples/?${encodedUrlParams}`)
       break
-    
+
     default:
       break
   }
 }
 
+@customElement('data-report-list-page')
 export class DataReportListPage extends connect(store)(localize(i18next)(PageView)) {
-  static get properties() {
-    return {
-      active: String,
-      gristConfig: Object,
-      filters: Object,
-      sorters: Object,
-      mode: String
-    }
-  }
+  static styles = [
+    ScrollbarStyles,
+    CommonGristStyles,
+    css`
+      :host {
+        display: flex;
 
-  static get styles() {
-    return [
-      ScrollbarStyles,
-      CommonGristStyles,
-      css`
-        :host {
-          display: flex;
+        width: 100%;
 
-          width: 100%;
+        --grid-record-emphasized-background-color: red;
+        --grid-record-emphasized-color: yellow;
+      }
+    `
+  ]
 
-          --grid-record-emphasized-background-color: red;
-          --grid-record-emphasized-color: yellow;
-        }
-      `
-    ]
-  }
+  @state() gristConfig: any
+  @state() mode: 'CARD' | 'GRID' | 'LIST' = 'CARD'
+  @query('ox-grist') private grist!: DataGrist
+  @query('#sorter-control') private sortersControl!: OxPopup
 
   get context() {
     return {
-      title: i18next.t('title.data-report list'),
+      search: {
+        handler: (search: string) => {
+          this.grist.searchText = search
+        },
+        placeholder: i18next.t('title.data-report list'),
+        value: this.grist.searchText
+      },
+      filter: {
+        handler: () => {
+          this.grist.toggleHeadroom()
+        }
+      },
       help: 'dataset/data-report-list'
     }
   }
@@ -149,13 +163,12 @@ export class DataReportListPage extends connect(store)(localize(i18next)(PageVie
       <ox-grist
         .mode=${mode}
         .config=${this.gristConfig}
-        .filters=${this.filters}
-        .orders=${this.orders}
         .fetchHandler=${this.fetchHandler.bind(this)}
+        ?url-params-sensitive=${this.active}
       >
         <div slot="headroom">
           <div id="filters">
-            <ox-filters-form autofocus></ox-filters-form>
+            <ox-filters-form autofocus without-search></ox-filters-form>
           </div>
 
           <div id="sorters">
@@ -163,7 +176,7 @@ export class DataReportListPage extends connect(store)(localize(i18next)(PageVie
             <mwc-icon
               @click=${e => {
                 const target = e.currentTarget
-                this.renderRoot.querySelector('#sorter-control').open({
+                this.sortersControl.open({
                   right: 0,
                   top: target.offsetTop + target.offsetHeight
                 })
@@ -179,10 +192,6 @@ export class DataReportListPage extends connect(store)(localize(i18next)(PageVie
     `
   }
 
-  get grist() {
-    return this.renderRoot.querySelector('ox-grist')
-  }
-
   async pageInitialized(lifecycle) {
     this.gristConfig = {
       list: {
@@ -275,8 +284,7 @@ export class DataReportListPage extends connect(store)(localize(i18next)(PageVie
           record: {
             editable: false
           },
-          width: 80,
-          label: true
+          width: 80
         },
         {
           type: 'resource-object',
@@ -358,7 +366,7 @@ export class DataReportListPage extends connect(store)(localize(i18next)(PageVie
     }
   }
 
-  async fetchHandler({ page, limit, sortings = [], filters = [] }) {
+  async fetchHandler({ page, limit, sortings = [], filters = [] }: FetchOption) {
     const response = await client.query({
       query: gql`
         query ($filters: [Filter!], $pagination: Pagination, $sortings: [Sorting!]) {
@@ -430,5 +438,3 @@ export class DataReportListPage extends connect(store)(localize(i18next)(PageVie
     }
   }
 }
-
-window.customElements.define('data-report-list-page', DataReportListPage)

package/client/pages/data-report/{data-report-samples-page.js → data-report-samples-page.ts}

@@ -6,46 +6,41 @@ import '@operato/data-grist'
 
 import gql from 'graphql-tag'
 import { css, html } from 'lit'
+import { customElement, property, query, state } from 'lit/decorators.js'
 import { connect } from 'pwa-helpers/connect-mixin'
 
 import { client } from '@operato/graphql'
 import { i18next, localize } from '@operato/i18n'
 import { PageView, store } from '@operato/shell'
 import { ScrollbarStyles } from '@operato/styles'
+import { encodeUrlParams } from '@operato/utils'
+import { FetchOption } from '@operato/data-grist'
 
-import { encodeUrlParams } from '@things-factory/utils'
-
+@customElement('data-report-samples-page')
 export class DataReportSamplesPage extends connect(store)(localize(i18next)(PageView)) {
-  static get properties() {
-    return {
-      dataKeySetId: String,
-      dataKeySet: Object,
-      active: String
-    }
-  }
+  static styles = [
+    ScrollbarStyles,
+    css`
+      :host {
+        display: flex;
+        flex-direction: column;
+        padding: 0;
+      }
 
-  static get styles() {
-    return [
-      ScrollbarStyles,
-      css`
-        :host {
-          display: flex;
-          flex-direction: column;
-          padding: 0;
-        }
+      #container {
+        flex: 1;
+        padding: 0;
+        margin: 0;
+        border: 0;
+      }
+    `
+  ]
 
-        #container {
-          flex: 1;
-          padding: 0;
-          margin: 0;
-          border: 0;
-        }
-      `
-    ]
-  }
+  @state() dataKeySetId?: string
+  @state() dataKeySet: any
+  @query('iframe') container!: HTMLIFrameElement
 
   get context() {
-
     const today = new Date().toISOString().split('T')[0]
 
     const filters = [
@@ -82,12 +77,7 @@ export class DataReportSamplesPage extends connect(store)(localize(i18next)(Page
 
   render() {
     // clear if pre-loaded
-    const container = this.shadowRoot.querySelector('#container')
-    if (container) {
-      container.src = ""
-      // @TODO: Clear filters
-      /** */
-    }
+    this.container.src = ''
 
     return html`
       <ox-filters-form-base
@@ -98,7 +88,8 @@ export class DataReportSamplesPage extends connect(store)(localize(i18next)(Page
         }}
         ?url-params-sensitive=${this.active}
       ></ox-filters-form-base>
-      <iframe id="container"></iframe>
+
+      <iframe></iframe>
     `
   }
 
@@ -132,7 +123,7 @@ export class DataReportSamplesPage extends connect(store)(localize(i18next)(Page
     const encodedUrlParams = encodeUrlParams(urlParams)
 
     const reportUrl = `/data-report/${urlParams.reportType}/`
-    this.shadowRoot.querySelector('#container').src = `${reportUrl}?${encodedUrlParams}`
+    this.container.src = `${reportUrl}?${encodedUrlParams}`
   }
 
   pageUpdated(changes, lifecycle) {
@@ -143,14 +134,12 @@ export class DataReportSamplesPage extends connect(store)(localize(i18next)(Page
     }
   }
 
-  async fetchHandler({ page, limit, sortings = [], filters = [] }) {
-
-  }
+  async fetchHandler({ page, limit, sortings = [], filters = [] }: FetchOption) {}
 
   async updated(changes) {
     if (changes.has('dataKeySetId')) {
       if (!this.dataKeySetId) {
-        this.dataKeySet  = null
+        this.dataKeySet = null
         return
       }
 
@@ -180,7 +169,4 @@ export class DataReportSamplesPage extends connect(store)(localize(i18next)(Page
       this.dataKeySet = response.data.dataKeySet
     }
   }
-
 }
-
-window.customElements.define('data-report-samples-page', DataReportSamplesPage)