@5minds/node-red-dashboard-2-processcube-ui-page-navigation 1.0.4-develop-d3a01d-m61vb10s → 1.0.4-feature-4b905c-m62dcy1o

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</label>
+        <input type="text" id="node-input-pagename" placeholder="Name of Page" />
     </div>
 </script>
 

package/nodes/ui-page-navigation.js

@@ -1,8 +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;
-        config.page = '';
+        const pageName = config.pagename;
 
         function addConnectionCredentials(RED, msg, conn, config) {
             if (config.includeClientData) {
@@ -34,7 +33,6 @@ module.exports = function (RED) {
         const evts = {
             onSocket: {
                 'ui-event': function (conn, id, msg) {
-                    console.log(`ui-page-navigation topic: ${msg.topic}`);
                     if (config.event != 'any' && config.event != msg.topic) return;
                     if (pageName != '' && pageName != msg.payload.page.name) return;
                     const wNode = RED.nodes.getNode(node.id);

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@5minds/node-red-dashboard-2-processcube-ui-page-navigation",
-    "version": "1.0.4-develop-d3a01d-m61vb10s",
+    "version": "1.0.4-feature-4b905c-m62dcy1o",
     "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(t,i){typeof exports=="object"&&typeof module<"u"?i(exports,require("vuex")):typeof define=="function"&&define.amd?define(["exports","vuex"],i):(t=typeof globalThis<"u"?globalThis:t||self,i(t["ui-page-navigation"]={},t.vuex))})(this,function(t,i){"use strict";const s={name:"DBUIEvent",inject:["$socket","$dataTracker"],props:{id:{type:String,required:!0},props:{type:Object,default:()=>({})}},data(){return{page:null}},computed:{...i.mapState("ui",["pages"])},watch:{"$route.meta.id":{handler(e,a){const o=this.createPayload(this.pages[a]);this.$socket.emit("ui-event",this.id,{topic:"$pageleave",payload:o});const r=this.createPayload(this.pages[e]);this.$socket.emit("ui-event",this.id,{topic:"$pageview",payload:r})}}},created(){this.$dataTracker(this.id),this.page=this.pages[this.$route.meta.id],this.pageview()},unmounted(){this.pageleave()},methods:{pageview(){this.trigger("$pageview")},pageleave(){this.trigger("$pageleave")},trigger(e){const a=this.createPayload(this.page);this.$socket.emit("ui-event",this.id,{topic:e,payload:a})},createPayload(e){return e={...e},e._groups=e._users,delete e._users,{page:e,query:this.$route.query}}}};t.UIPageNavigation=s,Object.defineProperty(t,Symbol.toStringTag,{value:"Module"})});
+(function(t,i){typeof exports=="object"&&typeof module<"u"?i(exports,require("vuex")):typeof define=="function"&&define.amd?define(["exports","vuex"],i):(t=typeof globalThis<"u"?globalThis:t||self,i(t["ui-page-navigation"]={},t.vuex))})(this,function(t,i){"use strict";const s={name:"DBUIEvent",inject:["$socket","$dataTracker"],props:{id:{type:String,required:!0},props:{type:Object,default:()=>({})}},data(){return{page:null}},computed:{...i.mapState("ui",["pages"]),pagename(){return this.getProperty("pagename")}},watch:{"$route.meta.id":{handler(e,a){console.log(this.pagename());const o=this.createPayload(this.pages[a]);this.$socket.emit("ui-event",this.id,{topic:"$pageleave",payload:o});const n=this.createPayload(this.pages[e]);this.$socket.emit("ui-event",this.id,{topic:"$pageview",payload:n})}}},created(){this.$dataTracker(this.id),this.page=this.pages[this.$route.meta.id],this.pageview()},unmounted(){this.pageleave()},methods:{pageview(){this.trigger("$pageview")},pageleave(){this.trigger("$pageleave")},trigger(e){console.log(this.pagename());const a=this.createPayload(this.page);this.$socket.emit("ui-event",this.id,{topic:e,payload:a})},createPayload(e){return e={...e},e._groups=e._users,delete e._users,{page:e,query:this.$route.query}}}};t.UIPageNavigation=s,Object.defineProperty(t,Symbol.toStringTag,{value:"Module"})});

package/ui/components/UIPageNavigation.vue

@@ -15,10 +15,15 @@ export default {
     },
     computed: {
         ...mapState('ui', ['pages']),
+        pagename () {
+            // use the globally available "getProperty" function
+            return this.getProperty('pagename')
+        }
     },
     watch: {
         '$route.meta.id': {
             handler(val, oldVal) {
+                console.log(this.pagename());
                 // this only fire if we switch between two pages of the same layout type,
                 // the full component isn't torn down, so we can watch for changes
                 const oldMsg = this.createPayload(this.pages[oldVal]);
@@ -52,6 +57,7 @@ export default {
             this.trigger('$pageleave');
         },
         trigger(evt) {
+            console.log(this.pagename());
             const payload = this.createPayload(this.page);
             this.$socket.emit('ui-event', this.id, {
                 topic: evt,