@things-factory/reference-app 7.0.1-alpha.4 → 7.0.1-alpha.41

package/_index.html

@@ -52,6 +52,7 @@
     <!-- Performance tip: hint to the browser to start the handshake for the fonts site -->
     <link rel="preconnect" href="https://fonts.gstatic.com/" crossorigin />
     <link href="/node_modules/@material-design-icons/font/index.css" rel="stylesheet" />
+    <link href="/node_modules/material-symbols/index.css" rel="stylesheet" />
 
     <!-- Add any global styles for body, document, etc. -->
     <style>

package/client/bootstrap.js

@@ -77,32 +77,11 @@ export default async function bootstrap() {
   })
   updateMenuTemplate(getMenuTemplate())
 
-  /* add top-menu app-tool */
-  // store.dispatch({
-  //   type: APPEND_APP_TOOL,
-  //   replace: 'title-bar',
-  //   tool: {
-  //     name: 'top-menu-bar',
-  //     template: html` <top-menu-bar></top-menu-bar> `,
-  //     position: TOOL_POSITION.CENTER
-  //   }
-  // })
-
-  /* add top-menu app-tool */
-  // store.dispatch({
-  //   type: APPEND_APP_TOOL,
-  //   tool: {
-  //     name: 'domain-switch',
-  //     template: html` <domain-switch rounded-corner dark></domain-switch> `,
-  //     position: TOOL_POSITION.REAR
-  //   }
-  // })
-
   /* add setting morenda */
   store.dispatch({
     type: ADD_MORENDA,
     morenda: {
-      icon: html` <mwc-icon>settings</mwc-icon> `,
+      icon: html` <md-icon>settings</md-icon> `,
       name: html` <ox-i18n msgid="label.setting"></ox-i18n> `,
       action: () => {
         navigate('setting')
@@ -111,13 +90,11 @@ export default async function bootstrap() {
   })
 
   /* add addon-menu management page morenda */
-  if (
-    await hasPrivilege({ privilege: 'mutation', category: 'menu', domainOwnerGranted: true, superUserGranted: true })
-  ) {
+  if (await hasPrivilege({ privilege: 'mutation', category: 'menu', domainOwnerGranted: true, superUserGranted: true })) {
     store.dispatch({
       type: ADD_MORENDA,
       morenda: {
-        icon: html` <mwc-icon>view_list</mwc-icon> `,
+        icon: html` <md-icon>view_list</md-icon> `,
         name: html` <ox-i18n msgid="text.addon-menu management"></ox-i18n> `,
         action: () => {
           navigate('addon-menu-setting')
@@ -133,7 +110,7 @@ export default async function bootstrap() {
     store.dispatch({
       type: ADD_MORENDA,
       morenda: {
-        icon: html` <mwc-icon>vpn_key</mwc-icon> `,
+        icon: html` <md-icon>vpn_key</md-icon> `,
         name: html` <ox-i18n msgid="text.oauth2-clients"></ox-i18n> `,
         action: () => {
           navigate('oauth2-clients')
@@ -146,7 +123,7 @@ export default async function bootstrap() {
     store.dispatch({
       type: ADD_MORENDA,
       morenda: {
-        icon: html` <mwc-icon>font_download</mwc-icon> `,
+        icon: html` <md-icon>font_download</md-icon> `,
         name: html` <ox-i18n msgid="menu.fonts"></ox-i18n> `,
         action: () => {
           navigate('font-list')
@@ -157,7 +134,7 @@ export default async function bootstrap() {
     store.dispatch({
       type: ADD_MORENDA,
       morenda: {
-        icon: html` <mwc-icon>attachment</mwc-icon> `,
+        icon: html` <md-icon>attachment</md-icon> `,
         name: html` <ox-i18n msgid="menu.attachments"></ox-i18n> `,
         action: () => {
           navigate('attachment-list')
@@ -168,7 +145,7 @@ export default async function bootstrap() {
     store.dispatch({
       type: ADD_MORENDA,
       morenda: {
-        icon: html` <mwc-icon>dvr</mwc-icon> `,
+        icon: html` <md-icon>dvr</md-icon> `,
         name: html` <ox-i18n msgid="menu.board-list"></ox-i18n> `,
         action: () => {
           navigate('board-list')
@@ -179,7 +156,7 @@ export default async function bootstrap() {
     store.dispatch({
       type: ADD_MORENDA,
       morenda: {
-        icon: html` <mwc-icon>airplay</mwc-icon> `,
+        icon: html` <md-icon>airplay</md-icon> `,
         name: html` <ox-i18n msgid="menu.play-groups"></ox-i18n> `,
         action: () => {
           navigate('play-list')
@@ -192,7 +169,7 @@ export default async function bootstrap() {
     store.dispatch({
       type: ADD_MORENDA,
       morenda: {
-        icon: html` <mwc-icon>device_hub</mwc-icon> `,
+        icon: html` <md-icon>device_hub</md-icon> `,
         name: html` <ox-i18n msgid="text.connection"></ox-i18n> `,
         action: () => {
           navigate('connection')
@@ -203,7 +180,7 @@ export default async function bootstrap() {
     store.dispatch({
       type: ADD_MORENDA,
       morenda: {
-        icon: html` <mwc-icon>format_list_numbered</mwc-icon> `,
+        icon: html` <md-icon>format_list_numbered</md-icon> `,
         name: html` <ox-i18n msgid="text.scenario"></ox-i18n> `,
         action: () => {
           navigate('scenario')
@@ -214,7 +191,7 @@ export default async function bootstrap() {
     store.dispatch({
       type: ADD_MORENDA,
       morenda: {
-        icon: html` <mwc-icon>hub</mwc-icon> `,
+        icon: html` <md-icon>hub</md-icon> `,
         name: html` <ox-i18n msgid="text.integration analysis"></ox-i18n>&nbsp;(beta)`,
         action: () => {
           navigate('integration-analysis')
@@ -227,7 +204,7 @@ export default async function bootstrap() {
     store.dispatch({
       type: ADD_MORENDA,
       morenda: {
-        icon: html` <mwc-icon>app_registration</mwc-icon> `,
+        icon: html` <md-icon>app_registration</md-icon> `,
         name: html` <ox-i18n msgid="title.state-register"></ox-i18n> `,
         action: () => {
           navigate('state-register-page')
@@ -241,7 +218,7 @@ export default async function bootstrap() {
       store.dispatch({
         type: ADD_MORENDA,
         morenda: {
-          icon: html` <mwc-icon>pending_actions</mwc-icon> `,
+          icon: html` <md-icon>pending_actions</md-icon> `,
           name: html` <ox-i18n msgid="title.work-shift"></ox-i18n> `,
           action: () => {
             navigate('work-shift')
@@ -253,7 +230,7 @@ export default async function bootstrap() {
     store.dispatch({
       type: ADD_MORENDA,
       morenda: {
-        icon: html` <mwc-icon>extension</mwc-icon> `,
+        icon: html` <md-icon>extension</md-icon> `,
         name: html` <ox-i18n msgid="text.api-sandbox"></ox-i18n> `,
         action: () => {
           navigate('api-swagger')
@@ -264,7 +241,7 @@ export default async function bootstrap() {
     // store.dispatch({
     //   type: ADD_MORENDA,
     //   morenda: {
-    //     icon: html` <mwc-icon>help</mwc-icon> `,
+    //     icon: html` <md-icon>help</md-icon> `,
     //     name: html` <ox-i18n msgid="text.help"></ox-i18n> `,
     //     action: () => {
     //       navigate('help')
@@ -295,14 +272,14 @@ export default async function bootstrap() {
     tool: {
       name: 'ocr-toggler',
       template: html`
-        <mwc-icon
+        <md-icon
           @click=${e => {
             toggleOverlay('ocr-viewpart', {
               backdrop: false
             })
           }}
           >camera_enhance
-        </mwc-icon>
+        </md-icon>
       `,
       position: TOOL_POSITION.REAR
     }

package/client/editors/id-selector.js

@@ -2,9 +2,10 @@ import '@operato/data-grist'
 
 import { css, html, LitElement } from 'lit'
 
-import { MultiColumnFormStyles } from '@things-factory/form-ui'
-import { i18next } from '@things-factory/i18n-base'
-import { isMobileDevice } from '@things-factory/utils'
+import { MultiColumnFormStyles } from '@operato/form'
+import { i18next } from '@operato/i18n'
+import { isMobileDevice } from '@operato/utils'
+import { ButtonContainerStyles } from '@operato/styles'
 
 export class IdSelector extends LitElement {
   static get properties() {
@@ -21,6 +22,7 @@ export class IdSelector extends LitElement {
 
   static get styles() {
     return [
+      ButtonContainerStyles,
       MultiColumnFormStyles,
       css`
         :host {
@@ -46,11 +48,6 @@ export class IdSelector extends LitElement {
         #filters > * {
           padding: var(--padding-default) var(--padding-wide);
         }
-
-        .button-container {
-          display: flex;
-          margin-left: auto;
-        }
       `
     ]
   }
@@ -63,20 +60,15 @@ export class IdSelector extends LitElement {
 
   render() {
     return html`
-      <ox-grist
-        .mode=${isMobileDevice() ? 'LIST' : 'GRID'}
-        .config=${this.config}
-        .fetchHandler=${this.fetchHandler.bind(this)}
-        .selectedRecords=${this.selectedRecords}
-      >
+      <ox-grist .mode=${isMobileDevice() ? 'LIST' : 'GRID'} .config=${this.config} .fetchHandler=${this.fetchHandler.bind(this)} .selectedRecords=${this.selectedRecords}>
         <div id="filters" slot="headroom">
           <ox-filters-form autofocus></ox-filters-form>
         </div>
       </ox-grist>
 
       <div class="button-container">
-        <mwc-button @click=${this.oncancel.bind(this)}>${i18next.t('button.cancel')}</mwc-button>
-        <mwc-button @click=${this.onconfirm.bind(this)}>${i18next.t('button.confirm')}</mwc-button>
+        <button @click=${this.oncancel.bind(this)}><md-icon>cancel</md-icon>${i18next.t('button.cancel')}</button>
+        <button @click=${this.onconfirm.bind(this)}><md-icon>check</md-icon>${i18next.t('button.confirm')}</button>
       </div>
     `
   }

package/client/pages/data-set/data-set-importer.js

@@ -1,3 +1,4 @@
+import '@material/web/icon/icon.js'
 import '@operato/data-grist'
 
 import gql from 'graphql-tag'
@@ -6,6 +7,7 @@ import { css, html, LitElement } from 'lit'
 import { client } from '@operato/graphql'
 import { i18next } from '@operato/i18n'
 import { isMobileDevice } from '@operato/utils'
+import { ButtonContainerStyles } from '@operato/styles'
 
 export class DataSetImporter extends LitElement {
   static get properties() {
@@ -56,30 +58,16 @@ export class DataSetImporter extends LitElement {
         ox-grist {
           flex: 1;
         }
-
-        .button-container {
-          display: flex;
-          margin-left: auto;
-          padding: var(--padding-default);
-        }
-
-        mwc-button {
-          margin-left: var(--margin-default);
-        }
       `
     ]
   }
 
   render() {
     return html`
-      <ox-grist
-        .mode=${isMobileDevice() ? 'LIST' : 'GRID'}
-        .config=${this.columns}
-        .data="${{ records: this.scenarios }}"
-      ></ox-grist>
+      <ox-grist .mode=${isMobileDevice() ? 'LIST' : 'GRID'} .config=${this.columns} .data="${{ records: this.scenarios }}"></ox-grist>
 
       <div class="button-container">
-        <mwc-button raised @click="${this.save.bind(this)}">${i18next.t('button.save')}</mwc-button>
+        <button @click="${this.save.bind(this)}"><md-icon>save</md-icon>${i18next.t('button.save')}</button>
       </div>
     `
   }

package/client/pages/data-set/data-set-list-page.js

@@ -177,12 +177,7 @@ export class DataSetListPage extends connect(store)(localize(i18next)(PageView))
     const mode = this.mode || (isMobileDevice() ? 'LIST' : 'GRID')
 
     return html`
-      <ox-grist
-        .mode=${mode}
-        .config=${this.gristConfig}
-        .fetchHandler=${this.fetchHandler.bind(this)}
-        ?url-params-sensitive=${this.active}
-      >
+      <ox-grist .mode=${mode} .config=${this.gristConfig} .fetchHandler=${this.fetchHandler.bind(this)} ?url-params-sensitive=${this.active}>
         <div slot="headroom">
           <div id="filters">
             <ox-filters-form autofocus></ox-filters-form>
@@ -190,7 +185,7 @@ export class DataSetListPage extends connect(store)(localize(i18next)(PageView))
 
           <div id="sorters">
             Sort
-            <mwc-icon
+            <md-icon
               @click=${e => {
                 const target = e.currentTarget
                 this.renderRoot.querySelector('#sorter-control').open({
@@ -198,7 +193,7 @@ export class DataSetListPage extends connect(store)(localize(i18next)(PageView))
                   top: target.offsetTop + target.offsetHeight
                 })
               }}
-              >expand_more</mwc-icon
+              >expand_more</md-icon
             >
             <ox-popup id="sorter-control">
               <ox-sorters-control> </ox-sorters-control>
@@ -206,9 +201,10 @@ export class DataSetListPage extends connect(store)(localize(i18next)(PageView))
           </div>
 
           <div id="modes">
-            <mwc-icon @click=${() => (this.mode = 'GRID')} ?active=${mode == 'GRID'}>grid_on</mwc-icon>
-            <mwc-icon @click=${() => (this.mode = 'LIST')} ?active=${mode == 'LIST'}>format_list_bulleted</mwc-icon>
-            <mwc-icon @click=${() => (this.mode = 'CARD')} ?active=${mode == 'CARD'}>apps</mwc-icon>
+            <md-icon @click=${() => (this.mode = 'GRID')} ?active=${mode == 'GRID'}>grid_on</md-icon>
+            <md-icon @click=${() => (this.mode = 'LIST')} ?active=${mode == 'LIST'}>format_list_bulleted</md-icon>
+            <md-icon @click=${() => (this.mode = 'CARD')} ?active=${mode == 'CARD'}>apps</md-icon>
+          </div>
           </div>
         </div>
       </ox-grist>
@@ -255,16 +251,11 @@ export class DataSetListPage extends connect(store)(localize(i18next)(PageView))
           title: 'data entry mockup form',
           handlers: {
             click: (columns, data, column, record, rowIndex) => {
-              openPopup(
-                html`
-                  <data-entry-mockup-form .dataSet=${record} style="background-color: white;"></data-entry-mockup-form>
-                `,
-                {
-                  backdrop: true,
-                  size: 'large',
-                  title: i18next.t('title.data-entry-form')
-                }
-              )
+              openPopup(html` <data-entry-mockup-form .dataSet=${record} style="background-color: white;"></data-entry-mockup-form> `, {
+                backdrop: true,
+                size: 'large',
+                title: i18next.t('title.data-entry-form')
+              })
             }
           }
         },
@@ -745,9 +736,7 @@ export class DataSetListPage extends connect(store)(localize(i18next)(PageView))
         ...this.grist._config.columns
           .filter(column => column.type !== 'gutter' && column.record !== undefined && column.imex !== undefined)
           .reduce((record, column) => {
-            record[column.imex.key] = column.imex.key
-              .split('.')
-              .reduce((obj, key) => (obj && obj[key] !== 'undefined' ? obj[key] : undefined), item)
+            record[column.imex.key] = column.imex.key.split('.').reduce((obj, key) => (obj && obj[key] !== 'undefined' ? obj[key] : undefined), item)
             return record
           }, {})
       }

package/client/pages/grist-filters.ts

@@ -67,7 +67,7 @@ class GristFilters extends localize(i18next)(PageView) {
 
           <div id="sorters">
             Sort
-            <mwc-icon
+            <md-icon
               @click=${e => {
                 const target = e.currentTarget
                 this.sorterControl.open({
@@ -75,7 +75,7 @@ class GristFilters extends localize(i18next)(PageView) {
                   top: target.offsetTop + target.offsetHeight
                 })
               }}
-              >expand_more</mwc-icon
+              >expand_more</md-icon
             >
             <ox-popup id="sorter-control">
               <ox-sorters-control> </ox-sorters-control>
@@ -83,8 +83,8 @@ class GristFilters extends localize(i18next)(PageView) {
           </div>
 
           <div id="modes">
-            <mwc-icon @click=${() => (this.mode = 'GRID')} ?active=${mode == 'GRID'}>grid_on</mwc-icon>
-            <mwc-icon @click=${() => (this.mode = 'CARD')} ?active=${mode == 'CARD'}>apps</mwc-icon>
+            <md-icon @click=${() => (this.mode = 'GRID')} ?active=${mode == 'GRID'}>grid_on</md-icon>
+            <md-icon @click=${() => (this.mode = 'CARD')} ?active=${mode == 'CARD'}>apps</md-icon>
           </div>
         </div>
       </ox-grist>
@@ -126,8 +126,7 @@ class GristFilters extends localize(i18next)(PageView) {
             rate: Math.round(Math.random() * 100),
             dynamicType: ['text', 'email', 'checkbox', 'color', 'progress', 'barcode'][idx % 5],
             dynamicValue: ['abcdefghijkl', 'heartyoh@hatiolab.com', 'true', 'orange', '50', '1234567890'][idx % 5],
-            homepage:
-              idx % 2 ? `http://hatiolab.com/${start + idx + 1}` : `http://deadpool.hatiolab.com/${start + idx + 1}`,
+            homepage: idx % 2 ? `http://hatiolab.com/${start + idx + 1}` : `http://deadpool.hatiolab.com/${start + idx + 1}`,
             createdAt: Date.now(),
             updatedAt: Date.now()
           }

package/client/pages/grist-fulltext-search.ts

@@ -298,7 +298,7 @@ class GristFulltextSearch extends localize(i18next)(PageView) {
 
           <div id="sorters">
             Sort
-            <mwc-icon
+            <md-icon
               @click=${e => {
                 const target = e.currentTarget
                 this.sorterControl.open({
@@ -306,7 +306,7 @@ class GristFulltextSearch extends localize(i18next)(PageView) {
                   top: target.offsetTop + target.offsetHeight
                 })
               }}
-              >expand_more</mwc-icon
+              >expand_more</md-icon
             >
             <ox-popup id="sorter-control">
               <ox-sorters-control> </ox-sorters-control>
@@ -314,8 +314,8 @@ class GristFulltextSearch extends localize(i18next)(PageView) {
           </div>
 
           <div id="modes">
-            <mwc-icon @click=${() => (this.mode = 'GRID')} ?active=${mode == 'GRID'}>grid_on</mwc-icon>
-            <mwc-icon @click=${() => (this.mode = 'CARD')} ?active=${mode == 'CARD'}>apps</mwc-icon>
+            <md-icon @click=${() => (this.mode = 'GRID')} ?active=${mode == 'GRID'}>grid_on</md-icon>
+            <md-icon @click=${() => (this.mode = 'CARD')} ?active=${mode == 'CARD'}>apps</md-icon>
           </div>
         </div>
       </ox-grist>
@@ -357,8 +357,7 @@ class GristFulltextSearch extends localize(i18next)(PageView) {
             rate: Math.round(Math.random() * 100),
             dynamicType: ['text', 'email', 'checkbox', 'color', 'progress', 'barcode'][idx % 5],
             dynamicValue: ['abcdefghijkl', 'heartyoh@hatiolab.com', 'true', 'orange', '50', '1234567890'][idx % 5],
-            homepage:
-              idx % 2 ? `http://hatiolab.com/${start + idx + 1}` : `http://deadpool.hatiolab.com/${start + idx + 1}`,
+            homepage: idx % 2 ? `http://hatiolab.com/${start + idx + 1}` : `http://deadpool.hatiolab.com/${start + idx + 1}`,
             createdAt: Date.now(),
             updatedAt: Date.now()
           }

package/client/pages/grist-mode-page.js

@@ -85,9 +85,9 @@ class GristModePage extends localize(i18next)(PageView) {
         <div slot="headroom" id="headroom">
           <h1>HEAD ROOM AREA</h1>
           <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 id="tailer">
             <span
@@ -210,8 +210,7 @@ class GristModePage extends localize(i18next)(PageView) {
             rate: Math.round(Math.random() * 100),
             dynamicType: ['text', 'email', 'checkbox', 'color', 'progress', 'barcode'][idx % 5],
             dynamicValue: ['abcdefghijkl', 'heartyoh@hatiolab.com', 'true', 'orange', '50', '1234567890'][idx % 5],
-            homepage:
-              idx % 2 ? `http://hatiolab.com/${start + idx + 1}` : `http://deadpool.hatiolab.com/${start + idx + 1}`,
+            homepage: idx % 2 ? `http://hatiolab.com/${start + idx + 1}` : `http://deadpool.hatiolab.com/${start + idx + 1}`,
             json5: {
               abc: 'abc',
               value: 123
@@ -419,8 +418,7 @@ class GristModePage extends localize(i18next)(PageView) {
         },
         classifier: function (record, rowIndex) {
           const rate = record['rate']
-          const emphasized =
-            rate < 10 ? ['black', 'white'] : rate < 25 ? ['yellow', 'blue'] : rate < 40 ? ['cyan', 'red'] : undefined
+          const emphasized = rate < 10 ? ['black', 'white'] : rate < 25 ? ['yellow', 'blue'] : rate < 40 ? ['cyan', 'red'] : undefined
           return {
             emphasized
           }

package/client/pages/operation/operation-master.js

@@ -11,7 +11,7 @@ import { i18next, localize } from '@operato/i18n'
 import { openPopup } from '@operato/layout'
 import { CommonButtonStyles, CommonGristStyles } from '@operato/styles'
 import { isMobileDevice } from '@operato/utils'
-import { CustomAlert, PageView } from '@things-factory/shell'
+import { CustomAlert, PageView } from '@operato/shell'
 
 import { createOperation, deleteOperations, fetchOperations, saveOperations } from './operation-api'
 
@@ -46,6 +46,7 @@ class OperationMaster extends localize(i18next)(PageView) {
   constructor() {
     super()
     this.mode = isMobileDevice() ? 'CARD' : 'GRID'
+    this.importHandler = this.defaultImportHandler
   }
 
   render() {
@@ -60,7 +61,7 @@ class OperationMaster extends localize(i18next)(PageView) {
 
           <div id="sorters">
             Sort
-            <mwc-icon
+            <md-icon
               @click=${e => {
                 const target = e.currentTarget
                 this.renderRoot.querySelector('#sorter-control').open({
@@ -68,7 +69,7 @@ class OperationMaster extends localize(i18next)(PageView) {
                   top: target.offsetTop + target.offsetHeight
                 })
               }}
-              >expand_more</mwc-icon
+              >expand_more</md-icon
             >
             <ox-popup id="sorter-control">
               <ox-sorters-control> </ox-sorters-control>
@@ -76,8 +77,8 @@ class OperationMaster extends localize(i18next)(PageView) {
           </div>
 
           <div id="modes">
-            <mwc-icon @click=${() => (this.mode = 'GRID')} ?active=${mode == 'GRID'}>grid_on</mwc-icon>
-            <mwc-icon @click=${() => (this.mode = 'CARD')} ?active=${mode == 'CARD'}>apps</mwc-icon>
+            <md-icon @click=${() => (this.mode = 'GRID')} ?active=${mode == 'GRID'}>grid_on</md-icon>
+            <md-icon @click=${() => (this.mode = 'CARD')} ?active=${mode == 'CARD'}>apps</md-icon>
           </div>
 
           <ox-record-creator id="add" .callback=${this.operationCreationCallback.bind(this)}>
@@ -292,7 +293,7 @@ class OperationMaster extends localize(i18next)(PageView) {
     }
   }
 
-  async importHandler(patches) {
+  async defaultImportHandler(patches) {
     const response = await saveOperations(patches)
 
     if (!response.errors) {
@@ -417,9 +418,7 @@ class OperationMaster extends localize(i18next)(PageView) {
         ...this._columns
           .filter(column => column.type !== 'gutter' && column.record !== undefined && column.imex !== undefined)
           .reduce((record, column) => {
-            record[column.imex.key] = column.imex.key
-              .split('.')
-              .reduce((obj, key) => (obj && obj[key] !== 'undefined' ? obj[key] : undefined), item)
+            record[column.imex.key] = column.imex.key.split('.').reduce((obj, key) => (obj && obj[key] !== 'undefined' ? obj[key] : undefined), item)
             return record
           }, {})
       }

package/client/pages/pending-job-page.js

@@ -1,5 +1,6 @@
 import '@material/mwc-linear-progress'
 import '@operato/help/ox-help-icon.js'
+import '@operato/oops/ox-oops-progress.js'
 
 import gql from 'graphql-tag'
 import { css, html } from 'lit'
@@ -48,19 +49,19 @@ class PendingJobPage extends connect(store)(PageView) {
 
     return html`
       <p>
-        오래걸리는 서버작업을 수행할 때는 진행과정을 표현해주는 것이 사용자 경험에 도움을 준다. 이를 위해 Things Factory
-        프레임워크에서는 oops-progress<ox-help-icon topic="components/oops-progress"></ox-help-icon> 라는 컴포넌트를
-        제공한다.
+        오래걸리는 서버작업을 수행할 때는 진행과정을 표현해주는 것이 사용자 경험에 도움을 준다. 이를 위해 Things Factory 프레임워크에서는 ox-oops-progress<ox-help-icon
+          topic="components/ox-oops-progress"
+        ></ox-help-icon>
+        라는 컴포넌트를 제공한다.
       </p>
       <p>
-        아래 'Start' 버튼을 클릭하면, 서버에 작업을 요청하고 그 진행율이 화면에 표현된다. 진행중에는 버튼은 'Stop'
-        버튼으로 변경되면, 진행중에 버튼을 누르면 진행율 표현이 멈추게 된다. 진행이 완료되면, 'Start' 버튼으로 변경된다.
-        주의할 점은, 'Stop' 버튼으로 서버의 작업을 변경하는 것은 아니고, 진행율 구독만을 정지한다는 것이다. 서버
+        아래 'Start' 버튼을 클릭하면, 서버에 작업을 요청하고 그 진행율이 화면에 표현된다. 진행중에는 버튼은 'Stop' 버튼으로 변경되면, 진행중에 버튼을 누르면 진행율 표현이
+        멈추게 된다. 진행이 완료되면, 'Start' 버튼으로 변경된다. 주의할 점은, 'Stop' 버튼으로 서버의 작업을 변경하는 것은 아니고, 진행율 구독만을 정지한다는 것이다. 서버
         작업까지 정지하고자하면, 별도의 mutation을 구현해서 Stop시에 호출해주어야 한다.
       </p>
 
       <section>
-        <oops-progress
+        <ox-oops-progress
           @progress=${e => {
             this.progress = e.detail
           }}
@@ -73,14 +74,14 @@ class PendingJobPage extends connect(store)(PageView) {
             <mwc-linear-progress .progress=${progress / 100}></mwc-linear-progress>
             <span>Progress : ${progress} % (${message})</span>
           </div>
-        </oops-progress>
+        </ox-oops-progress>
         <div id="result"></div>
       </section>
     `
   }
 
   get oopsProgress() {
-    return this.shadowRoot.querySelector('oops-progress')
+    return this.shadowRoot.querySelector('ox-oops-progress')
   }
 
   updated(changes) {