diff --git a/example/dynamic-form-sample-flows.json b/example/dynamic-form-sample-flows.json deleted file mode 100644 index d83a9cd..0000000 --- a/example/dynamic-form-sample-flows.json +++ /dev/null @@ -1,749 +0,0 @@ -[ - { - "id": "b195bc3ca2e1a665", - "type": "tab", - "label": "Dashboard Symrise", - "disabled": false, - "info": "", - "env": [] - }, - { - "id": "09cdc14cfb8ad687", - "type": "group", - "z": "b195bc3ca2e1a665", - "style": { - "stroke": "#999999", - "stroke-opacity": "1", - "fill": "none", - "fill-opacity": "1", - "label": true, - "label-position": "nw", - "color": "#a4a4a4" - }, - "nodes": [ - "0f5978f327b01bfb", - "dbec84a2543dbe7e", - "c73156ccd3cd2a48", - "7c13c0a3b8824a63", - "786bf9ed5078de92", - "69723e56fb97b6c1", - "d5874ba4dd992935", - "5bdcd284c2b69386", - "71196d7ab2204d95", - "6ce155bbaaba083f", - "1d5b0759c3226e37", - "97afbbf01ec1cd88", - "2b3f33b7a9dceb49", - "a61cb4c20f79d872" - ], - "x": 14, - "y": 59, - "w": 1012, - "h": 282 - }, - { - "id": "ec36901abb138306", - "type": "group", - "z": "b195bc3ca2e1a665", - "style": { - "stroke": "#999999", - "stroke-opacity": "1", - "fill": "none", - "fill-opacity": "1", - "label": true, - "label-position": "nw", - "color": "#a4a4a4" - }, - "nodes": [ - "1224ebb8edb477d2", - "27a49417ac3a774b", - "9a0390c372b2016b", - "c09dc7d2787335ee", - "05284831924ef310", - "99475ac148f6484b", - "5a61ca5b5a13aa8d", - "ebd67a338575690d", - "1497b762d2ac1723", - "64068e75e541a72e", - "b8ac2a6ff7cc5ef1", - "493500b42d8d0f5b", - "34984ae3f4e83b0b", - "8e2a2f993ee7156a" - ], - "x": 14, - "y": 379, - "w": 952, - "h": 322 - }, - { - "id": "0f5978f327b01bfb", - "type": "ui-table", - "z": "b195bc3ca2e1a665", - "g": "09cdc14cfb8ad687", - "group": "8e2205abbb41495b", - "name": "Auftrage", - "label": "text", - "order": 1, - "width": "0", - "height": "0", - "maxrows": 0, - "passthru": false, - "autocols": true, - "showSearch": true, - "selectionType": "click", - "columns": [], - "x": 540, - "y": 160, - "wires": [ - [ - "69723e56fb97b6c1" - ] - ] - }, - { - "id": "dbec84a2543dbe7e", - "type": "http request", - "z": "b195bc3ca2e1a665", - "g": "09cdc14cfb8ad687", - "name": "", - "method": "GET", - "ret": "obj", - "paytoqs": "ignore", - "url": "http://localhost:56000/atlas_engine/api/v1/flow_node_instances?flowNodeType=bpmn%3AUserTask&state=suspended", - "tls": "", - "persist": false, - "proxy": "", - "insecureHTTPParser": false, - "authType": "bearer", - "senderr": false, - "headers": [], - "x": 290, - "y": 220, - "wires": [ - [ - "c73156ccd3cd2a48" - ] - ] - }, - { - "id": "c73156ccd3cd2a48", - "type": "function", - "z": "b195bc3ca2e1a665", - "g": "09cdc14cfb8ad687", - "name": "Felder filtern", - "func": "const table = [];\n\nmsg.payload.flowNodeInstances.forEach(function(element) {\n const row = {\n \"flowNodeName\": element.flowNodeName, \n \"state\": element.state,\n \"flowNodeInstanceId\": element.flowNodeInstanceId,\n \"startedAt\": element.startedAt\n }\n\n if (element.state == \"suspended\") {\n row[\"action\"] = \"do it\";\n } else {\n row[\"action\"] = \"nope ;-)\";\n }\n\n table.push(row);\n});;\n\nmsg.payload = table;\nreturn msg;", - "outputs": 1, - "timeout": 0, - "noerr": 0, - "initialize": "", - "finalize": "", - "libs": [], - "x": 370, - "y": 160, - "wires": [ - [ - "0f5978f327b01bfb" - ] - ] - }, - { - "id": "7c13c0a3b8824a63", - "type": "ui-control", - "z": "b195bc3ca2e1a665", - "g": "09cdc14cfb8ad687", - "name": "Seite navigieren", - "ui": "26a45d43c064bdb6", - "events": "all", - "x": 760, - "y": 300, - "wires": [ - [ - "786bf9ed5078de92" - ] - ] - }, - { - "id": "786bf9ed5078de92", - "type": "debug", - "z": "b195bc3ca2e1a665", - "g": "09cdc14cfb8ad687", - "name": "debug 4", - "active": true, - "tosidebar": true, - "console": false, - "tostatus": false, - "complete": "false", - "statusVal": "", - "statusType": "auto", - "x": 920, - "y": 300, - "wires": [] - }, - { - "id": "69723e56fb97b6c1", - "type": "switch", - "z": "b195bc3ca2e1a665", - "g": "09cdc14cfb8ad687", - "name": "", - "property": "payload.action", - "propertyType": "msg", - "rules": [ - { - "t": "eq", - "v": "do it", - "vt": "str" - } - ], - "checkall": "true", - "repair": false, - "outputs": 1, - "x": 530, - "y": 220, - "wires": [ - [ - "d5874ba4dd992935", - "1d5b0759c3226e37" - ] - ] - }, - { - "id": "d5874ba4dd992935", - "type": "function", - "z": "b195bc3ca2e1a665", - "g": "09cdc14cfb8ad687", - "name": "Seite UserTask", - "func": "msg.payload = { \n page: \"UserTask\",\n query: {\n flowNodeName: msg.payload.flowNodeName,\n flowNodeInstanceId: msg.payload.flowNodeInstanceId,\n state: msg.payload.state,\n action: msg.payload.action\n }\n};\nreturn msg;", - "outputs": 1, - "timeout": 0, - "noerr": 0, - "initialize": "", - "finalize": "", - "libs": [], - "x": 560, - "y": 300, - "wires": [ - [ - "7c13c0a3b8824a63", - "5bdcd284c2b69386" - ] - ] - }, - { - "id": "5bdcd284c2b69386", - "type": "link out", - "z": "b195bc3ca2e1a665", - "g": "09cdc14cfb8ad687", - "name": "link out 1", - "mode": "link", - "links": [ - "9a0390c372b2016b", - "fb52efa0588321f0" - ], - "x": 695, - "y": 220, - "wires": [] - }, - { - "id": "71196d7ab2204d95", - "type": "ui-button", - "z": "b195bc3ca2e1a665", - "g": "09cdc14cfb8ad687", - "group": "8e2205abbb41495b", - "name": "", - "label": "Aufgaben laden", - "order": 2, - "width": 0, - "height": 0, - "emulateClick": false, - "tooltip": "", - "color": "", - "bgcolor": "", - "className": "", - "icon": "", - "iconPosition": "left", - "payload": "", - "payloadType": "str", - "topic": "topic", - "topicType": "msg", - "x": 120, - "y": 160, - "wires": [ - [ - "dbec84a2543dbe7e" - ] - ] - }, - { - "id": "1224ebb8edb477d2", - "type": "debug", - "z": "b195bc3ca2e1a665", - "g": "ec36901abb138306", - "name": "debug 3", - "active": true, - "tosidebar": true, - "console": false, - "tostatus": false, - "complete": "false", - "statusVal": "", - "statusType": "auto", - "x": 860, - "y": 480, - "wires": [] - }, - { - "id": "27a49417ac3a774b", - "type": "function", - "z": "b195bc3ca2e1a665", - "g": "ec36901abb138306", - "name": "demo fields", - "func": "msg.payload = {\n \"formFields\": [\n {\n \"id\": \"text_id\",\n \"type\": \"v-text-field\",\n \"required\": false,\n \"label\": \"Text Label\",\n \"value\": \"hello test label\",\n \"title\": \"Some helpful text\"\n },\n {\n \"id\": \"autocomplete_id\",\n \"type\": \"v-autocomplete\",\n \"required\": false,\n \"value\": \"Florida\",\n \"label\": \"Autocomplete\",\n \"items\": [\n \"California\",\n \"Colorado\",\n \"Florida\",\n \"Georgia\",\n \"Texas\",\n \"Wyoming\"\n ],\n \"title\": \"Some helpful text\"\n },\n {\n \"id\": \"autocomplete2_id\",\n \"type\": \"v-autocomplete\",\n \"required\": false,\n \"label\": \"Autocomplete\",\n \"items\": [\n \"Hello\",\n \"World\"\n ],\n \"value\": \"\",\n \"title\": \"Some helpful text\"\n },\n {\n \"id\": \"number_id\",\n \"type\": \"v-text-field\",\n \"required\": true,\n \"label\": \"Number Label\",\n \"title\": \"Some helpful text\"\n },\n {\n \"id\": \"date_id\",\n \"type\": \"v-text-field\",\n \"required\": true,\n \"label\": \"Date Label\",\n \"title\": \"Some helpful text\"\n },\n {\n \"id\": \"boolean_id\",\n \"type\": \"v-text-field\",\n \"required\": false,\n \"value\": \"..\",\n \"label\": \"Boolean Label\",\n \"title\": \"Check for Yes\"\n }\n ]\n}\n\nreturn msg;", - "outputs": 1, - "timeout": 0, - "noerr": 0, - "initialize": "", - "finalize": "", - "libs": [], - "x": 270, - "y": 520, - "wires": [ - [ - "8e2a2f993ee7156a" - ] - ] - }, - { - "id": "9a0390c372b2016b", - "type": "link in", - "z": "b195bc3ca2e1a665", - "g": "ec36901abb138306", - "name": "link in 1", - "links": [ - "5bdcd284c2b69386" - ], - "x": 155, - "y": 520, - "wires": [ - [ - "27a49417ac3a774b" - ] - ] - }, - { - "id": "c09dc7d2787335ee", - "type": "inject", - "z": "b195bc3ca2e1a665", - "g": "ec36901abb138306", - "name": "", - "props": [ - { - "p": "payload" - } - ], - "repeat": "", - "crontab": "", - "once": false, - "onceDelay": 0.1, - "topic": "", - "payload": "{\"formFields\":[{\"id\":\"text_id\",\"type\":\"v-text-field\",\"required\":false,\"label\":\"Text Label\",\"value\":\"hello test label\",\"title\":\"Some helpful text\"},{\"id\":\"autocomplete_id\",\"type\":\"v-autocomplete\",\"required\":false,\"value\":\"Florida\",\"label\":\"Autocomplete\",\"items\":[\"California\",\"Colorado\",\"Florida\",\"Georgia\",\"Texas\",\"Wyoming\"],\"title\":\"Some helpful text\"},{\"id\":\"autocomplete2_id\",\"type\":\"v-autocomplete\",\"required\":false,\"label\":\"Autocomplete\",\"items\":[\"Hello\",\"World\"],\"value\":\"\",\"title\":\"Some helpful text\"},{\"id\":\"number_id\",\"type\":\"v-text-field\",\"required\":true,\"label\":\"Number Label\",\"title\":\"Some helpful text\"},{\"id\":\"date_id\",\"type\":\"v-text-field\",\"required\":true,\"label\":\"Date Label\",\"title\":\"Some helpful text\"},{\"id\":\"boolean_id\",\"type\":\"v-text-field\",\"required\":false,\"value\":\"....\",\"label\":\"Boolean Label\",\"title\":\"Check for Yes\"}]}", - "payloadType": "json", - "x": 270, - "y": 480, - "wires": [ - [ - "8e2a2f993ee7156a" - ] - ] - }, - { - "id": "6ce155bbaaba083f", - "type": "comment", - "z": "b195bc3ca2e1a665", - "g": "09cdc14cfb8ad687", - "name": "Tabelle mit Aufträgen laden", - "info": "", - "x": 150, - "y": 100, - "wires": [] - }, - { - "id": "05284831924ef310", - "type": "comment", - "z": "b195bc3ca2e1a665", - "g": "ec36901abb138306", - "name": "Auftrag bearbeiten", - "info": "", - "x": 130, - "y": 420, - "wires": [] - }, - { - "id": "1d5b0759c3226e37", - "type": "debug", - "z": "b195bc3ca2e1a665", - "g": "09cdc14cfb8ad687", - "name": "debug 6", - "active": true, - "tosidebar": true, - "console": false, - "tostatus": false, - "complete": "false", - "statusVal": "", - "statusType": "auto", - "x": 880, - "y": 140, - "wires": [] - }, - { - "id": "97afbbf01ec1cd88", - "type": "ui-event", - "z": "b195bc3ca2e1a665", - "g": "09cdc14cfb8ad687", - "ui": "26a45d43c064bdb6", - "name": "", - "x": 100, - "y": 300, - "wires": [ - [ - "2b3f33b7a9dceb49" - ] - ] - }, - { - "id": "2b3f33b7a9dceb49", - "type": "switch", - "z": "b195bc3ca2e1a665", - "g": "09cdc14cfb8ad687", - "name": "Seite == \"Prozessliste\"", - "property": "payload.page.name", - "propertyType": "msg", - "rules": [ - { - "t": "eq", - "v": "Prozessliste", - "vt": "str" - } - ], - "checkall": "true", - "repair": false, - "outputs": 1, - "x": 280, - "y": 300, - "wires": [ - [ - "dbec84a2543dbe7e" - ] - ] - }, - { - "id": "a61cb4c20f79d872", - "type": "inject", - "z": "b195bc3ca2e1a665", - "g": "09cdc14cfb8ad687", - "name": "", - "props": [ - { - "p": "payload" - }, - { - "p": "topic", - "vt": "str" - } - ], - "repeat": "", - "crontab": "", - "once": false, - "onceDelay": 0.1, - "topic": "", - "payload": "", - "payloadType": "date", - "x": 120, - "y": 220, - "wires": [ - [ - "dbec84a2543dbe7e" - ] - ] - }, - { - "id": "99475ac148f6484b", - "type": "http request", - "z": "b195bc3ca2e1a665", - "g": "ec36901abb138306", - "name": "", - "method": "GET", - "ret": "obj", - "paytoqs": "ignore", - "url": "http://localhost:56000/atlas_engine/api/v1/flow_node_instances?limit=1&flowNodeInstanceId={{{flowNodeInstanceId}}}&flowNodeType=bpmn%3AUserTask", - "tls": "", - "persist": false, - "proxy": "", - "insecureHTTPParser": false, - "authType": "bearer", - "senderr": false, - "headers": [], - "x": 490, - "y": 620, - "wires": [ - [ - "ebd67a338575690d", - "64068e75e541a72e" - ] - ] - }, - { - "id": "5a61ca5b5a13aa8d", - "type": "inject", - "z": "b195bc3ca2e1a665", - "g": "ec36901abb138306", - "name": "", - "props": [ - { - "p": "payload" - }, - { - "p": "topic", - "vt": "str" - } - ], - "repeat": "", - "crontab": "", - "once": false, - "onceDelay": 0.1, - "topic": "", - "payload": "", - "payloadType": "date", - "x": 120, - "y": 620, - "wires": [ - [ - "1497b762d2ac1723" - ] - ] - }, - { - "id": "ebd67a338575690d", - "type": "debug", - "z": "b195bc3ca2e1a665", - "g": "ec36901abb138306", - "name": "debug 8", - "active": true, - "tosidebar": true, - "console": false, - "tostatus": false, - "complete": "false", - "statusVal": "", - "statusType": "auto", - "x": 660, - "y": 660, - "wires": [] - }, - { - "id": "1497b762d2ac1723", - "type": "function", - "z": "b195bc3ca2e1a665", - "g": "ec36901abb138306", - "name": "parameter setzen", - "func": "msg.flowNodeInstanceId = \"eec76493-589c-4c3e-b397-dd8f441235a8\";\n\nif (msg.payload.query && msg.payload.query.flowNodeInstanceId) {\n msg.flowNodeInstanceId = msg.payload.query.flowNodeInstanceId;\n}\n\n/*\nmsg.flowNodeId = \"Activity_0ye77qp\";\nmsg.flowNodeType = \"bpmn:UserTask\";\nmsg.processModelId = \"Sample_UserTask_Process\";\n*/\n\nreturn msg;", - "outputs": 1, - "timeout": 0, - "noerr": 0, - "initialize": "", - "finalize": "", - "libs": [], - "x": 310, - "y": 620, - "wires": [ - [ - "99475ac148f6484b" - ] - ] - }, - { - "id": "64068e75e541a72e", - "type": "function", - "z": "b195bc3ca2e1a665", - "g": "ec36901abb138306", - "name": "prepare fields ", - "func": "const formFields = [];\n\nmsg.payload.flowNodeInstances[0].userTaskConfig.formFields.forEach(function(field) {\n let formField = {};\n switch (field.type) {\n case 'string':\n formField = { id: field.id, type: 'v-text-field', required: false, label: field.label, value: '', title: 'Some helpful text' };\n break;\n case 'long':\n formField = { id: field.id, type: 'v-text-field', required: true, label: field.label, title: 'Some helpful text' };\n break;\n case 'date':\n formField = { id: field.id, type: 'v-text-field', required: true, label: field.label, title: 'Some helpful text' };\n break;\n case 'enum':\n formField = { id: field.id, type: 'v-text-field', required: true, label: field.label, items: field.enumValues.map(v => ({ id: v.id, name: v.name })), title: 'Choose an option' };\n break;\n case 'boolean':\n formField = { id: field.id, type: 'v-text-field', required: false, label: field.label, title: 'Check for Yes' };\n break;\n default:\n //formField = { id: field.id, type: field.type, required: true, label: field.label, title: 'Additional Information Needed' };\n formField = { id: field.id, type: 'v-text-field', required: true, label: field.label, title: 'Additional Information Needed' };\n }\n\n formFields.push(formField);\n});;\n\nmsg.payload = {\n \"formFields\": formFields\n};\n\nreturn msg;", - "outputs": 1, - "timeout": 0, - "noerr": 0, - "initialize": "", - "finalize": "", - "libs": [], - "x": 680, - "y": 620, - "wires": [ - [ - "b8ac2a6ff7cc5ef1", - "8e2a2f993ee7156a" - ] - ] - }, - { - "id": "b8ac2a6ff7cc5ef1", - "type": "debug", - "z": "b195bc3ca2e1a665", - "g": "ec36901abb138306", - "name": "debug 9", - "active": true, - "tosidebar": true, - "console": false, - "tostatus": false, - "complete": "false", - "statusVal": "", - "statusType": "auto", - "x": 860, - "y": 620, - "wires": [] - }, - { - "id": "493500b42d8d0f5b", - "type": "ui-event", - "z": "b195bc3ca2e1a665", - "g": "ec36901abb138306", - "ui": "26a45d43c064bdb6", - "name": "", - "x": 120, - "y": 560, - "wires": [ - [ - "34984ae3f4e83b0b" - ] - ] - }, - { - "id": "34984ae3f4e83b0b", - "type": "switch", - "z": "b195bc3ca2e1a665", - "g": "ec36901abb138306", - "name": "Seite == \"UserTask\"", - "property": "payload.page.name", - "propertyType": "msg", - "rules": [ - { - "t": "eq", - "v": "UserTask", - "vt": "str" - } - ], - "checkall": "true", - "repair": false, - "outputs": 1, - "x": 320, - "y": 560, - "wires": [ - [ - "1497b762d2ac1723" - ] - ] - }, - { - "id": "8e2a2f993ee7156a", - "type": "dynamic-form", - "z": "b195bc3ca2e1a665", - "g": "ec36901abb138306", - "name": "", - "group": "5403f00c961584ab", - "order": 0, - "waiting_title": "Waiting for Warten auf den Usertask...", - "waiting_info": "Der Usertask wird automatisch angezeigt, wenn ein entsprechender Task vorhanden ist.", - "submit_title": "Submit your task", - "cancel_title": "Cancel your task", - "width": 0, - "height": 0, - "x": 600, - "y": 480, - "wires": [ - [ - "1224ebb8edb477d2" - ] - ] - }, - { - "id": "8e2205abbb41495b", - "type": "ui-group", - "name": "My Group", - "page": "b4dcca3f3d895ff7", - "width": "12", - "height": "1", - "order": 1, - "showTitle": false, - "className": "", - "visible": "true", - "disabled": "false" - }, - { - "id": "26a45d43c064bdb6", - "type": "ui-base", - "name": "My Dashboard", - "path": "/dashboard", - "includeClientData": true, - "acceptsClientConfig": [ - "ui-notification", - "ui-control" - ], - "showPathInSidebar": true, - "navigationStyle": "default", - "titleBarStyle": "default" - }, - { - "id": "5403f00c961584ab", - "type": "ui-group", - "name": "Meine spezieller Dynamic-Form", - "page": "540bda48de1fe22d", - "width": "12", - "height": "1", - "order": 1, - "showTitle": false, - "className": "", - "visible": "true", - "disabled": "false" - }, - { - "id": "b4dcca3f3d895ff7", - "type": "ui-page", - "name": "Prozessliste", - "ui": "26a45d43c064bdb6", - "path": "/Prozessliste", - "icon": "home", - "layout": "grid", - "theme": "7175f012d8e51857", - "order": 2, - "className": "", - "visible": "true", - "disabled": "false" - }, - { - "id": "540bda48de1fe22d", - "type": "ui-page", - "name": "UserTask", - "ui": "26a45d43c064bdb6", - "path": "/UserTask", - "icon": "home", - "layout": "grid", - "theme": "7175f012d8e51857", - "order": 1, - "className": "", - "visible": true, - "disabled": "false" - }, - { - "id": "7175f012d8e51857", - "type": "ui-theme", - "name": "Default Theme", - "colors": { - "surface": "#ffffff", - "primary": "#1f517f", - "bgPage": "#eeeeee", - "groupBg": "#ffffff", - "groupOutline": "#cccccc" - }, - "sizes": { - "pagePadding": "12px", - "groupGap": "12px", - "groupBorderRadius": "4px", - "widgetGap": "12px" - } - } -] \ No newline at end of file diff --git a/examples/dynamic-form-sample-flows.json b/examples/dynamic-form-sample-flows.json new file mode 100644 index 0000000..db8d53c --- /dev/null +++ b/examples/dynamic-form-sample-flows.json @@ -0,0 +1,179 @@ +[ + { + "id": "e0221ca7bcc43410", + "type": "tab", + "label": "Flow 1", + "disabled": false, + "info": "", + "env": [] + }, + { + "id": "8d719ec7a03c4c67", + "type": "inject", + "z": "e0221ca7bcc43410", + "name": "UserTask Data", + "props": [ + { + "p": "payload" + }, + { + "p": "topic", + "vt": "str" + } + ], + "repeat": "", + "crontab": "", + "once": false, + "onceDelay": 0.1, + "topic": "", + "payload": "{\"userTask\":{\"actualOwnerId\":null,\"finishedByUserId\":null,\"userTaskConfig\":{\"formFields\":[{\"id\":\"email\",\"label\":\"Email\",\"type\":\"string\"}]},\"userTaskConfigModel\":{\"formFields\":[{\"id\":\"email\",\"label\":\"Email\",\"type\":\"string\"}]},\"assignedUserIds\":null,\"multiInstanceMetadataId\":\"c6377f1c-52b4-492d-bf30-134df34fe9b0\",\"multiInstanceStartToken\":{},\"multiInstanceEndToken\":{},\"flowNodeInstanceId\":\"94dea484-ae4d-4323-8b45-b3510e842dff\",\"flowNodeId\":\"Activity_1bb25d1\",\"flowNodeName\":null,\"flowNodeLane\":\"\",\"flowNodeType\":\"bpmn:UserTask\",\"state\":\"suspended\",\"previousFlowNodeInstanceId\":\"717729b5-cec7-4404-be71-3e86192d9ac5\",\"parentProcessInstanceId\":null,\"processDefinitionId\":\"User-Task-Sample_Definition\",\"processModelId\":\"User-Task-Sample_Process\",\"processInstanceId\":\"9b42409a-b222-40c4-abaa-da1314b33557\",\"correlationId\":\"5d8e7063-8ac5-43b5-aaad-e3ad2d234630\",\"ownerId\":\"dummy_token\",\"startToken\":{},\"endToken\":{},\"startedAt\":\"2024-09-16T11:11:50.986Z\"}}", + "payloadType": "json", + "x": 260, + "y": 400, + "wires": [ + [ + "2ba57472b3afd516" + ] + ] + }, + { + "id": "2ba57472b3afd516", + "type": "ui-dynamic-form", + "z": "e0221ca7bcc43410", + "name": "", + "group": "20384e163d8f5d8e", + "order": 1, + "options": [ + { + "label": "Cancel", + "condition": "", + "errorMessage": "" + }, + { + "label": "Submit", + "condition": "fields.email != ''", + "errorMessage": "Please enter an email!" + } + ], + "waiting_title": "Warten auf den Usertask...", + "waiting_info": "Der Usertask wird automatisch angezeigt, wenn ein entsprechender Task vorhanden ist.", + "width": 0, + "height": 0, + "outputs": 2, + "x": 540, + "y": 400, + "wires": [ + [ + "305d5b75a3305097" + ], + [ + "6a8d9d814231dc23" + ] + ] + }, + { + "id": "305d5b75a3305097", + "type": "debug", + "z": "e0221ca7bcc43410", + "name": "Cancel", + "active": true, + "tosidebar": true, + "console": false, + "tostatus": false, + "complete": "payload", + "targetType": "msg", + "statusVal": "", + "statusType": "auto", + "x": 860, + "y": 300, + "wires": [] + }, + { + "id": "6a8d9d814231dc23", + "type": "debug", + "z": "e0221ca7bcc43410", + "name": "Submit", + "active": true, + "tosidebar": true, + "console": false, + "tostatus": false, + "complete": "payload", + "targetType": "msg", + "statusVal": "", + "statusType": "auto", + "x": 860, + "y": 500, + "wires": [] + }, + { + "id": "20384e163d8f5d8e", + "type": "ui-group", + "name": "Group Name", + "page": "ea1d5417b21e1895", + "width": "6", + "height": "1", + "order": 1, + "showTitle": true, + "className": "", + "visible": "true", + "disabled": "false" + }, + { + "id": "ea1d5417b21e1895", + "type": "ui-page", + "name": "Page 1", + "ui": "c2fcc49f6f9d9eee", + "path": "/page1", + "icon": "home", + "layout": "grid", + "theme": "67a8213b90451087", + "order": 1, + "className": "", + "visible": "true", + "disabled": "false" + }, + { + "id": "c2fcc49f6f9d9eee", + "type": "ui-base", + "name": "My Dashboard", + "path": "/dashboard", + "includeClientData": true, + "acceptsClientConfig": [ + "ui-dropdown", + "ui-radio-group", + "ui-slider", + "ui-switch", + "ui-text", + "ui-table", + "ui-chart", + "ui-gauge", + "ui-notification", + "ui-markdown", + "ui-template", + "ui-control" + ], + "showPathInSidebar": false, + "showPageTitle": true, + "navigationStyle": "default", + "titleBarStyle": "default" + }, + { + "id": "67a8213b90451087", + "type": "ui-theme", + "name": "Theme Name", + "colors": { + "surface": "#ffffff", + "primary": "#0094ce", + "bgPage": "#eeeeee", + "groupBg": "#ffffff", + "groupOutline": "#cccccc" + }, + "sizes": { + "density": "default", + "pagePadding": "12px", + "groupGap": "12px", + "groupBorderRadius": "4px", + "widgetGap": "12px" + } + } +] diff --git a/ui/components/UIDynamicForm.vue b/ui/components/UIDynamicForm.vue index 5da4d77..d5d0f6e 100644 --- a/ui/components/UIDynamicForm.vue +++ b/ui/components/UIDynamicForm.vue @@ -2,27 +2,53 @@

