@operato/board 7.0.2 → 7.0.7

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@operato/board",
-  "version": "7.0.2",
+  "version": "7.0.7",
   "description": "Webcomponent for board following open-wc recommendations",
   "author": "heartyoh",
   "main": "dist/src/index.js",
@@ -95,18 +95,18 @@
   "dependencies": {
     "@material/web": "^1.5.0",
     "@open-wc/scoped-elements": "^2.1.3",
-    "@operato/app": "^7.0.0",
-    "@operato/data-grist": "^7.0.0",
-    "@operato/font": "^7.0.0",
-    "@operato/graphql": "^7.0.0",
+    "@operato/app": "^7.0.5",
+    "@operato/data-grist": "^7.0.5",
+    "@operato/font": "^7.0.5",
+    "@operato/graphql": "^7.0.5",
     "@operato/i18n": "^7.0.0",
-    "@operato/input": "^7.0.0",
-    "@operato/layout": "^7.0.0",
+    "@operato/input": "^7.0.5",
+    "@operato/layout": "^7.0.5",
     "@operato/markdown": "^7.0.0",
-    "@operato/popup": "^7.0.0",
-    "@operato/property-editor": "^7.0.0",
+    "@operato/popup": "^7.0.5",
+    "@operato/property-editor": "^7.0.5",
     "@operato/styles": "^7.0.0",
-    "@operato/utils": "^7.0.0",
+    "@operato/utils": "^7.0.5",
     "@polymer/paper-dropdown-menu": "^3.2.0",
     "@types/file-saver": "^2.0.4",
     "@types/sortablejs": "^1.10.7",
@@ -114,7 +114,8 @@
     "file-saver": "^2.0.5",
     "lit": "^3.1.2",
     "lodash-es": "^4.17.21",
-    "sortablejs": "^1.15.2"
+    "sortablejs": "^1.15.2",
+    "xlsx": "^0.18.5"
   },
   "devDependencies": {
     "@custom-elements-manifest/analyzer": "^0.9.2",
@@ -154,5 +155,5 @@
       "prettier --write"
     ]
   },
-  "gitHead": "6bafa495cc1f04279fce8e706e1fe54c9d11c829"
+  "gitHead": "6f41df0039b072b17fa4c9af28869a3f5469750d"
 }

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

@@ -76,6 +76,7 @@ export class PropertyEventTap extends LitElement {
         <option value="partial-value-set">set partial value to target component value</option>
         <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>
       </select>
 
       <label> <ox-i18n msgid="label.target">target</ox-i18n> </label>
@@ -129,11 +130,11 @@ export class PropertyEventTap extends LitElement {
             }
           `
         : SETS_ACTION.indexOf(action) != -1
-        ? html`
-            <label> <ox-i18n msgid="label.value">value</ox-i18n> </label>
-            <ox-input-data value-key="value" .value=${value} custom-editor fullwidth></ox-input-data>
-          `
-        : html``}
+          ? html`
+              <label> <ox-i18n msgid="label.value">value</ox-i18n> </label>
+              <ox-input-data value-key="value" .value=${value} custom-editor fullwidth></ox-input-data>
+            `
+          : html``}
     `
   }
 
@@ -142,6 +143,8 @@ export class PropertyEventTap extends LitElement {
       case 'link-open':
       case 'link-move':
         return 'http://www.hatiolab.com/'
+      case 'export-data':
+        return 'abc.xlsx'
       default:
         return ''
     }
@@ -184,6 +187,7 @@ export class PropertyEventTap extends LitElement {
         return this.scenarios
       case 'goto-playlist':
         return this.playlists
+      case 'export-data':
       default:
         return []
     }

package/src/ox-board-viewer.ts

@@ -4,6 +4,7 @@ import './ox-board-component-info.js'
 
 import { css, html, LitElement, PropertyValues } from 'lit'
 import { customElement, property, query, state } from 'lit/decorators.js'
+import * as XLSX from 'xlsx'
 
 import { Component, create, ReferenceProvider, SCENE_MODE } from '@hatiolab/things-scene'
 import { isIOS, togglefullscreen } from '@operato/utils'
@@ -390,6 +391,7 @@ export class BoardViewer extends LitElement {
     this._scene.on('route-page', this.onRoutePage, this)
     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('click', this.onClickEvent, this)
   }
 
@@ -402,6 +404,7 @@ export class BoardViewer extends LitElement {
     scene.off('route-page', this.onRoutePage, this)
     scene.off('start-scenario', this.onStartScenario, this)
     scene.off('run-scenario', this.onRunScenario, this)
+    scene.off('export-data', this.onExportData, this)
     scene.off('click', this.onClickEvent, this)
   }
 
@@ -556,6 +559,19 @@ export class BoardViewer extends LitElement {
     }
   }
 
+  async onExportData(filename: string, value: string | number | object, component: Component) {
+    try {
+      const data = component.data
+
+      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 || 'export-data.xlsx')
+    } catch (e) {
+      console.error(e)
+    }
+  }
+
   onClickEvent(e: MouseEvent, hint: any) {
     const component = hint.origin