diff --git a/package-lock.json b/package-lock.json index 82f4901..0800994 100644 --- a/package-lock.json +++ b/package-lock.json @@ -8,7 +8,9 @@ "name": "pro-code", "version": "0.1.0", "dependencies": { + "bootstrap": "^5.3.3", "core-js": "^3.8.3", + "pinia": "^3.0.1", "vue": "^3.2.13" }, "devDependencies": { @@ -2011,6 +2013,17 @@ "dev": true, "license": "MIT" }, + "node_modules/@popperjs/core": { + "version": "2.11.8", + "resolved": "https://registry.npmjs.org/@popperjs/core/-/core-2.11.8.tgz", + "integrity": "sha512-P1st0aksCrn9sGZhp8GMYwBnQsbvAWsZAX44oXNNvLHGqAOcoVxmjZiohstwQ7SqKnbR47akdNi+uleWD8+g6A==", + "license": "MIT", + "peer": true, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/popperjs" + } + }, "node_modules/@sideway/address": { "version": "4.1.5", "resolved": "https://registry.npmjs.org/@sideway/address/-/address-4.1.5.tgz", @@ -2949,6 +2962,39 @@ "dev": true, "license": "ISC" }, + "node_modules/@vue/devtools-api": { + "version": "7.7.2", + "resolved": "https://registry.npmjs.org/@vue/devtools-api/-/devtools-api-7.7.2.tgz", + "integrity": "sha512-1syn558KhyN+chO5SjlZIwJ8bV/bQ1nOVTG66t2RbG66ZGekyiYNmRO7X9BJCXQqPsFHlnksqvPhce2qpzxFnA==", + "license": "MIT", + "dependencies": { + "@vue/devtools-kit": "^7.7.2" + } + }, + "node_modules/@vue/devtools-kit": { + "version": "7.7.2", + "resolved": "https://registry.npmjs.org/@vue/devtools-kit/-/devtools-kit-7.7.2.tgz", + "integrity": "sha512-CY0I1JH3Z8PECbn6k3TqM1Bk9ASWxeMtTCvZr7vb+CHi+X/QwQm5F1/fPagraamKMAHVfuuCbdcnNg1A4CYVWQ==", + "license": "MIT", + "dependencies": { + "@vue/devtools-shared": "^7.7.2", + "birpc": "^0.2.19", + "hookable": "^5.5.3", + "mitt": "^3.0.1", + "perfect-debounce": "^1.0.0", + "speakingurl": "^14.0.1", + "superjson": "^2.2.1" + } + }, + "node_modules/@vue/devtools-shared": { + "version": "7.7.2", + "resolved": "https://registry.npmjs.org/@vue/devtools-shared/-/devtools-shared-7.7.2.tgz", + "integrity": "sha512-uBFxnp8gwW2vD6FrJB8JZLUzVb6PNRG0B0jBnHsOH8uKyva2qINY8PTF5Te4QlTbMDqU5K6qtJDr6cNsKWhbOA==", + "license": "MIT", + "dependencies": { + "rfdc": "^1.4.1" + } + }, "node_modules/@vue/reactivity": { "version": "3.5.13", "resolved": "https://registry.npmjs.org/@vue/reactivity/-/reactivity-3.5.13.tgz", @@ -3698,6 +3744,15 @@ "url": "https://github.com/sponsors/sindresorhus" } }, + "node_modules/birpc": { + "version": "0.2.19", + "resolved": "https://registry.npmjs.org/birpc/-/birpc-0.2.19.tgz", + "integrity": "sha512-5WeXXAvTmitV1RqJFppT5QtUiz2p1mRSYU000Jkft5ZUCLJIk4uQriYNO50HknxKwM6jd8utNc66K1qGIwwWBQ==", + "license": "MIT", + "funding": { + "url": "https://github.com/sponsors/antfu" + } + }, "node_modules/bl": { "version": "4.1.0", "resolved": "https://registry.npmjs.org/bl/-/bl-4.1.0.tgz", @@ -3777,6 +3832,25 @@ "dev": true, "license": "ISC" }, + "node_modules/bootstrap": { + "version": "5.3.3", + "resolved": "https://registry.npmjs.org/bootstrap/-/bootstrap-5.3.3.tgz", + "integrity": "sha512-8HLCdWgyoMguSO9o+aH+iuZ+aht+mzW0u3HIMzVu7Srrpv7EBBxTnrFlSCskwdY1+EOFQSm7uMJhNQHkdPcmjg==", + "funding": [ + { + "type": "github", + "url": "https://github.com/sponsors/twbs" + }, + { + "type": "opencollective", + "url": "https://opencollective.com/bootstrap" + } + ], + "license": "MIT", + "peerDependencies": { + "@popperjs/core": "^2.11.8" + } + }, "node_modules/brace-expansion": { "version": "1.1.11", "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.11.tgz", @@ -4378,6 +4452,21 @@ "dev": true, "license": "MIT" }, + "node_modules/copy-anything": { + "version": "3.0.5", + "resolved": "https://registry.npmjs.org/copy-anything/-/copy-anything-3.0.5.tgz", + "integrity": "sha512-yCEafptTtb4bk7GLEQoM8KVJpxAfdBJYaXyzQEgQQQgYrZiDp8SJmGKlYza6CYjEDNstAdNdKA3UuoULlEbS6w==", + "license": "MIT", + "dependencies": { + "is-what": "^4.1.8" + }, + "engines": { + "node": ">=12.13" + }, + "funding": { + "url": "https://github.com/sponsors/mesqueeb" + } + }, "node_modules/copy-webpack-plugin": { "version": "9.1.0", "resolved": "https://registry.npmjs.org/copy-webpack-plugin/-/copy-webpack-plugin-9.1.0.tgz", @@ -6735,6 +6824,12 @@ "node": "*" } }, + "node_modules/hookable": { + "version": "5.5.3", + "resolved": "https://registry.npmjs.org/hookable/-/hookable-5.5.3.tgz", + "integrity": "sha512-Yc+BQe8SvoXH1643Qez1zqLRmbA5rCL+sSmk6TVos0LWVfNIB7PGncdlId77WzLGSIB5KaWgTaNTs2lNVEI6VQ==", + "license": "MIT" + }, "node_modules/hosted-git-info": { "version": "2.8.9", "resolved": "https://registry.npmjs.org/hosted-git-info/-/hosted-git-info-2.8.9.tgz", @@ -7281,6 +7376,18 @@ "url": "https://github.com/sponsors/sindresorhus" } }, + "node_modules/is-what": { + "version": "4.1.16", + "resolved": "https://registry.npmjs.org/is-what/-/is-what-4.1.16.tgz", + "integrity": "sha512-ZhMwEosbFJkA0YhFnNDgTM4ZxDRsS6HqTo7qsZM08fehyRYIYa0yHu5R6mgo1n/8MgaPBXiPimPD77baVFYg+A==", + "license": "MIT", + "engines": { + "node": ">=12.13" + }, + "funding": { + "url": "https://github.com/sponsors/mesqueeb" + } + }, "node_modules/is-wsl": { "version": "2.2.0", "resolved": "https://registry.npmjs.org/is-wsl/-/is-wsl-2.2.0.tgz", @@ -8151,6 +8258,12 @@ "dev": true, "license": "ISC" }, + "node_modules/mitt": { + "version": "3.0.1", + "resolved": "https://registry.npmjs.org/mitt/-/mitt-3.0.1.tgz", + "integrity": "sha512-vKivATfr97l2/QBCYAkXYDbrIWPM2IIKEl7YPhjCvKlG3kE2gm+uBo6nEXK3M5/Ffh/FLpKExzOQ3JJoJGFKBw==", + "license": "MIT" + }, "node_modules/mkdirp": { "version": "0.5.6", "resolved": "https://registry.npmjs.org/mkdirp/-/mkdirp-0.5.6.tgz", @@ -8796,6 +8909,12 @@ "node": ">=8" } }, + "node_modules/perfect-debounce": { + "version": "1.0.0", + "resolved": "https://registry.npmjs.org/perfect-debounce/-/perfect-debounce-1.0.0.tgz", + "integrity": "sha512-xCy9V055GLEqoFaHoC1SoLIaLmWctgCUaBaWxDZ7/Zx4CTyX7cJQLJOok/orfjZAh9kEYpjJa4d0KcJmCbctZA==", + "license": "MIT" + }, "node_modules/picocolors": { "version": "1.1.1", "resolved": "https://registry.npmjs.org/picocolors/-/picocolors-1.1.1.tgz", @@ -8815,6 +8934,27 @@ "url": "https://github.com/sponsors/jonschlinkert" } }, + "node_modules/pinia": { + "version": "3.0.1", + "resolved": "https://registry.npmjs.org/pinia/-/pinia-3.0.1.tgz", + "integrity": "sha512-WXglsDzztOTH6IfcJ99ltYZin2mY8XZCXujkYWVIJlBjqsP6ST7zw+Aarh63E1cDVYeyUcPCxPHzJpEOmzB6Wg==", + "license": "MIT", + "dependencies": { + "@vue/devtools-api": "^7.7.2" + }, + "funding": { + "url": "https://github.com/sponsors/posva" + }, + "peerDependencies": { + "typescript": ">=4.4.4", + "vue": "^2.7.0 || ^3.5.11" + }, + "peerDependenciesMeta": { + "typescript": { + "optional": true + } + } + }, "node_modules/pkg-dir": { "version": "4.2.0", "resolved": "https://registry.npmjs.org/pkg-dir/-/pkg-dir-4.2.0.tgz", @@ -10017,6 +10157,12 @@ "node": ">=0.10.0" } }, + "node_modules/rfdc": { + "version": "1.4.1", + "resolved": "https://registry.npmjs.org/rfdc/-/rfdc-1.4.1.tgz", + "integrity": "sha512-q1b3N5QkRUWUl7iyylaaj3kOpIT0N2i9MqIEQXP73GVsN9cw3fdx8X63cEmWhJGi2PPCF23Ijp7ktmd39rawIA==", + "license": "MIT" + }, "node_modules/rimraf": { "version": "3.0.2", "resolved": "https://registry.npmjs.org/rimraf/-/rimraf-3.0.2.tgz", @@ -10610,6 +10756,15 @@ "wbuf": "^1.7.3" } }, + "node_modules/speakingurl": { + "version": "14.0.1", + "resolved": "https://registry.npmjs.org/speakingurl/-/speakingurl-14.0.1.tgz", + "integrity": "sha512-1POYv7uv2gXoyGFpBCmpDVSNV74IfsWlDW216UPjbWufNf+bSU6GdbDsxdcxtfwb4xlI3yxzOTKClUosxARYrQ==", + "license": "BSD-3-Clause", + "engines": { + "node": ">=0.10.0" + } + }, "node_modules/sprintf-js": { "version": "1.0.3", "resolved": "https://registry.npmjs.org/sprintf-js/-/sprintf-js-1.0.3.tgz", @@ -10753,6 +10908,18 @@ "postcss": "^8.2.15" } }, + "node_modules/superjson": { + "version": "2.2.2", + "resolved": "https://registry.npmjs.org/superjson/-/superjson-2.2.2.tgz", + "integrity": "sha512-5JRxVqC8I8NuOUjzBbvVJAKNM8qoVuH0O77h4WInc/qC2q5IreqKxYwgkga3PfA22OayK2ikceb/B26dztPl+Q==", + "license": "MIT", + "dependencies": { + "copy-anything": "^3.0.2" + }, + "engines": { + "node": ">=16" + } + }, "node_modules/supports-color": { "version": "7.2.0", "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz", diff --git a/package.json b/package.json index 8457b38..1d331f4 100644 --- a/package.json +++ b/package.json @@ -8,7 +8,9 @@ "lint": "vue-cli-service lint" }, "dependencies": { + "bootstrap": "^5.3.3", "core-js": "^3.8.3", + "pinia": "^3.0.1", "vue": "^3.2.13" }, "devDependencies": { diff --git a/public/index.html b/public/index.html index 3e5a139..f69d314 100644 --- a/public/index.html +++ b/public/index.html @@ -1,11 +1,12 @@ - - - - + + + + <%= htmlWebpackPlugin.options.title %> +
+ diff --git a/src/App.vue b/src/App.vue index 591a031..62b214a 100644 --- a/src/App.vue +++ b/src/App.vue @@ -1,26 +1,29 @@ diff --git a/src/assets/custom-bootstrap.css b/src/assets/custom-bootstrap.css new file mode 100644 index 0000000..26cf92d --- /dev/null +++ b/src/assets/custom-bootstrap.css @@ -0,0 +1,6 @@ +:root { + --bs-primary: #27445d; /* Deine Wunschfarbe */ + --bs-link-color: #27445d; + --bs-link-hover-color: #71bbb2; + --bs-primary-bg-subtle: #bdd9f850; +} diff --git a/src/assets/img/photo-1514888286974-6c03e2ca1dba.jpg b/src/assets/img/photo-1514888286974-6c03e2ca1dba.jpg new file mode 100644 index 0000000..1856475 Binary files /dev/null and b/src/assets/img/photo-1514888286974-6c03e2ca1dba.jpg differ diff --git a/src/components/HelloWorld.vue b/src/components/HelloWorld.vue deleted file mode 100644 index 879051a..0000000 --- a/src/components/HelloWorld.vue +++ /dev/null @@ -1,58 +0,0 @@ - - - - - - diff --git a/src/components/formDesigner/ComponentRenderer.vue b/src/components/formDesigner/ComponentRenderer.vue new file mode 100644 index 0000000..518f937 --- /dev/null +++ b/src/components/formDesigner/ComponentRenderer.vue @@ -0,0 +1,58 @@ + + + diff --git a/src/components/formDesigner/FormDesignerToolsComponent.vue b/src/components/formDesigner/FormDesignerToolsComponent.vue new file mode 100644 index 0000000..f801d55 --- /dev/null +++ b/src/components/formDesigner/FormDesignerToolsComponent.vue @@ -0,0 +1,144 @@ + + + + + diff --git a/src/components/formDesigner/FormDesignerTreeViewComponent.vue b/src/components/formDesigner/FormDesignerTreeViewComponent.vue new file mode 100644 index 0000000..314a65f --- /dev/null +++ b/src/components/formDesigner/FormDesignerTreeViewComponent.vue @@ -0,0 +1,54 @@ + + + + + diff --git a/src/components/formDesigner/FormRendererComponent.vue b/src/components/formDesigner/FormRendererComponent.vue new file mode 100644 index 0000000..8abf648 --- /dev/null +++ b/src/components/formDesigner/FormRendererComponent.vue @@ -0,0 +1,85 @@ + + + + + diff --git a/src/components/formDesigner/formRenderer/ButtonRenderer.vue b/src/components/formDesigner/formRenderer/ButtonRenderer.vue new file mode 100644 index 0000000..ba2ae1c --- /dev/null +++ b/src/components/formDesigner/formRenderer/ButtonRenderer.vue @@ -0,0 +1,23 @@ + + + + + diff --git a/src/components/formDesigner/formRenderer/FlexLayoutRenderer.vue b/src/components/formDesigner/formRenderer/FlexLayoutRenderer.vue new file mode 100644 index 0000000..d5453ea --- /dev/null +++ b/src/components/formDesigner/formRenderer/FlexLayoutRenderer.vue @@ -0,0 +1,50 @@ + + + + + diff --git a/src/components/formDesigner/formRenderer/InputDateRenderer.vue b/src/components/formDesigner/formRenderer/InputDateRenderer.vue new file mode 100644 index 0000000..44da4cc --- /dev/null +++ b/src/components/formDesigner/formRenderer/InputDateRenderer.vue @@ -0,0 +1,34 @@ + + + + + diff --git a/src/components/formDesigner/formRenderer/InputNumberRenderer.vue b/src/components/formDesigner/formRenderer/InputNumberRenderer.vue new file mode 100644 index 0000000..2fcf357 --- /dev/null +++ b/src/components/formDesigner/formRenderer/InputNumberRenderer.vue @@ -0,0 +1,35 @@ + + + + + diff --git a/src/components/formDesigner/formRenderer/InputTextRenderer.vue b/src/components/formDesigner/formRenderer/InputTextRenderer.vue new file mode 100644 index 0000000..14cd215 --- /dev/null +++ b/src/components/formDesigner/formRenderer/InputTextRenderer.vue @@ -0,0 +1,35 @@ + + + + + diff --git a/src/components/formDesigner/formRenderer/LabelRenderer.vue b/src/components/formDesigner/formRenderer/LabelRenderer.vue new file mode 100644 index 0000000..2294be3 --- /dev/null +++ b/src/components/formDesigner/formRenderer/LabelRenderer.vue @@ -0,0 +1,12 @@ + + + diff --git a/src/components/process/ProcessTableComponent.vue b/src/components/process/ProcessTableComponent.vue new file mode 100644 index 0000000..cf25788 --- /dev/null +++ b/src/components/process/ProcessTableComponent.vue @@ -0,0 +1,87 @@ + + + + + diff --git a/src/components/topbar/TopbarComponent.vue b/src/components/topbar/TopbarComponent.vue new file mode 100644 index 0000000..7d058a0 --- /dev/null +++ b/src/components/topbar/TopbarComponent.vue @@ -0,0 +1,44 @@ + + + + + diff --git a/src/components/topbar/TopbarPagesComponent.vue b/src/components/topbar/TopbarPagesComponent.vue new file mode 100644 index 0000000..59b22f1 --- /dev/null +++ b/src/components/topbar/TopbarPagesComponent.vue @@ -0,0 +1,66 @@ + + + + + diff --git a/src/dummyData/formularData.json b/src/dummyData/formularData.json new file mode 100644 index 0000000..7ee6e29 --- /dev/null +++ b/src/dummyData/formularData.json @@ -0,0 +1,42 @@ +[ + { + "type": "Label", + "value": "Ich bin ein Label", + "key": "1" + }, + { + "type": "InputText", + "placeholder": "Gib deinen Namen ein", + "label": "Vorname", + "key": "2" + }, + { + "type": "FlexLayout", + "direction": "horizontal", + "key": "3", + "items": [ + { + "type": "InputNumber", + "placeholder": "Gib dein Alter ein", + "label": "Alter", + "key": "4" + }, + { + "type": "InputDate", + "placeholder": "Gib dein Geburtsdatum ein", + "label": "Geburtsdatum", + "key": "5" + }, + { + "type": "Label", + "value": "Ich bin ein Label", + "key": "6" + } + ] + }, + { + "type": "Button", + "label": "Klicke mich", + "key": "7" + } +] diff --git a/src/dummyData/processes.json b/src/dummyData/processes.json new file mode 100644 index 0000000..556119f --- /dev/null +++ b/src/dummyData/processes.json @@ -0,0 +1,38 @@ +{ + "processes": [ + { + "id": 1, + "name": "Prozess A", + "description": "Ich bin eine Beschreibung des oben genannten Prozesses", + "views": [ + { + "name": "Detailsmaske", + "changed": "13.02.2025" + }, + { + "name": "Übersicht Admins", + "changed": "12.01.2025" + } + ], + "workflows": [ + { + "name": "Erstellung eines Datensatzes", + "changed": "13.02.2025" + }, + { + "name": "Verwaltung von Sendungen", + "changed": "12.01.2025" + }, + { + "name": "Überprüfung von Sendungen", + "changed": "11.12.2024" + } + ] + }, + { + "id": 2, + "name": "Sendungslogik", + "description": "Kunden können in diesem Przoess Sendungen erfassen" + } + ] +} diff --git a/src/dummyData/treeExmaple.json b/src/dummyData/treeExmaple.json new file mode 100644 index 0000000..e1f8e47 --- /dev/null +++ b/src/dummyData/treeExmaple.json @@ -0,0 +1,11 @@ +[ + { + "id": 1, + "label": "Elternknoten", + "isExpanded": false, + "children": [ + { "id": 2, "label": "Kind 1", "isExpanded": false }, + { "id": 3, "label": "Kind 2", "isExpanded": false, "children": [{ "id": 4, "label": "Enkelkind 1", "isExpanded": false }] } + ] + } +] diff --git a/src/layouts/DevelopmentLayout.vue b/src/layouts/DevelopmentLayout.vue new file mode 100644 index 0000000..5692462 --- /dev/null +++ b/src/layouts/DevelopmentLayout.vue @@ -0,0 +1,58 @@ + + + + + diff --git a/src/layouts/FormDesignerLayout.vue b/src/layouts/FormDesignerLayout.vue new file mode 100644 index 0000000..5e886d7 --- /dev/null +++ b/src/layouts/FormDesignerLayout.vue @@ -0,0 +1,260 @@ + + + + + diff --git a/src/main.js b/src/main.js index 01433bc..4f81ae2 100644 --- a/src/main.js +++ b/src/main.js @@ -1,4 +1,12 @@ -import { createApp } from 'vue' -import App from './App.vue' +import { createApp } from "vue"; +import { createPinia } from "pinia"; +import App from "./App.vue"; +import "bootstrap/dist/css/bootstrap.min.css"; +import "bootstrap/dist/js/bootstrap.bundle.min.js"; +import "@/assets/custom-bootstrap.css"; -createApp(App).mount('#app') +const app = createApp(App); +const pinia = createPinia(); + +app.use(pinia); +app.mount("#app"); diff --git a/src/pages/DevelopmentDashboard.vue b/src/pages/DevelopmentDashboard.vue new file mode 100644 index 0000000..eea6c48 --- /dev/null +++ b/src/pages/DevelopmentDashboard.vue @@ -0,0 +1,51 @@ + + + + + diff --git a/src/pages/ProcessOverviewComponent.vue b/src/pages/ProcessOverviewComponent.vue new file mode 100644 index 0000000..2dc1acc --- /dev/null +++ b/src/pages/ProcessOverviewComponent.vue @@ -0,0 +1,65 @@ + + + + + diff --git a/src/pages/TestComponent.vue b/src/pages/TestComponent.vue new file mode 100644 index 0000000..d37b153 --- /dev/null +++ b/src/pages/TestComponent.vue @@ -0,0 +1,30 @@ + + + + + diff --git a/src/store/uiStore.js b/src/store/uiStore.js new file mode 100644 index 0000000..abf73de --- /dev/null +++ b/src/store/uiStore.js @@ -0,0 +1,69 @@ +import { defineStore } from "pinia"; + +export const useUiStore = defineStore("ui", { + state: () => ({ + // Ein Objekt, das die geöffneten Seiten und deren Status speichert + openComponents: [ + { + name: "Dashbord", + active: true, + componentName: "DevelopmentDashboardComponent", + }, + { + name: "Test", + active: false, + componentName: "TestComponent", + }, + ], + }), + + actions: { + // Seite aktivieren oder hinzufügen + setActivePage(componentName, displayName, props = {}) { + // Alle Seiten auf inaktiv setzen + this.openComponents.forEach((comp) => (comp.active = false)); + + // Überprüfen, ob die Seite bereits existiert + const existingComponent = this.openComponents.find((comp) => comp.componentName === componentName && comp.name === displayName); + + if (existingComponent) { + existingComponent.active = true; + existingComponent.props = { ...existingComponent.props, ...props }; + } else { + this.openComponents.push({ + componentName, + name: displayName, + active: true, + props, + }); + } + }, + + // Seite komplett entfernen + closePage(componentName, displayName) { + this.openComponents = this.openComponents.filter((comp) => !(comp.componentName === componentName && comp.name === displayName)); + + if (this.openComponents.length === 0) { + this.resetPages(); + } else { + this.openComponents[0].active = true; + } + }, + + // Prüfen, ob eine Seite aktiv ist + isPageActive(componentName) { + return this.openComponents.some((comp) => comp.componentName === componentName && comp.active); + }, + + // Setzt alle Seiten zurück (optional, wenn alle Seiten geschlossen werden sollen) + resetPages() { + this.openComponents = [ + { + name: "Dashbord", + active: true, + componentName: "DevelopmentDashboardComponent", + }, + ]; + }, + }, +}); diff --git a/vue.config.js b/vue.config.js index 910e297..6007d6a 100644 --- a/vue.config.js +++ b/vue.config.js @@ -1,4 +1,8 @@ -const { defineConfig } = require('@vue/cli-service') +const { defineConfig } = require("@vue/cli-service"); + module.exports = defineConfig({ - transpileDependencies: true -}) + transpileDependencies: true, + devServer: { + hot: true, // Explizit Hot Reload aktivieren + }, +});