From 3d9f70e6c58ace2f1813a4f3eebe60f2e61298b3 Mon Sep 17 00:00:00 2001 From: Yubing325 <35515298+Yubing325@users.noreply.github.com> Date: Mon, 8 Jun 2020 20:04:35 -0500 Subject: [PATCH] two-way binding columns & header footer in grid --- package-lock.json | 180 ++++++++++++++++++ package.json | 24 ++- .../src/lib/data-grid/data-grid.module.ts | 16 +- .../data-grid/data-grid.component.html | 68 ++++--- .../data-grid/data-grid.component.ts | 28 ++- ...rective.ts => data-grid-cell.directive.ts} | 0 ...e.ts => data-grid-col-header.directive.ts} | 0 ...irective.ts => data-grid-col.directive.ts} | 4 +- .../directives/data-grid-footer.directive.ts | 10 + .../directives/data-grid-header.directive.ts | 10 + .../poweredsoft/ngx-cdk-ui/src/public-api.ts | 8 +- .../data-grid-demo-home.component.html | 52 +++-- .../data-grid-demo-home.component.ts | 27 ++- .../data-grid-demo/data-grid-demo.module.ts | 4 +- .../services/IChangeMerchantNameCommand.ts | 4 + src/app/data/services/merchant.service.ts | 111 +++++++---- 16 files changed, 426 insertions(+), 120 deletions(-) rename projects/poweredsoft/ngx-cdk-ui/src/lib/data-grid/directives/{DataGridCell.directive.ts => data-grid-cell.directive.ts} (100%) rename projects/poweredsoft/ngx-cdk-ui/src/lib/data-grid/directives/{DataGridColHeader.directive.ts => data-grid-col-header.directive.ts} (100%) rename projects/poweredsoft/ngx-cdk-ui/src/lib/data-grid/directives/{DataGridCol.directive.ts => data-grid-col.directive.ts} (72%) create mode 100644 projects/poweredsoft/ngx-cdk-ui/src/lib/data-grid/directives/data-grid-footer.directive.ts create mode 100644 projects/poweredsoft/ngx-cdk-ui/src/lib/data-grid/directives/data-grid-header.directive.ts diff --git a/package-lock.json b/package-lock.json index 659871b..4e24382 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1554,6 +1554,55 @@ "to-fast-properties": "^2.0.0" } }, + "@hapi/address": { + "version": "4.0.1", + "resolved": "https://registry.npmjs.org/@hapi/address/-/address-4.0.1.tgz", + "integrity": "sha512-0oEP5UiyV4f3d6cBL8F3Z5S7iWSX39Knnl0lY8i+6gfmmIBj44JCBNtcMgwyS+5v7j3VYavNay0NFHDS+UGQcw==", + "dev": true, + "requires": { + "@hapi/hoek": "^9.0.0" + } + }, + "@hapi/formula": { + "version": "2.0.0", + "resolved": "https://registry.npmjs.org/@hapi/formula/-/formula-2.0.0.tgz", + "integrity": "sha512-V87P8fv7PI0LH7LiVi8Lkf3x+KCO7pQozXRssAHNXXL9L1K+uyu4XypLXwxqVDKgyQai6qj3/KteNlrqDx4W5A==", + "dev": true + }, + "@hapi/hoek": { + "version": "9.0.4", + "resolved": "https://registry.npmjs.org/@hapi/hoek/-/hoek-9.0.4.tgz", + "integrity": "sha512-EwaJS7RjoXUZ2cXXKZZxZqieGtc7RbvQhUy8FwDoMQtxWVi14tFjeFCYPZAM1mBCpOpiBpyaZbb9NeHc7eGKgw==", + "dev": true + }, + "@hapi/joi": { + "version": "17.1.1", + "resolved": "https://registry.npmjs.org/@hapi/joi/-/joi-17.1.1.tgz", + "integrity": "sha512-p4DKeZAoeZW4g3u7ZeRo+vCDuSDgSvtsB/NpfjXEHTUjSeINAi/RrVOWiVQ1isaoLzMvFEhe8n5065mQq1AdQg==", + "dev": true, + "requires": { + "@hapi/address": "^4.0.1", + "@hapi/formula": "^2.0.0", + "@hapi/hoek": "^9.0.0", + "@hapi/pinpoint": "^2.0.0", + "@hapi/topo": "^5.0.0" + } + }, + "@hapi/pinpoint": { + "version": "2.0.0", + "resolved": "https://registry.npmjs.org/@hapi/pinpoint/-/pinpoint-2.0.0.tgz", + "integrity": "sha512-vzXR5MY7n4XeIvLpfl3HtE3coZYO4raKXW766R6DZw/6aLqR26iuZ109K7a0NtF2Db0jxqh7xz2AxkUwpUFybw==", + "dev": true + }, + "@hapi/topo": { + "version": "5.0.0", + "resolved": "https://registry.npmjs.org/@hapi/topo/-/topo-5.0.0.tgz", + "integrity": "sha512-tFJlT47db0kMqVm3H4nQYgn6Pwg10GTZHb1pwmSiv1K4ks6drQOtfEF5ZnPjkvC+y4/bUPHK+bc87QvLcL+WMw==", + "dev": true, + "requires": { + "@hapi/hoek": "^9.0.0" + } + }, "@istanbuljs/schema": { "version": "0.1.2", "resolved": "https://registry.npmjs.org/@istanbuljs/schema/-/schema-0.1.2.tgz", @@ -2564,6 +2613,41 @@ "integrity": "sha512-3YDiu347mtVtjpyV3u5kVqQLP242c06zwDOgpeRnybmXlYYsLbtTrUBUm8i8srONt+FWobl5aibnU1030PeeuA==", "dev": true }, + "axios": { + "version": "0.19.2", + "resolved": "https://registry.npmjs.org/axios/-/axios-0.19.2.tgz", + "integrity": "sha512-fjgm5MvRHLhx+osE2xoekY70AhARk3a6hkN+3Io1jc00jtquGvxYlKlsFUhmUET0V5te6CcZI7lcv2Ym61mjHA==", + "dev": true, + "requires": { + "follow-redirects": "1.5.10" + }, + "dependencies": { + "debug": { + "version": "3.1.0", + "resolved": "https://registry.npmjs.org/debug/-/debug-3.1.0.tgz", + "integrity": "sha512-OX8XqP7/1a9cqkxYw2yXss15f26NKWBpDXQd0/uK/KPqdQhxbPa994hnzjcE2VqQpDslf55723cKPUOGSmMY3g==", + "dev": true, + "requires": { + "ms": "2.0.0" + } + }, + "follow-redirects": { + "version": "1.5.10", + "resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.5.10.tgz", + "integrity": "sha512-0V5l4Cizzvqt5D44aTXbFZz+FtyXV1vrDN6qrelxtfYQKW0KO0W2T/hkE8xvGa/540LkZlkaUjO4ailYTFtHVQ==", + "dev": true, + "requires": { + "debug": "=3.1.0" + } + }, + "ms": { + "version": "2.0.0", + "resolved": "https://registry.npmjs.org/ms/-/ms-2.0.0.tgz", + "integrity": "sha1-VgiurfwAvmwpAd9fmGF4jeDVl8g=", + "dev": true + } + } + }, "axobject-query": { "version": "2.0.2", "resolved": "https://registry.npmjs.org/axobject-query/-/axobject-query-2.0.2.tgz", @@ -7731,6 +7815,26 @@ "integrity": "sha1-HADHQ7QzzQpOgHWPe2SldEDZ/wA=", "dev": true }, + "load-json-file": { + "version": "4.0.0", + "resolved": "https://registry.npmjs.org/load-json-file/-/load-json-file-4.0.0.tgz", + "integrity": "sha1-L19Fq5HjMhYjT9U62rZo607AmTs=", + "dev": true, + "requires": { + "graceful-fs": "^4.1.2", + "parse-json": "^4.0.0", + "pify": "^3.0.0", + "strip-bom": "^3.0.0" + }, + "dependencies": { + "pify": { + "version": "3.0.0", + "resolved": "https://registry.npmjs.org/pify/-/pify-3.0.0.tgz", + "integrity": "sha1-5aSs0sEB/fPZpNB/DbxNtJ3SgXY=", + "dev": true + } + } + }, "loader-runner": { "version": "2.4.0", "resolved": "https://registry.npmjs.org/loader-runner/-/loader-runner-2.4.0.tgz", @@ -8011,6 +8115,12 @@ "readable-stream": "^2.0.1" } }, + "memorystream": { + "version": "0.3.1", + "resolved": "https://registry.npmjs.org/memorystream/-/memorystream-0.3.1.tgz", + "integrity": "sha1-htcJCzDORV1j+64S3aUaR93K+bI=", + "dev": true + }, "merge-descriptors": { "version": "1.0.1", "resolved": "https://registry.npmjs.org/merge-descriptors/-/merge-descriptors-1.0.1.tgz", @@ -8651,6 +8761,11 @@ } } }, + "ngx-bootstrap": { + "version": "5.6.1", + "resolved": "https://registry.npmjs.org/ngx-bootstrap/-/ngx-bootstrap-5.6.1.tgz", + "integrity": "sha512-8fDs3VaaWgKpupakPKS0QaUc+1E/JMBGJDxUUODjyIkLtFr1A8vH4cjXiV3AfrPvhK27GH0oyTPyKWKcCjEtVg==" + }, "nice-try": { "version": "1.0.5", "resolved": "https://registry.npmjs.org/nice-try/-/nice-try-1.0.5.tgz", @@ -8876,6 +8991,36 @@ } } }, + "npm-run-all": { + "version": "4.1.5", + "resolved": "https://registry.npmjs.org/npm-run-all/-/npm-run-all-4.1.5.tgz", + "integrity": "sha512-Oo82gJDAVcaMdi3nuoKFavkIHBRVqQ1qvMb+9LHk/cF4P6B2m8aP04hGf7oL6wZ9BuGwX1onlLhpuoofSyoQDQ==", + "dev": true, + "requires": { + "ansi-styles": "^3.2.1", + "chalk": "^2.4.1", + "cross-spawn": "^6.0.5", + "memorystream": "^0.3.1", + "minimatch": "^3.0.4", + "pidtree": "^0.3.0", + "read-pkg": "^3.0.0", + "shell-quote": "^1.6.1", + "string.prototype.padend": "^3.0.0" + }, + "dependencies": { + "read-pkg": { + "version": "3.0.0", + "resolved": "https://registry.npmjs.org/read-pkg/-/read-pkg-3.0.0.tgz", + "integrity": "sha1-nLxoaXj+5l0WwA4rGcI3/Pbjg4k=", + "dev": true, + "requires": { + "load-json-file": "^4.0.0", + "normalize-package-data": "^2.3.2", + "path-type": "^3.0.0" + } + } + } + }, "npm-run-path": { "version": "2.0.2", "resolved": "https://registry.npmjs.org/npm-run-path/-/npm-run-path-2.0.2.tgz", @@ -9652,6 +9797,12 @@ "integrity": "sha512-q0M/9eZHzmr0AulXyPwNfZjtwZ/RBZlbN3K3CErVrk50T2ASYI7Bye0EvekFY3IP1Nt2DHu0re+V2ZHIpMkuWg==", "dev": true }, + "pidtree": { + "version": "0.3.1", + "resolved": "https://registry.npmjs.org/pidtree/-/pidtree-0.3.1.tgz", + "integrity": "sha512-qQbW94hLHEqCg7nhby4yRC7G2+jYHY4Rguc2bjw7Uug4GIJuu1tvf2uHaZv5Q8zdt+WKJ6qK1FOI6amaWUo5FA==", + "dev": true + }, "pify": { "version": "4.0.1", "resolved": "https://registry.npmjs.org/pify/-/pify-4.0.1.tgz", @@ -11946,6 +12097,12 @@ "integrity": "sha1-2kL0l0DAtC2yypcoVxyxkMmO/qM=", "dev": true }, + "shell-quote": { + "version": "1.7.2", + "resolved": "https://registry.npmjs.org/shell-quote/-/shell-quote-1.7.2.tgz", + "integrity": "sha512-mRz/m/JVscCrkMyPqHc/bczi3OQHkLTqXHEFu0zDhK/qfv3UcOA4SVmRCLmos4bhjr9ekVQubj/R7waKapmiQg==", + "dev": true + }, "signal-exit": { "version": "3.0.3", "resolved": "https://registry.npmjs.org/signal-exit/-/signal-exit-3.0.3.tgz", @@ -12648,6 +12805,16 @@ } } }, + "string.prototype.padend": { + "version": "3.1.0", + "resolved": "https://registry.npmjs.org/string.prototype.padend/-/string.prototype.padend-3.1.0.tgz", + "integrity": "sha512-3aIv8Ffdp8EZj8iLwREGpQaUZiPyrWrpzMBHvkiSW/bK/EGve9np07Vwy7IJ5waydpGXzQZu/F8Oze2/IWkBaA==", + "dev": true, + "requires": { + "define-properties": "^1.1.3", + "es-abstract": "^1.17.0-next.1" + } + }, "string.prototype.trimend": { "version": "1.0.1", "resolved": "https://registry.npmjs.org/string.prototype.trimend/-/string.prototype.trimend-1.0.1.tgz", @@ -13708,6 +13875,19 @@ "integrity": "sha1-wGavtYK7HLQSjWDqkjkulNXp2+w=", "dev": true }, + "wait-on": { + "version": "5.0.1", + "resolved": "https://registry.npmjs.org/wait-on/-/wait-on-5.0.1.tgz", + "integrity": "sha512-TxzkYIfRWK1hLc9IlUh9bE1mrvIIM3ptPRKQ86Z8Qo0tBQLCHEvWzkRD1Ge4FWprKflHOnAtqIBH2nKmib/lrg==", + "dev": true, + "requires": { + "@hapi/joi": "^17.1.1", + "axios": "^0.19.2", + "lodash": "^4.17.15", + "minimist": "^1.2.5", + "rxjs": "^6.5.5" + } + }, "watchpack": { "version": "1.7.2", "resolved": "https://registry.npmjs.org/watchpack/-/watchpack-1.7.2.tgz", diff --git a/package.json b/package.json index e4c6c3b..26a2b2d 100644 --- a/package.json +++ b/package.json @@ -7,7 +7,11 @@ "build": "ng build", "test": "ng test", "lint": "ng lint", - "e2e": "ng e2e" + "e2e": "ng e2e", + "clean": "rimraf dist", + "start:app": "wait-on dist/poweredsoft/ngx-cdk-ui/fesm5 && ng serve --poll 2000", + "watch:lib": "ng build @poweredsoft/ngx-cdk-ui --watch", + "watch:all": "npm run clean && run-p watch:lib start:app" }, "private": true, "dependencies": { @@ -19,10 +23,6 @@ "@angular/platform-browser": "~9.1.4", "@angular/platform-browser-dynamic": "~9.1.4", "@angular/router": "~9.1.4", - "bootstrap": "^4.5.0", - "rxjs": "~6.5.4", - "tslib": "^1.10.0", - "zone.js": "~0.10.2", "@poweredsoft/data": "0.0.26", "@poweredsoft/ngx-data": "0.0.13", "@poweredsoft/ngx-data-apollo": "0.0.8", @@ -31,8 +31,13 @@ "apollo-cache-inmemory": "^1.6.0", "apollo-client": "^2.6.0", "apollo-link": "^1.2.11", + "bootstrap": "^4.5.0", "graphql": "^14.5.0", - "graphql-tag": "^2.10.0" + "graphql-tag": "^2.10.0", + "ngx-bootstrap": "^5.6.1", + "rxjs": "~6.5.4", + "tslib": "^1.10.0", + "zone.js": "~0.10.2" }, "devDependencies": { "@angular-devkit/build-angular": "~0.901.4", @@ -40,9 +45,9 @@ "@angular/cli": "~9.1.4", "@angular/compiler-cli": "~9.1.4", "@angular/language-service": "~9.1.4", - "@types/node": "^12.11.1", "@types/jasmine": "~3.5.0", "@types/jasminewd2": "~2.0.3", + "@types/node": "^12.11.1", "codelyzer": "^5.1.2", "jasmine-core": "~3.5.0", "jasmine-spec-reporter": "~4.2.1", @@ -52,9 +57,12 @@ "karma-jasmine": "~3.0.1", "karma-jasmine-html-reporter": "^1.4.2", "ng-packagr": "^9.0.0", + "npm-run-all": "^4.1.5", "protractor": "~5.4.3", + "rimraf": "^3.0.2", "ts-node": "~8.3.0", "tslint": "~6.1.0", - "typescript": "~3.8.3" + "typescript": "~3.8.3", + "wait-on": "^5.0.1" } } diff --git a/projects/poweredsoft/ngx-cdk-ui/src/lib/data-grid/data-grid.module.ts b/projects/poweredsoft/ngx-cdk-ui/src/lib/data-grid/data-grid.module.ts index 17db762..badcb1f 100644 --- a/projects/poweredsoft/ngx-cdk-ui/src/lib/data-grid/data-grid.module.ts +++ b/projects/poweredsoft/ngx-cdk-ui/src/lib/data-grid/data-grid.module.ts @@ -1,17 +1,23 @@ import { NgModule } from '@angular/core'; import { CommonModule } from '@angular/common'; import { DataGridComponent } from './data-grid/data-grid.component'; -import { DataGridColDirective } from './directives/DataGridCol.directive'; -import { DataGridColHeaderDirective } from './directives/DataGridColHeader.directive'; -import { DataGridCellDirective } from './directives/DataGridCell.directive'; +import { DataGridColDirective } from './directives/data-grid-col.directive'; +import { DataGridColHeaderDirective } from './directives/data-grid-col-header.directive'; +import { DataGridCellDirective } from './directives/data-grid-cell.directive'; +import { DataGridFooterDirective } from './directives/data-grid-footer.directive'; +import { DataGridHeaderDirective } from './directives/data-grid-header.directive'; + + @NgModule({ - declarations: [DataGridComponent,DataGridColDirective,DataGridColHeaderDirective,DataGridCellDirective], + declarations: [DataGridComponent,DataGridColDirective,DataGridColHeaderDirective,DataGridCellDirective, DataGridFooterDirective, DataGridHeaderDirective, + + ], imports: [ CommonModule ], - exports: [DataGridComponent] + exports: [DataGridComponent,DataGridColDirective,DataGridColHeaderDirective,DataGridCellDirective,DataGridFooterDirective, DataGridHeaderDirective] }) export class DataGridModule { } diff --git a/projects/poweredsoft/ngx-cdk-ui/src/lib/data-grid/data-grid/data-grid.component.html b/projects/poweredsoft/ngx-cdk-ui/src/lib/data-grid/data-grid/data-grid.component.html index 2e1f60c..afababd 100644 --- a/projects/poweredsoft/ngx-cdk-ui/src/lib/data-grid/data-grid/data-grid.component.html +++ b/projects/poweredsoft/ngx-cdk-ui/src/lib/data-grid/data-grid/data-grid.component.html @@ -1,30 +1,42 @@ - - - - - - +
-

