@operato/board 7.0.8 → 7.0.11

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@operato/board",
-  "version": "7.0.8",
+  "version": "7.0.11",
   "description": "Webcomponent for board following open-wc recommendations",
   "author": "heartyoh",
   "main": "dist/src/index.js",
@@ -155,5 +155,5 @@
       "prettier --write"
     ]
   },
-  "gitHead": "7be3a05e3008c7c142abc2a3706eee5d44707d66"
+  "gitHead": "cbcfab84994b3bd1c2c3993703894249d9210c59"
 }

package/src/modeller/property-sidebar/effects/property-event-tap.ts

@@ -77,6 +77,7 @@ export class PropertyEventTap extends LitElement {
         <option value="start-scenario">start the given scenario</option>
         <option value="run-scenario">run the given scenario</option>
         <option value="export-data">export data</option>
+        <option value="import-data">import data</option>
       </select>
 
       <label> <ox-i18n msgid="label.target">target</ox-i18n> </label>

package/src/ox-board-component-info.ts

@@ -2,12 +2,15 @@ import '@material/web/icon/icon.js'
 import '@operato/property-editor/ox-properties-dynamic-view.js'
 import '@operato/markdown'
 
-import { css, html, LitElement } from 'lit'
+import { css, html, LitElement, nothing } from 'lit'
 import { customElement, property } from 'lit/decorators.js'
+import * as XLSX from 'xlsx'
 
 import { ScrollbarStyles } from '@operato/styles'
 import { i18next } from '@operato/i18n'
 
+const ICON_EXCEL_EXPORT = new URL('../../icons/icon-excel-export.png', import.meta.url).href
+
 @customElement('ox-board-component-info')
 export class BoardComponentInfo extends LitElement {
   static styles = [
@@ -49,6 +52,7 @@ export class BoardComponentInfo extends LitElement {
         background-color: var(--md-sys-color-surface);
         width: 100%;
         margin: auto;
+        table-layout: fixed;
       }
 
       tr {
@@ -64,11 +68,20 @@ export class BoardComponentInfo extends LitElement {
       [subTh] {
         text-align: center !important;
         font-weight: bold;
-        min-width: 60px;
+        width: 40px;
         text-transform: capitalize;
         background-color: rgba(0, 0, 0, 0.05);
       }
 
+      span.export {
+        position: absolute;
+        width: 20px;
+        height: 20px;
+        top: 4px;
+        right: 4px;
+        background: var(--url-icon-excel-export) no-repeat;
+      }
+
       a {
         text-decoration: none;
       }
@@ -83,6 +96,8 @@ export class BoardComponentInfo extends LitElement {
   connectedCallback(): void {
     super.connectedCallback()
 
+    this.style.setProperty('--url-icon-excel-export', `url(${ICON_EXCEL_EXPORT})`)
+
     document.addEventListener('mouseup', this.dragEndHandler)
     document.addEventListener('mousemove', this.dragMoveHandler)
   }
@@ -129,8 +144,11 @@ export class BoardComponentInfo extends LitElement {
           </tr>
 
           <tr>
-            <td colspan="2">
+            <td colspan="2" style="position: relative;">
               <pre>${JSON.stringify(data, null, 2)}</pre>
+              ${data && Array.isArray(data)
+                ? html`<span class="export" @tap=${() => this.exportData()}></span>`
+                : nothing}
             </td>
           </tr>
         </table>
@@ -201,4 +219,18 @@ export class BoardComponentInfo extends LitElement {
       delete this.dragStart
     }
   }
+
+  async exportData() {
+    try {
+      const { id = 'board-component', data } = this.component || {}
+      const filename = `${id}.xlsx`
+
+      const worksheet = XLSX.utils.json_to_sheet(data)
+      const workbook = XLSX.utils.book_new()
+      XLSX.utils.book_append_sheet(workbook, worksheet, 'Sheet1')
+      XLSX.writeFile(workbook, filename)
+    } catch (e) {
+      console.error(e)
+    }
+  }
 }

package/src/ox-board-viewer.ts

@@ -392,6 +392,7 @@ export class BoardViewer extends LitElement {
     this._scene.on('start-scenario', this.onStartScenario, this)
     this._scene.on('run-scenario', this.onRunScenario, this)
     this._scene.on('export-data', this.onExportData, this)
+    this._scene.on('import-data', this.onImportData, this)
     this._scene.on('click', this.onClickEvent, this)
   }
 
@@ -405,6 +406,7 @@ export class BoardViewer extends LitElement {
     scene.off('start-scenario', this.onStartScenario, this)
     scene.off('run-scenario', this.onRunScenario, this)
     scene.off('export-data', this.onExportData, this)
+    scene.off('import-data', this.onImportData, this)
     scene.off('click', this.onClickEvent, this)
   }
 
@@ -572,6 +574,42 @@ export class BoardViewer extends LitElement {
     }
   }
 
+  async onImportData(_: string, value: string | number | object, component: Component) {
+    const fileInput = document.createElement('input')
+    fileInput.type = 'file'
+    fileInput.accept = '.xlsx, .xls'
+    fileInput.style.display = 'none'
+
+    fileInput.addEventListener(
+      'change',
+      (event: Event) => {
+        const input = event.target as HTMLInputElement
+        const file = input.files?.[0]
+        if (!file) {
+          return
+        }
+
+        const reader = new FileReader()
+        reader.onload = function (event) {
+          const data = new Uint8Array(event.target?.result as ArrayBuffer)
+          const workbook = XLSX.read(data, { type: 'array' })
+
+          // 첫 번째 시트의 데이타만 가져온다.
+          const firstSheetName = workbook.SheetNames[0]
+          const worksheet = workbook.Sheets[firstSheetName]
+          component.data = XLSX.utils.sheet_to_json(worksheet)
+
+          input.remove()
+        }
+        reader.readAsArrayBuffer(file)
+      },
+      false
+    )
+
+    document.body.appendChild(fileInput)
+    fileInput.click()
+  }
+
   onClickEvent(e: MouseEvent, hint: any) {
     const component = hint.origin