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

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.
Files changed (3) hide show
  1. package/nodes/dynamic-table.html +1 -1
  2. package/package.json +1 -1
  3. package/ui/components/DynamicTable.vue +110 -113
package/nodes/dynamic-table.html CHANGED
@@ -6,7 +6,7 @@
6
6
 
7
7
  RED.nodes.registerType('dynamic-table', {
8
8
  category: 'ProcessCube UI',
9
- color: '#00aed7',
9
+ color: '#4a7eb0',
10
10
  defaults: {
11
11
  name: { value: "" },
12
12
  tableName: { value: ""},
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@5minds/node-red-dashboard-2-processcube-dynamic-table",
3
- "version": "1.0.8",
3
+ "version": "1.1.0",
4
4
  "description": "A ui component for showing dynamic Data with actions in a table",
5
5
  "keywords": [
6
6
  "processcube",
package/ui/components/DynamicTable.vue CHANGED
@@ -1,127 +1,124 @@
1
1
  <template>
2
- <v-data-table
3
- :headers="headers"
4
- :items="tasks"
5
- :search="search"
6
- class="full-width-table"
7
- >
8
- <template v-slot:top>
9
- <v-toolbar
10
- flat
11
- class="py-2"
12
- >
13
- <v-toolbar-title>{{ props.tableName }}</v-toolbar-title>
14
- <v-spacer></v-spacer>
15
- <v-text-field
16
- class="mx-3"
17
- v-model="search"
18
- label="Search"
19
- prepend-inner-icon="mdi-magnify"
20
- variant="outlined"
21
- hide-details
22
- single-line
23
- ></v-text-field>
24
- </v-toolbar>
25
- </template>
26
- <template v-slot:item.actions="{ item }">
27
- <v-container class="action-button-container">
28
- <v-container v-for="(action, index) in actions" style="padding: 0px; display: inline; width: fit-content; margin: 0px">
29
- <v-btn
30
- style="margin: 0px 2px;"
31
- v-if="conditionCheck(action.condition, item)"
32
- :key="index"
33
- size="small"
34
- @click="actionFn(action, item)"
35
- >
36
- {{ action.label }}
37
- </v-btn>
38
- </v-container>
2
+ <v-data-table
3
+ :headers="headers"
4
+ :items="tasks"
5
+ :search="search"
6
+ class="full-width-table"
7
+ >
8
+ <template v-slot:top>
9
+ <v-toolbar flat class="py-2">
10
+ <v-text-field
11
+ class="mx-3"
12
+ v-model="search"
13
+ label="Search"
14
+ prepend-inner-icon="mdi-magnify"
15
+ variant="outlined"
16
+ hide-details
17
+ single-line
18
+ ></v-text-field>
19
+ </v-toolbar>
20
+ </template>
21
+ <template v-slot:item.actions="{ item }">
22
+ <v-container class="action-button-container">
23
+ <v-container
24
+ v-for="(action, index) in actions"
25
+ style="padding: 0px; display: inline; width: fit-content; margin: 0px"
26
+ >
27
+ <v-btn
28
+ style="margin: 0px 2px"
29
+ v-if="conditionCheck(action.condition, item)"
30
+ :key="index"
31
+ size="small"
32
+ @click="actionFn(action, item)"
33
+ >
34
+ {{ action.label }}
35
+ </v-btn>
39
36
  </v-container>
40
- </template>
41
- <template v-slot:no-data>
42
- <v-btn
43
- color="primary"
44
- @click="initialize"
45
- >
46
- Reload
47
- </v-btn>
48
- </template>
49
- </v-data-table>
37
+ </v-container>
38
+ </template>
39
+ <template v-slot:no-data>
40
+ <v-alert text="No data"></v-alert>
41
+ </template>
42
+ </v-data-table>
50
43
  </template>
51
44
 
52
45
  <script>
53
- import { mapState } from 'vuex'
46
+ import { mapState } from "vuex";
54
47
 
55
48
  export default {
56
- name: 'DynamicTable',
57
- inject: ['$socket'],
58
- props: {
59
- /* do not remove entries from this - Dashboard's Layout Manager's will pass this data to your component */
60
- id: { type: String, required: true },
61
- props: { type: Object, default: () => ({}) },
62
- state: { type: Object, default: () => ({ enabled: false, visible: false }) }
49
+ name: "DynamicTable",
50
+ inject: ["$socket"],
51
+ props: {
52
+ /* do not remove entries from this - Dashboard's Layout Manager's will pass this data to your component */
53
+ id: { type: String, required: true },
54
+ props: { type: Object, default: () => ({}) },
55
+ /* state: { type: Object, default: () => ({ enabled: false, visible: false }) } // DEFAULT */
56
+ state: { type: Object, default: () => ({ enabled: true, visible: true }) },
57
+ },
58
+ data() {
59
+ return {
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);
63
92
  },
64
- data () {
65
- return {
66
- search: '',
67
- actions: [],
68
- tasks: [],
69
- headers: [],
70
- }
93
+ actionFn(action, item) {
94
+ this.send(
95
+ { payload: item },
96
+ this.actions.findIndex((element) => element.label === action.label)
97
+ );
71
98
  },
72
- mounted () {
73
- this.$socket.on('widget-load:' + this.id, (columns) => {
74
- this.initialize(columns)
75
- this.$store.commit('data/bind', {
76
- widgetId: this.id,
77
- columns
78
- })
79
- })
80
- this.$socket.on('msg-input:' + this.id, (columns) => {
81
- this.initialize(columns)
82
- this.$store.commit('data/bind', {
83
- widgetId: this.id,
84
- columns
85
- })
86
- })
87
- this.$socket.emit('widget-load', this.id)
88
- },
89
- unmounted () {
90
- this.$socket?.off('widget-load' + this.id)
91
- this.$socket?.off('msg-input:' + this.id)
92
- },
93
- methods: {
94
- send (msg, index) {
95
- const msgArr = []
96
- msgArr[index] = msg
97
- this.$socket.emit('widget-action', this.id, msgArr)
98
- },
99
- actionFn (action, item) {
100
- this.send({ payload: item}, this.actions.findIndex(element => element.label === action.label))
101
- },
102
- initialize (tasks) {
103
- this.tasks = tasks
104
- this.actions = this.props.options
99
+ initialize(tasks) {
100
+ this.tasks = tasks;
101
+ this.actions = this.props.options;
105
102
 
106
- this.headers = this.props.columns.map(item => ({
107
- title: item.label,
108
- key: item.value
109
- }))
103
+ this.headers = this.props.columns.map((item) => ({
104
+ title: item.label,
105
+ key: item.value,
106
+ }));
110
107
 
111
- this.headers.push({ title: 'Action', align: 'center', key: 'actions'})
112
- },
113
- conditionCheck(condition, row) {
114
- if (condition == "") return true
115
- try {
116
- const func = new Function('row', `return ${condition}`);
117
- return func(row);
118
- } catch (error) {
119
- console.error('Error evaluating condition:', error);
120
- return false;
121
- }
122
- }
123
- }
124
- }
108
+ this.headers.push({ title: "Action", align: "center", key: "actions" });
109
+ },
110
+ conditionCheck(condition, row) {
111
+ if (condition == "") return true;
112
+ try {
113
+ const func = new Function("row", `return ${condition}`);
114
+ return func(row);
115
+ } catch (error) {
116
+ console.error("Error evaluating condition:", error);
117
+ return false;
118
+ }
119
+ },
120
+ },
121
+ };
125
122
  </script>
126
123
 
127
124
  <style scoped>