@5minds/node-red-dashboard-2-processcube-dynamic-table 1.0.8 → 1.1.1

package/nodes/dynamic-table.html

@@ -6,7 +6,7 @@
 
         RED.nodes.registerType('dynamic-table', {
             category: 'ProcessCube UI',
-            color: '#00aed7',
+            color: '#4a7eb0',
             defaults: {
                 name: { value: "" },
                 tableName: { value: ""},

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@5minds/node-red-dashboard-2-processcube-dynamic-table",
-    "version": "1.0.8",
+    "version": "1.1.1",
     "description": "A ui component for showing dynamic Data with actions in a table",
     "keywords": [
         "processcube",
@@ -56,7 +56,7 @@
         "eslint-plugin-import": "^2.29.0",
         "eslint-plugin-n": "^16.3.1",
         "eslint-plugin-vue": "^9.18.1",
-        "vite": "^5.0.13",
+        "vite": "^5.3.2",
         "vite-plugin-css-injected-by-js": "^3.3.0"
     },
     "engines": {

package/resources/dynamic-table.umd.js

@@ -1,2 +1,3 @@
-(function(){"use strict";try{if(typeof document<"u"){var a=document.createElement("style");a.appendChild(document.createTextNode("h1[data-v-a5302b6c]{margin-bottom:10px}h2[data-v-a5302b6c]{margin-top:1.5rem;margin-bottom:.75rem}h3[data-v-a5302b6c]{margin-top:1rem}p[data-v-a5302b6c]{margin-bottom:5px}ul li[data-v-a5302b6c]{list-style-type:circle;list-style-position:inside;margin-left:15px}pre[data-v-a5302b6c]{padding:12px;margin:12px;background-color:#eee}code[data-v-a5302b6c]{font-size:.825rem;color:#ae0000}input[data-v-a5302b6c]{padding:12px;margin:12px;background-color:#eee}.task-div[data-v-a5302b6c]{padding:8px;margin:16px;border:solid;border-radius:4px;border-color:#303030}.action-button-container[data-v-a5302b6c]{width:100%;display:flex;justify-content:center}")),document.head.appendChild(a)}}catch(t){console.error("vite-plugin-css-injected-by-js",t)}})();
-(function(i,a){typeof exports=="object"&&typeof module<"u"?a(exports,require("vuex"),require("vue")):typeof define=="function"&&define.amd?define(["exports","vuex","vue"],a):(i=typeof globalThis<"u"?globalThis:i||self,a(i["dynamic-table"]={},i.vuex,i.Vue))})(this,function(i,a,t){"use strict";const m=(e,n)=>{const o=e.__vccOpts||e;for(const[d,s]of n)o[d]=s;return o},f={name:"DynamicTable",inject:["$socket"],props:{id:{type:String,required:!0},props:{type:Object,default:()=>({})},state:{type:Object,default:()=>({enabled:!1,visible:!1})}},data(){return{search:"",actions:[],tasks:[],headers:[]}},mounted(){this.$socket.on("widget-load:"+this.id,e=>{this.initialize(e),this.$store.commit("data/bind",{widgetId:this.id,columns:e})}),this.$socket.on("msg-input:"+this.id,e=>{this.initialize(e),this.$store.commit("data/bind",{widgetId:this.id,columns:e})}),this.$socket.emit("widget-load",this.id)},unmounted(){var e,n;(e=this.$socket)==null||e.off("widget-load"+this.id),(n=this.$socket)==null||n.off("msg-input:"+this.id)},methods:{send(e,n){let o=[];o[n]=e,this.$socket.emit("widget-action",this.id,o)},actionFn(e,n){this.send({payload:n},this.actions.findIndex(o=>o.label===e.label))},initialize(e){this.tasks=e,this.actions=this.props.options,this.headers=this.props.columns.map(n=>({title:n.label,key:n.value})),this.headers.push({title:"Action",align:"center",key:"actions"})},conditionCheck(e,n){if(e=="")return!0;try{return new Function("row",`return ${e}`)(n)}catch(o){return console.error("Error evaluating condition:",o),!1}}}};function _(e,n,o,d,s,c){const k=t.resolveComponent("v-toolbar-title"),x=t.resolveComponent("v-spacer"),y=t.resolveComponent("v-text-field"),u=t.resolveComponent("v-toolbar"),p=t.resolveComponent("v-btn"),h=t.resolveComponent("v-container"),C=t.resolveComponent("v-data-table");return t.openBlock(),t.createBlock(C,{headers:s.headers,items:s.tasks,search:s.search,class:"full-width-table"},{top:t.withCtx(()=>[t.createVNode(u,{flat:"",class:"py-2"},{default:t.withCtx(()=>[t.createVNode(k,null,{default:t.withCtx(()=>[t.createTextVNode(t.toDisplayString(o.props.tableName),1)]),_:1}),t.createVNode(x),t.createVNode(y,{class:"mx-3",modelValue:s.search,"onUpdate:modelValue":n[0]||(n[0]=r=>s.search=r),label:"Search","prepend-inner-icon":"mdi-magnify",variant:"outlined","hide-details":"","single-line":""},null,8,["modelValue"])]),_:1})]),"item.actions":t.withCtx(({item:r})=>[t.createVNode(h,{class:"action-button-container"},{default:t.withCtx(()=>[(t.openBlock(!0),t.createElementBlock(t.Fragment,null,t.renderList(s.actions,(l,g)=>(t.openBlock(),t.createBlock(h,{style:{padding:"0px",display:"inline",width:"fit-content",margin:"0px"}},{default:t.withCtx(()=>[c.conditionCheck(l.condition,r)?(t.openBlock(),t.createBlock(p,{style:{margin:"0px 2px"},key:g,size:"small",onClick:w=>c.actionFn(l,r)},{default:t.withCtx(()=>[t.createTextVNode(t.toDisplayString(l.label),1)]),_:2},1032,["onClick"])):t.createCommentVNode("",!0)]),_:2},1024))),256))]),_:2},1024)]),"no-data":t.withCtx(()=>[t.createVNode(p,{color:"primary",onClick:c.initialize},{default:t.withCtx(()=>[t.createTextVNode(" Reload ")]),_:1},8,["onClick"])]),_:1},8,["headers","items","search"])}const b=m(f,[["render",_],["__scopeId","data-v-a5302b6c"]]);i.DynamicTable=b,Object.defineProperty(i,Symbol.toStringTag,{value:"Module"})});
+(function(){"use strict";try{if(typeof document<"u"){var e=document.createElement("style");e.appendChild(document.createTextNode("h1[data-v-6cc3f2ce]{margin-bottom:10px}h2[data-v-6cc3f2ce]{margin-top:1.5rem;margin-bottom:.75rem}h3[data-v-6cc3f2ce]{margin-top:1rem}p[data-v-6cc3f2ce]{margin-bottom:5px}ul li[data-v-6cc3f2ce]{list-style-type:circle;list-style-position:inside;margin-left:15px}pre[data-v-6cc3f2ce]{padding:12px;margin:12px;background-color:#eee}code[data-v-6cc3f2ce]{font-size:.825rem;color:#ae0000}input[data-v-6cc3f2ce]{padding:12px;margin:12px;background-color:#eee}.task-div[data-v-6cc3f2ce]{padding:8px;margin:16px;border:solid;border-radius:4px;border-color:#303030}.action-button-container[data-v-6cc3f2ce]{width:100%;display:flex;justify-content:center}")),document.head.appendChild(e)}}catch(c){console.error("vite-plugin-css-injected-by-js",c)}})();
+(function(i,a){typeof exports=="object"&&typeof module<"u"?a(exports,require("vuex"),require("vue")):typeof define=="function"&&define.amd?define(["exports","vuex","vue"],a):(i=typeof globalThis<"u"?globalThis:i||self,a(i["dynamic-table"]={},i.vuex,i.Vue))})(this,function(i,a,e){"use strict";const h=(t,n)=>{const o=t.__vccOpts||t;for(const[l,s]of n)o[l]=s;return o},m={name:"DynamicTable",inject:["$socket"],props:{id:{type:String,required:!0},props:{type:Object,default:()=>({})},state:{type:Object,default:()=>({enabled:!0,visible:!0})}},data(){return{search:"",actions:[],tasks:[],headers:[]}},mounted(){this.$socket.on("widget-load:"+this.id,t=>{this.initialize(t),this.$store.commit("data/bind",{widgetId:this.id,columns:t})}),this.$socket.on("msg-input:"+this.id,t=>{this.initialize(t),this.$store.commit("data/bind",{widgetId:this.id,columns:t})}),this.$socket.emit("widget-load",this.id)},unmounted(){var t,n;(t=this.$socket)==null||t.off("widget-load"+this.id),(n=this.$socket)==null||n.off("msg-input:"+this.id)},methods:{send(t,n){const o=[];o[n]=t,this.$socket.emit("widget-action",this.id,o)},actionFn(t,n){this.send({payload:n},this.actions.findIndex(o=>o.label===t.label))},initialize(t){this.tasks=t,this.actions=this.props.options,this.headers=this.props.columns.map(n=>({title:n.label,key:n.value})),this.headers.push({title:"Action",align:"center",key:"actions"})},conditionCheck(t,n){if(t=="")return!0;try{return new Function("row",`return ${t}`)(n)}catch(o){return console.error("Error evaluating condition:",o),!1}}}};function f(t,n,o,l,s,d){const u=e.resolveComponent("v-text-field"),b=e.resolveComponent("v-toolbar"),k=e.resolveComponent("v-btn"),p=e.resolveComponent("v-container"),x=e.resolveComponent("v-alert"),y=e.resolveComponent("v-data-table");return e.openBlock(),e.createBlock(y,{headers:s.headers,items:s.tasks,search:s.search,class:"full-width-table"},{top:e.withCtx(()=>[e.createVNode(b,{flat:"",class:"py-2"},{default:e.withCtx(()=>[e.createVNode(u,{class:"mx-3",modelValue:s.search,"onUpdate:modelValue":n[0]||(n[0]=r=>s.search=r),label:"Search","prepend-inner-icon":"mdi-magnify",variant:"outlined","hide-details":"","single-line":""},null,8,["modelValue"])]),_:1})]),"item.actions":e.withCtx(({item:r})=>[e.createVNode(p,{class:"action-button-container"},{default:e.withCtx(()=>[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(s.actions,(c,g)=>(e.openBlock(),e.createBlock(p,{style:{padding:"0px",display:"inline",width:"fit-content",margin:"0px"}},{default:e.withCtx(()=>[d.conditionCheck(c.condition,r)?(e.openBlock(),e.createBlock(k,{style:{margin:"0px 2px"},key:g,size:"small",onClick:C=>d.actionFn(c,r)},{default:e.withCtx(()=>[e.createTextVNode(e.toDisplayString(c.label),1)]),_:2},1032,["onClick"])):e.createCommentVNode("v-if",!0)]),_:2},1024))),256))]),_:2},1024)]),"no-data":e.withCtx(()=>[e.createVNode(x,{text:"No data"})]),_:1},8,["headers","items","search"])}const _=h(m,[["render",f],["__scopeId","data-v-6cc3f2ce"],["__file","/Users/moellenbeck/projects/5minds/reps/node-red-dashboard-2-processcube-usertask-table/ui/components/DynamicTable.vue"]]);i.DynamicTable=_,Object.defineProperty(i,Symbol.toStringTag,{value:"Module"})});
+//# sourceMappingURL=dynamic-table.umd.js.map

package/resources/dynamic-table.umd.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"dynamic-table.umd.js","sources":["../ui/components/DynamicTable.vue"],"sourcesContent":["<template>\n  <v-data-table\n    :headers=\"headers\"\n    :items=\"tasks\"\n    :search=\"search\"\n    class=\"full-width-table\"\n  >\n    <template v-slot:top>\n      <v-toolbar flat class=\"py-2\">\n        <v-text-field\n          class=\"mx-3\"\n          v-model=\"search\"\n          label=\"Search\"\n          prepend-inner-icon=\"mdi-magnify\"\n          variant=\"outlined\"\n          hide-details\n          single-line\n        ></v-text-field>\n      </v-toolbar>\n    </template>\n    <template v-slot:item.actions=\"{ item }\">\n      <v-container class=\"action-button-container\">\n        <v-container\n          v-for=\"(action, index) in actions\"\n          style=\"padding: 0px; display: inline; width: fit-content; margin: 0px\"\n        >\n          <v-btn\n            style=\"margin: 0px 2px\"\n            v-if=\"conditionCheck(action.condition, item)\"\n            :key=\"index\"\n            size=\"small\"\n            @click=\"actionFn(action, item)\"\n          >\n            {{ action.label }}\n          </v-btn>\n        </v-container>\n      </v-container>\n    </template>\n    <template v-slot:no-data>\n      <v-alert text=\"No data\"></v-alert>\n    </template>\n  </v-data-table>\n</template>\n\n<script>\nimport { mapState } from \"vuex\";\n\nexport default {\n  name: \"DynamicTable\",\n  inject: [\"$socket\"],\n  props: {\n    /* do not remove entries from this - Dashboard's Layout Manager's will pass this data to your component */\n    id: { type: String, required: true },\n    props: { type: Object, default: () => ({}) },\n    /* state: { type: Object, default: () => ({ enabled: false, visible: false }) } // DEFAULT */\n    state: { type: Object, default: () => ({ enabled: true, visible: true }) },\n  },\n  data() {\n    return {\n      search: \"\",\n      actions: [],\n      tasks: [],\n      headers: [],\n    };\n  },\n  mounted() {\n    this.$socket.on(\"widget-load:\" + this.id, (columns) => {\n      this.initialize(columns);\n      this.$store.commit(\"data/bind\", {\n        widgetId: this.id,\n        columns,\n      });\n    });\n    this.$socket.on(\"msg-input:\" + this.id, (columns) => {\n      this.initialize(columns);\n      this.$store.commit(\"data/bind\", {\n        widgetId: this.id,\n        columns,\n      });\n    });\n    this.$socket.emit(\"widget-load\", this.id);\n  },\n  unmounted() {\n    this.$socket?.off(\"widget-load\" + this.id);\n    this.$socket?.off(\"msg-input:\" + this.id);\n  },\n  methods: {\n    send(msg, index) {\n      const msgArr = [];\n      msgArr[index] = msg;\n      this.$socket.emit(\"widget-action\", this.id, msgArr);\n    },\n    actionFn(action, item) {\n      this.send(\n        { payload: item },\n        this.actions.findIndex((element) => element.label === action.label)\n      );\n    },\n    initialize(tasks) {\n      this.tasks = tasks;\n      this.actions = this.props.options;\n\n      this.headers = this.props.columns.map((item) => ({\n        title: item.label,\n        key: item.value,\n      }));\n\n      this.headers.push({ title: \"Action\", align: \"center\", key: \"actions\" });\n    },\n    conditionCheck(condition, row) {\n      if (condition == \"\") return true;\n      try {\n        const func = new Function(\"row\", `return ${condition}`);\n        return func(row);\n      } catch (error) {\n        console.error(\"Error evaluating condition:\", error);\n        return false;\n      }\n    },\n  },\n};\n</script>\n\n<style scoped>\n/* CSS is auto scoped, but using named classes is still recommended */\n@import \"../stylesheets/dynamic-table.css\";\n</style>\n"],"names":["_sfc_main","columns","_a","_b","msg","index","msgArr","action","item","element","tasks","condition","row","error","_createBlock","_component_v_data_table","$data","_createVNode","_component_v_toolbar","_withCtx","_component_v_text_field","_cache","$event","_component_v_container","_openBlock","_createElementBlock","_Fragment","_renderList","$options","_component_v_btn","_createTextVNode","_toDisplayString","_createCommentVNode","_component_v_alert"],"mappings":"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"}

package/ui/components/DynamicTable.vue

@@ -1,127 +1,124 @@
 <template>
-    <v-data-table
-      :headers="headers"
-      :items="tasks"
-      :search="search"
-      class="full-width-table"
-    >
-        <template v-slot:top>
-            <v-toolbar
-                flat
-                class="py-2"
-                >
-                <v-toolbar-title>{{ props.tableName }}</v-toolbar-title>
-                <v-spacer></v-spacer>
-                <v-text-field
-                    class="mx-3"
-                    v-model="search"
-                    label="Search"
-                    prepend-inner-icon="mdi-magnify"
-                    variant="outlined"
-                    hide-details
-                    single-line
-                    ></v-text-field>
-            </v-toolbar>
-        </template>
-      <template v-slot:item.actions="{ item }">
-        <v-container  class="action-button-container">
-            <v-container v-for="(action, index) in actions" style="padding: 0px; display: inline; width: fit-content; margin: 0px">
-                <v-btn
-                style="margin: 0px 2px;"
-                v-if="conditionCheck(action.condition, item)"
-                :key="index"
-                size="small"
-                @click="actionFn(action, item)"
-                >
-                {{ action.label }}
-                </v-btn>
-            </v-container>
+  <v-data-table
+    :headers="headers"
+    :items="tasks"
+    :search="search"
+    class="full-width-table"
+  >
+    <template v-slot:top>
+      <v-toolbar flat class="py-2">
+        <v-text-field
+          class="mx-3"
+          v-model="search"
+          label="Search"
+          prepend-inner-icon="mdi-magnify"
+          variant="outlined"
+          hide-details
+          single-line
+        ></v-text-field>
+      </v-toolbar>
+    </template>
+    <template v-slot:item.actions="{ item }">
+      <v-container class="action-button-container">
+        <v-container
+          v-for="(action, index) in actions"
+          style="padding: 0px; display: inline; width: fit-content; margin: 0px"
+        >
+          <v-btn
+            style="margin: 0px 2px"
+            v-if="conditionCheck(action.condition, item)"
+            :key="index"
+            size="small"
+            @click="actionFn(action, item)"
+          >
+            {{ action.label }}
+          </v-btn>
         </v-container>
-      </template>
-      <template v-slot:no-data>
-            <v-btn
-              color="primary"
-              @click="initialize"
-            >
-              Reload
-            </v-btn>
-          </template>
-    </v-data-table>
+      </v-container>
+    </template>
+    <template v-slot:no-data>
+      <v-alert text="No data"></v-alert>
+    </template>
+  </v-data-table>
 </template>
 
 <script>
-import { mapState } from 'vuex'
+import { mapState } from "vuex";
 
 export default {
-    name: 'DynamicTable',
-    inject: ['$socket'],
-    props: {
-        /* do not remove entries from this - Dashboard's Layout Manager's will pass this data to your component */
-        id: { type: String, required: true },
-        props: { type: Object, default: () => ({}) },
-        state: { type: Object, default: () => ({ enabled: false, visible: false }) }
+  name: "DynamicTable",
+  inject: ["$socket"],
+  props: {
+    /* do not remove entries from this - Dashboard's Layout Manager's will pass this data to your component */
+    id: { type: String, required: true },
+    props: { type: Object, default: () => ({}) },
+    /* state: { type: Object, default: () => ({ enabled: false, visible: false }) } // DEFAULT */
+    state: { type: Object, default: () => ({ enabled: true, visible: true }) },
+  },
+  data() {
+    return {
+      search: "",
+      actions: [],
+      tasks: [],
+      headers: [],
+    };
+  },
+  mounted() {
+    this.$socket.on("widget-load:" + this.id, (columns) => {
+      this.initialize(columns);
+      this.$store.commit("data/bind", {
+        widgetId: this.id,
+        columns,
+      });
+    });
+    this.$socket.on("msg-input:" + this.id, (columns) => {
+      this.initialize(columns);
+      this.$store.commit("data/bind", {
+        widgetId: this.id,
+        columns,
+      });
+    });
+    this.$socket.emit("widget-load", this.id);
+  },
+  unmounted() {
+    this.$socket?.off("widget-load" + this.id);
+    this.$socket?.off("msg-input:" + this.id);
+  },
+  methods: {
+    send(msg, index) {
+      const msgArr = [];
+      msgArr[index] = msg;
+      this.$socket.emit("widget-action", this.id, msgArr);
     },
-    data () {
-        return {
-            search: '',
-            actions: [],
-            tasks: [],
-            headers: [],
-        }
+    actionFn(action, item) {
+      this.send(
+        { payload: item },
+        this.actions.findIndex((element) => element.label === action.label)
+      );
     },
-    mounted () {
-        this.$socket.on('widget-load:' + this.id, (columns) => {
-            this.initialize(columns)
-            this.$store.commit('data/bind', {
-                widgetId: this.id,
-                columns
-            })
-        })
-        this.$socket.on('msg-input:' + this.id, (columns) => {
-          this.initialize(columns)
-            this.$store.commit('data/bind', {
-                widgetId: this.id,
-                columns
-            })
-        })
-        this.$socket.emit('widget-load', this.id)
-    },
-    unmounted () {
-        this.$socket?.off('widget-load' + this.id)
-        this.$socket?.off('msg-input:' + this.id)
-    },
-    methods: {
-        send (msg, index) {
-            const msgArr = []
-            msgArr[index] = msg
-            this.$socket.emit('widget-action', this.id, msgArr)
-        },
-        actionFn (action, item) {
-            this.send({ payload: item}, this.actions.findIndex(element => element.label === action.label))
-        },
-        initialize (tasks) {
-            this.tasks = tasks
-            this.actions = this.props.options
+    initialize(tasks) {
+      this.tasks = tasks;
+      this.actions = this.props.options;
 
-            this.headers = this.props.columns.map(item => ({
-              title: item.label,
-              key: item.value
-            }))
+      this.headers = this.props.columns.map((item) => ({
+        title: item.label,
+        key: item.value,
+      }));
 
-            this.headers.push({ title: 'Action', align: 'center', key: 'actions'})
-        },
-        conditionCheck(condition, row) {
-            if (condition == "") return true
-            try {
-                const func = new Function('row', `return ${condition}`);
-                return func(row);
-            } catch (error) {
-                console.error('Error evaluating condition:', error);
-                return false;
-            }
-        }
-    }
-}
+      this.headers.push({ title: "Action", align: "center", key: "actions" });
+    },
+    conditionCheck(condition, row) {
+      if (condition == "") return true;
+      try {
+        const func = new Function("row", `return ${condition}`);
+        return func(row);
+      } catch (error) {
+        console.error("Error evaluating condition:", error);
+        return false;
+      }
+    },
+  },
+};
 </script>
 
 <style scoped>