- -

-
+ + + + + + + + - - - - - + + + + + + + + + +
+ +
+ + + +
- - - -
+ + + +
+ +
diff --git a/projects/poweredsoft/ngx-cdk-ui/src/lib/data-grid/data-grid/data-grid.component.ts b/projects/poweredsoft/ngx-cdk-ui/src/lib/data-grid/data-grid/data-grid.component.ts index 6ae3149..66ce517 100644 --- a/projects/poweredsoft/ngx-cdk-ui/src/lib/data-grid/data-grid/data-grid.component.ts +++ b/projects/poweredsoft/ngx-cdk-ui/src/lib/data-grid/data-grid/data-grid.component.ts @@ -1,6 +1,8 @@ -import { Component, OnInit, ContentChildren, QueryList, Input } from '@angular/core'; +import { Component, OnInit, ContentChildren, QueryList, Input, Output, EventEmitter } from '@angular/core'; import { IQueryExecutionResult, IQueryExecutionGroupResult, IDataSource } from '@poweredsoft/data'; -import { DataGridColDirective } from '../directives/DataGridCol.directive'; +import { DataGridColDirective } from '../directives/data-grid-col.directive'; +import { DataGridHeaderDirective } from '../directives/data-grid-header.directive'; +import { DataGridFooterDirective } from '../directives/data-grid-footer.directive'; @Component({ selector: 'ps-data-grid', @@ -12,13 +14,29 @@ export class DataGridComponent implements OnInit { latestResult: IQueryExecutionResult & IQueryExecutionGroupResult; pages: any[]; - @ContentChildren(DataGridColDirective) headers: QueryList; + @ContentChildren(DataGridColDirective) columnDefinitions: QueryList; + @ContentChildren(DataGridHeaderDirective) gridHeaders: QueryList; + @ContentChildren(DataGridFooterDirective) gridFooters: QueryList; + - @Input() columns: string[]; @Input() dataSource: IDataSource; + @Input() tableClasses: any; + private _columns: string[]; + + @Input() set columns(value: string[]) { + this._columns = value; + this.columnsChange.emit(value); + } + + get columns() { + return this._columns; + } + + @Output() columnsChange:EventEmitter = new EventEmitter(); constructor() { } ngOnInit(): void { + console.log(this.columnDefinitions); this.dataSource.data$.subscribe(newData => { this.latestResult = newData; if (newData) @@ -28,7 +46,7 @@ export class DataGridComponent implements OnInit { getColumn(columnName: string) { - const ret = this.headers.find(t => + const ret = this.columnDefinitions.find(t => { return t.columnName == columnName; }); diff --git a/projects/poweredsoft/ngx-cdk-ui/src/lib/data-grid/directives/DataGridCell.directive.ts b/projects/poweredsoft/ngx-cdk-ui/src/lib/data-grid/directives/data-grid-cell.directive.ts similarity index 100% rename from projects/poweredsoft/ngx-cdk-ui/src/lib/data-grid/directives/DataGridCell.directive.ts rename to projects/poweredsoft/ngx-cdk-ui/src/lib/data-grid/directives/data-grid-cell.directive.ts diff --git a/projects/poweredsoft/ngx-cdk-ui/src/lib/data-grid/directives/DataGridColHeader.directive.ts b/projects/poweredsoft/ngx-cdk-ui/src/lib/data-grid/directives/data-grid-col-header.directive.ts similarity index 100% rename from projects/poweredsoft/ngx-cdk-ui/src/lib/data-grid/directives/DataGridColHeader.directive.ts rename to projects/poweredsoft/ngx-cdk-ui/src/lib/data-grid/directives/data-grid-col-header.directive.ts diff --git a/projects/poweredsoft/ngx-cdk-ui/src/lib/data-grid/directives/DataGridCol.directive.ts b/projects/poweredsoft/ngx-cdk-ui/src/lib/data-grid/directives/data-grid-col.directive.ts similarity index 72% rename from projects/poweredsoft/ngx-cdk-ui/src/lib/data-grid/directives/DataGridCol.directive.ts rename to projects/poweredsoft/ngx-cdk-ui/src/lib/data-grid/directives/data-grid-col.directive.ts index 4a35aff..545a5fb 100644 --- a/projects/poweredsoft/ngx-cdk-ui/src/lib/data-grid/directives/DataGridCol.directive.ts +++ b/projects/poweredsoft/ngx-cdk-ui/src/lib/data-grid/directives/data-grid-col.directive.ts @@ -1,6 +1,6 @@ import { Directive, Input, ContentChild } from '@angular/core'; -import { DataGridColHeaderDirective } from './DataGridColHeader.directive'; -import { DataGridCellDirective } from './DataGridCell.directive'; +import { DataGridColHeaderDirective } from './data-grid-col-header.directive'; +import { DataGridCellDirective } from './data-grid-cell.directive'; @Directive({ selector: '[psDataGridCol]' diff --git a/projects/poweredsoft/ngx-cdk-ui/src/lib/data-grid/directives/data-grid-footer.directive.ts b/projects/poweredsoft/ngx-cdk-ui/src/lib/data-grid/directives/data-grid-footer.directive.ts new file mode 100644 index 0000000..abff278 --- /dev/null +++ b/projects/poweredsoft/ngx-cdk-ui/src/lib/data-grid/directives/data-grid-footer.directive.ts @@ -0,0 +1,10 @@ +import { Directive, TemplateRef } from '@angular/core'; + +@Directive({ + selector: '[psDataGridFooter]' +}) +export class DataGridFooterDirective { + + constructor(public template: TemplateRef) { } + +} diff --git a/projects/poweredsoft/ngx-cdk-ui/src/lib/data-grid/directives/data-grid-header.directive.ts b/projects/poweredsoft/ngx-cdk-ui/src/lib/data-grid/directives/data-grid-header.directive.ts new file mode 100644 index 0000000..6944df1 --- /dev/null +++ b/projects/poweredsoft/ngx-cdk-ui/src/lib/data-grid/directives/data-grid-header.directive.ts @@ -0,0 +1,10 @@ +import { Directive, TemplateRef } from '@angular/core'; + +@Directive({ + selector: '[psDataGridHeader]' +}) +export class DataGridHeaderDirective { + + constructor(public template: TemplateRef) { } + +} diff --git a/projects/poweredsoft/ngx-cdk-ui/src/public-api.ts b/projects/poweredsoft/ngx-cdk-ui/src/public-api.ts index 497e87f..8218be5 100644 --- a/projects/poweredsoft/ngx-cdk-ui/src/public-api.ts +++ b/projects/poweredsoft/ngx-cdk-ui/src/public-api.ts @@ -4,6 +4,8 @@ export * from './lib/data-grid/data-grid.module'; export * from './lib/data-grid/data-grid/data-grid.component'; -export * from './lib/data-grid/directives/DataGridCell.directive'; -export * from './lib/data-grid/directives/DataGridCol.directive'; -export * from './lib/data-grid/directives/DataGridColHeader.directive'; \ No newline at end of file +export * from './lib/data-grid/directives/data-grid-cell.directive'; +export * from './lib/data-grid/directives/data-grid-col.directive'; +export * from './lib/data-grid/directives/data-grid-col-header.directive'; +export * from './lib/data-grid/directives/data-grid-header.directive'; +export * from './lib/data-grid/directives/data-grid-footer.directive'; \ No newline at end of file diff --git a/src/app/data-grid-demo/data-grid-demo-home/data-grid-demo-home.component.html b/src/app/data-grid-demo/data-grid-demo-home/data-grid-demo-home.component.html index 82be427..c63e8a7 100644 --- a/src/app/data-grid-demo/data-grid-demo-home/data-grid-demo-home.component.html +++ b/src/app/data-grid-demo/data-grid-demo-home/data-grid-demo-home.component.html @@ -2,24 +2,36 @@ This is a demo for a grid. - - -
ID
-
{{model.id}}
- - -
Name
-
{{model.name}}
- - -
Address
-
{{model.address}}
- - - -

Actions

- - + + + +

Hey!

+

Welcome to my Grid!

+ + + - - \ No newline at end of file + +
ID
+
{{model.id}}
+ + +
Name
+
{{model.name}}
+ + +
Address
+
{{model.address}}
+ + + + Actions + + + + + + + Footer works! + + \ No newline at end of file diff --git a/src/app/data-grid-demo/data-grid-demo-home/data-grid-demo-home.component.ts b/src/app/data-grid-demo/data-grid-demo-home/data-grid-demo-home.component.ts index c0aaa30..b6307fc 100644 --- a/src/app/data-grid-demo/data-grid-demo-home/data-grid-demo-home.component.ts +++ b/src/app/data-grid-demo/data-grid-demo-home/data-grid-demo-home.component.ts @@ -1,8 +1,6 @@ import { Component, OnInit } from '@angular/core'; -import { DataSource } from '@poweredsoft/data'; +import { DataSource, IDataSource, IQueryExecutionResult, IQueryExecutionGroupResult } from '@poweredsoft/data'; import { IMerchant } from 'src/app/data/services/IMerchant'; -import { GraphQLDataSourceService } from '@poweredsoft/ngx-data-apollo'; -import { of } from 'rxjs'; import { MerchantService } from 'src/app/data/services/merchant.service'; @Component({ @@ -14,13 +12,31 @@ export class DataGridDemoHomeComponent implements OnInit { title = 'cdkDemo'; columns = ['id','name', 'address', 'commands'] - merchantDataSource: DataSource; + merchantDataSource: IDataSource; constructor(private merchantService: MerchantService){ this.merchantDataSource = this.createDataSource(); } - createDataSource(): DataSource { + + + + newMerchant(name: string) { + this.merchantDataSource.executeCommandByName('addMerchant', { + name: name + }).subscribe( + res => { + alert('it worked!'); + this.merchantDataSource.refresh(); + }, + err => { + console.log(err); + alert('failed'); + } + ); + } + + createDataSource(): IDataSource { return this.merchantService.createDataSource(); } @@ -32,7 +48,6 @@ export class DataGridDemoHomeComponent implements OnInit { this.merchantDataSource.data$.subscribe(receivedData => { console.log('new data is coming from the server', receivedData); }); - this.merchantDataSource.refresh(); } diff --git a/src/app/data-grid-demo/data-grid-demo.module.ts b/src/app/data-grid-demo/data-grid-demo.module.ts index 043c20e..c4b3530 100644 --- a/src/app/data-grid-demo/data-grid-demo.module.ts +++ b/src/app/data-grid-demo/data-grid-demo.module.ts @@ -4,6 +4,7 @@ import { CommonModule } from '@angular/common'; import { DataGridDemoRoutingModule } from './data-grid-demo-routing.module'; import { DataGridDemoHomeComponent } from './data-grid-demo-home/data-grid-demo-home.component'; import { DataGridModule } from '@poweredsoft/ngx-cdk-ui'; +import { PaginationModule } from 'ngx-bootstrap/pagination'; @NgModule({ @@ -11,7 +12,8 @@ import { DataGridModule } from '@poweredsoft/ngx-cdk-ui'; imports: [ CommonModule, DataGridDemoRoutingModule, - DataGridModule + DataGridModule, + PaginationModule ] }) export class DataGridDemoModule { } diff --git a/src/app/data/services/IChangeMerchantNameCommand.ts b/src/app/data/services/IChangeMerchantNameCommand.ts index 7e93063..1441524 100644 --- a/src/app/data/services/IChangeMerchantNameCommand.ts +++ b/src/app/data/services/IChangeMerchantNameCommand.ts @@ -2,3 +2,7 @@ export interface IChangeMerchantNameCommand { merchantId: string; newName: string; } +export interface IAddMerchantCommand { + name: string; + address: string; +} diff --git a/src/app/data/services/merchant.service.ts b/src/app/data/services/merchant.service.ts index 71b3ede..d89fcf7 100644 --- a/src/app/data/services/merchant.service.ts +++ b/src/app/data/services/merchant.service.ts @@ -4,7 +4,7 @@ import { IDataSource, DataSource } from '@poweredsoft/data'; import { Apollo } from 'apollo-angular'; import gql from 'graphql-tag'; import { of } from 'rxjs'; -import { IChangeMerchantNameCommand } from './IChangeMerchantNameCommand'; +import { IChangeMerchantNameCommand, IAddMerchantCommand } from './IChangeMerchantNameCommand'; import { IMerchant } from './IMerchant'; @Injectable({ @@ -16,51 +16,78 @@ export class MerchantService { private apollo: Apollo ) {} -// createMerchantDataSource(): IDataSource { -// const builder = this.dataSourceGenericService.createDataSourceOptionsBuilder< -// IMerchant, -// string -// >( -// 'merchants', -// 'GraphQLAdvanceQueryOfMerchantInput', -// 'id, name, address', -// (model) => model.id, -// { -// page: 3, -// pageSize: 10, -// }, -// true -// ); + createDataSource(): IDataSource { + const builder = this.dataSourceGenericService.createDataSourceOptionsBuilder< + IMerchant, + string + >( + 'merchants', + 'GraphQLAdvanceQueryOfMerchantInput', + 'id, name, address', + (model) => model.id, + { + page: 1, + pageSize: 50, + }, + true + ); -// builder.addMutation( -// 'changeMerchantName', //<-- command name -// 'changeMerchantName', //<-- graph ql mutation name + builder.addMutation( + 'changeMerchantName', //<-- command name + 'changeMerchantName', //<-- graph ql mutation name -// // implementation of the command. -// command => { -// return this.apollo.use('command').mutate({ -// mutation: gql` -// mutation executeChangeName($command: changeMerchantNameInput) { -// changeMerchantName(params: $command) -// } -// `, -// variables: { -// command: command, -// }, -// }); -// }, + // implementation of the command. + command => { + return this.apollo.use('command').mutate({ + mutation: gql` + mutation executeChangeName($command: changeMerchantNameInput) { + changeMerchantName(params: $command) + } + `, + variables: { + command: command, + }, + }); + }, -// // viewModel -> transform to the form model for that command -> IChangeMerchantName -// e => of({ -// merchantId: e.model.id, -// newName: e.model.name, -// }) -// ); + // viewModel -> transform to the form model for that command -> IChangeMerchantName + e => of({ + merchantId: e.model.id, + newName: e.model.name, + }) + ); -// const options = builder.create(); -// return new DataSource(options); -// } + builder.addMutation( + 'addMerchant', //<-- command name + 'addMerchant', //<-- graph ql mutation name + + // implementation of the command. + command => { + + return this.apollo.use('command').mutate({ + mutation: gql` + mutation executeAddMerchant($command: AddMerchantCommandInput) { + addMerchant(params: $command) + } + `, + variables: { + command: command, + }, + }); + }, + + // viewModel -> transform to the form model for that command -> IChangeMerchantName + e => of({ + name: '', + address: '' + }) + ); + const options = builder.create(); + return new DataSource(options); + } + + /* createDataSource(): DataSource { const builder = this.dataSourceGenericService.createDataSourceOptionsBuilder( 'merchants', @@ -81,5 +108,5 @@ export class MerchantService { ); return new DataSource(builder.create()); - } + }*/ }