@5minds/node-red-dashboard-2-processcube-dynamic-table 1.1.3 → 1.1.5-feature-9dc9ca-m011rkoy
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/nodes/dynamic-table.js +36 -32
- package/package.json +77 -77
- package/resources/ui-dynamic-table.umd.js +2 -2
- package/ui/components/DynamicTable.vue +112 -110
package/nodes/dynamic-table.js
CHANGED
|
@@ -1,41 +1,45 @@
|
|
|
1
1
|
module.exports = function (RED) {
|
|
2
|
-
|
|
3
|
-
|
|
2
|
+
function DynamicTableNode(config) {
|
|
3
|
+
RED.nodes.createNode(this, config);
|
|
4
4
|
|
|
5
|
-
|
|
5
|
+
const node = this;
|
|
6
6
|
|
|
7
|
-
|
|
7
|
+
const group = RED.nodes.getNode(config.group);
|
|
8
8
|
|
|
9
|
-
|
|
9
|
+
const base = group.getBase();
|
|
10
10
|
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
base.stores.data.save(base, node, columns);
|
|
23
|
-
},
|
|
24
|
-
};
|
|
11
|
+
//server-side event handlers
|
|
12
|
+
const evts = {
|
|
13
|
+
onAction: true,
|
|
14
|
+
beforeSend: function (msg) {
|
|
15
|
+
if (Array.isArray(msg)) return msg;
|
|
16
|
+
data = RED.util.evaluateNodeProperty(
|
|
17
|
+
config.data,
|
|
18
|
+
config.data_type,
|
|
19
|
+
node,
|
|
20
|
+
msg
|
|
21
|
+
);
|
|
25
22
|
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
23
|
+
return data;
|
|
24
|
+
},
|
|
25
|
+
onInput: function (msg, send, done) {
|
|
26
|
+
base.stores.data.save(base, node, msg);
|
|
27
|
+
},
|
|
28
|
+
};
|
|
29
|
+
|
|
30
|
+
if (group) {
|
|
31
|
+
group.register(node, config, evts);
|
|
32
|
+
} else {
|
|
33
|
+
node.error("No group configured");
|
|
34
|
+
}
|
|
30
35
|
}
|
|
31
|
-
}
|
|
32
36
|
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
37
|
+
RED.nodes.registerType("ui-dynamic-table", DynamicTableNode, {
|
|
38
|
+
defaults: {
|
|
39
|
+
outputs: { value: 1 },
|
|
40
|
+
},
|
|
41
|
+
outputs: function (config) {
|
|
42
|
+
return config.outputs || 1;
|
|
43
|
+
},
|
|
44
|
+
});
|
|
41
45
|
};
|
package/package.json
CHANGED
|
@@ -1,80 +1,80 @@
|
|
|
1
1
|
{
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
2
|
+
"name": "@5minds/node-red-dashboard-2-processcube-dynamic-table",
|
|
3
|
+
"version": "1.1.5-feature-9dc9ca-m011rkoy",
|
|
4
|
+
"description": "A ui component for showing dynamic Data with actions in a table",
|
|
5
|
+
"keywords": [
|
|
6
|
+
"processcube",
|
|
7
|
+
"usertask",
|
|
8
|
+
"node-red",
|
|
9
|
+
"node-red-dashboard-2"
|
|
10
|
+
],
|
|
11
|
+
"repository": {
|
|
12
|
+
"type": "git",
|
|
13
|
+
"url": "https://github.com/5minds/node-red-dashboard-2-processcube-dynamic-table.git"
|
|
14
|
+
},
|
|
15
|
+
"license": "Apache-2.0",
|
|
16
|
+
"author": {
|
|
17
|
+
"name": "Martin Moellenbeck",
|
|
18
|
+
"url": "https://github.com/moellenbeck"
|
|
19
|
+
},
|
|
20
|
+
"contributors": [
|
|
21
|
+
{
|
|
22
|
+
"name": "Luis Thieme",
|
|
23
|
+
"url": "https://github.com/luisthieme"
|
|
24
|
+
}
|
|
25
|
+
],
|
|
26
|
+
"exports": {
|
|
27
|
+
"import": "./resources/dynamic-table.esm.js",
|
|
28
|
+
"require": "./resources/dynamic-table.umd.js"
|
|
29
|
+
},
|
|
30
|
+
"files": [
|
|
31
|
+
"dist/*",
|
|
32
|
+
"nodes/*",
|
|
33
|
+
"ui/*",
|
|
34
|
+
"resources/*"
|
|
35
|
+
],
|
|
36
|
+
"scripts": {
|
|
37
|
+
"build": "vite build",
|
|
38
|
+
"build:dev": "NODE_ENV=development vite build",
|
|
39
|
+
"dev": "NODE_ENV=development vite build --watch",
|
|
40
|
+
"dev:prod": "vite build --watch",
|
|
41
|
+
"lint": "npm run lint:js && npm run lint:package",
|
|
42
|
+
"lint:fix": "npm run lint:js:fix && npm run lint:package:fix",
|
|
43
|
+
"lint:js": "eslint --ext .js,.vue,.cjs,.mjs .",
|
|
44
|
+
"lint:js:fix": "yarn lint:js --fix",
|
|
45
|
+
"lint:package": "sort-package-json --check 'package.json'",
|
|
46
|
+
"lint:package:fix": "sort-package-json 'package.json'"
|
|
47
|
+
},
|
|
48
|
+
"dependencies": {
|
|
49
|
+
"vue": "^3.3.8",
|
|
50
|
+
"vuex": "^4.1.0"
|
|
51
|
+
},
|
|
52
|
+
"devDependencies": {
|
|
53
|
+
"@vitejs/plugin-vue": "^4.5.0",
|
|
54
|
+
"eslint": "^8.53.0",
|
|
55
|
+
"eslint-config-standard": "^17.1.0",
|
|
56
|
+
"eslint-plugin-import": "^2.29.0",
|
|
57
|
+
"eslint-plugin-n": "^16.3.1",
|
|
58
|
+
"eslint-plugin-vue": "^9.18.1",
|
|
59
|
+
"vite": "^5.3.2",
|
|
60
|
+
"vite-plugin-css-injected-by-js": "^3.3.0"
|
|
61
|
+
},
|
|
62
|
+
"engines": {
|
|
63
|
+
"node": ">=14"
|
|
64
|
+
},
|
|
65
|
+
"node-red": {
|
|
66
|
+
"version": ">=3.0.0",
|
|
67
|
+
"nodes": {
|
|
68
|
+
"ui-dynamic-table": "nodes/dynamic-table.js"
|
|
69
|
+
}
|
|
70
|
+
},
|
|
71
|
+
"node-red-dashboard-2": {
|
|
72
|
+
"version": "1.0.0",
|
|
73
|
+
"widgets": {
|
|
74
|
+
"ui-dynamic-table": {
|
|
75
|
+
"output": "ui-dynamic-table.umd.js",
|
|
76
|
+
"component": "DynamicTable"
|
|
77
|
+
}
|
|
78
|
+
}
|
|
24
79
|
}
|
|
25
|
-
],
|
|
26
|
-
"exports": {
|
|
27
|
-
"import": "./resources/dynamic-table.esm.js",
|
|
28
|
-
"require": "./resources/dynamic-table.umd.js"
|
|
29
|
-
},
|
|
30
|
-
"files": [
|
|
31
|
-
"dist/*",
|
|
32
|
-
"nodes/*",
|
|
33
|
-
"ui/*",
|
|
34
|
-
"resources/*"
|
|
35
|
-
],
|
|
36
|
-
"scripts": {
|
|
37
|
-
"build": "vite build",
|
|
38
|
-
"build:dev": "NODE_ENV=development vite build",
|
|
39
|
-
"dev": "NODE_ENV=development vite build --watch",
|
|
40
|
-
"dev:prod": "vite build --watch",
|
|
41
|
-
"lint": "npm run lint:js && npm run lint:package",
|
|
42
|
-
"lint:fix": "npm run lint:js:fix && npm run lint:package:fix",
|
|
43
|
-
"lint:js": "eslint --ext .js,.vue,.cjs,.mjs .",
|
|
44
|
-
"lint:js:fix": "yarn lint:js --fix",
|
|
45
|
-
"lint:package": "sort-package-json --check 'package.json'",
|
|
46
|
-
"lint:package:fix": "sort-package-json 'package.json'"
|
|
47
|
-
},
|
|
48
|
-
"dependencies": {
|
|
49
|
-
"vue": "^3.3.8",
|
|
50
|
-
"vuex": "^4.1.0"
|
|
51
|
-
},
|
|
52
|
-
"devDependencies": {
|
|
53
|
-
"@vitejs/plugin-vue": "^4.5.0",
|
|
54
|
-
"eslint": "^8.53.0",
|
|
55
|
-
"eslint-config-standard": "^17.1.0",
|
|
56
|
-
"eslint-plugin-import": "^2.29.0",
|
|
57
|
-
"eslint-plugin-n": "^16.3.1",
|
|
58
|
-
"eslint-plugin-vue": "^9.18.1",
|
|
59
|
-
"vite": "^5.3.2",
|
|
60
|
-
"vite-plugin-css-injected-by-js": "^3.3.0"
|
|
61
|
-
},
|
|
62
|
-
"engines": {
|
|
63
|
-
"node": ">=14"
|
|
64
|
-
},
|
|
65
|
-
"node-red": {
|
|
66
|
-
"version": ">=3.0.0",
|
|
67
|
-
"nodes": {
|
|
68
|
-
"ui-dynamic-table": "nodes/dynamic-table.js"
|
|
69
|
-
}
|
|
70
|
-
},
|
|
71
|
-
"node-red-dashboard-2": {
|
|
72
|
-
"version": "1.0.0",
|
|
73
|
-
"widgets": {
|
|
74
|
-
"ui-dynamic-table": {
|
|
75
|
-
"output": "ui-dynamic-table.umd.js",
|
|
76
|
-
"component": "DynamicTable"
|
|
77
|
-
}
|
|
78
|
-
}
|
|
79
|
-
}
|
|
80
80
|
}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
(function(){"use strict";try{if(typeof document<"u"){var
|
|
2
|
-
(function(o,
|
|
1
|
+
(function(){"use strict";try{if(typeof document<"u"){var e=document.createElement("style");e.appendChild(document.createTextNode("h1[data-v-4e63fc03]{margin-bottom:10px}h2[data-v-4e63fc03]{margin-top:1.5rem;margin-bottom:.75rem}h3[data-v-4e63fc03]{margin-top:1rem}p[data-v-4e63fc03]{margin-bottom:5px}ul li[data-v-4e63fc03]{list-style-type:circle;list-style-position:inside;margin-left:15px}pre[data-v-4e63fc03]{padding:12px;margin:12px;background-color:#eee}code[data-v-4e63fc03]{font-size:.825rem;color:#ae0000}input[data-v-4e63fc03]{padding:12px;margin:12px;background-color:#eee}.task-div[data-v-4e63fc03]{padding:8px;margin:16px;border:solid;border-radius:4px;border-color:#303030}.action-button-container[data-v-4e63fc03]{width:100%;display:flex;justify-content:center}")),document.head.appendChild(e)}}catch(t){console.error("vite-plugin-css-injected-by-js",t)}})();
|
|
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:"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,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-4e63fc03"]]);o.DynamicTable=_,Object.defineProperty(o,Symbol.toStringTag,{value:"Module"})});
|
|
@@ -1,127 +1,129 @@
|
|
|
1
1
|
<template>
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
</
|
|
37
|
-
|
|
38
|
-
</template>
|
|
39
|
-
<template v-slot:no-data>
|
|
40
|
-
<v-alert text="No data"></v-alert>
|
|
41
|
-
</template>
|
|
42
|
-
</v-data-table>
|
|
2
|
+
<v-data-table :headers="headers" :items="tasks" :search="search" class="full-width-table">
|
|
3
|
+
<template v-slot:top>
|
|
4
|
+
<v-toolbar flat class="py-2">
|
|
5
|
+
<v-text-field
|
|
6
|
+
class="mx-3"
|
|
7
|
+
v-model="search"
|
|
8
|
+
label="Search"
|
|
9
|
+
prepend-inner-icon="mdi-magnify"
|
|
10
|
+
variant="outlined"
|
|
11
|
+
hide-details
|
|
12
|
+
single-line
|
|
13
|
+
></v-text-field>
|
|
14
|
+
</v-toolbar>
|
|
15
|
+
</template>
|
|
16
|
+
<template v-slot:item.actions="{ item }">
|
|
17
|
+
<v-container class="action-button-container">
|
|
18
|
+
<v-container
|
|
19
|
+
v-for="(action, index) in actions"
|
|
20
|
+
style="padding: 0px; display: inline; width: fit-content; margin: 0px"
|
|
21
|
+
>
|
|
22
|
+
<v-btn
|
|
23
|
+
style="margin: 0px 2px"
|
|
24
|
+
v-if="conditionCheck(action.condition, item)"
|
|
25
|
+
:key="index"
|
|
26
|
+
size="small"
|
|
27
|
+
@click="actionFn(action, item)"
|
|
28
|
+
>
|
|
29
|
+
{{ action.label }}
|
|
30
|
+
</v-btn>
|
|
31
|
+
</v-container>
|
|
32
|
+
</v-container>
|
|
33
|
+
</template>
|
|
34
|
+
<template v-slot:no-data>
|
|
35
|
+
<v-alert text="No Data" style="margin: 12px"></v-alert>
|
|
36
|
+
</template>
|
|
37
|
+
</v-data-table>
|
|
43
38
|
</template>
|
|
44
39
|
|
|
45
40
|
<script>
|
|
46
|
-
import { mapState } from
|
|
41
|
+
import { mapState } from 'vuex';
|
|
47
42
|
|
|
48
43
|
export default {
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
search: "",
|
|
61
|
-
actions: [],
|
|
62
|
-
tasks: [],
|
|
63
|
-
headers: [],
|
|
64
|
-
};
|
|
65
|
-
},
|
|
66
|
-
mounted() {
|
|
67
|
-
this.$socket.on("widget-load:" + this.id, (columns) => {
|
|
68
|
-
this.initialize(columns);
|
|
69
|
-
this.$store.commit("data/bind", {
|
|
70
|
-
widgetId: this.id,
|
|
71
|
-
columns,
|
|
72
|
-
});
|
|
73
|
-
});
|
|
74
|
-
this.$socket.on("msg-input:" + this.id, (columns) => {
|
|
75
|
-
this.initialize(columns);
|
|
76
|
-
this.$store.commit("data/bind", {
|
|
77
|
-
widgetId: this.id,
|
|
78
|
-
columns,
|
|
79
|
-
});
|
|
80
|
-
});
|
|
81
|
-
this.$socket.emit("widget-load", this.id);
|
|
82
|
-
},
|
|
83
|
-
unmounted() {
|
|
84
|
-
this.$socket?.off("widget-load" + this.id);
|
|
85
|
-
this.$socket?.off("msg-input:" + this.id);
|
|
86
|
-
},
|
|
87
|
-
methods: {
|
|
88
|
-
send(msg, index) {
|
|
89
|
-
const msgArr = [];
|
|
90
|
-
msgArr[index] = msg;
|
|
91
|
-
this.$socket.emit("widget-action", this.id, msgArr);
|
|
44
|
+
name: 'DynamicTable',
|
|
45
|
+
inject: ['$socket'],
|
|
46
|
+
props: {
|
|
47
|
+
/* do not remove entries from this - Dashboard's Layout Manager's will pass this data to your component */
|
|
48
|
+
id: { type: String, required: true },
|
|
49
|
+
props: { type: Object, default: () => ({}) },
|
|
50
|
+
/* state: { type: Object, default: () => ({ enabled: false, visible: false }) } // DEFAULT */
|
|
51
|
+
state: {
|
|
52
|
+
type: Object,
|
|
53
|
+
default: () => ({ enabled: true, visible: true }),
|
|
54
|
+
},
|
|
92
55
|
},
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
56
|
+
data() {
|
|
57
|
+
return {
|
|
58
|
+
search: '',
|
|
59
|
+
actions: [],
|
|
60
|
+
tasks: [],
|
|
61
|
+
headers: [],
|
|
62
|
+
};
|
|
98
63
|
},
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
64
|
+
mounted() {
|
|
65
|
+
this.$socket.on('widget-load:' + this.id, (data) => {
|
|
66
|
+
this.initialize(data);
|
|
67
|
+
this.$store.commit('data/bind', {
|
|
68
|
+
widgetId: this.id,
|
|
69
|
+
data,
|
|
70
|
+
});
|
|
71
|
+
});
|
|
72
|
+
this.$socket.on('msg-input:' + this.id, (data) => {
|
|
73
|
+
this.initialize(data);
|
|
74
|
+
this.$store.commit('data/bind', {
|
|
75
|
+
widgetId: this.id,
|
|
76
|
+
data,
|
|
77
|
+
});
|
|
78
|
+
});
|
|
79
|
+
this.$socket.emit('widget-load', this.id);
|
|
80
|
+
},
|
|
81
|
+
unmounted() {
|
|
82
|
+
this.$socket?.off('widget-load' + this.id);
|
|
83
|
+
this.$socket?.off('msg-input:' + this.id);
|
|
84
|
+
},
|
|
85
|
+
methods: {
|
|
86
|
+
send(msg, index) {
|
|
87
|
+
const msgArr = [];
|
|
88
|
+
msgArr[index] = msg;
|
|
89
|
+
this.$socket.emit('widget-action', this.id, msgArr);
|
|
90
|
+
},
|
|
91
|
+
actionFn(action, item) {
|
|
92
|
+
this.send(
|
|
93
|
+
{ payload: item },
|
|
94
|
+
this.actions.findIndex((element) => element.label === action.label)
|
|
95
|
+
);
|
|
96
|
+
},
|
|
97
|
+
initialize(tasks) {
|
|
98
|
+
this.tasks = tasks;
|
|
99
|
+
this.actions = this.props.options;
|
|
102
100
|
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
|
|
101
|
+
this.headers = this.props.columns.map((item) => ({
|
|
102
|
+
title: item.label,
|
|
103
|
+
key: item.value,
|
|
104
|
+
}));
|
|
107
105
|
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
|
|
114
|
-
|
|
115
|
-
|
|
116
|
-
|
|
117
|
-
|
|
118
|
-
|
|
106
|
+
this.headers.push({
|
|
107
|
+
title: 'Actions',
|
|
108
|
+
align: 'center',
|
|
109
|
+
key: 'actions',
|
|
110
|
+
});
|
|
111
|
+
},
|
|
112
|
+
conditionCheck(condition, row) {
|
|
113
|
+
if (condition == '') return true;
|
|
114
|
+
try {
|
|
115
|
+
const func = new Function('row', `return ${condition}`);
|
|
116
|
+
return func(row);
|
|
117
|
+
} catch (error) {
|
|
118
|
+
console.error('Error evaluating condition:', error);
|
|
119
|
+
return false;
|
|
120
|
+
}
|
|
121
|
+
},
|
|
119
122
|
},
|
|
120
|
-
},
|
|
121
123
|
};
|
|
122
124
|
</script>
|
|
123
125
|
|
|
124
126
|
<style scoped>
|
|
125
127
|
/* CSS is auto scoped, but using named classes is still recommended */
|
|
126
|
-
@import
|
|
128
|
+
@import '../stylesheets/dynamic-table.css';
|
|
127
129
|
</style>
|