@5minds/node-red-dashboard-2-processcube-dynamic-form 1.0.25-poc-for-using-dynamic-ui-from-app-sdk-4a73f4-m2ok3vom → 1.0.25-poc-for-using-dynamic-ui-from-app-sdk-d41e60-m2oo8xvq
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,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@5minds/node-red-dashboard-2-processcube-dynamic-form",
|
|
3
|
-
"version": "1.0.25-poc-for-using-dynamic-ui-from-app-sdk-
|
|
3
|
+
"version": "1.0.25-poc-for-using-dynamic-ui-from-app-sdk-d41e60-m2oo8xvq",
|
|
4
4
|
"description": "The ui component for the ProcessCube dynamic-form",
|
|
5
5
|
"keywords": [
|
|
6
6
|
"processcube",
|
|
@@ -511,4 +511,4 @@ Component Name: ${Wt.name} ${Wt.displayName??""}`),Gt(Wt),er=Wt);let nr=(lr=Q.ge
|
|
|
511
511
|
|
|
512
512
|
FormField: ${oe} with ${J} `);return}X[oe]?X[oe]=Array.isArray(X[oe])?[...X[oe],J]:[X[oe],J]:X[oe]=J}),W.forEach((J,oe)=>{var Q;if(typeof((Q=J.ref.current)==null?void 0:Q.getState)=="function"){let ue=J.ref.current.getState();(typeof ue=="boolean"||typeof ue=="number"||typeof ue=="string"||Array.isArray(ue)||ue==null||(ue==null?void 0:ue.toString())==="[object Object]")&&(X[oe]=ue)}}),X}function Xt(R,W,X){var Q;let J={};for(let ue of R.keys()){let me=R.getAll(ue);if(me[0]instanceof File){console.warn(`[@5minds/processcube_app_sdk:DynamicUi] Only plain objects can be passed to Server Components from Client Components. File objects are not supported. Use the raw FormData instance to process files instead.
|
|
513
513
|
|
|
514
|
-
FormField: ${ue} with ${me} `);continue}if(me.length===1?J[ue]=me[0]:J[ue]=me,J[ue]==""&&delete J[ue],J[ue]){let Qe=(Q=W.find(tt=>tt.id===ue))==null?void 0:Q.type;if(Qe==="boolean"){J[ue]=J[ue]==="on";continue}if(Qe==="confirm"){J[ue]=JSON.parse(J[ue]);continue}if(Qe==="number"){J[ue]=parseFloat(J[ue]);continue}if(Qe==="long"){J[ue]=parseInt(J[ue]);continue}}}let oe=W.filter(ue=>ue.type==="boolean");return oe.length&&oe.forEach(ue=>{J[ue.id]||(J[ue.id]=!1)}),X.forEach((ue,me)=>{var Qe;if(typeof((Qe=ue.ref.current)==null?void 0:Qe.getValue)=="function"){let tt=ue.ref.current.getValue();(typeof tt=="boolean"||typeof tt=="number"||typeof tt=="string"||Array.isArray(tt)||tt==null||(tt==null?void 0:tt.toString())==="[object Object]")&&(J[me]=tt)}}),J}function UIDynamicForm$1(){const
|
|
514
|
+
FormField: ${ue} with ${me} `);continue}if(me.length===1?J[ue]=me[0]:J[ue]=me,J[ue]==""&&delete J[ue],J[ue]){let Qe=(Q=W.find(tt=>tt.id===ue))==null?void 0:Q.type;if(Qe==="boolean"){J[ue]=J[ue]==="on";continue}if(Qe==="confirm"){J[ue]=JSON.parse(J[ue]);continue}if(Qe==="number"){J[ue]=parseFloat(J[ue]);continue}if(Qe==="long"){J[ue]=parseInt(J[ue]);continue}}}let oe=W.filter(ue=>ue.type==="boolean");return oe.length&&oe.forEach(ue=>{J[ue.id]||(J[ue.id]=!1)}),X.forEach((ue,me)=>{var Qe;if(typeof((Qe=ue.ref.current)==null?void 0:Qe.getValue)=="function"){let tt=ue.ref.current.getValue();(typeof tt=="boolean"||typeof tt=="number"||typeof tt=="string"||Array.isArray(tt)||tt==null||(tt==null?void 0:tt.toString())==="[object Object]")&&(J[me]=tt)}}),J}function UIDynamicForm$1(R){const[W,X]=reactExports.useState(void 0);return R.socket.on("widget-load:"+R.id,J=>{X(J.payload.userTask)}),R.socket.on("msg-input:"+R.id,J=>{X(J.payload.userTask)}),W?jsxRuntimeExports.jsx(bn,{task:W,onSubmit:()=>console.log("submit...")}):jsxRuntimeExports.jsx("h1",{children:"no task to show"})}const _export_sfc=(R,W)=>{const X=R.__vccOpts||R;for(const[J,oe]of W)X[J]=oe;return X},_sfc_main=vue.defineComponent({name:"UIDynamicForm",inject:["$socket"],props:{id:{type:String,required:!0},props:{type:Object,default:()=>({})},state:{type:Object,default:()=>({enabled:!1,visible:!1})}},setup(R){const W=vue.ref(null),X=vue.inject("$socket");return vue.onMounted(()=>{createRoot$1(W.value).render(React.createElement(UIDynamicForm$1,{...R,socket:X}))}),{reactRoot:W}}}),_hoisted_1={ref:"reactRoot"};function _sfc_render(R,W,X,J,oe,Q){return vue.openBlock(),vue.createElementBlock("div",_hoisted_1,null,512)}const UIDynamicForm=_export_sfc(_sfc_main,[["render",_sfc_render]]);return UIDynamicForm});
|
|
@@ -1,195 +1,20 @@
|
|
|
1
1
|
import { DynamicUi } from '@5minds/processcube_app_sdk/client';
|
|
2
2
|
import '@5minds/processcube_app_sdk/client/components/DynamicUi/DynamicUi.css';
|
|
3
|
-
import React from 'react';
|
|
3
|
+
import React, { useState } from 'react';
|
|
4
4
|
|
|
5
|
-
export default function UIDynamicForm() {
|
|
6
|
-
const usertask =
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
label: 'Colorpicker',
|
|
20
|
-
type: 'color',
|
|
21
|
-
defaultValue: '#e32626',
|
|
22
|
-
customForm: '{"hint":"hint"}',
|
|
23
|
-
},
|
|
24
|
-
{
|
|
25
|
-
id: 'date',
|
|
26
|
-
label: 'Date',
|
|
27
|
-
type: 'date',
|
|
28
|
-
defaultValue: '2024-10-18',
|
|
29
|
-
customForm: '{"hint":"hint"}',
|
|
30
|
-
},
|
|
31
|
-
{
|
|
32
|
-
id: 'datetime',
|
|
33
|
-
label: 'Datetime',
|
|
34
|
-
type: 'datetime-local',
|
|
35
|
-
defaultValue: '2024-10-19T12:41',
|
|
36
|
-
customForm: '{"hint":"hint"}',
|
|
37
|
-
},
|
|
38
|
-
{ id: 'email', label: 'Email', type: 'email', customForm: '{"hint":"hint"}' },
|
|
39
|
-
{ id: 'header', type: 'header', defaultValue: 'Header' },
|
|
40
|
-
{ id: 'hidden', type: 'hidden', defaultValue: 'hidden' },
|
|
41
|
-
{ id: 'number', label: 'Number', type: 'number', customForm: '{"step":1.5,"hint":"hint"}' },
|
|
42
|
-
{
|
|
43
|
-
id: 'month',
|
|
44
|
-
label: 'Month',
|
|
45
|
-
type: 'month',
|
|
46
|
-
defaultValue: '2024-07',
|
|
47
|
-
customForm: '{"hint":"hint"}',
|
|
48
|
-
},
|
|
49
|
-
{ id: 'paragraph', type: 'paragraph', defaultValue: 'A lot of words...' },
|
|
50
|
-
{ id: 'password', label: 'Pasword', type: 'password', customForm: '{"hint":"hint"}' },
|
|
51
|
-
{
|
|
52
|
-
id: 'radio',
|
|
53
|
-
label: 'Radio',
|
|
54
|
-
type: 'radio',
|
|
55
|
-
customForm: '{"entries":[{"key":"key","value":"value"}],"hint":"hint"}',
|
|
56
|
-
},
|
|
57
|
-
{
|
|
58
|
-
id: 'range',
|
|
59
|
-
label: 'Range',
|
|
60
|
-
type: 'range',
|
|
61
|
-
defaultValue: '30',
|
|
62
|
-
customForm: '{"step":0.4,"min":3,"hint":"hint"}',
|
|
63
|
-
},
|
|
64
|
-
{
|
|
65
|
-
id: 'select',
|
|
66
|
-
label: 'Select',
|
|
67
|
-
type: 'select',
|
|
68
|
-
customForm: '{"entries":[{"key":"key","value":"value"}],"hint":"hint"}',
|
|
69
|
-
},
|
|
70
|
-
{ id: 'tel', label: 'Tel.', type: 'tel', customForm: '{"hint":"hint"}' },
|
|
71
|
-
{ id: 'text', label: 'Text', type: 'string', customForm: '{"hint":"hint"}' },
|
|
72
|
-
{
|
|
73
|
-
id: 'textarea',
|
|
74
|
-
label: 'Textarea',
|
|
75
|
-
type: 'textarea',
|
|
76
|
-
defaultValue: 'more words...',
|
|
77
|
-
customForm: '{"rows":14,"hint":"hint"}',
|
|
78
|
-
},
|
|
79
|
-
{ id: 'time', label: 'Time', type: 'time', defaultValue: '11:54', customForm: '{"hint":"hint"}' },
|
|
80
|
-
{ id: 'url', label: 'URL', type: 'url', customForm: '{"hint":"hint"}' },
|
|
81
|
-
{
|
|
82
|
-
id: 'week',
|
|
83
|
-
label: 'Week',
|
|
84
|
-
type: 'week',
|
|
85
|
-
defaultValue: '2024-W37',
|
|
86
|
-
customForm: '{"hint":"hint"}',
|
|
87
|
-
},
|
|
88
|
-
],
|
|
89
|
-
},
|
|
90
|
-
userTaskConfigModel: {
|
|
91
|
-
formFields: [
|
|
92
|
-
{
|
|
93
|
-
id: 'checkbox',
|
|
94
|
-
label: 'Checkbox',
|
|
95
|
-
type: 'checkbox',
|
|
96
|
-
customForm: '{"entries":[{"key":"key","value":"value"}],"hint":"hint"}',
|
|
97
|
-
},
|
|
98
|
-
{
|
|
99
|
-
id: 'colorpicker',
|
|
100
|
-
label: 'Colorpicker',
|
|
101
|
-
type: 'color',
|
|
102
|
-
defaultValue: '#e32626',
|
|
103
|
-
customForm: '{"hint":"hint"}',
|
|
104
|
-
},
|
|
105
|
-
{
|
|
106
|
-
id: 'date',
|
|
107
|
-
label: 'Date',
|
|
108
|
-
type: 'date',
|
|
109
|
-
defaultValue: '2024-10-18',
|
|
110
|
-
customForm: '{"hint":"hint"}',
|
|
111
|
-
},
|
|
112
|
-
{
|
|
113
|
-
id: 'datetime',
|
|
114
|
-
label: 'Datetime',
|
|
115
|
-
type: 'datetime-local',
|
|
116
|
-
defaultValue: '2024-10-19T12:41',
|
|
117
|
-
customForm: '{"hint":"hint"}',
|
|
118
|
-
},
|
|
119
|
-
{ id: 'email', label: 'Email', type: 'email', customForm: '{"hint":"hint"}' },
|
|
120
|
-
{ id: 'header', type: 'header', defaultValue: 'Header' },
|
|
121
|
-
{ id: 'hidden', type: 'hidden', defaultValue: 'hidden' },
|
|
122
|
-
{ id: 'number', label: 'Number', type: 'number', customForm: '{"step":1.5,"hint":"hint"}' },
|
|
123
|
-
{
|
|
124
|
-
id: 'month',
|
|
125
|
-
label: 'Month',
|
|
126
|
-
type: 'month',
|
|
127
|
-
defaultValue: '2024-07',
|
|
128
|
-
customForm: '{"hint":"hint"}',
|
|
129
|
-
},
|
|
130
|
-
{ id: 'paragraph', type: 'paragraph', defaultValue: 'A lot of words...' },
|
|
131
|
-
{ id: 'password', label: 'Pasword', type: 'password', customForm: '{"hint":"hint"}' },
|
|
132
|
-
{
|
|
133
|
-
id: 'radio',
|
|
134
|
-
label: 'Radio',
|
|
135
|
-
type: 'radio',
|
|
136
|
-
customForm: '{"entries":[{"key":"key","value":"value"}],"hint":"hint"}',
|
|
137
|
-
},
|
|
138
|
-
{
|
|
139
|
-
id: 'range',
|
|
140
|
-
label: 'Range',
|
|
141
|
-
type: 'range',
|
|
142
|
-
defaultValue: '30',
|
|
143
|
-
customForm: '{"step":0.4,"min":3,"hint":"hint"}',
|
|
144
|
-
},
|
|
145
|
-
{
|
|
146
|
-
id: 'select',
|
|
147
|
-
label: 'Select',
|
|
148
|
-
type: 'select',
|
|
149
|
-
customForm: '{"entries":[{"key":"key","value":"value"}],"hint":"hint"}',
|
|
150
|
-
},
|
|
151
|
-
{ id: 'tel', label: 'Tel.', type: 'tel', customForm: '{"hint":"hint"}' },
|
|
152
|
-
{ id: 'text', label: 'Text', type: 'string', customForm: '{"hint":"hint"}' },
|
|
153
|
-
{
|
|
154
|
-
id: 'textarea',
|
|
155
|
-
label: 'Textarea',
|
|
156
|
-
type: 'textarea',
|
|
157
|
-
defaultValue: 'more words...',
|
|
158
|
-
customForm: '{"rows":14,"hint":"hint"}',
|
|
159
|
-
},
|
|
160
|
-
{ id: 'time', label: 'Time', type: 'time', defaultValue: '11:54', customForm: '{"hint":"hint"}' },
|
|
161
|
-
{ id: 'url', label: 'URL', type: 'url', customForm: '{"hint":"hint"}' },
|
|
162
|
-
{
|
|
163
|
-
id: 'week',
|
|
164
|
-
label: 'Week',
|
|
165
|
-
type: 'week',
|
|
166
|
-
defaultValue: '2024-W37',
|
|
167
|
-
customForm: '{"hint":"hint"}',
|
|
168
|
-
},
|
|
169
|
-
],
|
|
170
|
-
},
|
|
171
|
-
assignedUserIds: null,
|
|
172
|
-
multiInstanceMetadataId: '1f5a946e-5349-46f7-8914-0e25096b5f20',
|
|
173
|
-
multiInstanceStartToken: {},
|
|
174
|
-
multiInstanceEndToken: {},
|
|
175
|
-
flowNodeInstanceId: '129bb9ec-7660-4dbc-a11e-ca174a701ebc',
|
|
176
|
-
flowNodeId: 'user_task',
|
|
177
|
-
flowNodeName: 'User Task',
|
|
178
|
-
flowNodeLane: '',
|
|
179
|
-
flowNodeType: 'bpmn:UserTask',
|
|
180
|
-
eventType: null,
|
|
181
|
-
state: 'suspended',
|
|
182
|
-
previousFlowNodeInstanceId: '0076eaee-4f97-4f6d-b4ad-a066877b6aa4',
|
|
183
|
-
parentProcessInstanceId: null,
|
|
184
|
-
processDefinitionId: 'User-Task-Sample_Definition',
|
|
185
|
-
processModelId: 'User-Task-Sample_Process',
|
|
186
|
-
processInstanceId: '23d53ef8-f28c-4b47-9a70-d8b37d293a27',
|
|
187
|
-
correlationId: '8a0bc873-568d-49dc-b304-41efb5b92ec2',
|
|
188
|
-
ownerId: 'dummy_token',
|
|
189
|
-
startToken: {},
|
|
190
|
-
endToken: {},
|
|
191
|
-
startedAt: '2024-10-23T09:40:22.755Z',
|
|
192
|
-
};
|
|
193
|
-
return <DynamicUi task={usertask as any} onSubmit={() => console.log("amk") as any} />;
|
|
5
|
+
export default function UIDynamicForm(props) {
|
|
6
|
+
const [usertask, setUsertask] = useState(undefined)
|
|
7
|
+
props.socket.on('widget-load:' + props.id, (msg) => {
|
|
8
|
+
setUsertask(msg.payload.userTask)
|
|
9
|
+
})
|
|
10
|
+
props.socket.on('msg-input:' + props.id, (msg) => {
|
|
11
|
+
setUsertask(msg.payload.userTask)
|
|
12
|
+
})
|
|
13
|
+
|
|
14
|
+
if (!usertask) {
|
|
15
|
+
return <h1>no task to show</h1>
|
|
16
|
+
}
|
|
17
|
+
|
|
18
|
+
return <DynamicUi task={usertask as any} onSubmit={() => console.log("submit...") as any} />;
|
|
194
19
|
}
|
|
195
20
|
|
|
@@ -3,18 +3,31 @@
|
|
|
3
3
|
</template>
|
|
4
4
|
|
|
5
5
|
<script>
|
|
6
|
-
import { defineComponent, onMounted, ref } from 'vue';
|
|
6
|
+
import { defineComponent, onMounted, ref, inject } from 'vue';
|
|
7
7
|
import React from 'react';
|
|
8
8
|
import { createRoot } from 'react-dom/client';
|
|
9
9
|
import UIDynamicForm from './UIDynamicForm.tsx';
|
|
10
10
|
|
|
11
11
|
export default defineComponent({
|
|
12
12
|
name: 'UIDynamicForm',
|
|
13
|
-
|
|
13
|
+
inject: ['$socket'],
|
|
14
|
+
props: {
|
|
15
|
+
/* do not remove entries from this - Dashboard's Layout Manager's will pass this data to your component */
|
|
16
|
+
id: { type: String, required: true },
|
|
17
|
+
props: { type: Object, default: () => ({}) },
|
|
18
|
+
state: {
|
|
19
|
+
type: Object,
|
|
20
|
+
default: () => ({ enabled: false, visible: false }),
|
|
21
|
+
},
|
|
22
|
+
},
|
|
23
|
+
setup(props) {
|
|
14
24
|
const reactRoot = ref(null);
|
|
25
|
+
|
|
26
|
+
const socket = inject('$socket');
|
|
27
|
+
|
|
15
28
|
onMounted(() => {
|
|
16
29
|
const root = createRoot(reactRoot.value);
|
|
17
|
-
root.render(React.createElement(UIDynamicForm));
|
|
30
|
+
root.render(React.createElement(UIDynamicForm, {...props, socket}));
|
|
18
31
|
});
|
|
19
32
|
return {
|
|
20
33
|
reactRoot,
|