From 003bdb11ce41ea6a09c58cae5273968b476f6da2 Mon Sep 17 00:00:00 2001 From: Nils Hansen Date: Fri, 15 Apr 2022 18:22:16 +0200 Subject: [PATCH 1/4] Reorganise into uml module --- package-lock.json | 396 ++++++++++++++++++ package.json | 1 + .../data-view/data-view.component.ts | 2 +- src/app/services/crud.service.ts | 2 +- .../explore-by-example.component.ts | 2 +- .../graphical-querying.component.ts | 2 +- .../relational-algebra.component.ts | 2 +- .../document-edit-collection.component.ts | 2 +- .../document-edit-collections.component.ts | 2 +- .../edit-columns/edit-columns.component.ts | 2 +- .../edit-source-columns.component.ts | 2 +- .../edit-tables/edit-tables.component.ts | 2 +- src/app/views/uml/{ => api}/uml.model.ts | 2 +- .../specs}/uml.component.spec.ts | 2 +- .../uml/{ => component}/uml.component.html | 2 +- .../uml/{ => component}/uml.component.scss | 0 .../uml/{ => component}/uml.component.ts | 14 +- .../uml/container/uml-container.component.ts | 19 + src/app/views/uml/index.ts | 2 + src/app/views/uml/module/uml.module.ts | 51 +++ src/app/views/views-routing.module.ts | 8 +- src/app/views/views.module.ts | 9 +- 22 files changed, 499 insertions(+), 27 deletions(-) rename src/app/views/uml/{ => api}/uml.model.ts (93%) rename src/app/views/uml/{ => component/specs}/uml.component.spec.ts (91%) rename src/app/views/uml/{ => component}/uml.component.html (97%) rename src/app/views/uml/{ => component}/uml.component.scss (100%) rename src/app/views/uml/{ => component}/uml.component.ts (94%) create mode 100644 src/app/views/uml/container/uml-container.component.ts create mode 100644 src/app/views/uml/index.ts create mode 100644 src/app/views/uml/module/uml.module.ts diff --git a/package-lock.json b/package-lock.json index 34450b74..cf0b49ff 100644 --- a/package-lock.json +++ b/package-lock.json @@ -5,6 +5,7 @@ "requires": true, "packages": { "": { + "name": "Polypheny-UI", "version": "1.0.0", "license": "MIT", "dependencies": { @@ -66,6 +67,7 @@ "@types/hammerjs": "^2.0.36", "@types/jasmine": "^3.5.10", "@types/jasminewd2": "^2.0.8", + "@types/jest": "^27.4.1", "@types/node": "^12.11.1", "codelyzer": "^5.1.2", "cypress": "^7.6.0", @@ -2906,6 +2908,16 @@ "@types/jasmine": "*" } }, + "node_modules/@types/jest": { + "version": "27.4.1", + "resolved": "https://registry.npmjs.org/@types/jest/-/jest-27.4.1.tgz", + "integrity": "sha512-23iPJADSmicDVrWk+HT58LMJtzLAnB2AgIzplQuq/bSrGaxCrlvRFjGbXmamnnk/mAmCdLStiGqggu28ocUyiw==", + "dev": true, + "dependencies": { + "jest-matcher-utils": "^27.0.0", + "pretty-format": "^27.0.0" + } + }, "node_modules/@types/json-schema": { "version": "7.0.6", "resolved": "https://registry.npmjs.org/@types/json-schema/-/json-schema-7.0.6.tgz", @@ -6686,6 +6698,15 @@ "node": ">=0.3.1" } }, + "node_modules/diff-sequences": { + "version": "27.5.1", + "resolved": "https://registry.npmjs.org/diff-sequences/-/diff-sequences-27.5.1.tgz", + "integrity": "sha512-k1gCAXAsNgLwEL+Y8Wvl+M6oEFj5bgazfZULpS5CneoPPXRaCCW7dm+q21Ky2VEE5X+VeRDBVg1Pcvvsr4TtNQ==", + "dev": true, + "engines": { + "node": "^10.13.0 || ^12.13.0 || ^14.15.0 || >=15.0.0" + } + }, "node_modules/diffie-hellman": { "version": "5.0.3", "resolved": "https://registry.npmjs.org/diffie-hellman/-/diffie-hellman-5.0.3.tgz", @@ -9950,6 +9971,173 @@ "node": ">= 6.9.x" } }, + "node_modules/jest-diff": { + "version": "27.5.1", + "resolved": "https://registry.npmjs.org/jest-diff/-/jest-diff-27.5.1.tgz", + "integrity": "sha512-m0NvkX55LDt9T4mctTEgnZk3fmEg3NRYutvMPWM/0iPnkFj2wIeF45O1718cMSOFO1vINkqmxqD8vE37uTEbqw==", + "dev": true, + "dependencies": { + "chalk": "^4.0.0", + "diff-sequences": "^27.5.1", + "jest-get-type": "^27.5.1", + "pretty-format": "^27.5.1" + }, + "engines": { + "node": "^10.13.0 || ^12.13.0 || ^14.15.0 || >=15.0.0" + } + }, + "node_modules/jest-diff/node_modules/ansi-styles": { + "version": "4.3.0", + "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz", + "integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==", + "dev": true, + "dependencies": { + "color-convert": "^2.0.1" + }, + "engines": { + "node": ">=8" + }, + "funding": { + "url": "https://github.com/chalk/ansi-styles?sponsor=1" + } + }, + "node_modules/jest-diff/node_modules/chalk": { + "version": "4.1.2", + "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.2.tgz", + "integrity": "sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==", + "dev": true, + "dependencies": { + "ansi-styles": "^4.1.0", + "supports-color": "^7.1.0" + }, + "engines": { + "node": ">=10" + }, + "funding": { + "url": "https://github.com/chalk/chalk?sponsor=1" + } + }, + "node_modules/jest-diff/node_modules/color-convert": { + "version": "2.0.1", + "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz", + "integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==", + "dev": true, + "dependencies": { + "color-name": "~1.1.4" + }, + "engines": { + "node": ">=7.0.0" + } + }, + "node_modules/jest-diff/node_modules/has-flag": { + "version": "4.0.0", + "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz", + "integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==", + "dev": true, + "engines": { + "node": ">=8" + } + }, + "node_modules/jest-diff/node_modules/supports-color": { + "version": "7.2.0", + "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz", + "integrity": "sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==", + "dev": true, + "dependencies": { + "has-flag": "^4.0.0" + }, + "engines": { + "node": ">=8" + } + }, + "node_modules/jest-get-type": { + "version": "27.5.1", + "resolved": "https://registry.npmjs.org/jest-get-type/-/jest-get-type-27.5.1.tgz", + "integrity": "sha512-2KY95ksYSaK7DMBWQn6dQz3kqAf3BB64y2udeG+hv4KfSOb9qwcYQstTJc1KCbsix+wLZWZYN8t7nwX3GOBLRw==", + "dev": true, + "engines": { + "node": "^10.13.0 || ^12.13.0 || ^14.15.0 || >=15.0.0" + } + }, + "node_modules/jest-matcher-utils": { + "version": "27.5.1", + "resolved": "https://registry.npmjs.org/jest-matcher-utils/-/jest-matcher-utils-27.5.1.tgz", + "integrity": "sha512-z2uTx/T6LBaCoNWNFWwChLBKYxTMcGBRjAt+2SbP929/Fflb9aa5LGma654Rz8z9HLxsrUaYzxE9T/EFIL/PAw==", + "dev": true, + "dependencies": { + "chalk": "^4.0.0", + "jest-diff": "^27.5.1", + "jest-get-type": "^27.5.1", + "pretty-format": "^27.5.1" + }, + "engines": { + "node": "^10.13.0 || ^12.13.0 || ^14.15.0 || >=15.0.0" + } + }, + "node_modules/jest-matcher-utils/node_modules/ansi-styles": { + "version": "4.3.0", + "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz", + "integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==", + "dev": true, + "dependencies": { + "color-convert": "^2.0.1" + }, + "engines": { + "node": ">=8" + }, + "funding": { + "url": "https://github.com/chalk/ansi-styles?sponsor=1" + } + }, + "node_modules/jest-matcher-utils/node_modules/chalk": { + "version": "4.1.2", + "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.2.tgz", + "integrity": "sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==", + "dev": true, + "dependencies": { + "ansi-styles": "^4.1.0", + "supports-color": "^7.1.0" + }, + "engines": { + "node": ">=10" + }, + "funding": { + "url": "https://github.com/chalk/chalk?sponsor=1" + } + }, + "node_modules/jest-matcher-utils/node_modules/color-convert": { + "version": "2.0.1", + "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz", + "integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==", + "dev": true, + "dependencies": { + "color-name": "~1.1.4" + }, + "engines": { + "node": ">=7.0.0" + } + }, + "node_modules/jest-matcher-utils/node_modules/has-flag": { + "version": "4.0.0", + "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz", + "integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==", + "dev": true, + "engines": { + "node": ">=8" + } + }, + "node_modules/jest-matcher-utils/node_modules/supports-color": { + "version": "7.2.0", + "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz", + "integrity": "sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==", + "dev": true, + "dependencies": { + "has-flag": "^4.0.0" + }, + "engines": { + "node": ">=8" + } + }, "node_modules/jest-worker": { "version": "26.3.0", "resolved": "https://registry.npmjs.org/jest-worker/-/jest-worker-26.3.0.tgz", @@ -13700,6 +13888,41 @@ "utila": "~0.4" } }, + "node_modules/pretty-format": { + "version": "27.5.1", + "resolved": "https://registry.npmjs.org/pretty-format/-/pretty-format-27.5.1.tgz", + "integrity": "sha512-Qb1gy5OrP5+zDf2Bvnzdl3jsTf1qXVMazbvCoKhtKqVs4/YK4ozX4gKQJJVyNe+cajNPn0KoC0MC3FUmaHWEmQ==", + "dev": true, + "dependencies": { + "ansi-regex": "^5.0.1", + "ansi-styles": "^5.0.0", + "react-is": "^17.0.1" + }, + "engines": { + "node": "^10.13.0 || ^12.13.0 || ^14.15.0 || >=15.0.0" + } + }, + "node_modules/pretty-format/node_modules/ansi-regex": { + "version": "5.0.1", + "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-5.0.1.tgz", + "integrity": "sha512-quJQXlTSUGL2LH9SUXo8VwsY4soanhgo6LNSm84E1LBcE8s3O0wpdiRzyR9z/ZZJMlMWv37qOOb9pdJlMUEKFQ==", + "dev": true, + "engines": { + "node": ">=8" + } + }, + "node_modules/pretty-format/node_modules/ansi-styles": { + "version": "5.2.0", + "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-5.2.0.tgz", + "integrity": "sha512-Cxwpt2SfTzTtXcfOlzGEee8O+c+MmUgGrNiBcXnuWxuFJHe6a5Hz7qwhwe5OgaSYI0IJvkLqWX1ASG+cJOkEiA==", + "dev": true, + "engines": { + "node": ">=10" + }, + "funding": { + "url": "https://github.com/chalk/ansi-styles?sponsor=1" + } + }, "node_modules/process": { "version": "0.11.10", "resolved": "https://registry.npmjs.org/process/-/process-0.11.10.tgz", @@ -14245,6 +14468,12 @@ "url": "https://opencollective.com/webpack" } }, + "node_modules/react-is": { + "version": "17.0.2", + "resolved": "https://registry.npmjs.org/react-is/-/react-is-17.0.2.tgz", + "integrity": "sha512-w2GsyukL62IJnlaff/nRegPQR94C/XXamvMWmSHRJ4y7Ts/4ocGRmTHvOs8PSE6pB3dWOrD/nueuU5sduBsQ4w==", + "dev": true + }, "node_modules/read-cache": { "version": "1.0.0", "resolved": "https://registry.npmjs.org/read-cache/-/read-cache-1.0.0.tgz", @@ -20997,6 +21226,16 @@ "@types/jasmine": "*" } }, + "@types/jest": { + "version": "27.4.1", + "resolved": "https://registry.npmjs.org/@types/jest/-/jest-27.4.1.tgz", + "integrity": "sha512-23iPJADSmicDVrWk+HT58LMJtzLAnB2AgIzplQuq/bSrGaxCrlvRFjGbXmamnnk/mAmCdLStiGqggu28ocUyiw==", + "dev": true, + "requires": { + "jest-matcher-utils": "^27.0.0", + "pretty-format": "^27.0.0" + } + }, "@types/json-schema": { "version": "7.0.6", "resolved": "https://registry.npmjs.org/@types/json-schema/-/json-schema-7.0.6.tgz", @@ -24144,6 +24383,12 @@ "integrity": "sha512-58lmxKSA4BNyLz+HHMUzlOEpg09FV+ev6ZMe3vJihgdxzgcwZ8VoEEPmALCZG9LmqfVoNMMKpttIYTVG6uDY7A==", "dev": true }, + "diff-sequences": { + "version": "27.5.1", + "resolved": "https://registry.npmjs.org/diff-sequences/-/diff-sequences-27.5.1.tgz", + "integrity": "sha512-k1gCAXAsNgLwEL+Y8Wvl+M6oEFj5bgazfZULpS5CneoPPXRaCCW7dm+q21Ky2VEE5X+VeRDBVg1Pcvvsr4TtNQ==", + "dev": true + }, "diffie-hellman": { "version": "5.0.3", "resolved": "https://registry.npmjs.org/diffie-hellman/-/diffie-hellman-5.0.3.tgz", @@ -26841,6 +27086,126 @@ "integrity": "sha1-43zwsX8ZnM4jvqcbIDk5Uka07E4=", "dev": true }, + "jest-diff": { + "version": "27.5.1", + "resolved": "https://registry.npmjs.org/jest-diff/-/jest-diff-27.5.1.tgz", + "integrity": "sha512-m0NvkX55LDt9T4mctTEgnZk3fmEg3NRYutvMPWM/0iPnkFj2wIeF45O1718cMSOFO1vINkqmxqD8vE37uTEbqw==", + "dev": true, + "requires": { + "chalk": "^4.0.0", + "diff-sequences": "^27.5.1", + "jest-get-type": "^27.5.1", + "pretty-format": "^27.5.1" + }, + "dependencies": { + "ansi-styles": { + "version": "4.3.0", + "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz", + "integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==", + "dev": true, + "requires": { + "color-convert": "^2.0.1" + } + }, + "chalk": { + "version": "4.1.2", + "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.2.tgz", + "integrity": "sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==", + "dev": true, + "requires": { + "ansi-styles": "^4.1.0", + "supports-color": "^7.1.0" + } + }, + "color-convert": { + "version": "2.0.1", + "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz", + "integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==", + "dev": true, + "requires": { + "color-name": "~1.1.4" + } + }, + "has-flag": { + "version": "4.0.0", + "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz", + "integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==", + "dev": true + }, + "supports-color": { + "version": "7.2.0", + "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz", + "integrity": "sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==", + "dev": true, + "requires": { + "has-flag": "^4.0.0" + } + } + } + }, + "jest-get-type": { + "version": "27.5.1", + "resolved": "https://registry.npmjs.org/jest-get-type/-/jest-get-type-27.5.1.tgz", + "integrity": "sha512-2KY95ksYSaK7DMBWQn6dQz3kqAf3BB64y2udeG+hv4KfSOb9qwcYQstTJc1KCbsix+wLZWZYN8t7nwX3GOBLRw==", + "dev": true + }, + "jest-matcher-utils": { + "version": "27.5.1", + "resolved": "https://registry.npmjs.org/jest-matcher-utils/-/jest-matcher-utils-27.5.1.tgz", + "integrity": "sha512-z2uTx/T6LBaCoNWNFWwChLBKYxTMcGBRjAt+2SbP929/Fflb9aa5LGma654Rz8z9HLxsrUaYzxE9T/EFIL/PAw==", + "dev": true, + "requires": { + "chalk": "^4.0.0", + "jest-diff": "^27.5.1", + "jest-get-type": "^27.5.1", + "pretty-format": "^27.5.1" + }, + "dependencies": { + "ansi-styles": { + "version": "4.3.0", + "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz", + "integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==", + "dev": true, + "requires": { + "color-convert": "^2.0.1" + } + }, + "chalk": { + "version": "4.1.2", + "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.2.tgz", + "integrity": "sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==", + "dev": true, + "requires": { + "ansi-styles": "^4.1.0", + "supports-color": "^7.1.0" + } + }, + "color-convert": { + "version": "2.0.1", + "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz", + "integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==", + "dev": true, + "requires": { + "color-name": "~1.1.4" + } + }, + "has-flag": { + "version": "4.0.0", + "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz", + "integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==", + "dev": true + }, + "supports-color": { + "version": "7.2.0", + "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz", + "integrity": "sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==", + "dev": true, + "requires": { + "has-flag": "^4.0.0" + } + } + } + }, "jest-worker": { "version": "26.3.0", "resolved": "https://registry.npmjs.org/jest-worker/-/jest-worker-26.3.0.tgz", @@ -29959,6 +30324,31 @@ "utila": "~0.4" } }, + "pretty-format": { + "version": "27.5.1", + "resolved": "https://registry.npmjs.org/pretty-format/-/pretty-format-27.5.1.tgz", + "integrity": "sha512-Qb1gy5OrP5+zDf2Bvnzdl3jsTf1qXVMazbvCoKhtKqVs4/YK4ozX4gKQJJVyNe+cajNPn0KoC0MC3FUmaHWEmQ==", + "dev": true, + "requires": { + "ansi-regex": "^5.0.1", + "ansi-styles": "^5.0.0", + "react-is": "^17.0.1" + }, + "dependencies": { + "ansi-regex": { + "version": "5.0.1", + "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-5.0.1.tgz", + "integrity": "sha512-quJQXlTSUGL2LH9SUXo8VwsY4soanhgo6LNSm84E1LBcE8s3O0wpdiRzyR9z/ZZJMlMWv37qOOb9pdJlMUEKFQ==", + "dev": true + }, + "ansi-styles": { + "version": "5.2.0", + "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-5.2.0.tgz", + "integrity": "sha512-Cxwpt2SfTzTtXcfOlzGEee8O+c+MmUgGrNiBcXnuWxuFJHe6a5Hz7qwhwe5OgaSYI0IJvkLqWX1ASG+cJOkEiA==", + "dev": true + } + } + }, "process": { "version": "0.11.10", "resolved": "https://registry.npmjs.org/process/-/process-0.11.10.tgz", @@ -30399,6 +30789,12 @@ } } }, + "react-is": { + "version": "17.0.2", + "resolved": "https://registry.npmjs.org/react-is/-/react-is-17.0.2.tgz", + "integrity": "sha512-w2GsyukL62IJnlaff/nRegPQR94C/XXamvMWmSHRJ4y7Ts/4ocGRmTHvOs8PSE6pB3dWOrD/nueuU5sduBsQ4w==", + "dev": true + }, "read-cache": { "version": "1.0.0", "resolved": "https://registry.npmjs.org/read-cache/-/read-cache-1.0.0.tgz", diff --git a/package.json b/package.json index 00008856..f1ab2188 100644 --- a/package.json +++ b/package.json @@ -70,6 +70,7 @@ "@types/hammerjs": "^2.0.36", "@types/jasmine": "^3.5.10", "@types/jasminewd2": "^2.0.8", + "@types/jest": "^27.4.1", "@types/node": "^12.11.1", "codelyzer": "^5.1.2", "cypress": "^7.6.0", diff --git a/src/app/components/data-view/data-view.component.ts b/src/app/components/data-view/data-view.component.ts index 8c101abe..109caca2 100644 --- a/src/app/components/data-view/data-view.component.ts +++ b/src/app/components/data-view/data-view.component.ts @@ -15,7 +15,7 @@ import {WebuiSettingsService} from '../../services/webui-settings.service'; import {WebSocket} from '../../services/webSocket'; import {HttpEventType} from '@angular/common/http'; import * as $ from 'jquery'; -import {DbTable} from '../../views/uml/uml.model'; +import {DbTable} from '../../views/uml/api/uml.model'; import {TableModel} from '../../views/schema-editing/edit-tables/edit-tables.component'; import {Store} from '../../views/adapters/adapter.model'; import {LeftSidebarService} from '../left-sidebar/left-sidebar.service'; diff --git a/src/app/services/crud.service.ts b/src/app/services/crud.service.ts index 42f280ee..091316cf 100644 --- a/src/app/services/crud.service.ts +++ b/src/app/services/crud.service.ts @@ -4,7 +4,7 @@ import {WebuiSettingsService} from './webui-settings.service'; import {Index, ModifyPartitionRequest, PartitionFunctionModel, PartitioningRequest} from '../components/data-view/models/result-set.model'; import {webSocket} from 'rxjs/webSocket'; import {ColumnRequest, ConstraintRequest, DeleteRequest, EditCollectionRequest, EditTableRequest, ExploreTable, MaterializedRequest, MonitoringRequest, QueryRequest, RelAlgRequest, Schema, SchemaRequest, StatisticRequest, TableRequest} from '../models/ui-request.model'; -import {ForeignKey} from '../views/uml/uml.model'; +import {ForeignKey} from '../views/uml/api/uml.model'; import {Validators} from '@angular/forms'; import {HubService} from './hub.service'; import {Adapter} from '../views/adapters/adapter.model'; diff --git a/src/app/views/querying/explore-by-example/explore-by-example.component.ts b/src/app/views/querying/explore-by-example/explore-by-example.component.ts index 5279e7ff..808f28a0 100644 --- a/src/app/views/querying/explore-by-example/explore-by-example.component.ts +++ b/src/app/views/querying/explore-by-example/explore-by-example.component.ts @@ -7,7 +7,7 @@ import {ResultSet} from '../../../components/data-view/models/result-set.model'; import {ToastService} from '../../../components/toast/toast.service'; import {DataTableComponent} from '../../../components/data-view/data-table/data-table.component'; import {SidebarNode} from '../../../models/sidebar-node.model'; -import {ForeignKey, Uml} from '../../uml/uml.model'; +import {ForeignKey, Uml} from '../../uml/api/uml.model'; import {BsModalRef, BsModalService} from 'ngx-bootstrap/modal'; import {Subscription} from 'rxjs'; import {TableConfig} from '../../../components/data-view/data-table/table-config'; diff --git a/src/app/views/querying/graphical-querying/graphical-querying.component.ts b/src/app/views/querying/graphical-querying/graphical-querying.component.ts index 6bf70b8a..75c29693 100644 --- a/src/app/views/querying/graphical-querying/graphical-querying.component.ts +++ b/src/app/views/querying/graphical-querying/graphical-querying.component.ts @@ -9,7 +9,7 @@ import {LeftSidebarService} from '../../../components/left-sidebar/left-sidebar. import {ToastService} from '../../../components/toast/toast.service'; import {EditTableRequest, QueryRequest, SchemaRequest} from '../../../models/ui-request.model'; import {SidebarNode} from '../../../models/sidebar-node.model'; -import {ForeignKey, Uml} from '../../uml/uml.model'; +import {ForeignKey, Uml} from '../../uml/api/uml.model'; import {Router} from '@angular/router'; import {Subscription} from 'rxjs'; import {WebuiSettingsService} from '../../../services/webui-settings.service'; diff --git a/src/app/views/querying/relational-algebra/relational-algebra.component.ts b/src/app/views/querying/relational-algebra/relational-algebra.component.ts index b471dc62..089443c1 100644 --- a/src/app/views/querying/relational-algebra/relational-algebra.component.ts +++ b/src/app/views/querying/relational-algebra/relational-algebra.component.ts @@ -7,7 +7,7 @@ import * as $ from 'jquery'; import 'jquery-ui/ui/widget'; import 'jquery-ui/ui/widgets/draggable'; import 'jquery-ui/ui/widgets/droppable'; -import {SvgLine} from '../../uml/uml.model'; +import {SvgLine} from '../../uml/api/uml.model'; import {SchemaRequest} from '../../../models/ui-request.model'; import {SidebarNode} from '../../../models/sidebar-node.model'; import {WebSocketService} from '../../../services/web-socket.service'; diff --git a/src/app/views/schema-editing/document-edit-collection/document-edit-collection.component.ts b/src/app/views/schema-editing/document-edit-collection/document-edit-collection.component.ts index 675e4a23..408b1262 100644 --- a/src/app/views/schema-editing/document-edit-collection/document-edit-collection.component.ts +++ b/src/app/views/schema-editing/document-edit-collection/document-edit-collection.component.ts @@ -19,7 +19,7 @@ import {CatalogColumnPlacement, Placements, PlacementType, Store} from '../../ad import {ModalDirective} from 'ngx-bootstrap/modal'; import * as _ from 'lodash'; import {Subscription} from 'rxjs'; -import {DbTable, ForeignKey, SvgLine, Uml} from '../../../views/uml/uml.model'; +import {DbTable, ForeignKey, SvgLine, Uml} from '../../uml/api/uml.model'; @Component({ selector: 'app-document-edit-collection', diff --git a/src/app/views/schema-editing/document-edit-collections/document-edit-collections.component.ts b/src/app/views/schema-editing/document-edit-collections/document-edit-collections.component.ts index aa15c042..08e562f8 100644 --- a/src/app/views/schema-editing/document-edit-collections/document-edit-collections.component.ts +++ b/src/app/views/schema-editing/document-edit-collections/document-edit-collections.component.ts @@ -13,7 +13,7 @@ import {Subscription} from 'rxjs'; import {ModalDirective} from 'ngx-bootstrap/modal'; import {UtilService} from '../../../services/util.service'; import * as $ from 'jquery'; -import {DbTable} from '../../uml/uml.model'; +import {DbTable} from '../../uml/api/uml.model'; @Component({ selector: 'app-document-edit-collections', diff --git a/src/app/views/schema-editing/edit-columns/edit-columns.component.ts b/src/app/views/schema-editing/edit-columns/edit-columns.component.ts index e0b68ef5..8f71023e 100644 --- a/src/app/views/schema-editing/edit-columns/edit-columns.component.ts +++ b/src/app/views/schema-editing/edit-columns/edit-columns.component.ts @@ -12,7 +12,7 @@ import {CatalogColumnPlacement, MaterializedInfos, Placements, PlacementType, St import {ModalDirective} from 'ngx-bootstrap/modal'; import * as _ from 'lodash'; import {Subscription} from 'rxjs'; -import {ForeignKey, Uml} from '../../../views/uml/uml.model'; +import {ForeignKey, Uml} from '../../uml/api/uml.model'; @Component({ selector: 'app-edit-columns', diff --git a/src/app/views/schema-editing/edit-source-columns/edit-source-columns.component.ts b/src/app/views/schema-editing/edit-source-columns/edit-source-columns.component.ts index 99c72035..d317b17e 100644 --- a/src/app/views/schema-editing/edit-source-columns/edit-source-columns.component.ts +++ b/src/app/views/schema-editing/edit-source-columns/edit-source-columns.component.ts @@ -8,7 +8,7 @@ import {ToastService} from '../../../components/toast/toast.service'; import {Placements, UnderlyingTables} from '../../adapters/adapter.model'; import {Subscription} from 'rxjs'; import {DbmsTypesService} from '../../../services/dbms-types.service'; -import {ForeignKey, Uml} from '../../../views/uml/uml.model'; +import {ForeignKey, Uml} from '../../uml/api/uml.model'; @Component({ selector: 'app-edit-source-columns', diff --git a/src/app/views/schema-editing/edit-tables/edit-tables.component.ts b/src/app/views/schema-editing/edit-tables/edit-tables.component.ts index 6472dd5d..0dd44667 100644 --- a/src/app/views/schema-editing/edit-tables/edit-tables.component.ts +++ b/src/app/views/schema-editing/edit-tables/edit-tables.component.ts @@ -13,7 +13,7 @@ import {Subscription} from 'rxjs'; import {ModalDirective} from 'ngx-bootstrap/modal'; import {UtilService} from '../../../services/util.service'; import * as $ from 'jquery'; -import {DbTable} from '../../uml/uml.model'; +import {DbTable} from '../../uml/api/uml.model'; @Component({ selector: 'app-edit-tables', diff --git a/src/app/views/uml/uml.model.ts b/src/app/views/uml/api/uml.model.ts similarity index 93% rename from src/app/views/uml/uml.model.ts rename to src/app/views/uml/api/uml.model.ts index 27a28267..0524f94b 100644 --- a/src/app/views/uml/uml.model.ts +++ b/src/app/views/uml/api/uml.model.ts @@ -1,4 +1,4 @@ -import {DbColumn} from '../../components/data-view/models/result-set.model'; +import {DbColumn} from '../../../components/data-view/models/result-set.model'; export class Uml { constructor( diff --git a/src/app/views/uml/uml.component.spec.ts b/src/app/views/uml/component/specs/uml.component.spec.ts similarity index 91% rename from src/app/views/uml/uml.component.spec.ts rename to src/app/views/uml/component/specs/uml.component.spec.ts index 6ad75e91..f4f12527 100644 --- a/src/app/views/uml/uml.component.spec.ts +++ b/src/app/views/uml/component/specs/uml.component.spec.ts @@ -1,6 +1,6 @@ import { async, ComponentFixture, TestBed } from '@angular/core/testing'; -import { UmlComponent } from './uml.component'; +import { UmlComponent } from '../uml.component'; describe('UmlComponent', () => { let component: UmlComponent; diff --git a/src/app/views/uml/uml.component.html b/src/app/views/uml/component/uml.component.html similarity index 97% rename from src/app/views/uml/uml.component.html rename to src/app/views/uml/component/uml.component.html index aebe8552..e0b79427 100644 --- a/src/app/views/uml/uml.component.html +++ b/src/app/views/uml/component/uml.component.html @@ -4,7 +4,7 @@
{{schema}}

Drag a connection from a column to a primary key or unique column to create a new foreign key.

Please select a schema in the left sidebar. Document schemas and tables originating from a data source are not supported. - Document schemas do not support the UML builder. + Document schemas do not support the UML builder.
diff --git a/src/app/views/uml/uml.component.scss b/src/app/views/uml/component/uml.component.scss similarity index 100% rename from src/app/views/uml/uml.component.scss rename to src/app/views/uml/component/uml.component.scss diff --git a/src/app/views/uml/uml.component.ts b/src/app/views/uml/component/uml.component.ts similarity index 94% rename from src/app/views/uml/uml.component.ts rename to src/app/views/uml/component/uml.component.ts index fa549b66..76291e18 100644 --- a/src/app/views/uml/uml.component.ts +++ b/src/app/views/uml/component/uml.component.ts @@ -1,14 +1,14 @@ import {AfterViewInit, Component, OnDestroy, OnInit, ViewChild} from '@angular/core'; import * as $ from 'jquery'; import {ActivatedRoute, Router} from '@angular/router'; -import {CrudService} from '../../services/crud.service'; -import {EditTableRequest, SchemaRequest} from '../../models/ui-request.model'; -import {DbTable, ForeignKey, SvgLine, Uml} from './uml.model'; -import {LeftSidebarService} from '../../components/left-sidebar/left-sidebar.service'; +import {CrudService} from '../../../services/crud.service'; +import {EditTableRequest, SchemaRequest} from '../../../models/ui-request.model'; +import {DbTable, ForeignKey, SvgLine, Uml} from '../api/uml.model'; +import {LeftSidebarService} from '../../../components/left-sidebar/left-sidebar.service'; import {FormBuilder} from '@angular/forms'; -import {ToastDuration, ToastService} from '../../components/toast/toast.service'; -import {DbColumn, ResultSet} from '../../components/data-view/models/result-set.model'; -import {DbmsTypesService} from '../../services/dbms-types.service'; +import {ToastDuration, ToastService} from '../../../components/toast/toast.service'; +import {DbColumn, ResultSet} from '../../../components/data-view/models/result-set.model'; +import {DbmsTypesService} from '../../../services/dbms-types.service'; import {Subscription} from 'rxjs'; import {ModalDirective} from 'ngx-bootstrap/modal'; diff --git a/src/app/views/uml/container/uml-container.component.ts b/src/app/views/uml/container/uml-container.component.ts new file mode 100644 index 00000000..86c0b5bf --- /dev/null +++ b/src/app/views/uml/container/uml-container.component.ts @@ -0,0 +1,19 @@ +import { Component, OnInit } from '@angular/core'; + +@Component({ + selector: 'app-uml-container', + template: ` + + + `, + styles: [ + ] +}) +export class UmlContainerComponent implements OnInit { + + constructor() { } + + ngOnInit(): void { + } + +} diff --git a/src/app/views/uml/index.ts b/src/app/views/uml/index.ts new file mode 100644 index 00000000..f275756a --- /dev/null +++ b/src/app/views/uml/index.ts @@ -0,0 +1,2 @@ +import { UmlModule } from "./module/uml.module"; +export {UmlModule}; diff --git a/src/app/views/uml/module/uml.module.ts b/src/app/views/uml/module/uml.module.ts new file mode 100644 index 00000000..a2e035bf --- /dev/null +++ b/src/app/views/uml/module/uml.module.ts @@ -0,0 +1,51 @@ +import { NgModule } from '@angular/core'; +import { CommonModule } from '@angular/common'; +import { UmlComponent } from '../component/uml.component'; +import { BsDropdownModule } from 'ngx-bootstrap/dropdown'; +import { ModalModule } from 'ngx-bootstrap/modal'; +import { FormsModule, ReactiveFormsModule } from '@angular/forms'; +import { ComponentsModule } from '../../../components/components.module'; +import { ViewsModule } from '../../views.module'; +import { RouterModule } from '@angular/router'; +import { ButtonsModule } from 'ngx-bootstrap/buttons'; +import { DragDropModule } from '@angular/cdk/drag-drop'; +import { UmlContainerComponent } from '../container/uml-container.component'; + + +const routes = [ + { + path: '', + pathMatch: 'full', + component: UmlContainerComponent, + data: { + title: 'UML' + } + }, + { + path: ':id', + component: UmlContainerComponent, + data: { + title: 'UML' + } + }, +]; +@NgModule({ + declarations: [ + UmlComponent, + UmlContainerComponent, + ], + imports: [ + CommonModule, + ViewsModule, + BsDropdownModule, + ButtonsModule.forRoot(), + FormsModule, + ReactiveFormsModule, + DragDropModule, + ModalModule.forChild(), + ComponentsModule, + RouterModule.forChild(routes) + ], + exports: [UmlComponent] +}) +export class UmlModule { } diff --git a/src/app/views/views-routing.module.ts b/src/app/views/views-routing.module.ts index a824ccd5..886327e1 100644 --- a/src/app/views/views-routing.module.ts +++ b/src/app/views/views-routing.module.ts @@ -1,6 +1,6 @@ import {NgModule} from '@angular/core'; import {RouterModule, Routes} from '@angular/router'; -import {UmlComponent} from './uml/uml.component'; +import {UmlComponent} from './uml/component/uml.component'; import {FormGeneratorComponent} from './forms/form-generator/form-generator.component'; import {TableViewComponent} from './table-view/table-view.component'; import {SchemaEditingComponent} from './schema-editing/schema-editing.component'; @@ -49,6 +49,10 @@ const routes: Routes = [ } }, { + path: 'uml', + loadChildren: () => import('./uml').then(m => m.UmlModule) + }, + /*{ path: 'uml', redirectTo: 'uml/', pathMatch: 'full' @@ -59,7 +63,7 @@ const routes: Routes = [ data: { title: 'UML' } - }, + },*/ { path: 'querying', redirectTo: 'querying/console', diff --git a/src/app/views/views.module.ts b/src/app/views/views.module.ts index 7895bff9..2dc493e1 100644 --- a/src/app/views/views.module.ts +++ b/src/app/views/views.module.ts @@ -8,7 +8,6 @@ import {FormsModule, ReactiveFormsModule} from '@angular/forms'; import {ComponentsModule} from '../components/components.module'; import {EditColumnsComponent} from './schema-editing/edit-columns/edit-columns.component'; import {AppAsideModule, AppFooterModule, AppHeaderModule, AppSidebarModule} from '@coreui/angular'; -import {UmlComponent} from './uml/uml.component'; import {GraphicalQueryingComponent} from './querying/graphical-querying/graphical-querying.component'; import {TreeModule} from 'angular-tree-component'; import {FormGeneratorComponent} from './forms/form-generator/form-generator.component'; @@ -66,7 +65,7 @@ import {StatisticsColumnComponent} from './schema-editing/statistics-column/stat AutocompleteLibModule, ProgressbarModule, PopoverModule, - NgxSliderModule + NgxSliderModule, ], declarations: [ EditColumnsComponent, @@ -74,7 +73,6 @@ import {StatisticsColumnComponent} from './schema-editing/statistics-column/stat GraphicalQueryingComponent, ConsoleComponent, TableViewComponent, - UmlComponent, SchemaEditingComponent, EditTablesComponent, DocumentEditCollectionsComponent, @@ -93,10 +91,11 @@ import {StatisticsColumnComponent} from './schema-editing/statistics-column/stat EditSourceColumnsComponent, StatisticsColumnComponent, ValuePipe, - SearchFilterPipe + SearchFilterPipe, ], exports: [ - ExploreByExampleComponent + ExploreByExampleComponent, + ValuePipe ] }) export class ViewsModule { From 7b7fd305435b90652503257144be2d54fcd90dc4 Mon Sep 17 00:00:00 2001 From: Nils Hansen Date: Sat, 16 Apr 2022 16:15:06 +0200 Subject: [PATCH 2/4] Purify uml component --- src/app/pipes/pipes.ts | 3 + src/app/services/crud.service.ts | 15 ++ src/app/utils/validation.ts | 43 ++++ .../views/uml/component/uml.component.html | 4 +- src/app/views/uml/component/uml.component.ts | 186 ++++++++---------- .../uml/container/uml-container.component.ts | 67 ++++++- src/app/views/uml/service/uml.service.ts | 86 ++++++++ 7 files changed, 297 insertions(+), 107 deletions(-) create mode 100644 src/app/utils/validation.ts create mode 100644 src/app/views/uml/service/uml.service.ts diff --git a/src/app/pipes/pipes.ts b/src/app/pipes/pipes.ts index e3da7b3e..8509fce5 100644 --- a/src/app/pipes/pipes.ts +++ b/src/app/pipes/pipes.ts @@ -3,6 +3,9 @@ import {Pipe, PipeTransform} from '@angular/core'; @Pipe({ name: 'value' }) export class ValuePipe implements PipeTransform { transform(value: any): any { + if(!value){ + return value; + } return Object.values( value ); } } diff --git a/src/app/services/crud.service.ts b/src/app/services/crud.service.ts index 091316cf..db88f8c3 100644 --- a/src/app/services/crud.service.ts +++ b/src/app/services/crud.service.ts @@ -501,6 +501,9 @@ export class CrudService { }); } + /** + * @deprecated use utils/validation.ts instead + */ getNameValidator ( required: boolean = false ) { if ( required ){ return [Validators.pattern('^[a-zA-Z_][a-zA-Z0-9_]*$'), Validators.required, Validators.max(100)]; @@ -509,20 +512,32 @@ export class CrudService { } } + /** + * @deprecated use utils/validation.ts instead + */ invalidNameMessage ( type: string = '' ) { type = type + ' '; return `Please provide a valid ${type}name`; } + /** + * @deprecated use utils/validation.ts instead + */ getValidationRegex(){ return new RegExp( '^[a-zA-Z_][a-zA-Z0-9_]*$' ); } + /** + * @deprecated use utils/validation.ts instead + */ nameIsValid( name: string ) { const regex = this.getValidationRegex(); return regex.test( name ) && name.length <= 100; } + /** + * @deprecated use utils/validation.ts instead + */ getValidationClass( name: string ){ const regex = this.getValidationRegex(); if( name === '' ){ diff --git a/src/app/utils/validation.ts b/src/app/utils/validation.ts new file mode 100644 index 00000000..33f4d987 --- /dev/null +++ b/src/app/utils/validation.ts @@ -0,0 +1,43 @@ +import { Validators } from "@angular/forms"; + +const getNameValidator = (required: boolean = false) => { + if (required) { + return [Validators.pattern('^[a-zA-Z_][a-zA-Z0-9_]*$'), Validators.required, Validators.max(100)]; + } else { + return [Validators.pattern('^[a-zA-Z_][a-zA-Z0-9_]*$'), Validators.max(100)]; + } +} + +const invalidNameMessage = (type: string = '') => { + type = type + ' '; + return `Please provide a valid ${type}name`; +} + +const getValidationRegex = () => { + return new RegExp('^[a-zA-Z_][a-zA-Z0-9_]*$'); +} + +const nameIsValid = (name: string) => { + const regex = getValidationRegex(); + return regex.test(name) && name.length <= 100; +} + +const getValidationClass = (name: string) => { + const regex = getValidationRegex(); + if (name === '') { + return ''; + } + else if (regex.test(name) && name.length <= 100) { + return 'is-valid'; + } else { + return 'is-invalid'; + } +} + +export { + getNameValidator, + invalidNameMessage, + getValidationRegex, + nameIsValid, + getValidationClass, +}; diff --git a/src/app/views/uml/component/uml.component.html b/src/app/views/uml/component/uml.component.html index e0b79427..6a04dd91 100644 --- a/src/app/views/uml/component/uml.component.html +++ b/src/app/views/uml/component/uml.component.html @@ -7,7 +7,7 @@
{{schema}}
Document schemas do not support the UML builder.
-
+
{{table.tableName}}
Create foreign key
constraint name
+ [ngClass]="getValidationClass(constraintName)">
invalid name
diff --git a/src/app/views/uml/component/uml.component.ts b/src/app/views/uml/component/uml.component.ts index 76291e18..c18baa72 100644 --- a/src/app/views/uml/component/uml.component.ts +++ b/src/app/views/uml/component/uml.component.ts @@ -1,41 +1,56 @@ -import {AfterViewInit, Component, OnDestroy, OnInit, ViewChild} from '@angular/core'; +import { AfterViewInit, ChangeDetectionStrategy, ChangeDetectorRef, Component, EventEmitter, Input, OnChanges, OnDestroy, OnInit, Output, SimpleChanges, ViewChild } from '@angular/core'; +import { FormBuilder } from '@angular/forms'; +import { ActivatedRoute } from '@angular/router'; import * as $ from 'jquery'; -import {ActivatedRoute, Router} from '@angular/router'; -import {CrudService} from '../../../services/crud.service'; -import {EditTableRequest, SchemaRequest} from '../../../models/ui-request.model'; -import {DbTable, ForeignKey, SvgLine, Uml} from '../api/uml.model'; -import {LeftSidebarService} from '../../../components/left-sidebar/left-sidebar.service'; -import {FormBuilder} from '@angular/forms'; -import {ToastDuration, ToastService} from '../../../components/toast/toast.service'; -import {DbColumn, ResultSet} from '../../../components/data-view/models/result-set.model'; -import {DbmsTypesService} from '../../../services/dbms-types.service'; -import {Subscription} from 'rxjs'; -import {ModalDirective} from 'ngx-bootstrap/modal'; +import { ModalDirective } from 'ngx-bootstrap/modal'; +import { Subscription } from 'rxjs'; +import { DbColumn, ResultSet } from '../../../components/data-view/models/result-set.model'; +import { ToastDuration, ToastService } from '../../../components/toast/toast.service'; +import { getValidationClass, invalidNameMessage, nameIsValid } from '../../../utils/validation'; +import { DbTable, ForeignKey, SvgLine, Uml } from '../api/uml.model'; @Component({ selector: 'app-uml', templateUrl: './uml.component.html', - styleUrls: ['./uml.component.scss'] + styleUrls: ['./uml.component.scss'], + changeDetection: ChangeDetectionStrategy.OnPush }) -export class UmlComponent implements OnInit, AfterViewInit, OnDestroy { +export class UmlComponent implements OnInit, AfterViewInit, OnChanges, OnDestroy { + @Input() uml: Uml; + + @Input() + addForeignKeyResult: [ForeignKey, ResultSet]; + + @Input() + proposedConstraintName = 'fk1'; + + @Input() + fkActions; + + @Input() + schemaType; + + @Input() + errorMsg: string; + + @Output() + addForeignKey: EventEmitter = new EventEmitter(); + temporalLine: SvgLine; schema; connections = []; zIndex = 2; - errorMsg: string; @ViewChild('myModal', {static: false}) myModal: ModalDirective; sourceTable;//schema.table sourceCol; targetTable;//schema.table targetCol; - fkActions; fkForm = this._formBuilder.group({update: 'RESTRICT', delete: 'RESTRICT'}); constraintName = ''; - proposedConstraintName = 'fk1'; private subscriptions = new Subscription(); @@ -46,84 +61,47 @@ export class UmlComponent implements OnInit, AfterViewInit, OnDestroy { offsetConnLeft1 = 21; offsetConnLeft2 = -5; offsetConnTop = 20; - schemaType: string; constructor( private _route: ActivatedRoute, - private _router: Router, - public _crud: CrudService, - private _leftSidebar: LeftSidebarService, private _formBuilder: FormBuilder, private _toast: ToastService, - private _dbmsTypes: DbmsTypesService - ) { - this._dbmsTypes.getFkActions().subscribe( - types => { - this.fkActions = types; - } - ); - } + private _cdr: ChangeDetectorRef, + ) {} ngOnInit() { this.schema = this._route.snapshot.paramMap.get('id'); this._route.params.subscribe(params => { this.schema = params['id']; - this.schemaType = this._leftSidebar.schemaType; - this.getUml(); }); - const sub = this._crud.onReconnection().subscribe( - b => { - if(b) this._leftSidebar.setSchema(new SchemaRequest('/views/uml/', false, 1, true), this._router); - } - ); - this.subscriptions.add(sub); - this._leftSidebar.setSchema(new SchemaRequest('/views/uml/', true, 1, true), this._router); } ngAfterViewInit() { - this.getUml(); this.connectTables(); - this.getGeneratedNames(); } - ngOnDestroy() { - $(document).off();//remove event listener from connectTables() when leaving this view - this._leftSidebar.close(); - this.subscriptions.unsubscribe(); - } - - getUml() { - if (!this.schema) { - this.uml = null; - this._leftSidebar.reset(); - return; - } - this._crud.getUml(new EditTableRequest(this.schema)).subscribe( - res => { - this.errorMsg = null; - const uml: Uml = res; - this.uml = new Uml(uml.tables, uml.foreignKeys); + ngOnChanges(changes: SimpleChanges): void { + if(changes.uml?.currentValue) { this.mapConnections(); - }, err => { - this.errorMsg = 'Could not connect with the server.'; } - ); + if(changes.addForeignKeyResult?.currentValue){ + this.handleAddForeignKey( + this.addForeignKeyResult[0], + this.addForeignKeyResult[1] + ); + } + if(changes.proposedConstraintName?.currentValue){ + //console.log('uml-component proposedConstraintName', changes.proposedConstraintName?.currentValue); + } + if(changes.schemaType?.currentValue){ + //console.log('schema-type', changes.schemaType?.currentValue); + } } - getGeneratedNames() { - this._crud.getGeneratedNames().subscribe( - res => { - const names = res; - if (!names.error) { - this.proposedConstraintName = names.data[0][1]; - } else { - console.log(names.error); - } - }, err => { - console.log(err); - } - ); + ngOnDestroy() { + $(document).off();//remove event listener from connectTables() when leaving this view + this.subscriptions.unsubscribe(); } getColumnClass(table: DbTable, col: DbColumn) { @@ -163,10 +141,14 @@ export class UmlComponent implements OnInit, AfterViewInit, OnDestroy { $(e.source.element.nativeElement).css('z-index', z); } - onDragging(e) { + onDragStart(e) { $(e.source.element.nativeElement).css('z-index', 9000); } + onDragging(){ + this._cdr.markForCheck(); + } + connectTables() { const self = this; let isDragging = false; @@ -186,6 +168,7 @@ export class UmlComponent implements OnInit, AfterViewInit, OnDestroy { if (isDragging) { self.temporalLine.x2 = e.pageX - offsetX; self.temporalLine.y2 = e.pageY - self.offsetLineY; + self._cdr.markForCheck(); e.preventDefault(); } }).on('mouseup', function (e) { @@ -210,6 +193,7 @@ export class UmlComponent implements OnInit, AfterViewInit, OnDestroy { } self.temporalLine = null; isDragging = false; + self._cdr.markForCheck(); }); } @@ -271,38 +255,38 @@ export class UmlComponent implements OnInit, AfterViewInit, OnDestroy { if (!this.constraintName || this.constraintName === '') { this.constraintName = this.proposedConstraintName; } - if (!this._crud.nameIsValid(this.constraintName)) { - this._toast.warn(this._crud.invalidNameMessage('constraint'), 'invalid constraint name', ToastDuration.INFINITE); + if (!nameIsValid(this.constraintName)) { + this._toast.warn(invalidNameMessage('constraint'), 'invalid constraint name', ToastDuration.INFINITE); return; } const fk: ForeignKey = new ForeignKey(this.constraintName, this.schema, this.sourceTable, this.sourceCol, this.targetTable, this.targetCol) .updateAction(this.fkForm.value.update).deleteAction(this.fkForm.value.delete); - this._crud.addForeignKey(fk).subscribe( - res => { - this.closeModal(); - const result = res; - if( result.error ) { - this._toast.exception(result, null, null, ToastDuration.INFINITE); - } - else if( result.affectedRows === 1 ) { - this._toast.success('new foreign key was created', result.generatedQuery); - // this.getUml(); - // this.connectTables(); - const fkTable = fk.sourceTable.substr(fk.sourceTable.indexOf('.') + 1, fk.sourceTable.length); - const pkTable = fk.targetTable.substr(fk.targetTable.indexOf('.') + 1, fk.targetTable.length); - this.connections.push({ - source: fk.sourceSchema + '_' + fkTable + '_' + fk.sourceColumn, - target: fk.targetSchema + '_' + pkTable + '_' + fk.targetColumn - }); - this.constraintName = ''; - this.getGeneratedNames(); - } - }, err => { - this.closeModal(); - this._toast.error('An unknown error occurred on the server'); - } - ); + this.addForeignKey.emit(fk); + } + + handleAddForeignKey(fk: ForeignKey, result: ResultSet){ + this.closeModal(); + if( result.error ) { + this._toast.exception(result, null, null, ToastDuration.INFINITE); + } + else if( result.affectedRows === 1 ) { + this._toast.success('new foreign key was created', result.generatedQuery); + // this.getUml();//handled in service + this.connectTables(); + const fkTable = fk.sourceTable.substr(fk.sourceTable.indexOf('.') + 1, fk.sourceTable.length); + const pkTable = fk.targetTable.substr(fk.targetTable.indexOf('.') + 1, fk.targetTable.length); + this.connections.push({ + source: fk.sourceSchema + '_' + fkTable + '_' + fk.sourceColumn, + target: fk.targetSchema + '_' + pkTable + '_' + fk.targetColumn + }); + this.constraintName = ''; + //this.getGeneratedNames();//handled in service + } + } + + getValidationClass(name: string){ + return getValidationClass(name); } } diff --git a/src/app/views/uml/container/uml-container.component.ts b/src/app/views/uml/container/uml-container.component.ts index 86c0b5bf..b777ea68 100644 --- a/src/app/views/uml/container/uml-container.component.ts +++ b/src/app/views/uml/container/uml-container.component.ts @@ -1,19 +1,78 @@ -import { Component, OnInit } from '@angular/core'; +import { Component, OnDestroy, OnInit } from '@angular/core'; +import { ActivatedRoute, Router } from '@angular/router'; +import { combineLatest, Subscription } from 'rxjs'; +import { filter, map, tap } from 'rxjs/operators'; +import { LeftSidebarService } from '../../../components/left-sidebar/left-sidebar.service'; +import { SchemaRequest } from '../../../models/ui-request.model'; +import { CrudService } from '../../../services/crud.service'; +import { UmlService } from '../service/uml.service'; @Component({ selector: 'app-uml-container', template: ` - + `, styles: [ ] }) -export class UmlContainerComponent implements OnInit { +export class UmlContainerComponent implements OnInit, OnDestroy { - constructor() { } + subscriptions = new Subscription(); + + schema: string; + schema$ = this._route.params.pipe( + map(params => params['id']), + tap(schema => this.schema = schema) + ); + + schemaType$ = combineLatest([ + this.schema$.pipe(map(schema => schema?.split('.')[0])), + //getTypeSchemas is only called once + this._crud.getTypeSchemas().pipe(tap(() => console.log('fetching typeSchemas'))) + ]).pipe( + tap(([schema, schemaTypes]) => console.log(`${schema}: ${schemaTypes[schema]}`)), + filter(([schema, schemaTypes]) => !!schema), + map(([schema, schemaTypes]) => schemaTypes[schema]) + ); + + constructor( + public _uml: UmlService, + private _router: Router, + private _route: ActivatedRoute, + private _crud: CrudService, + private _leftSidebar: LeftSidebarService + ) { } ngOnInit(): void { + this.subscriptions.add( + this.schema$.pipe( + tap(schema => this._uml.getUml(schema)) + ).subscribe() + ); + this.subscriptions.add( + this._crud.onReconnection().pipe( + filter(r => !!r), + tap(() => this._leftSidebar.setSchema( + new SchemaRequest('/views/uml/', false, 1, true), this._router) + ) + ) + .subscribe() + ); + this._leftSidebar.setSchema(new SchemaRequest('/views/uml/', true, 1, true), this._router); + } + + ngOnDestroy(): void { + this._leftSidebar.close(); + this.subscriptions.unsubscribe(); } } diff --git a/src/app/views/uml/service/uml.service.ts b/src/app/views/uml/service/uml.service.ts new file mode 100644 index 00000000..9fbda404 --- /dev/null +++ b/src/app/views/uml/service/uml.service.ts @@ -0,0 +1,86 @@ +import { Injectable } from '@angular/core'; +import { BehaviorSubject, Subject } from 'rxjs'; +import { filter, map, shareReplay, startWith, switchMap, take, tap } from 'rxjs/operators'; +import { ResultSet } from '../../../components/data-view/models/result-set.model'; +import { LeftSidebarService } from '../../../components/left-sidebar/left-sidebar.service'; +import { EditTableRequest } from '../../../models/ui-request.model'; +import { CrudService } from '../../../services/crud.service'; +import { DbmsTypesService } from '../../../services/dbms-types.service'; +import { ForeignKey, Uml } from '../api/uml.model'; + +@Injectable({ + providedIn: 'root' +}) +export class UmlService { + + uml$ = new Subject(); + addForeignKeyResult$ = new Subject<[ForeignKey, ResultSet]>(); + fkActions$ = this._dbmsTypes.getFkActions().pipe( + shareReplay(), + tap(() => console.log('getting fkActions')) + ); + + errorMessage$ = new BehaviorSubject(null); + + private reloadProposedConstraintName = new Subject(); + public proposedConstraintName$ = this.reloadProposedConstraintName.pipe( + startWith(0), + switchMap(() => this._crud.getGeneratedNames()), + filter(names => !!names), + map(names => names), + tap(names => { + if(names.error){ + console.log(names.error); + } + }), + map(names => names.data[0][1]), + tap(n => console.log('cName pipe', n)) + ); + + constructor( + private _leftSidebar: LeftSidebarService, + private _crud: CrudService, + private _dbmsTypes: DbmsTypesService + ) { } + + getUml(schema: string) { + if (!schema) { + this.uml$.next(null); + this._leftSidebar.reset(); + return; + } + this._crud.getUml(new EditTableRequest(schema)). + pipe(take(1)) + .subscribe( + res => { + this.errorMessage$.next(null); + this.uml$.next(res); + //this.mapConnections();//handled in component ngOnChanges + }, err => { + console.warn('FAilED HTTP'); + this.errorMessage$.next('Could not connect with the server.'); + } + ); + } + + addForeignKey(schema: string, fk: ForeignKey) { + this._crud.addForeignKey(fk).pipe( + map(res => res), + tap(res => { + if(res.affectedRows === 1) { + this.getUml(schema); + } + this.loadProposedConstraintName(); + }), + take(1) + ).subscribe(res => { + console.log('added foreign key'); + this.addForeignKeyResult$.next([fk, res]) + }); + } + + loadProposedConstraintName(){ + this.reloadProposedConstraintName.next(); + } + +} From 252208336c2960a94dd9ede0577fde5d03a4035e Mon Sep 17 00:00:00 2001 From: Nils Hansen Date: Sat, 16 Apr 2022 16:18:02 +0200 Subject: [PATCH 3/4] Remove log --- src/app/views/uml/service/uml.service.ts | 1 - 1 file changed, 1 deletion(-) diff --git a/src/app/views/uml/service/uml.service.ts b/src/app/views/uml/service/uml.service.ts index 9fbda404..3a5fbb38 100644 --- a/src/app/views/uml/service/uml.service.ts +++ b/src/app/views/uml/service/uml.service.ts @@ -57,7 +57,6 @@ export class UmlService { this.uml$.next(res); //this.mapConnections();//handled in component ngOnChanges }, err => { - console.warn('FAilED HTTP'); this.errorMessage$.next('Could not connect with the server.'); } ); From 6c0e9de226a9dd45e2d5c55acc6adabfd5e04371 Mon Sep 17 00:00:00 2001 From: Nils Hansen Date: Sat, 7 May 2022 19:23:51 +0200 Subject: [PATCH 4/4] Cleanup --- src/app/views/uml/component/uml.component.ts | 6 ------ .../uml/container/uml-container.component.ts | 18 +++++++----------- src/app/views/uml/service/uml.service.ts | 9 +++------ 3 files changed, 10 insertions(+), 23 deletions(-) diff --git a/src/app/views/uml/component/uml.component.ts b/src/app/views/uml/component/uml.component.ts index c18baa72..428fcc15 100644 --- a/src/app/views/uml/component/uml.component.ts +++ b/src/app/views/uml/component/uml.component.ts @@ -91,12 +91,6 @@ export class UmlComponent implements OnInit, AfterViewInit, OnChanges, OnDestroy this.addForeignKeyResult[1] ); } - if(changes.proposedConstraintName?.currentValue){ - //console.log('uml-component proposedConstraintName', changes.proposedConstraintName?.currentValue); - } - if(changes.schemaType?.currentValue){ - //console.log('schema-type', changes.schemaType?.currentValue); - } } ngOnDestroy() { diff --git a/src/app/views/uml/container/uml-container.component.ts b/src/app/views/uml/container/uml-container.component.ts index b777ea68..938f772d 100644 --- a/src/app/views/uml/container/uml-container.component.ts +++ b/src/app/views/uml/container/uml-container.component.ts @@ -31,15 +31,17 @@ export class UmlContainerComponent implements OnInit, OnDestroy { schema: string; schema$ = this._route.params.pipe( map(params => params['id']), - tap(schema => this.schema = schema) + tap(schema => { + this.schema = schema; + this._uml.getUml(schema); + }) ); schemaType$ = combineLatest([ this.schema$.pipe(map(schema => schema?.split('.')[0])), //getTypeSchemas is only called once - this._crud.getTypeSchemas().pipe(tap(() => console.log('fetching typeSchemas'))) + this._crud.getTypeSchemas() ]).pipe( - tap(([schema, schemaTypes]) => console.log(`${schema}: ${schemaTypes[schema]}`)), filter(([schema, schemaTypes]) => !!schema), map(([schema, schemaTypes]) => schemaTypes[schema]) ); @@ -53,19 +55,13 @@ export class UmlContainerComponent implements OnInit, OnDestroy { ) { } ngOnInit(): void { - this.subscriptions.add( - this.schema$.pipe( - tap(schema => this._uml.getUml(schema)) - ).subscribe() - ); this.subscriptions.add( this._crud.onReconnection().pipe( filter(r => !!r), tap(() => this._leftSidebar.setSchema( new SchemaRequest('/views/uml/', false, 1, true), this._router) - ) - ) - .subscribe() + ) + ).subscribe() ); this._leftSidebar.setSchema(new SchemaRequest('/views/uml/', true, 1, true), this._router); } diff --git a/src/app/views/uml/service/uml.service.ts b/src/app/views/uml/service/uml.service.ts index 3a5fbb38..3e73ab78 100644 --- a/src/app/views/uml/service/uml.service.ts +++ b/src/app/views/uml/service/uml.service.ts @@ -16,8 +16,7 @@ export class UmlService { uml$ = new Subject(); addForeignKeyResult$ = new Subject<[ForeignKey, ResultSet]>(); fkActions$ = this._dbmsTypes.getFkActions().pipe( - shareReplay(), - tap(() => console.log('getting fkActions')) + shareReplay() ); errorMessage$ = new BehaviorSubject(null); @@ -34,7 +33,6 @@ export class UmlService { } }), map(names => names.data[0][1]), - tap(n => console.log('cName pipe', n)) ); constructor( @@ -49,8 +47,8 @@ export class UmlService { this._leftSidebar.reset(); return; } - this._crud.getUml(new EditTableRequest(schema)). - pipe(take(1)) + this._crud.getUml(new EditTableRequest(schema)) + .pipe(take(1)) .subscribe( res => { this.errorMessage$.next(null); @@ -73,7 +71,6 @@ export class UmlService { }), take(1) ).subscribe(res => { - console.log('added foreign key'); this.addForeignKeyResult$.next([fk, res]) }); }