- - - - - {{ createComponent(field).innerText }} - - - - - - Error: {{ errorMsg }} - - -

- - {{ action.label }} - + +

{{ this.props.name }}

+
+ + + + {{ createComponent(field).innerText }} + +
+

{{ field.label }}

+ +

+ {{ field.customForm ? JSON.parse(field.customForm).hint : undefined }} +

+
+ + + +
+ + + Error: {{ errorMsg }} + +
+
+ + {{ action.label }} + +
@@ -62,11 +88,31 @@ export default { form: {}, formData: {}, taskInput: {}, + theme: '', error: false, errorMsg: '', }; }, created() { + const currentPath = window.location.pathname; + const lastPart = currentPath.substring(currentPath.lastIndexOf('/')); + + const store = this.$store.state; + + for (let key in store.ui.pages) { + if (store.ui.pages[key].path === lastPart) { + const theme = store.ui.pages[key].theme; + if (store.ui.themes[theme].name === 'ProcessCube Lightmode') { + this.theme = 'light'; + } else if (store.ui.themes[theme].name === 'ProcessCube Darkmode') { + this.theme = 'dark'; + } else { + this.theme = 'default'; + } + break; + } + } + const formkitConfig = defaultConfig({ theme: 'genesis', }); @@ -83,8 +129,22 @@ export default { 'Der Usertask wird automatisch angezeigt, wenn ein entsprechender Task vorhanden ist.' ); }, + + dynamicClass() { + return `ui-dynamic-form-${this.theme}`; + }, + + dynamicFooterClass() { + return `ui-dynamic-form-footer-${this.theme}`; + }, }, mounted() { + const elements = document.querySelectorAll('.formkit-input'); + + elements.forEach((element) => { + element.classList.add('test'); + }); + this.$socket.on('widget-load:' + this.id, (msg) => { this.init(); this.$store.commit('data/bind', { @@ -151,9 +211,12 @@ export default { number: 'integer', help: hint, wrapperClass: '$remove:formkit-wrapper', + inputClass: `input-${this.theme}`, + innerClass: `${this.theme == 'dark' ? '$remove:formkit-inner' : ''}`, }, }; case 'number': + const step = field.customForm ? JSON.parse(field.customForm).step : undefined; return { type: 'FormKit', props: { @@ -162,8 +225,11 @@ export default { label: field.label, required: field.required, value: field.defaultValue, + step: step, help: hint, wrapperClass: '$remove:formkit-wrapper', + inputClass: `input-${this.theme}`, + innerClass: `${this.theme == 'dark' ? '$remove:formkit-inner' : ''}`, }, }; case 'date': @@ -177,6 +243,8 @@ export default { value: field.defaultValue, help: hint, wrapperClass: '$remove:formkit-wrapper', + inputClass: `input-${this.theme}`, + innerClass: `${this.theme == 'dark' ? '$remove:formkit-inner' : ''}`, }, }; case 'enum': @@ -194,6 +262,8 @@ export default { options: enums, help: hint, wrapperClass: '$remove:formkit-wrapper', + inputClass: `input-${this.theme}`, + innerClass: `${this.theme == 'dark' ? '$remove:formkit-inner' : ''}`, }, }; case 'select': @@ -212,6 +282,8 @@ export default { placeholder: placeholder, help: hint, wrapperClass: '$remove:formkit-wrapper', + inputClass: `input-${this.theme}`, + innerClass: `${this.theme == 'dark' ? '$remove:formkit-inner' : ''}`, }, }; case 'string': @@ -226,6 +298,8 @@ export default { help: hint, placeholder: placeholder, wrapperClass: '$remove:formkit-wrapper', + inputClass: `input-${this.theme}`, + innerClass: `${this.theme == 'dark' ? '$remove:formkit-inner' : ''}`, }, }; case 'boolean': @@ -238,6 +312,8 @@ export default { required: field.required, value: field.defaultValue, help: hint, + inputClass: `input-${this.theme}`, + innerClass: `${this.theme == 'dark' ? '$remove:formkit-inner' : ''}`, }, }; case 'file': @@ -252,6 +328,8 @@ export default { help: hint, innerClass: 'reset-background', wrapperClass: '$remove:formkit-wrapper', + inputClass: `input-${this.theme}`, + innerClass: `${this.theme == 'dark' ? '$remove:formkit-inner' : ''}`, }, }; case 'checkbox': @@ -269,6 +347,8 @@ export default { options: options, help: hint, fieldsetClass: 'custom-fieldset', + inputClass: `input-${this.theme}`, + innerClass: `${this.theme == 'dark' ? '$remove:formkit-inner' : ''}`, }, }; case 'color': @@ -294,6 +374,8 @@ export default { value: field.defaultValue, help: hint, wrapperClass: '$remove:formkit-wrapper', + inputClass: `input-${this.theme}`, + innerClass: `${this.theme == 'dark' ? '$remove:formkit-inner' : ''}`, }, }; case 'email': @@ -310,6 +392,8 @@ export default { validationVisibility: 'live', placeholder: placeholder, wrapperClass: '$remove:formkit-wrapper', + inputClass: `input-${this.theme}`, + innerClass: `${this.theme == 'dark' ? '$remove:formkit-inner' : ''}`, }, }; case 'header': @@ -343,6 +427,8 @@ export default { value: field.defaultValue, help: hint, wrapperClass: '$remove:formkit-wrapper', + inputClass: `input-${this.theme}`, + innerClass: `${this.theme == 'dark' ? '$remove:formkit-inner' : ''}`, }, }; case 'paragraph': @@ -362,6 +448,8 @@ export default { help: hint, placeholder: placeholder, wrapperClass: '$remove:formkit-wrapper', + inputClass: `input-${this.theme}`, + innerClass: `${this.theme == 'dark' ? '$remove:formkit-inner' : ''}`, }, }; case 'radio': @@ -379,23 +467,27 @@ export default { options: radioOptions, help: hint, fieldsetClass: 'custom-fieldset', + inputClass: `input-${this.theme}`, + innerClass: `${this.theme == 'dark' ? '$remove:formkit-inner' : ''}`, }, }; case 'range': const customForm = JSON.parse(field.customForm); return { - type: 'FormKit', + type: 'v-slider', props: { - type: 'range', id: field.id, - label: field.label, + // label: field.label, required: field.required, - value: field.defaultValue, - help: hint, + // value: field.defaultValue, + // help: hint, min: customForm.min, max: customForm.max, - step: customForm.step, //step is not supported by formkit free version - wrapperClass: '$remove:formkit-wrapper', + step: customForm.step, + thumbLabel: true, + // wrapperClass: '$remove:formkit-wrapper', + // inputClass: `input-${this.theme}`, + // innerClass: `${this.theme == 'dark' ? '$remove:formkit-inner' : ''}`, }, }; case 'tel': @@ -410,9 +502,12 @@ export default { help: hint, placeholder: placeholder, wrapperClass: '$remove:formkit-wrapper', + inputClass: `input-${this.theme}`, + innerClass: `${this.theme == 'dark' ? '$remove:formkit-inner' : ''}`, }, }; case 'textarea': + const rows = field.customForm ? JSON.parse(field.customForm).rows : undefined; return { type: 'FormKit', props: { @@ -421,9 +516,12 @@ export default { label: field.label, required: field.required, value: field.defaultValue, + rows: rows, help: hint, placeholder: placeholder, wrapperClass: '$remove:formkit-wrapper', + inputClass: `input-${this.theme}`, + innerClass: `${this.theme == 'dark' ? '$remove:formkit-inner' : ''}`, }, }; case 'time': @@ -438,6 +536,8 @@ export default { help: hint, placeholder: placeholder, wrapperClass: '$remove:formkit-wrapper', + inputClass: `input-${this.theme}`, + innerClass: `${this.theme == 'dark' ? '$remove:formkit-inner' : ''}`, }, }; case 'url': @@ -454,6 +554,8 @@ export default { validation: 'url', validationVisibility: 'live', wrapperClass: '$remove:formkit-wrapper', + inputClass: `input-${this.theme}`, + innerClass: `${this.theme == 'dark' ? '$remove:formkit-inner' : ''}`, }, }; case 'week': @@ -468,6 +570,8 @@ export default { help: hint, placeholder: placeholder, wrapperClass: '$remove:formkit-wrapper', + inputClass: `input-${this.theme}`, + innerClass: `${this.theme == 'dark' ? '$remove:formkit-inner' : ''}`, }, }; default: @@ -480,6 +584,8 @@ export default { required: field.required, value: field.defaultValue, help: hint, + inputClass: `input-${this.theme}`, + innerClass: `${this.theme == 'dark' ? '$remove:formkit-inner' : ''}`, }, }; } @@ -526,7 +632,7 @@ export default { this.actions = this.props.options; }, actionFn(action) { - this.checkFormState(); + // this.checkFormState(); if (this.checkCondition(action.condition)) { this.showError(false, ''); // TODO: MM - begin @@ -550,6 +656,7 @@ export default { try { const func = Function('fields', 'userTask', 'msg', '"use strict"; return (' + condition + ')'); const result = func(this.formData, this.taskInput, this.messages[this.id]); + console.log(this.formData, result); return Boolean(result); } catch (err) { console.error('Error while evaluating condition: ' + err); diff --git a/ui/stylesheets/ui-dynamic-form.css b/ui/stylesheets/ui-dynamic-form.css index 421fe8d..3ecfb79 100644 --- a/ui/stylesheets/ui-dynamic-form.css +++ b/ui/stylesheets/ui-dynamic-form.css @@ -43,6 +43,73 @@ code { color: #ae0000; } +.ui-dynamic-form-light { + max-width: 500px; + margin-left: auto; + margin-right: auto; + border-radius: 12px; + box-shadow: 0 4px 16px -3px rgba(0, 0, 0, 0.5); + max-height: 90%; +} + +.input-dark { + background-color: rgba(85, 85, 85, 255); +} + +.ui-dynamic-form-dark { + max-width: 500px; + margin-left: auto; + margin-right: auto; + border-radius: 12px; + box-shadow: 0 4px 16px -3px rgba(255, 255, 255, 0.9); + background-color: rgba(44, 44, 44, 255); + color: rgba(165, 165, 165, 255); + max-height: 90%; +} + +.ui-dynamic-form-default { + max-width: 500px; + margin-left: auto; + margin-right: auto; + border-radius: 12px; + box-shadow: 0 4px 16px -3px rgb(var(--v-theme-on-group-background)); + background-color: rgb(var(--v-theme-group-background)); + color: rgb(var(--v-theme-on-group-background)); + max-height: 90%; +} + +.ui-dynamic-form-footer-default { + display: flex; + flex-direction: column; + gap: 8px; + padding: 16px; + margin: 0; + border-bottom-left-radius: 12px; + border-bottom-right-radius: 12px; +} + +.ui-dynamic-form-footer-light { + display: flex; + flex-direction: column; + gap: 8px; + padding: 16px; + background-color: rgba(249, 250, 251, 1); + margin: 0; + border-bottom-left-radius: 12px; + border-bottom-right-radius: 12px; +} + +.ui-dynamic-form-footer-dark { + display: flex; + flex-direction: column; + gap: 8px; + padding: 16px; + background-color: rgba(35, 35, 35, 255); + margin: 0; + border-bottom-left-radius: 12px; + border-bottom-right-radius: 12px; +} + .ui-dynamic-form-wrapper { --fk-color-primary: rgb(var(--v-theme-primary)) !important; --fk-color-border: rgb(var(--v-theme-group-outline)); /* Does not work somehow */ @@ -50,6 +117,7 @@ code { --fk-color-input: rgb(var(--v-theme-on-group-background)); --fk-color-help: rgb(var(--v-theme-on-group-background)); --fk-color-border-focus: rgb(var(--v-theme-primary)); + height: full; } .reset-background {