@5minds/node-red-dashboard-2-processcube-ui-page-navigation 1.1.0-develop-98e32b-m61y7jog → 1.1.0-develop-d0ba19-m623rryu

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@5minds/node-red-dashboard-2-processcube-ui-page-navigation",
-    "version": "1.1.0-develop-98e32b-m61y7jog",
+    "version": "1.1.0-develop-d0ba19-m623rryu",
     "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,a){typeof exports=="object"&&typeof module<"u"?a(exports,require("vuex")):typeof define=="function"&&define.amd?define(["exports","vuex"],a):(t=typeof globalThis<"u"?globalThis:t||self,a(t["ui-page-navigation"]={},t.vuex))})(this,function(t,a){"use strict";const s={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(i,e){console.log(`route changed old: ${e} new:${i}`);const o=this.createPayload(this.pages[e]);this.$socket.emit("ui-event",this.id,{topic:"$pageleave",payload:o});const r=this.createPayload(this.pages[i]);this.$socket.emit("ui-event",this.id,{topic:"$pageview",payload:r})}}},created(){this.$dataTracker(this.id),this.props.page===this.pages[this.$route.meta.id]&&(console.log("created page "),this.pageview())},unmounted(){this.pageleave()},methods:{pageview(){this.trigger("$pageview")},pageleave(){this.trigger("$pageleave")},trigger(i){const e=this.createPayload(this.props.page);this.$socket.emit("ui-event",this.id,{topic:i,payload:e})},createPayload(i){let e={...i};return e._groups=e._users,delete e._users,{pageForPayload:e,query:this.$route.query}}}};t.UIPageNavigation=s,Object.defineProperty(t,Symbol.toStringTag,{value:"Module"})});

package/ui/components/UIPageNavigation.vue

@@ -38,11 +38,14 @@ export default {
         },
     },
     created() {
-        console.log('created');
+        
         // can't do this in setup as we have custom onInput function
         this.$dataTracker(this.id);
-        this.page = this.pages[this.$route.meta.id];
-        this.pageview();
+
+        if (this.props.page === this.pages[this.$route.meta.id]) {
+            console.log(`created page `);
+            this.pageview();
+        }
     },
     unmounted() {
         this.pageleave();
@@ -55,20 +58,20 @@ export default {
             this.trigger('$pageleave');
         },
         trigger(evt) {
-            const payload = this.createPayload(this.page);
+            const payload = this.createPayload(this.props.page);
             this.$socket.emit('ui-event', this.id, {
                 topic: evt,
                 payload,
             });
         },
         createPayload(page) {
-            page = { ...page };
+            let pageForPayload = { ...page };
             // re-map _users > _groups for better data readability
-            page._groups = page._users;
-            delete page._users;
+            pageForPayload._groups = pageForPayload._users;
+            delete pageForPayload._users;
             // form event data object
             return {
-                page,
+                pageForPayload,
                 query: this.$route.query,
             };
         },