@5minds/node-red-dashboard-2-processcube-ui-page-navigation 1.1.0-develop-13ceaf-m624nwgx → 1.1.0-develop-dafb5d-m6252yg2

package/nodes/ui-page-navigation.html

@@ -7,7 +7,7 @@
                 ui: { type: 'ui-base', value: '', required: true },
                 name: { value: '' },
                 event: { value: '', required: true },
-                page: { value: '', reqiured: false },
+                pageName: { value: '', reqiured: false },
             },
             inputs: 0,
             outputs: 1,
@@ -48,8 +48,8 @@
         </select>
     </div>
     <div class="form-row">
-        <label for="node-input-page"><i class="fa fa-tag"></i> Page</label>
-        <input type="text" id="node-input-page" placeholder="ID of Page" />
+        <label for="node-input-pageName"><i class="fa fa-tag"></i> Page name</label>
+        <input type="text" id="node-input-pageName" placeholder="Name of Page" />
     </div>
 </script>
 

package/nodes/ui-page-navigation.js

@@ -1,7 +1,7 @@
 module.exports = function (RED) {
     function UIPageNavigation(config) {
         // TODO: find a correct way to implement this. Only god knows why this is necessary and works
-        const pageName = config.page;
+        const pageName = config.pageName;
         //config.page = '';
 
         function addConnectionCredentials(RED, msg, conn, config) {

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@5minds/node-red-dashboard-2-processcube-ui-page-navigation",
-    "version": "1.1.0-develop-13ceaf-m624nwgx",
+    "version": "1.1.0-develop-dafb5d-m6252yg2",
     "description": "A node to handle the navigation between pages in the Node-RED Dashboard",
     "keywords": [
         "node-red",

package/resources/ui-page-navigation.umd.js

@@ -1 +1 @@
-(function(i,a){typeof exports=="object"&&typeof module<"u"?a(exports,require("vuex")):typeof define=="function"&&define.amd?define(["exports","vuex"],a):(i=typeof globalThis<"u"?globalThis:i||self,a(i["ui-page-navigation"]={},i.vuex))})(this,function(i,a){"use strict";const o={name:"DBUIEvent",inject:["$socket","$dataTracker"],props:{id:{type:String,required:!0},props:{type:Object,default:()=>({})}},data(){return{page:null}},computed:{...a.mapState("ui",["pages"])},watch:{"$route.meta.id":{handler(t,e){console.log(`route changed old: ${e} new:${t}`);const s=this.createPayload(this.pages[e]);this.$socket.emit("ui-event",this.id,{topic:"$pageleave",payload:s});const r=this.createPayload(this.pages[t]);this.$socket.emit("ui-event",this.id,{topic:"$pageview",payload:r})}}},created(){this.$dataTracker(this.id);const t=this.props.page,e=this.pages[this.$route.meta.id];console.log(`created. pageFromConfig: ${t} currentPage: ${e.name}`),t===e.name&&(console.log("created page "),this.pageview())},unmounted(){this.pageleave()},methods:{pageview(){this.trigger("$pageview")},pageleave(){this.trigger("$pageleave")},trigger(t){const e=this.createPayload(this.pages[this.$route.meta.id]);this.$socket.emit("ui-event",this.id,{topic:t,payload:e})},createPayload(t){let e={...t};return e._groups=e._users,delete e._users,{pageForPayload:e,query:this.$route.query}}}};i.UIPageNavigation=o,Object.defineProperty(i,Symbol.toStringTag,{value:"Module"})});
+(function(i,a){typeof exports=="object"&&typeof module<"u"?a(exports,require("vuex")):typeof define=="function"&&define.amd?define(["exports","vuex"],a):(i=typeof globalThis<"u"?globalThis:i||self,a(i["ui-page-navigation"]={},i.vuex))})(this,function(i,a){"use strict";const o={name:"DBUIEvent",inject:["$socket","$dataTracker"],props:{id:{type:String,required:!0},props:{type:Object,default:()=>({})}},data(){return{pageName:null}},computed:{...a.mapState("ui",["pages"])},watch:{"$route.meta.id":{handler(t,e){console.log(`route changed old: ${e} new:${t}`);const s=this.createPayload(this.pages[e]);this.$socket.emit("ui-event",this.id,{topic:"$pageleave",payload:s});const r=this.createPayload(this.pages[t]);this.$socket.emit("ui-event",this.id,{topic:"$pageview",payload:r})}}},created(){this.$dataTracker(this.id);const t=this.props.pageName,e=this.pages[this.$route.meta.id];console.log(`created. pageFromConfig: ${t} currentPage: ${e.name}`),t===e.name&&(console.log("created page "),this.pageview())},unmounted(){this.pageleave()},methods:{pageview(){this.trigger("$pageview")},pageleave(){this.trigger("$pageleave")},trigger(t){const e=this.createPayload(this.pages[this.$route.meta.id]);this.$socket.emit("ui-event",this.id,{topic:t,payload:e})},createPayload(t){console.log(JSON.stringify(t));let e={...t};return e._groups=e._users,delete e._users,{pageForPayload:e,query:this.$route.query}}}};i.UIPageNavigation=o,Object.defineProperty(i,Symbol.toStringTag,{value:"Module"})});

package/ui/components/UIPageNavigation.vue

@@ -10,7 +10,7 @@ export default {
     },
     data() {
         return {
-            page: null,
+            pageName: null,
         };
     },
     computed: {
@@ -42,7 +42,7 @@ export default {
         // can't do this in setup as we have custom onInput function
         this.$dataTracker(this.id);
 
-        const pageFromConfig = this.props.page;
+        const pageFromConfig = this.props.pageName;
         const currentPage = this.pages[this.$route.meta.id];
 
         console.log(`created. pageFromConfig: ${pageFromConfig} currentPage: ${currentPage.name}`);
@@ -69,6 +69,7 @@ export default {
             });
         },
         createPayload(page) {
+            console.log(JSON.stringify(page));
             let pageForPayload = { ...page };
             // re-map _users > _groups for better data readability
             pageForPayload._groups = pageForPayload._users;