two-way binding columns & header footer in grid
This commit is contained in:
Yubing325
parent
915ec6f9b6
commit
3d9f70e6c5
180
package-lock.json
generated
180
package-lock.json
generated
@ -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",
|
||||
|
||||
24
package.json
24
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"
|
||||
}
|
||||
}
|
||||
|
||||
@ -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 { }
|
||||
|
||||
@ -1,30 +1,42 @@
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
<th *ngFor="let column of columns">
|
||||
<p *ngIf="hasHeaderTemplate(column)">
|
||||
<ng-container
|
||||
[ngTemplateOutlet]="getColumnHeaderTemplate(column)"
|
||||
></ng-container>
|
||||
</p>
|
||||
</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<table [ngClass]="tableClasses">
|
||||
<thead>
|
||||
<tr>
|
||||
<th *ngFor="let header of gridHeaders" [attr.colspan]="columns.length">
|
||||
<ng-container [ngTemplateOutlet]="header.template"></ng-container>
|
||||
</th>
|
||||
</tr>
|
||||
<tr>
|
||||
<th *ngFor="let column of columns">
|
||||
<ng-container *ngIf="hasHeaderTemplate(column)">
|
||||
<ng-container
|
||||
[ngTemplateOutlet]="getColumnHeaderTemplate(column)"
|
||||
></ng-container>
|
||||
</ng-container>
|
||||
</th>
|
||||
</tr>
|
||||
</thead>
|
||||
|
||||
<tbody *ngIf="latestResult">
|
||||
<tr *ngFor="let rowModel of latestResult.data; let i = index;">
|
||||
<td *ngFor="let column of columns">
|
||||
<ng-container *ngIf="hasCellTemplate(column)">
|
||||
<ng-container
|
||||
[ngTemplateOutlet]="getColumnCellTemplate(column)"
|
||||
[ngTemplateOutletContext]="{
|
||||
$implicit: rowModel,
|
||||
column: column,
|
||||
rowIndex: i
|
||||
}"
|
||||
></ng-container>
|
||||
</ng-container>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
<tbody *ngIf="latestResult">
|
||||
<tr *ngFor="let rowModel of latestResult.data; let i = index">
|
||||
<td *ngFor="let column of columns">
|
||||
<ng-container *ngIf="hasCellTemplate(column)">
|
||||
<ng-container
|
||||
[ngTemplateOutlet]="getColumnCellTemplate(column)"
|
||||
[ngTemplateOutletContext]="{
|
||||
$implicit: rowModel,
|
||||
column: column,
|
||||
rowIndex: i
|
||||
}"
|
||||
></ng-container>
|
||||
</ng-container>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
<tfoot>
|
||||
<tr>
|
||||
<td *ngFor="let footer of gridFooters" [attr.colspan]="columns.length">
|
||||
<ng-container [ngTemplateOutlet]="footer.template"></ng-container>
|
||||
</td>
|
||||
</tr>
|
||||
</tfoot>
|
||||
</table>
|
||||
|
||||
@ -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<any> & IQueryExecutionGroupResult<any>;
|
||||
pages: any[];
|
||||
|
||||
@ContentChildren(DataGridColDirective) headers: QueryList<DataGridColDirective>;
|
||||
@ContentChildren(DataGridColDirective) columnDefinitions: QueryList<DataGridColDirective>;
|
||||
@ContentChildren(DataGridHeaderDirective) gridHeaders: QueryList<DataGridHeaderDirective>;
|
||||
@ContentChildren(DataGridFooterDirective) gridFooters: QueryList<DataGridFooterDirective>;
|
||||
|
||||
|
||||
@Input() columns: string[];
|
||||
@Input() dataSource: IDataSource<any>;
|
||||
@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<string []> = new EventEmitter<string []>();
|
||||
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;
|
||||
});
|
||||
|
||||
@ -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]'
|
||||
@ -0,0 +1,10 @@
|
||||
import { Directive, TemplateRef } from '@angular/core';
|
||||
|
||||
@Directive({
|
||||
selector: '[psDataGridFooter]'
|
||||
})
|
||||
export class DataGridFooterDirective {
|
||||
|
||||
constructor(public template: TemplateRef<any>) { }
|
||||
|
||||
}
|
||||
@ -0,0 +1,10 @@
|
||||
import { Directive, TemplateRef } from '@angular/core';
|
||||
|
||||
@Directive({
|
||||
selector: '[psDataGridHeader]'
|
||||
})
|
||||
export class DataGridHeaderDirective {
|
||||
|
||||
constructor(public template: TemplateRef<any>) { }
|
||||
|
||||
}
|
||||
@ -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';
|
||||
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';
|
||||
@ -2,24 +2,36 @@
|
||||
This is a demo for a grid.
|
||||
</h1>
|
||||
|
||||
<ps-data-grid [dataSource]="merchantDataSource" [columns]="columns">
|
||||
<ng-container psDataGridCol="id">
|
||||
<div *psDataGridColHeader>ID</div>
|
||||
<div *psDataGridCell="let model">{{model.id}}</div>
|
||||
</ng-container>
|
||||
<ng-container psDataGridCol="name">
|
||||
<div *psDataGridColHeader>Name</div>
|
||||
<div *psDataGridCell="let model">{{model.name}}</div>
|
||||
</ng-container>
|
||||
<ng-container psDataGridCol="address">
|
||||
<div *psDataGridColHeader>Address</div>
|
||||
<div *psDataGridCell="let model">{{model.address}}</div>
|
||||
</ng-container>
|
||||
|
||||
<ng-container psDataGridCol="commands">
|
||||
<p *psDataGridColHeader>Actions</p>
|
||||
<ng-container *psDataGridCell="let model">
|
||||
<button class="btn btn-primary mr-2">{{model.name}}</button>
|
||||
<ps-data-grid [dataSource]="merchantDataSource" [(columns)]="columns" tableClasses="table table-sm table-bordered" >
|
||||
|
||||
<ng-container *psDataGridHeader>
|
||||
<h1>Hey! </h1>
|
||||
<p>Welcome to my Grid!</p>
|
||||
<label>New merchant name</label>
|
||||
<input class="form-control" #newMerchantName/>
|
||||
<button class="btn btn-primary btn-sm" (click)="newMerchant(newMerchantName.value)">Add</button>
|
||||
</ng-container>
|
||||
</ng-container>
|
||||
</ps-data-grid>
|
||||
<ng-container psDataGridCol="id">
|
||||
<div *psDataGridColHeader>ID</div>
|
||||
<div *psDataGridCell="let model">{{model.id}}</div>
|
||||
</ng-container>
|
||||
<ng-container psDataGridCol="name">
|
||||
<div *psDataGridColHeader>Name</div>
|
||||
<div *psDataGridCell="let model">{{model.name}}</div>
|
||||
</ng-container>
|
||||
<ng-container psDataGridCol="address">
|
||||
<div *psDataGridColHeader>Address</div>
|
||||
<div *psDataGridCell="let model">{{model.address}}</div>
|
||||
</ng-container>
|
||||
|
||||
<ng-container psDataGridCol="commands">
|
||||
<ng-container *psDataGridColHeader>Actions</ng-container>
|
||||
<ng-container *psDataGridCell="let model">
|
||||
<button class="btn btn-primary mr-2">{{model.name}}</button>
|
||||
</ng-container>
|
||||
</ng-container>
|
||||
<ng-container *psDataGridFooter>
|
||||
|
||||
<strong>Footer works!</strong>
|
||||
</ng-container>
|
||||
</ps-data-grid>
|
||||
@ -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<IMerchant>;
|
||||
merchantDataSource: IDataSource<IMerchant>;
|
||||
constructor(private merchantService: MerchantService){
|
||||
this.merchantDataSource = this.createDataSource();
|
||||
|
||||
}
|
||||
|
||||
createDataSource(): DataSource<IMerchant> {
|
||||
|
||||
|
||||
|
||||
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<IMerchant> {
|
||||
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();
|
||||
}
|
||||
|
||||
|
||||
@ -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 { }
|
||||
|
||||
@ -2,3 +2,7 @@ export interface IChangeMerchantNameCommand {
|
||||
merchantId: string;
|
||||
newName: string;
|
||||
}
|
||||
export interface IAddMerchantCommand {
|
||||
name: string;
|
||||
address: string;
|
||||
}
|
||||
|
||||
@ -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<IMerchant> {
|
||||
// const builder = this.dataSourceGenericService.createDataSourceOptionsBuilder<
|
||||
// IMerchant,
|
||||
// string
|
||||
// >(
|
||||
// 'merchants',
|
||||
// 'GraphQLAdvanceQueryOfMerchantInput',
|
||||
// 'id, name, address',
|
||||
// (model) => model.id,
|
||||
// {
|
||||
// page: 3,
|
||||
// pageSize: 10,
|
||||
// },
|
||||
// true
|
||||
// );
|
||||
createDataSource(): IDataSource<IMerchant> {
|
||||
const builder = this.dataSourceGenericService.createDataSourceOptionsBuilder<
|
||||
IMerchant,
|
||||
string
|
||||
>(
|
||||
'merchants',
|
||||
'GraphQLAdvanceQueryOfMerchantInput',
|
||||
'id, name, address',
|
||||
(model) => model.id,
|
||||
{
|
||||
page: 1,
|
||||
pageSize: 50,
|
||||
},
|
||||
true
|
||||
);
|
||||
|
||||
// builder.addMutation<IChangeMerchantNameCommand, string>(
|
||||
// 'changeMerchantName', //<-- command name
|
||||
// 'changeMerchantName', //<-- graph ql mutation name
|
||||
builder.addMutation<IChangeMerchantNameCommand, string>(
|
||||
'changeMerchantName', //<-- command name
|
||||
'changeMerchantName', //<-- graph ql mutation name
|
||||
|
||||
// // implementation of the command.
|
||||
// command => {
|
||||
// return this.apollo.use('command').mutate<string>({
|
||||
// mutation: gql`
|
||||
// mutation executeChangeName($command: changeMerchantNameInput) {
|
||||
// changeMerchantName(params: $command)
|
||||
// }
|
||||
// `,
|
||||
// variables: {
|
||||
// command: command,
|
||||
// },
|
||||
// });
|
||||
// },
|
||||
// implementation of the command.
|
||||
command => {
|
||||
return this.apollo.use('command').mutate<string>({
|
||||
mutation: gql`
|
||||
mutation executeChangeName($command: changeMerchantNameInput) {
|
||||
changeMerchantName(params: $command)
|
||||
}
|
||||
`,
|
||||
variables: {
|
||||
command: command,
|
||||
},
|
||||
});
|
||||
},
|
||||
|
||||
// // viewModel -> transform to the form model for that command -> IChangeMerchantName
|
||||
// e => of(<IChangeMerchantNameCommand>{
|
||||
// merchantId: e.model.id,
|
||||
// newName: e.model.name,
|
||||
// })
|
||||
// );
|
||||
// viewModel -> transform to the form model for that command -> IChangeMerchantName
|
||||
e => of(<IChangeMerchantNameCommand>{
|
||||
merchantId: e.model.id,
|
||||
newName: e.model.name,
|
||||
})
|
||||
);
|
||||
|
||||
// const options = builder.create();
|
||||
// return new DataSource<IMerchant>(options);
|
||||
// }
|
||||
builder.addMutation<IAddMerchantCommand, string>(
|
||||
'addMerchant', //<-- command name
|
||||
'addMerchant', //<-- graph ql mutation name
|
||||
|
||||
// implementation of the command.
|
||||
command => {
|
||||
|
||||
return this.apollo.use('command').mutate<string>({
|
||||
mutation: gql`
|
||||
mutation executeAddMerchant($command: AddMerchantCommandInput) {
|
||||
addMerchant(params: $command)
|
||||
}
|
||||
`,
|
||||
variables: {
|
||||
command: command,
|
||||
},
|
||||
});
|
||||
},
|
||||
|
||||
// viewModel -> transform to the form model for that command -> IChangeMerchantName
|
||||
e => of(<IAddMerchantCommand>{
|
||||
name: '',
|
||||
address: ''
|
||||
})
|
||||
);
|
||||
|
||||
const options = builder.create();
|
||||
return new DataSource<IMerchant>(options);
|
||||
}
|
||||
|
||||
/*
|
||||
createDataSource(): DataSource<IMerchant> {
|
||||
const builder = this.dataSourceGenericService.createDataSourceOptionsBuilder<IMerchant, string>(
|
||||
'merchants',
|
||||
@ -81,5 +108,5 @@ export class MerchantService {
|
||||
);
|
||||
|
||||
return new DataSource<IMerchant>(builder.create());
|
||||
}
|
||||
}*/
|
||||
}
|
||||
|
||||
Loading…
Reference in New Issue
Block a user