diff options
4 files changed, 233 insertions, 179 deletions
diff --git a/cds-ui/designer-client/package-lock.json b/cds-ui/designer-client/package-lock.json index 14feaad08..540f2e93e 100644 --- a/cds-ui/designer-client/package-lock.json +++ b/cds-ui/designer-client/package-lock.json @@ -2107,11 +2107,6 @@ "@types/underscore": "*" } }, - "@types/color-name": { - "version": "1.1.1", - "resolved": "https://registry.npmjs.org/@types/color-name/-/color-name-1.1.1.tgz", - "integrity": "sha512-rr+OQyAjxze7GgWrSaJwydHStIhHq2lvY3BOC2Mj7KnzI7XK0Uw1TOOdI9lDoajEbSWLiYgoo4f1R51erQfhPQ==" - }, "@types/datatables.net": { "version": "1.10.18", "resolved": "https://registry.npmjs.org/@types/datatables.net/-/datatables.net-1.10.18.tgz", @@ -2527,28 +2522,28 @@ } }, "angular-datatables": { - "version": "9.0.1", - "resolved": "https://registry.npmjs.org/angular-datatables/-/angular-datatables-9.0.1.tgz", - "integrity": "sha512-F3mieJK0qkxGaX+uoKD2kVLDGM8HR2ZmLboN5vWAu4yKAOYI7x3NFfC+patBt39RZyEC2ajzKitOMyYKm6KUgA==", + "version": "9.0.2", + "resolved": "https://registry.npmjs.org/angular-datatables/-/angular-datatables-9.0.2.tgz", + "integrity": "sha512-NTPT9nGuKKPdRB1zlyrTyZoE32FTUhpbPuaiysTfTeWFIg0TvtKxZyQ1K4ILOCbTCCksnXUTtSRP9r9tCyHAuA==", "requires": { "@angular/cli": "^9.0.6" }, "dependencies": { "@angular-devkit/architect": { - "version": "0.901.4", - "resolved": "https://registry.npmjs.org/@angular-devkit/architect/-/architect-0.901.4.tgz", - "integrity": "sha512-w4RMj7eLhUSh70HUy5tW4EXjLQFXk0Lfr9WiSy5gvPGp+zzYxknI+Wn4Xid1wU/WS+4tuMv5nJIaNaH2sABESQ==", + "version": "0.901.12", + "resolved": "https://registry.npmjs.org/@angular-devkit/architect/-/architect-0.901.12.tgz", + "integrity": "sha512-gLlsxa+3JPV1m1gRvRMujOs4xKox6I5BkYmOD1zfu+dB6y3LuBAvHfXA6FaTDVOMBrmSlWnE4PmOmB6xd7wxMA==", "requires": { - "@angular-devkit/core": "9.1.4", + "@angular-devkit/core": "9.1.12", "rxjs": "6.5.4" } }, "@angular-devkit/core": { - "version": "9.1.4", - "resolved": "https://registry.npmjs.org/@angular-devkit/core/-/core-9.1.4.tgz", - "integrity": "sha512-OPFQDmT4XabLMSRDgmnzedlOrc83DzQIgLcfoh/UhZ7aJKf/2Vq4l09p/DkMNI36vN5BRL0zDZt7TjvKNgyYgA==", + "version": "9.1.12", + "resolved": "https://registry.npmjs.org/@angular-devkit/core/-/core-9.1.12.tgz", + "integrity": "sha512-D/GnBeSlmdgGn7EhuE32HuPuRAjvUuxi7Q6WywBI8PSsXKAGnrypghBwMATNnOA24//CgbW2533Y9VWHaeXdeA==", "requires": { - "ajv": "6.12.0", + "ajv": "6.12.3", "fast-json-stable-stringify": "2.1.0", "magic-string": "0.25.7", "rxjs": "6.5.4", @@ -2556,25 +2551,25 @@ } }, "@angular-devkit/schematics": { - "version": "9.1.4", - "resolved": "https://registry.npmjs.org/@angular-devkit/schematics/-/schematics-9.1.4.tgz", - "integrity": "sha512-RAbdnUEZ3JTLmWSBiXT5trsVx8Fi72fxN9CiRaluM09Cytg6BUc1wC5XCO0YPvhI400+3Ro1nwjPXezjg7LXzQ==", + "version": "9.1.12", + "resolved": "https://registry.npmjs.org/@angular-devkit/schematics/-/schematics-9.1.12.tgz", + "integrity": "sha512-+GYnUzmIy1/QpYitCC8mI7jcrViGHTtOKvvDPEFjU2nggjNEQaMmsHcdIsjrqggEc23ZZyebNAIewT8CMkJyrQ==", "requires": { - "@angular-devkit/core": "9.1.4", + "@angular-devkit/core": "9.1.12", "ora": "4.0.3", "rxjs": "6.5.4" } }, "@angular/cli": { - "version": "9.1.4", - "resolved": "https://registry.npmjs.org/@angular/cli/-/cli-9.1.4.tgz", - "integrity": "sha512-H9MqoT4zyIv+Yo3cvRVkzafWGHsqt7jUvtvGwMHIDMTfEX+Q8yiYlDLL6WM3Eb6/hDmLcRGC/GI495sKS1z5qA==", - "requires": { - "@angular-devkit/architect": "0.901.4", - "@angular-devkit/core": "9.1.4", - "@angular-devkit/schematics": "9.1.4", - "@schematics/angular": "9.1.4", - "@schematics/update": "0.901.4", + "version": "9.1.12", + "resolved": "https://registry.npmjs.org/@angular/cli/-/cli-9.1.12.tgz", + "integrity": "sha512-B0yOab5WbD84bIRRUKOPAJnpka8Qj+CRt61wJfjsqpd/Rj7pD/3ubmdCNoBH7Xa6UlOb0tdYqRPsqfK7uEL0sw==", + "requires": { + "@angular-devkit/architect": "0.901.12", + "@angular-devkit/core": "9.1.12", + "@angular-devkit/schematics": "9.1.12", + "@schematics/angular": "9.1.12", + "@schematics/update": "0.901.12", "@yarnpkg/lockfile": "1.1.0", "ansi-colors": "4.1.1", "debug": "4.1.1", @@ -2593,21 +2588,21 @@ } }, "@schematics/angular": { - "version": "9.1.4", - "resolved": "https://registry.npmjs.org/@schematics/angular/-/angular-9.1.4.tgz", - "integrity": "sha512-7nbiYBRgXc+f0sa5iXTcF6/VMy/Xq0wyKKnDFiLCb2aFYR7EXRHWF2GuwDIg2bvFugLuCBDoNnXeddLE1TXGWg==", + "version": "9.1.12", + "resolved": "https://registry.npmjs.org/@schematics/angular/-/angular-9.1.12.tgz", + "integrity": "sha512-r4+aPAGhstsKFMwW/kOen1ACnzuLpz+vMxEpndXOqqVXLkAMsuAbQUFYjIlMy6fH4zdhpI90EJZ1PbOrAXvKxA==", "requires": { - "@angular-devkit/core": "9.1.4", - "@angular-devkit/schematics": "9.1.4" + "@angular-devkit/core": "9.1.12", + "@angular-devkit/schematics": "9.1.12" } }, "@schematics/update": { - "version": "0.901.4", - "resolved": "https://registry.npmjs.org/@schematics/update/-/update-0.901.4.tgz", - "integrity": "sha512-jCtZY2Fbj502gKN5gdu1brnRy/ssyzTrWm69Ty73V+t8uL7nLr+/hny/VBJ8CiQnKQvxcgVl1xgvI1cXzpysVA==", + "version": "0.901.12", + "resolved": "https://registry.npmjs.org/@schematics/update/-/update-0.901.12.tgz", + "integrity": "sha512-SxGVYLTHhBC0rSF0OWSWPuJUB1Jhfqkl3o5bBgCC9//DutWiN6WoCCBTrCxR7F5vR2iiD7WqOe9CuvWYfvV8oQ==", "requires": { - "@angular-devkit/core": "9.1.4", - "@angular-devkit/schematics": "9.1.4", + "@angular-devkit/core": "9.1.12", + "@angular-devkit/schematics": "9.1.12", "@yarnpkg/lockfile": "1.1.0", "ini": "1.3.5", "npm-package-arg": "^8.0.0", @@ -2618,9 +2613,9 @@ } }, "ajv": { - "version": "6.12.0", - "resolved": "https://registry.npmjs.org/ajv/-/ajv-6.12.0.tgz", - "integrity": "sha512-D6gFiFA0RRLyUbvijN74DWAjXSFxWKaWP7mldxkVhyhAV3+SWA9HEJPHQ2c9soIeTFJqcSdFDGFgdqs1iUU2Hw==", + "version": "6.12.3", + "resolved": "https://registry.npmjs.org/ajv/-/ajv-6.12.3.tgz", + "integrity": "sha512-4K0cK3L1hsqk9xIb2z9vs/XU+PGJZ9PNpJRDS9YLzmNdX6jmVPfamLvTJr0aDAusnHyCHO6MjzlkAsgtqp9teA==", "requires": { "fast-deep-equal": "^3.1.1", "fast-json-stable-stringify": "^2.0.0", @@ -2629,11 +2624,10 @@ } }, "ansi-styles": { - "version": "4.2.1", - "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.2.1.tgz", - "integrity": "sha512-9VGjrMsG1vePxcSweQsN20KY/c4zN0h9fLjqAbwbPfahM3t+NL+M9HC8xeXG2I8pX5NoamTGNuomEUFI7fcUjA==", + "version": "4.3.0", + "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz", + "integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==", "requires": { - "@types/color-name": "^1.1.1", "color-convert": "^2.0.1" } }, @@ -2660,9 +2654,9 @@ "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==" }, "fast-deep-equal": { - "version": "3.1.1", - "resolved": "https://registry.npmjs.org/fast-deep-equal/-/fast-deep-equal-3.1.1.tgz", - "integrity": "sha512-8UEa58QDLauDNfpbrX55Q9jrGHThw2ZMdOky5Gl1CDtVeJDPVrG4Jxx1N8jw2gkWaff5UUuX1KJd+9zGe2B+ZA==" + "version": "3.1.3", + "resolved": "https://registry.npmjs.org/fast-deep-equal/-/fast-deep-equal-3.1.3.tgz", + "integrity": "sha512-f3qQ9oQy9j2AhBe/H9VC91wLmKBCCU/gDOnKNAYG5hswO7BLKj09Hc5HYNz9cGI++xlpDCIgDaitVs03ATR84Q==" }, "fast-json-stable-stringify": { "version": "2.1.0", @@ -2675,11 +2669,11 @@ "integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==" }, "hosted-git-info": { - "version": "3.0.4", - "resolved": "https://registry.npmjs.org/hosted-git-info/-/hosted-git-info-3.0.4.tgz", - "integrity": "sha512-4oT62d2jwSDBbLLFLZE+1vPuQ1h8p9wjrJ8Mqx5TjsyWmBMV5B13eJqn8pvluqubLf3cJPTfiYCIwNwDNmzScQ==", + "version": "3.0.7", + "resolved": "https://registry.npmjs.org/hosted-git-info/-/hosted-git-info-3.0.7.tgz", + "integrity": "sha512-fWqc0IcuXs+BmE9orLDyVykAG9GJtGLGuZAAqgcckPgv5xad4AcXGIv8galtQvlwutxSlaMcdw7BUtq2EIvqCQ==", "requires": { - "lru-cache": "^5.1.1" + "lru-cache": "^6.0.0" } }, "inquirer": { @@ -2710,6 +2704,14 @@ "is-docker": "^2.0.0" } }, + "lru-cache": { + "version": "6.0.0", + "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-6.0.0.tgz", + "integrity": "sha512-Jo6dJ04CmSjuznwJSS3pUeWmd/H0ffTlkXXgwZi+eq1UCmqQwCh+eLsYOYCwY991i2Fah4h1BEMCx4qThGbsiA==", + "requires": { + "yallist": "^4.0.0" + } + }, "magic-string": { "version": "0.25.7", "resolved": "https://registry.npmjs.org/magic-string/-/magic-string-0.25.7.tgz", @@ -2789,6 +2791,14 @@ "resolved": "https://registry.npmjs.org/hosted-git-info/-/hosted-git-info-2.8.8.tgz", "integrity": "sha512-f/wzC2QaWBs7t9IYqB4T3sR1xviIViXJRJTWBlx2Gf3g0Xi5vI7Yy4koXQ1c9OYDGHN9sBy1DQ2AB8fqZBWhUg==" }, + "lru-cache": { + "version": "5.1.1", + "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-5.1.1.tgz", + "integrity": "sha512-KpNARQA3Iwv+jTA0utUVVbrh+Jlrr1Fv0e56GGzAFOXN7dk/FviaDW8LHmK52DlcH4WP2n6gI8vN1aesBFgo9w==", + "requires": { + "yallist": "^3.0.2" + } + }, "npm-package-arg": { "version": "6.1.1", "resolved": "https://registry.npmjs.org/npm-package-arg/-/npm-package-arg-6.1.1.tgz", @@ -2822,6 +2832,11 @@ "version": "5.7.1", "resolved": "https://registry.npmjs.org/semver/-/semver-5.7.1.tgz", "integrity": "sha512-sauaDf/PZdVgrLTNYHRtpXa1iRiKcaebiKQ1BJdpQlWH2lCvexQdX55snPFyK7QzpudqbCI0qXFfOasHdyNDGQ==" + }, + "yallist": { + "version": "3.1.1", + "resolved": "https://registry.npmjs.org/yallist/-/yallist-3.1.1.tgz", + "integrity": "sha512-a4UGQaWPH59mOXUYnAG2ewncQS4i4F43Tv3JoAM+s2VDAmS9NsK8GpDMLrCHPksFT7h3K6TOoUNn2pb7RoXx4g==" } } }, @@ -2855,9 +2870,9 @@ } }, "supports-color": { - "version": "7.1.0", - "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.1.0.tgz", - "integrity": "sha512-oRSIpR8pxT1Wr2FquTNnGet79b3BWljqOuoW/h4oBhxJ/HUbX5nX6JSruTkvXDCFMwDPvsaTTbvMLKZWSy0R5g==", + "version": "7.2.0", + "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz", + "integrity": "sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==", "requires": { "has-flag": "^4.0.0" } @@ -2866,6 +2881,11 @@ "version": "7.0.2", "resolved": "https://registry.npmjs.org/uuid/-/uuid-7.0.2.tgz", "integrity": "sha512-vy9V/+pKG+5ZTYKf+VcphF5Oc6EFiu3W8Nv3P3zIh0EqVI80ZxOzuPfe9EHjkFNvf8+xuTHVeei4Drydlx4zjw==" + }, + "yallist": { + "version": "4.0.0", + "resolved": "https://registry.npmjs.org/yallist/-/yallist-4.0.0.tgz", + "integrity": "sha512-3wdGidZyq5PB084XLES5TpOSRA3wjXAlIWMhum2kRcv/41Sn2emQ0dycQW4uZXLejwKvg6EsvbdlVL+FYEct7A==" } } }, @@ -3864,9 +3884,9 @@ } }, "cli-spinners": { - "version": "2.3.0", - "resolved": "https://registry.npmjs.org/cli-spinners/-/cli-spinners-2.3.0.tgz", - "integrity": "sha512-Xs2Hf2nzrvJMFKimOR7YR0QwZ8fc0u98kdtwN1eNAZzNQgH3vK2pXzff6GJtKh7S5hoJ87ECiAiZFS2fb5Ii2w==" + "version": "2.5.0", + "resolved": "https://registry.npmjs.org/cli-spinners/-/cli-spinners-2.5.0.tgz", + "integrity": "sha512-PC+AmIuK04E6aeSs/pUccSujsTzBhu4HzC2dL+CfJB/Jcc2qTRbEwZQDfIUpt2Xl8BodYBEq8w4fc0kU2I9DjQ==" }, "cli-width": { "version": "2.2.0", @@ -4496,19 +4516,19 @@ } }, "datatables.net": { - "version": "1.10.20", - "resolved": "https://registry.npmjs.org/datatables.net/-/datatables.net-1.10.20.tgz", - "integrity": "sha512-4E4S7tTU607N3h0fZPkGmAtr9mwy462u+VJ6gxYZ8MxcRIjZqHy3Dv1GNry7i3zQCktTdWbULVKBbkAJkuHEnQ==", + "version": "1.10.22", + "resolved": "https://registry.npmjs.org/datatables.net/-/datatables.net-1.10.22.tgz", + "integrity": "sha512-ujn8GvkQIBYzYH54XY7OrI0Zb35TKRd9ABYfbnXgBfwTGIFT6UsmXrfHU5Yk+MSDoF0sDu2TB+31V6c+zUZ0Pw==", "requires": { "jquery": ">=1.7" } }, "datatables.net-dt": { - "version": "1.10.20", - "resolved": "https://registry.npmjs.org/datatables.net-dt/-/datatables.net-dt-1.10.20.tgz", - "integrity": "sha512-D+65buDke96a3WlJo2re+SbcAVfjPh2nsFZG198Vbkz3i1wKPdB+wkV2K07qYIiIpypcXWOnD2pz3MvnUqM9Tw==", + "version": "1.10.22", + "resolved": "https://registry.npmjs.org/datatables.net-dt/-/datatables.net-dt-1.10.22.tgz", + "integrity": "sha512-JYqE8noge7YGOydsiyLsWtPUofOHFEMCeOwS47kpykWqDJyU6GE2E3JaEeDq6hokg39UQKDNIRFnsM7GhA/BGw==", "requires": { - "datatables.net": "1.10.20", + "datatables.net": "1.10.22", "jquery": ">=1.7" } }, @@ -6522,9 +6542,9 @@ "dev": true }, "is-docker": { - "version": "2.0.0", - "resolved": "https://registry.npmjs.org/is-docker/-/is-docker-2.0.0.tgz", - "integrity": "sha512-pJEdRugimx4fBMra5z2/5iRdZ63OhYV0vr0Dwm5+xtW4D1FvRkB8hamMIhnWfyJeDdyr/aa7BDyNbtG38VxgoQ==" + "version": "2.1.1", + "resolved": "https://registry.npmjs.org/is-docker/-/is-docker-2.1.1.tgz", + "integrity": "sha512-ZOoqiXfEwtGknTiuDEy8pN2CfE3TxMHprvNer1mXiqwkOT77Rw3YVrUQ52EqAOU3QAWDQ+bQdx7HJzrv7LS2Hw==" }, "is-extendable": { "version": "0.1.1", @@ -8940,11 +8960,10 @@ }, "dependencies": { "ansi-styles": { - "version": "4.2.1", - "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.2.1.tgz", - "integrity": "sha512-9VGjrMsG1vePxcSweQsN20KY/c4zN0h9fLjqAbwbPfahM3t+NL+M9HC8xeXG2I8pX5NoamTGNuomEUFI7fcUjA==", + "version": "4.3.0", + "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz", + "integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==", "requires": { - "@types/color-name": "^1.1.1", "color-convert": "^2.0.1" } }, @@ -8984,9 +9003,9 @@ } }, "supports-color": { - "version": "7.1.0", - "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.1.0.tgz", - "integrity": "sha512-oRSIpR8pxT1Wr2FquTNnGet79b3BWljqOuoW/h4oBhxJ/HUbX5nX6JSruTkvXDCFMwDPvsaTTbvMLKZWSy0R5g==", + "version": "7.2.0", + "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz", + "integrity": "sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==", "requires": { "has-flag": "^4.0.0" } diff --git a/cds-ui/designer-client/package.json b/cds-ui/designer-client/package.json index 28e48098a..a4482c690 100644 --- a/cds-ui/designer-client/package.json +++ b/cds-ui/designer-client/package.json @@ -82,4 +82,4 @@ "tslint": "~5.15.0", "typescript": "~3.5.3" } -}
\ No newline at end of file +} diff --git a/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/template-mapping/templ-mapp-creation/templ-mapp-creation.component.html b/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/template-mapping/templ-mapp-creation/templ-mapp-creation.component.html index be84e7127..70b1644ab 100644 --- a/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/template-mapping/templ-mapp-creation/templ-mapp-creation.component.html +++ b/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/template-mapping/templ-mapp-creation/templ-mapp-creation.component.html @@ -130,33 +130,32 @@ </div> <div id="mapping-table" [hidden]="resourceDictionaryRes?.length == 0" class="mapping-table mx-4 my-2"> - - <mat-form-field> - <mat-label>Filter</mat-label> - <input matInput (keyup)="initApplyFilter($event)" placeholder="Ex. Mia" #input> - </mat-form-field> - - <div class="btn-group mapping-editBar" role="group"> - <div class="custom-control custom-checkbox" tooltip="Select All" placement="bottom"> - <input type="checkbox" (click)="selectAllProps()" class="custom-control-input" - id="customCheck1" - [checked]="resourceDictionaryRes.length>0&&resourceDictionaryRes.length === this.selectedProps.size"> - <label class="custom-control-label" for="customCheck1"></label> - </div> - <button [disabled]="selectedProps.size <=0" type="button" class="btn" (click)="reMap()" - tooltip="Re-mapping" placement="bottom"><i class="icon-autoMap"></i></button> - <button [disabled]="selectedProps.size <=0" type="button" class="btn" (click)="removeProps()" - tooltip="Remove" placement="bottom"><i class="icon-delete-sm"></i></button> - <div style="line-height: 35px;font-size: 10px;"> - <span>{{selectedProps.size}} selected </span> - <span>({{resourceDictionaryRes.length}} attributes in total)</span> - </div> - </div> - <div class="mat-elevation-z8"> + <!--Edit Buttons--> + <div class="btn-group mapping-editBar" role="group"> + <div class="custom-control custom-checkbox" tooltip="Select All" placement="bottom"> + <input type="checkbox" (click)="selectAllProps()" class="custom-control-input" + id="customCheck1" + [checked]="resourceDictionaryRes.length>0&&resourceDictionaryRes.length === this.selectedProps.size"> + <label class="custom-control-label" for="customCheck1"></label> + </div> + <button [disabled]="selectedProps.size <=0" type="button" class="btn" (click)="reMap()" + tooltip="Re-mapping" placement="bottom"><i class="icon-autoMap"></i></button> + <button [disabled]="selectedProps.size <=0" type="button" class="btn" + (click)="removeProps()" tooltip="Remove" placement="bottom"><i + class="icon-delete-sm"></i></button> + <div style="line-height: 35px;font-size: 10px;"> + <span>{{selectedProps.size}} selected </span> + <span>({{resourceDictionaryRes.length}} attributes in total)</span> + </div> + </div> + <mat-paginator [pageSizeOptions]="[10, 25,50, 100]"></mat-paginator> + <mat-form-field class="tableFilter float-right"> + <mat-label>Filter</mat-label> + <input matInput (keyup)="initApplyFilter($event)" placeholder="Ex. Mia" #input> + </mat-form-field> <table mat-table [dataSource]="initDataSource" matSort> - - <!-- Required Column --> + <!-- select Column --> <ng-container matColumnDef="select"> <th mat-header-cell *matHeaderCellDef> </th> <td mat-cell *matCellDef="let dict"> @@ -180,8 +179,7 @@ </div> </td> </ng-container> - - <!-- Name Column --> + <!-- Template Input Column --> <ng-container matColumnDef="Template Input"> <th mat-header-cell *matHeaderCellDef> Template Input </th> <td mat-cell *matCellDef="let dict"> @@ -193,19 +191,17 @@ </div> </td> </ng-container> - - <!-- Weight Column --> + <!-- Parameter Name Column --> <ng-container matColumnDef="name"> <th mat-header-cell *matHeaderCellDef mat-sort-header> Parameter Name </th> <td mat-cell *matCellDef="let dict"> {{dict['name'] }} </td> </ng-container> - <!-- Weight Column --> + <!-- Dictionary Name Column --> <ng-container matColumnDef="Dictionary Name"> <th mat-header-cell *matHeaderCellDef mat-sort-header> Dictionary Name </th> <td mat-cell *matCellDef="let dict"> {{dict['name'] }} </td> </ng-container> - - <!-- Symbol Column --> + <!-- Dictionary Source Column --> <ng-container matColumnDef="dictionary-source"> <th mat-header-cell *matHeaderCellDef mat-sort-header> Dictionary Source </th> <td mat-cell *matCellDef="let dict"> @@ -217,23 +213,19 @@ </select> </td> </ng-container> - - - <!-- Symbol Column --> + <!-- Dependancies Column --> <ng-container matColumnDef="dependencies"> <th mat-header-cell *matHeaderCellDef> Dependancies </th> <td mat-cell *matCellDef="let dict"> <input type="text" class="form-control" [ngModel]="getValue(dict.name)"> </td> </ng-container> - - <!-- Symbol Column --> + <!-- Default Column --> <ng-container matColumnDef="default"> <th mat-header-cell *matHeaderCellDef mat-sort-header> Default </th> <td mat-cell *matCellDef="let dict"> {{ dict.definition?.property?.default }} </td> </ng-container> - - <!-- Symbol Column --> + <!-- Velocity Column --> <ng-container matColumnDef="Velocity"> <th mat-header-cell *matHeaderCellDef mat-sort-header> Velocity </th> <td mat-cell *matCellDef="let dict"> @@ -244,43 +236,34 @@ </ng-container> - - <!-- Symbol Column --> + <!-- Data Type Column --> <ng-container matColumnDef="Data Type"> <th mat-header-cell *matHeaderCellDef mat-sort-header> Data Type </th> <td mat-cell *matCellDef="let dict"> {{ dict.definition?.property?.type }} </td> </ng-container> - - <!-- Symbol Column --> + <!-- Entry Schema Column --> <ng-container matColumnDef="Entry Schema"> <th mat-header-cell *matHeaderCellDef mat-sort-header> Entry Schema </th> <td mat-cell *matCellDef="let dict"> {{dict.definition?.property['entry_schema']}} </td> </ng-container> - <tr mat-header-row *matHeaderRowDef="initColumn"></tr> <tr mat-row *matRowDef="let row; columns: initColumn;"></tr> - <!-- Row shown when there is no matching data. --> <tr class="mat-row" *matNoDataRow> <td class="mat-cell" colspan="4">No data matching the filter "{{input.value}}"</td> </tr> </table> - - <mat-paginator [pageSizeOptions]="[10, 25,50, 100]"></mat-paginator> </div> </div> <!------ View Table-------> <div id="mapping-table-res" [hidden]="mappingRes?.length == 0" class="mapping-table mx-4 my-2"> - - - <mat-form-field> - <mat-label>Filter</mat-label> - <input matInput (keyup)="applyFilter($event)" placeholder="Ex. Mia" #input> - </mat-form-field> - <div class="mat-elevation-z8"> + <mat-form-field class="tableFilter float-right"> + <mat-label>Filter</mat-label> + <input matInput (keyup)="applyFilter($event)" placeholder="Ex. Mia" #input> + </mat-form-field> + <mat-paginator [pageSizeOptions]="[10, 25,50, 100]"></mat-paginator> <table mat-table [dataSource]="dataSource" matSort> - <!-- Required Column --> <ng-container matColumnDef="Required"> <th mat-header-cell *matHeaderCellDef> Required </th> @@ -289,8 +272,7 @@ <img *ngIf="!dict?.property?.required" src="/assets/img/icon-required-no.svg"> </td> </ng-container> - - <!-- Name Column --> + <!-- Template Input Column --> <ng-container matColumnDef="Template Input"> <th mat-header-cell *matHeaderCellDef> Template Input </th> <td mat-cell *matCellDef="let dict"> @@ -298,19 +280,17 @@ <img *ngIf="!dict['input-param']" src="/assets/img/icon-required-no.svg"> </td> </ng-container> - - <!-- Weight Column --> + <!-- Parameter Name Column --> <ng-container matColumnDef="name"> <th mat-header-cell *matHeaderCellDef mat-sort-header> Parameter Name </th> <td mat-cell *matCellDef="let dict"> {{dict['name'] }} </td> </ng-container> - <!-- Weight Column --> + <!-- Dictionary Name Column --> <ng-container matColumnDef="Dictionary Name"> <th mat-header-cell *matHeaderCellDef mat-sort-header> Dictionary Name </th> <td mat-cell *matCellDef="let dict"> {{dict['name'] }} </td> </ng-container> - - <!-- Symbol Column --> + <!-- Dictionary Source Column --> <ng-container matColumnDef="dictionary-source"> <th mat-header-cell *matHeaderCellDef mat-sort-header> Dictionary Source </th> <td mat-cell *matCellDef="let dict"> @@ -318,23 +298,19 @@ disabled> </td> </ng-container> - - - <!-- Symbol Column --> + <!-- Dependancies Column --> <ng-container matColumnDef="dependencies"> <th mat-header-cell *matHeaderCellDef> Dependancies </th> <td mat-cell *matCellDef="let dict"> <input type="text" class="form-control" [value]="dict['dependencies']" disabled> </td> </ng-container> - - <!-- Symbol Column --> + <!-- default Column --> <ng-container matColumnDef="default"> <th mat-header-cell *matHeaderCellDef mat-sort-header> Default </th> <td mat-cell *matCellDef="let dict"> {{dict['property']['default']}} </td> </ng-container> - - <!-- Symbol Column --> + <!-- Velocity Column --> <ng-container matColumnDef="Velocity"> <th mat-header-cell *matHeaderCellDef mat-sort-header> Velocity </th> <td mat-cell *matCellDef="let dict"> @@ -347,39 +323,27 @@ </ng-container> - - <!-- Symbol Column --> + <!-- Data Type Column --> <ng-container matColumnDef="Data Type"> <th mat-header-cell *matHeaderCellDef mat-sort-header> Data Type </th> <td mat-cell *matCellDef="let dict"> {{ dict['property']['type'] }} </td> </ng-container> - - <!-- Symbol Column --> + <!-- Entry Schema Column --> <ng-container matColumnDef="Entry Schema"> <th mat-header-cell *matHeaderCellDef mat-sort-header> Entry Schema </th> <td mat-cell *matCellDef="let dict"> {{dict['property']['entry_schema']}} </td> </ng-container> - <tr mat-header-row *matHeaderRowDef="resColumns"></tr> <tr mat-row *matRowDef="let row; columns: resColumns;"></tr> - <!-- Row shown when there is no matching data. --> <tr class="mat-row" *matNoDataRow> <td class="mat-cell" colspan="4">No data matching the filter "{{input.value}}"</td> </tr> </table> - - <mat-paginator [pageSizeOptions]="[10, 25,50, 100]"></mat-paginator> </div> - </div> - - </div> - - </div> - </div> </div> diff --git a/cds-ui/designer-client/src/styles.css b/cds-ui/designer-client/src/styles.css index 8d4ee8e29..6c315ea3a 100644 --- a/cds-ui/designer-client/src/styles.css +++ b/cds-ui/designer-client/src/styles.css @@ -21,6 +21,9 @@ body{ .custom-control-input:checked ~ .custom-control-label::before{ border-color: transparent !important; } +.btn{ + transition: all .2s ease-out !important; +} .btn-outline-danger{ background: #fff !important; border: solid 1px #ECEDF2 !important; @@ -29,6 +32,10 @@ body{ .btn:disabled:hover{ cursor: default; } +.btn.disabled, +.btn:disabled{ + opacity: .5 !important; +} .custom-control-label::before{ border: solid 1px #C3CDDB !important; border-radius: 0 !important; @@ -3039,7 +3046,16 @@ padding: 0 10px 0 0; background: transparent; } .mapping-editBar{ - margin-bottom: 1rem; + margin-top: 6px; +} +.mapping-editBar .selectedAttributes{ + margin-left: 6px; + line-height: 35px; + font-size: 10px; + font-weight: bold; +} +.selectedAttributes .totalAtt{ + color: #C4CEDB; } .mapping-editBar .custom-checkbox, .mapping-editBar .btn{ @@ -3062,11 +3078,11 @@ padding: 0 10px 0 0; .mapping-editBar .btn i{ color: #1B3E6F; font-size: 18px; - opacity: .5; + /* opacity: .5; */ } .mapping-editBar .custom-checkbox:hover, .mapping-editBar .btn:hover i{ - opacity: 1; + opacity: .8; } .template-mapping-list{ background: #F4F9FE; @@ -3239,10 +3255,7 @@ margin-right: 5px; .template-mapping-action .btn-outline-secondary{ background:#fff !important ; border-color:#ECEDF2 !important ; - color: #C3CDDB !important ; -} -.template-mapping-action .btn-outline-secondary:hover{ - color: #1B3E6F !important; + color: #1B3E6F !important ; } .table-container{ width: 100%; @@ -3267,14 +3280,63 @@ margin-right: 5px; font-size: 13px; /* font-weight: bold; */ } - +/*Mat Table*/ +.mat-elevation-z8{ + box-shadow: none !important; +} +.mat-table, +.mat-paginator{ + background: #fff !important; + color: #1B3E6F !important; +} +.mat-table{ + border-top: solid 1px #ECEDF2; +} +.mat-paginator{ + /* display: inline-block; */ + width: 36%; + float: right; +} +.mat-input-element{ + font-size: 13px !important; + line-height: 20px !important; +} +tr.mat-header-row{ + background: #f4f9fe; + border-bottom: 1px solid #ecedf2; +} +.mat-sort-header-button{ + text-align: left; +} +.mat-cell, .mat-footer-cell{ + color: #1B3E6F !important; +} +.mat-form-field-appearance-legacy .mat-form-field-wrapper{ + padding-bottom: 0; +} +.mat-paginator-page-size-select .mat-form-field-wrapper{ + padding-bottom: 14px; +} +.mat-form-field-infix, .dataTables_filter input{ color: #1B3E6F; - background: url(../src/assets/img/icon-search.svg) 9px center no-repeat; - padding: 4px 9px 4px 24px !important; - border: solid 1px #ECEDF2; + padding: 4px 9px !important; + border: solid 1px #ECEDF2 !important; border-radius: 4px; } +.mat-focused .mat-form-field-infix{ + border-bottom: 0 !important; +} +.tableFilter{ + margin-top: 9px; +} +.tableFilter .mat-form-field-wrapper{ + padding-bottom: 0; +} +.tableFilter .mat-form-field-infix{ + background: url(../src/assets/img/icon-search.svg) 9px center no-repeat; + padding-left: 24px !important; +} .dataTables_filter input:focus{ box-shadow: 0 2px 6px 0 rgba(47, 83, 151, 0.1); } @@ -3290,11 +3352,25 @@ margin-right: 5px; padding-left: 20px !important; } .mapping-table thead th{ + padding: 4px 20px 4px 0 !important; border-bottom-color: #ECEDF2 !important; + color: #1B3E6F; + font-weight: bold; + font-size: 12px; } .mapping-table tbody tr:hover{ background-color: #F4F9FE !important; } +.mat-form-field-label{ + color: #1B3E6F !important; + font-size: 13px !important; + padding-left: 26px; + line-height: 20px !important; +} +.mat-select-value, +.mat-select-arrow{ + color: #1B3E6F !important; +} .mapping-table th{ padding-top: 10px !important; padding-bottom: 10px !important; @@ -3307,6 +3383,9 @@ table.dataTable.no-footer{ margin-bottom: 9px; border-bottom: solid 1px #ECEDF2 !important; } +.mat-paginator-container{ + padding-right: 0; +} .dataTables_info{ padding-top: 12px; color: #1B3E6F !important; @@ -3520,11 +3599,3 @@ for simplicity .mat-icon-button[disabled]{ color: rgba(224, 232, 242, .5) !important; } - - - - - - - - |