@5minds/node-red-dashboard-2-processcube-dynamic-table 1.1.10 → 1.1.11
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/package.json
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
(function(){"use strict";try{if(typeof document<"u"){var
|
|
2
|
-
(function(o,r){typeof exports=="object"&&typeof module<"u"?r(exports,require("vuex"),require("vue")):typeof define=="function"&&define.amd?define(["exports","vuex","vue"],r):(o=typeof globalThis<"u"?globalThis:o||self,r(o["ui-dynamic-table"]={},o.vuex,o.Vue))})(this,function(o,r,t){"use strict";const
|
|
1
|
+
(function(){"use strict";try{if(typeof document<"u"){var e=document.createElement("style");e.appendChild(document.createTextNode("h1[data-v-cae4cb64]{margin-bottom:10px}h2[data-v-cae4cb64]{margin-top:1.5rem;margin-bottom:.75rem}h3[data-v-cae4cb64]{margin-top:1rem}p[data-v-cae4cb64]{margin-bottom:5px}ul li[data-v-cae4cb64]{list-style-type:circle;list-style-position:inside;margin-left:15px}pre[data-v-cae4cb64]{padding:12px;margin:12px;background-color:#eee}code[data-v-cae4cb64]{font-size:.825rem;color:#ae0000}input[data-v-cae4cb64]{padding:12px;margin:12px;background-color:#eee}.task-div[data-v-cae4cb64]{padding:8px;margin:16px;border:solid;border-radius:4px;border-color:#303030}.action-button-container[data-v-cae4cb64]{width:100%;display:flex;justify-content:center}")),document.head.appendChild(e)}}catch(a){console.error("vite-plugin-css-injected-by-js",a)}})();
|
|
2
|
+
(function(o,r){typeof exports=="object"&&typeof module<"u"?r(exports,require("vuex"),require("vue")):typeof define=="function"&&define.amd?define(["exports","vuex","vue"],r):(o=typeof globalThis<"u"?globalThis:o||self,r(o["ui-dynamic-table"]={},o.vuex,o.Vue))})(this,function(o,r,t){"use strict";const h=(e,n)=>{const i=e.__vccOpts||e;for(const[l,s]of n)i[l]=s;return i},m={name:"UIDynamicTable",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,e=>{this.initialize(e),this.$store.commit("data/bind",{widgetId:this.id,data:e})}),this.$socket.on("msg-input:"+this.id,e=>{this.initialize(e),this.$store.commit("data/bind",{widgetId:this.id,data: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){const i=[];i[n]=e,this.$socket.emit("widget-action",this.id,i)},actionFn(e,n){this.send({payload:n},this.actions.findIndex(i=>i.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:"Actions",align:"center",key:"actions"})},conditionCheck(e,n){if(e=="")return!0;try{return new Function("row",`return ${e}`)(n)}catch(i){return console.error("Error evaluating condition:",i),!1}}}};function f(e,n,i,l,s,d){const u=t.resolveComponent("v-text-field"),k=t.resolveComponent("v-toolbar"),x=t.resolveComponent("v-btn"),p=t.resolveComponent("v-container"),b=t.resolveComponent("v-alert"),y=t.resolveComponent("v-data-table");return t.openBlock(),t.createBlock(y,{headers:s.headers,items:s.tasks,search:s.search,class:"full-width-table"},{top:t.withCtx(()=>[t.createVNode(k,{flat:"",class:"py-2"},{default:t.withCtx(()=>[t.createVNode(u,{class:"mx-3",modelValue:s.search,"onUpdate:modelValue":n[0]||(n[0]=a=>s.search=a),label:"Search","prepend-inner-icon":"mdi-magnify",variant:"outlined","hide-details":"","single-line":""},null,8,["modelValue"])]),_:1})]),"item.actions":t.withCtx(({item:a})=>[t.createVNode(p,{class:"action-button-container"},{default:t.withCtx(()=>[(t.openBlock(!0),t.createElementBlock(t.Fragment,null,t.renderList(s.actions,(c,g)=>(t.openBlock(),t.createBlock(p,{style:{padding:"0px",display:"inline",width:"fit-content",margin:"0px"}},{default:t.withCtx(()=>[d.conditionCheck(c.condition,a)?(t.openBlock(),t.createBlock(x,{style:{margin:"0px 2px"},key:g,size:"small",onClick:C=>d.actionFn(c,a)},{default:t.withCtx(()=>[t.createTextVNode(t.toDisplayString(c.label),1)]),_:2},1032,["onClick"])):t.createCommentVNode("",!0)]),_:2},1024))),256))]),_:2},1024)]),"no-data":t.withCtx(()=>[t.createVNode(b,{text:"No Data",style:{margin:"12px"}})]),_:1},8,["headers","items","search"])}const _=h(m,[["render",f],["__scopeId","data-v-cae4cb64"]]);o.UIDynamicTable=_,Object.defineProperty(o,Symbol.toStringTag,{value:"Module"})});
|
|
@@ -1,9 +1,5 @@
|
|
|
1
1
|
<template>
|
|
2
|
-
<v-data-table
|
|
3
|
-
:headers="headers"
|
|
4
|
-
:items="tasks"
|
|
5
|
-
:search="search"
|
|
6
|
-
class="full-width-table">
|
|
2
|
+
<v-data-table :headers="headers" :items="tasks" :search="search" class="full-width-table">
|
|
7
3
|
<template v-slot:top>
|
|
8
4
|
<v-toolbar flat class="py-2">
|
|
9
5
|
<v-text-field
|
|
@@ -13,42 +9,40 @@
|
|
|
13
9
|
prepend-inner-icon="mdi-magnify"
|
|
14
10
|
variant="outlined"
|
|
15
11
|
hide-details
|
|
16
|
-
single-line
|
|
12
|
+
single-line
|
|
13
|
+
></v-text-field>
|
|
17
14
|
</v-toolbar>
|
|
18
15
|
</template>
|
|
19
16
|
<template v-slot:item.actions="{ item }">
|
|
20
17
|
<v-container class="action-button-container">
|
|
21
18
|
<v-container
|
|
22
19
|
v-for="(action, index) in actions"
|
|
23
|
-
style="
|
|
24
|
-
|
|
25
|
-
display: inline;
|
|
26
|
-
width: fit-content;
|
|
27
|
-
margin: 0px;
|
|
28
|
-
">
|
|
20
|
+
style="padding: 0px; display: inline; width: fit-content; margin: 0px"
|
|
21
|
+
>
|
|
29
22
|
<v-btn
|
|
30
23
|
style="margin: 0px 2px"
|
|
31
24
|
v-if="conditionCheck(action.condition, item)"
|
|
32
25
|
:key="index"
|
|
33
26
|
size="small"
|
|
34
|
-
@click="actionFn(action, item)"
|
|
27
|
+
@click="actionFn(action, item)"
|
|
28
|
+
>
|
|
35
29
|
{{ action.label }}
|
|
36
30
|
</v-btn>
|
|
37
31
|
</v-container>
|
|
38
32
|
</v-container>
|
|
39
33
|
</template>
|
|
40
34
|
<template v-slot:no-data>
|
|
41
|
-
<v-
|
|
35
|
+
<v-alert text="No Data" style="margin: 12px"></v-alert>
|
|
42
36
|
</template>
|
|
43
37
|
</v-data-table>
|
|
44
38
|
</template>
|
|
45
39
|
|
|
46
40
|
<script>
|
|
47
|
-
import { mapState } from
|
|
41
|
+
import { mapState } from 'vuex';
|
|
48
42
|
|
|
49
43
|
export default {
|
|
50
|
-
name:
|
|
51
|
-
inject: [
|
|
44
|
+
name: 'UIDynamicTable',
|
|
45
|
+
inject: ['$socket'],
|
|
52
46
|
props: {
|
|
53
47
|
/* do not remove entries from this - Dashboard's Layout Manager's will pass this data to your component */
|
|
54
48
|
id: { type: String, required: true },
|
|
@@ -61,45 +55,43 @@ export default {
|
|
|
61
55
|
},
|
|
62
56
|
data() {
|
|
63
57
|
return {
|
|
64
|
-
search:
|
|
58
|
+
search: '',
|
|
65
59
|
actions: [],
|
|
66
60
|
tasks: [],
|
|
67
61
|
headers: [],
|
|
68
62
|
};
|
|
69
63
|
},
|
|
70
64
|
mounted() {
|
|
71
|
-
this.$socket.on(
|
|
65
|
+
this.$socket.on('widget-load:' + this.id, (data) => {
|
|
72
66
|
this.initialize(data);
|
|
73
|
-
this.$store.commit(
|
|
67
|
+
this.$store.commit('data/bind', {
|
|
74
68
|
widgetId: this.id,
|
|
75
69
|
data,
|
|
76
70
|
});
|
|
77
71
|
});
|
|
78
|
-
this.$socket.on(
|
|
72
|
+
this.$socket.on('msg-input:' + this.id, (data) => {
|
|
79
73
|
this.initialize(data);
|
|
80
|
-
this.$store.commit(
|
|
74
|
+
this.$store.commit('data/bind', {
|
|
81
75
|
widgetId: this.id,
|
|
82
76
|
data,
|
|
83
77
|
});
|
|
84
78
|
});
|
|
85
|
-
this.$socket.emit(
|
|
79
|
+
this.$socket.emit('widget-load', this.id);
|
|
86
80
|
},
|
|
87
81
|
unmounted() {
|
|
88
|
-
this.$socket?.off(
|
|
89
|
-
this.$socket?.off(
|
|
82
|
+
this.$socket?.off('widget-load' + this.id);
|
|
83
|
+
this.$socket?.off('msg-input:' + this.id);
|
|
90
84
|
},
|
|
91
85
|
methods: {
|
|
92
86
|
send(msg, index) {
|
|
93
87
|
const msgArr = [];
|
|
94
88
|
msgArr[index] = msg;
|
|
95
|
-
this.$socket.emit(
|
|
89
|
+
this.$socket.emit('widget-action', this.id, msgArr);
|
|
96
90
|
},
|
|
97
91
|
actionFn(action, item) {
|
|
98
92
|
this.send(
|
|
99
93
|
{ payload: item },
|
|
100
|
-
this.actions.findIndex(
|
|
101
|
-
(element) => element.label === action.label
|
|
102
|
-
)
|
|
94
|
+
this.actions.findIndex((element) => element.label === action.label)
|
|
103
95
|
);
|
|
104
96
|
},
|
|
105
97
|
initialize(tasks) {
|
|
@@ -112,18 +104,18 @@ export default {
|
|
|
112
104
|
}));
|
|
113
105
|
|
|
114
106
|
this.headers.push({
|
|
115
|
-
title:
|
|
116
|
-
align:
|
|
117
|
-
key:
|
|
107
|
+
title: 'Actions',
|
|
108
|
+
align: 'center',
|
|
109
|
+
key: 'actions',
|
|
118
110
|
});
|
|
119
111
|
},
|
|
120
112
|
conditionCheck(condition, row) {
|
|
121
|
-
if (condition ==
|
|
113
|
+
if (condition == '') return true;
|
|
122
114
|
try {
|
|
123
|
-
const func = new Function(
|
|
115
|
+
const func = new Function('row', `return ${condition}`);
|
|
124
116
|
return func(row);
|
|
125
117
|
} catch (error) {
|
|
126
|
-
console.error(
|
|
118
|
+
console.error('Error evaluating condition:', error);
|
|
127
119
|
return false;
|
|
128
120
|
}
|
|
129
121
|
},
|
|
@@ -133,5 +125,5 @@ export default {
|
|
|
133
125
|
|
|
134
126
|
<style scoped>
|
|
135
127
|
/* CSS is auto scoped, but using named classes is still recommended */
|
|
136
|
-
@import
|
|
128
|
+
@import '../stylesheets/ui-dynamic-table.css';
|
|
137
129
|
</style>
|