Open-Harbor/ngx-data-ui
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

two-way binding columns & header footer in grid

Browse Source
This commit is contained in:
Yubing325 2020-06-08 20:04:35 -05:00
parent 915ec6f9b6
commit 3d9f70e6c5
16 changed files with 426 additions and 120 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

180
package-lock.json generated
View File

@ -1554,6 +1554,55 @@
"to-fast-properties": "^2.0.0" "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": { "@istanbuljs/schema": {
"version": "0.1.2", "version": "0.1.2",
"resolved": "https://registry.npmjs.org/@istanbuljs/schema/-/schema-0.1.2.tgz", "resolved": "https://registry.npmjs.org/@istanbuljs/schema/-/schema-0.1.2.tgz",
@ -2564,6 +2613,41 @@
"integrity": "sha512-3YDiu347mtVtjpyV3u5kVqQLP242c06zwDOgpeRnybmXlYYsLbtTrUBUm8i8srONt+FWobl5aibnU1030PeeuA==", "integrity": "sha512-3YDiu347mtVtjpyV3u5kVqQLP242c06zwDOgpeRnybmXlYYsLbtTrUBUm8i8srONt+FWobl5aibnU1030PeeuA==",
"dev": true "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": { "axobject-query": {
"version": "2.0.2", "version": "2.0.2",
"resolved": "https://registry.npmjs.org/axobject-query/-/axobject-query-2.0.2.tgz", "resolved": "https://registry.npmjs.org/axobject-query/-/axobject-query-2.0.2.tgz",
@ -7731,6 +7815,26 @@
"integrity": "sha1-HADHQ7QzzQpOgHWPe2SldEDZ/wA=", "integrity": "sha1-HADHQ7QzzQpOgHWPe2SldEDZ/wA=",
"dev": true "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": { "loader-runner": {
"version": "2.4.0", "version": "2.4.0",
"resolved": "https://registry.npmjs.org/loader-runner/-/loader-runner-2.4.0.tgz", "resolved": "https://registry.npmjs.org/loader-runner/-/loader-runner-2.4.0.tgz",
@ -8011,6 +8115,12 @@
"readable-stream": "^2.0.1" "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": { "merge-descriptors": {
"version": "1.0.1", "version": "1.0.1",
"resolved": "https://registry.npmjs.org/merge-descriptors/-/merge-descriptors-1.0.1.tgz", "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": { "nice-try": {
"version": "1.0.5", "version": "1.0.5",
"resolved": "https://registry.npmjs.org/nice-try/-/nice-try-1.0.5.tgz", "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": { "npm-run-path": {
"version": "2.0.2", "version": "2.0.2",
"resolved": "https://registry.npmjs.org/npm-run-path/-/npm-run-path-2.0.2.tgz", "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==", "integrity": "sha512-q0M/9eZHzmr0AulXyPwNfZjtwZ/RBZlbN3K3CErVrk50T2ASYI7Bye0EvekFY3IP1Nt2DHu0re+V2ZHIpMkuWg==",
"dev": true "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": { "pify": {
"version": "4.0.1", "version": "4.0.1",
"resolved": "https://registry.npmjs.org/pify/-/pify-4.0.1.tgz", "resolved": "https://registry.npmjs.org/pify/-/pify-4.0.1.tgz",
@ -11946,6 +12097,12 @@
"integrity": "sha1-2kL0l0DAtC2yypcoVxyxkMmO/qM=", "integrity": "sha1-2kL0l0DAtC2yypcoVxyxkMmO/qM=",
"dev": true "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": { "signal-exit": {
"version": "3.0.3", "version": "3.0.3",
"resolved": "https://registry.npmjs.org/signal-exit/-/signal-exit-3.0.3.tgz", "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": { "string.prototype.trimend": {
"version": "1.0.1", "version": "1.0.1",
"resolved": "https://registry.npmjs.org/string.prototype.trimend/-/string.prototype.trimend-1.0.1.tgz", "resolved": "https://registry.npmjs.org/string.prototype.trimend/-/string.prototype.trimend-1.0.1.tgz",
@ -13708,6 +13875,19 @@
"integrity": "sha1-wGavtYK7HLQSjWDqkjkulNXp2+w=", "integrity": "sha1-wGavtYK7HLQSjWDqkjkulNXp2+w=",
"dev": true "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": { "watchpack": {
"version": "1.7.2", "version": "1.7.2",
"resolved": "https://registry.npmjs.org/watchpack/-/watchpack-1.7.2.tgz", "resolved": "https://registry.npmjs.org/watchpack/-/watchpack-1.7.2.tgz",

24
package.json
View File

@ -7,7 +7,11 @@
"build": "ng build", "build": "ng build",
"test": "ng test", "test": "ng test",
"lint": "ng lint", "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, "private": true,
"dependencies": { "dependencies": {
@ -19,10 +23,6 @@
"@angular/platform-browser": "~9.1.4", "@angular/platform-browser": "~9.1.4",
"@angular/platform-browser-dynamic": "~9.1.4", "@angular/platform-browser-dynamic": "~9.1.4",
"@angular/router": "~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/data": "0.0.26",
"@poweredsoft/ngx-data": "0.0.13", "@poweredsoft/ngx-data": "0.0.13",
"@poweredsoft/ngx-data-apollo": "0.0.8", "@poweredsoft/ngx-data-apollo": "0.0.8",
@ -31,8 +31,13 @@
"apollo-cache-inmemory": "^1.6.0", "apollo-cache-inmemory": "^1.6.0",
"apollo-client": "^2.6.0", "apollo-client": "^2.6.0",
"apollo-link": "^1.2.11", "apollo-link": "^1.2.11",
"bootstrap": "^4.5.0",
"graphql": "^14.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": { "devDependencies": {
"@angular-devkit/build-angular": "~0.901.4", "@angular-devkit/build-angular": "~0.901.4",
@ -40,9 +45,9 @@
"@angular/cli": "~9.1.4", "@angular/cli": "~9.1.4",
"@angular/compiler-cli": "~9.1.4", "@angular/compiler-cli": "~9.1.4",
"@angular/language-service": "~9.1.4", "@angular/language-service": "~9.1.4",
"@types/node": "^12.11.1",
"@types/jasmine": "~3.5.0", "@types/jasmine": "~3.5.0",
"@types/jasminewd2": "~2.0.3", "@types/jasminewd2": "~2.0.3",
"@types/node": "^12.11.1",
"codelyzer": "^5.1.2", "codelyzer": "^5.1.2",
"jasmine-core": "~3.5.0", "jasmine-core": "~3.5.0",
"jasmine-spec-reporter": "~4.2.1", "jasmine-spec-reporter": "~4.2.1",
@ -52,9 +57,12 @@
"karma-jasmine": "~3.0.1", "karma-jasmine": "~3.0.1",
"karma-jasmine-html-reporter": "^1.4.2", "karma-jasmine-html-reporter": "^1.4.2",
"ng-packagr": "^9.0.0", "ng-packagr": "^9.0.0",
"npm-run-all": "^4.1.5",
"protractor": "~5.4.3", "protractor": "~5.4.3",
"rimraf": "^3.0.2",
"ts-node": "~8.3.0", "ts-node": "~8.3.0",
"tslint": "~6.1.0", "tslint": "~6.1.0",
"typescript": "~3.8.3" "typescript": "~3.8.3",
"wait-on": "^5.0.1"
} }
} }

16
projects/poweredsoft/ngx-cdk-ui/src/lib/data-grid/data-grid.module.ts
View File

@ -1,17 +1,23 @@
import { NgModule } from '@angular/core'; import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common'; import { CommonModule } from '@angular/common';
import { DataGridComponent } from './data-grid/data-grid.component'; import { DataGridComponent } from './data-grid/data-grid.component';
import { DataGridColDirective } from './directives/DataGridCol.directive'; import { DataGridColDirective } from './directives/data-grid-col.directive';
import { DataGridColHeaderDirective } from './directives/DataGridColHeader.directive'; import { DataGridColHeaderDirective } from './directives/data-grid-col-header.directive';
import { DataGridCellDirective } from './directives/DataGridCell.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({ @NgModule({
declarations: [DataGridComponent,DataGridColDirective,DataGridColHeaderDirective,DataGridCellDirective], declarations: [DataGridComponent,DataGridColDirective,DataGridColHeaderDirective,DataGridCellDirective, DataGridFooterDirective, DataGridHeaderDirective,
],
imports: [ imports: [
CommonModule CommonModule
], ],
exports: [DataGridComponent] exports: [DataGridComponent,DataGridColDirective,DataGridColHeaderDirective,DataGridCellDirective,DataGridFooterDirective, DataGridHeaderDirective]
}) })
export class DataGridModule { } export class DataGridModule { }

68
projects/poweredsoft/ngx-cdk-ui/src/lib/data-grid/data-grid/data-grid.component.html
View File

@ -1,30 +1,42 @@
<table> <table [ngClass]="tableClasses">
<thead> <thead>
<tr> <tr>
<th *ngFor="let column of columns"> <th *ngFor="let header of gridHeaders" [attr.colspan]="columns.length">
<p *ngIf="hasHeaderTemplate(column)"> <ng-container [ngTemplateOutlet]="header.template"></ng-container>
<ng-container </th>
[ngTemplateOutlet]="getColumnHeaderTemplate(column)" </tr>
></ng-container> <tr>
</p> <th *ngFor="let column of columns">
</th> <ng-container *ngIf="hasHeaderTemplate(column)">
</tr> <ng-container
</thead> [ngTemplateOutlet]="getColumnHeaderTemplate(column)"
></ng-container>
</ng-container>
</th>
</tr>
</thead>
<tbody *ngIf="latestResult"> <tbody *ngIf="latestResult">
<tr *ngFor="let rowModel of latestResult.data; let i = index;"> <tr *ngFor="let rowModel of latestResult.data; let i = index">
<td *ngFor="let column of columns"> <td *ngFor="let column of columns">
<ng-container *ngIf="hasCellTemplate(column)"> <ng-container *ngIf="hasCellTemplate(column)">
<ng-container <ng-container
[ngTemplateOutlet]="getColumnCellTemplate(column)" [ngTemplateOutlet]="getColumnCellTemplate(column)"
[ngTemplateOutletContext]="{ [ngTemplateOutletContext]="{
$implicit: rowModel, $implicit: rowModel,
column: column, column: column,
rowIndex: i rowIndex: i
}" }"
></ng-container> ></ng-container>
</ng-container> </ng-container>
</td> </td>
</tr> </tr>
</tbody> </tbody>
<tfoot>
<tr>
<td *ngFor="let footer of gridFooters" [attr.colspan]="columns.length">
<ng-container [ngTemplateOutlet]="footer.template"></ng-container>
</td>
</tr>
</tfoot>
</table> </table>

28
projects/poweredsoft/ngx-cdk-ui/src/lib/data-grid/data-grid/data-grid.component.ts
View File

@ -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 { 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({ @Component({
selector: 'ps-data-grid', selector: 'ps-data-grid',
@ -12,13 +14,29 @@ export class DataGridComponent implements OnInit {
latestResult: IQueryExecutionResult<any> & IQueryExecutionGroupResult<any>; latestResult: IQueryExecutionResult<any> & IQueryExecutionGroupResult<any>;
pages: 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() 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() { } constructor() { }
ngOnInit(): void { ngOnInit(): void {
console.log(this.columnDefinitions);
this.dataSource.data$.subscribe(newData => { this.dataSource.data$.subscribe(newData => {
this.latestResult = newData; this.latestResult = newData;
if (newData) if (newData)
@ -28,7 +46,7 @@ export class DataGridComponent implements OnInit {
getColumn(columnName: string) { getColumn(columnName: string) {
const ret = this.headers.find(t => const ret = this.columnDefinitions.find(t =>
{ {
return t.columnName == columnName; return t.columnName == columnName;
}); });

0
projects/poweredsoft/ngx-cdk-ui/src/lib/data-grid/directives/DataGridCell.directive.ts → projects/poweredsoft/ngx-cdk-ui/src/lib/data-grid/directives/data-grid-cell.directive.ts
View File

0
projects/poweredsoft/ngx-cdk-ui/src/lib/data-grid/directives/DataGridColHeader.directive.ts → projects/poweredsoft/ngx-cdk-ui/src/lib/data-grid/directives/data-grid-col-header.directive.ts
View File

4
projects/poweredsoft/ngx-cdk-ui/src/lib/data-grid/directives/DataGridCol.directive.ts → projects/poweredsoft/ngx-cdk-ui/src/lib/data-grid/directives/data-grid-col.directive.ts
View File

@ -1,6 +1,6 @@
import { Directive, Input, ContentChild } from '@angular/core'; import { Directive, Input, ContentChild } from '@angular/core';
import { DataGridColHeaderDirective } from './DataGridColHeader.directive'; import { DataGridColHeaderDirective } from './data-grid-col-header.directive';
import { DataGridCellDirective } from './DataGridCell.directive'; import { DataGridCellDirective } from './data-grid-cell.directive';
@Directive({ @Directive({
selector: '[psDataGridCol]' selector: '[psDataGridCol]'

10
projects/poweredsoft/ngx-cdk-ui/src/lib/data-grid/directives/data-grid-footer.directive.ts Normal file
View File

@ -0,0 +1,10 @@
import { Directive, TemplateRef } from '@angular/core';
@Directive({
selector: '[psDataGridFooter]'
})
export class DataGridFooterDirective {
constructor(public template: TemplateRef<any>) { }
}

10
projects/poweredsoft/ngx-cdk-ui/src/lib/data-grid/directives/data-grid-header.directive.ts Normal file
View File

@ -0,0 +1,10 @@
import { Directive, TemplateRef } from '@angular/core';
@Directive({
selector: '[psDataGridHeader]'
})
export class DataGridHeaderDirective {
constructor(public template: TemplateRef<any>) { }
}

8
projects/poweredsoft/ngx-cdk-ui/src/public-api.ts
View File

@ -4,6 +4,8 @@
export * from './lib/data-grid/data-grid.module'; export * from './lib/data-grid/data-grid.module';
export * from './lib/data-grid/data-grid/data-grid.component'; export * from './lib/data-grid/data-grid/data-grid.component';
export * from './lib/data-grid/directives/DataGridCell.directive'; export * from './lib/data-grid/directives/data-grid-cell.directive';
export * from './lib/data-grid/directives/DataGridCol.directive'; export * from './lib/data-grid/directives/data-grid-col.directive';
export * from './lib/data-grid/directives/DataGridColHeader.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';

52
src/app/data-grid-demo/data-grid-demo-home/data-grid-demo-home.component.html
View File

@ -2,24 +2,36 @@
This is a demo for a grid. This is a demo for a grid.
</h1> </h1>
<ps-data-grid [dataSource]="merchantDataSource" [columns]="columns"> <ps-data-grid [dataSource]="merchantDataSource" [(columns)]="columns" tableClasses="table table-sm table-bordered" >
<ng-container psDataGridCol="id">
<div *psDataGridColHeader>ID</div> <ng-container *psDataGridHeader>
<div *psDataGridCell="let model">{{model.id}}</div> <h1>Hey! </h1>
</ng-container> <p>Welcome to my Grid!</p>
<ng-container psDataGridCol="name"> <label>New merchant name</label>
<div *psDataGridColHeader>Name</div> <input class="form-control" #newMerchantName/>
<div *psDataGridCell="let model">{{model.name}}</div> <button class="btn btn-primary btn-sm" (click)="newMerchant(newMerchantName.value)">Add</button>
</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>
</ng-container> </ng-container>
</ng-container> <ng-container psDataGridCol="id">
</ps-data-grid> <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>

27
src/app/data-grid-demo/data-grid-demo-home/data-grid-demo-home.component.ts
View File

@ -1,8 +1,6 @@
import { Component, OnInit } from '@angular/core'; 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 { 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'; import { MerchantService } from 'src/app/data/services/merchant.service';
@Component({ @Component({
@ -14,13 +12,31 @@ export class DataGridDemoHomeComponent implements OnInit {
title = 'cdkDemo'; title = 'cdkDemo';
columns = ['id','name', 'address', 'commands'] columns = ['id','name', 'address', 'commands']
merchantDataSource: DataSource<IMerchant>; merchantDataSource: IDataSource<IMerchant>;
constructor(private merchantService: MerchantService){ constructor(private merchantService: MerchantService){
this.merchantDataSource = this.createDataSource(); 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(); return this.merchantService.createDataSource();
} }
@ -32,7 +48,6 @@ export class DataGridDemoHomeComponent implements OnInit {
this.merchantDataSource.data$.subscribe(receivedData => { this.merchantDataSource.data$.subscribe(receivedData => {
console.log('new data is coming from the server', receivedData); console.log('new data is coming from the server', receivedData);
}); });
this.merchantDataSource.refresh(); this.merchantDataSource.refresh();
} }

4
src/app/data-grid-demo/data-grid-demo.module.ts
View File

@ -4,6 +4,7 @@ import { CommonModule } from '@angular/common';
import { DataGridDemoRoutingModule } from './data-grid-demo-routing.module'; import { DataGridDemoRoutingModule } from './data-grid-demo-routing.module';
import { DataGridDemoHomeComponent } from './data-grid-demo-home/data-grid-demo-home.component'; import { DataGridDemoHomeComponent } from './data-grid-demo-home/data-grid-demo-home.component';
import { DataGridModule } from '@poweredsoft/ngx-cdk-ui'; import { DataGridModule } from '@poweredsoft/ngx-cdk-ui';
import { PaginationModule } from 'ngx-bootstrap/pagination';
@NgModule({ @NgModule({
@ -11,7 +12,8 @@ import { DataGridModule } from '@poweredsoft/ngx-cdk-ui';
imports: [ imports: [
CommonModule, CommonModule,
DataGridDemoRoutingModule, DataGridDemoRoutingModule,
DataGridModule DataGridModule,
PaginationModule
] ]
}) })
export class DataGridDemoModule { } export class DataGridDemoModule { }

4
src/app/data/services/IChangeMerchantNameCommand.ts
View File

@ -2,3 +2,7 @@ export interface IChangeMerchantNameCommand {
merchantId: string; merchantId: string;
newName: string; newName: string;
} }
export interface IAddMerchantCommand {
name: string;
address: string;
}

111
src/app/data/services/merchant.service.ts
View File

@ -4,7 +4,7 @@ import { IDataSource, DataSource } from '@poweredsoft/data';
import { Apollo } from 'apollo-angular'; import { Apollo } from 'apollo-angular';
import gql from 'graphql-tag'; import gql from 'graphql-tag';
import { of } from 'rxjs'; import { of } from 'rxjs';
import { IChangeMerchantNameCommand } from './IChangeMerchantNameCommand'; import { IChangeMerchantNameCommand, IAddMerchantCommand } from './IChangeMerchantNameCommand';
import { IMerchant } from './IMerchant'; import { IMerchant } from './IMerchant';
@Injectable({ @Injectable({
@ -16,51 +16,78 @@ export class MerchantService {
private apollo: Apollo private apollo: Apollo
) {} ) {}
// createMerchantDataSource(): IDataSource<IMerchant> { createDataSource(): IDataSource<IMerchant> {
// const builder = this.dataSourceGenericService.createDataSourceOptionsBuilder< const builder = this.dataSourceGenericService.createDataSourceOptionsBuilder<
// IMerchant, IMerchant,
// string string
// >( >(
// 'merchants', 'merchants',
// 'GraphQLAdvanceQueryOfMerchantInput', 'GraphQLAdvanceQueryOfMerchantInput',
// 'id, name, address', 'id, name, address',
// (model) => model.id, (model) => model.id,
// { {
// page: 3, page: 1,
// pageSize: 10, pageSize: 50,
// }, },
// true true
// ); );
// builder.addMutation<IChangeMerchantNameCommand, string>( builder.addMutation<IChangeMerchantNameCommand, string>(
// 'changeMerchantName', //<-- command name 'changeMerchantName', //<-- command name
// 'changeMerchantName', //<-- graph ql mutation name 'changeMerchantName', //<-- graph ql mutation name
// // implementation of the command. // implementation of the command.
// command => { command => {
// return this.apollo.use('command').mutate<string>({ return this.apollo.use('command').mutate<string>({
// mutation: gql` mutation: gql`
// mutation executeChangeName($command: changeMerchantNameInput) { mutation executeChangeName($command: changeMerchantNameInput) {
// changeMerchantName(params: $command) changeMerchantName(params: $command)
// } }
// `, `,
// variables: { variables: {
// command: command, command: command,
// }, },
// }); });
// }, },
// // viewModel -> transform to the form model for that command -> IChangeMerchantName // viewModel -> transform to the form model for that command -> IChangeMerchantName
// e => of(<IChangeMerchantNameCommand>{ e => of(<IChangeMerchantNameCommand>{
// merchantId: e.model.id, merchantId: e.model.id,
// newName: e.model.name, newName: e.model.name,
// }) })
// ); );
// const options = builder.create(); builder.addMutation<IAddMerchantCommand, string>(
// return new DataSource<IMerchant>(options); '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> { createDataSource(): DataSource<IMerchant> {
const builder = this.dataSourceGenericService.createDataSourceOptionsBuilder<IMerchant, string>( const builder = this.dataSourceGenericService.createDataSourceOptionsBuilder<IMerchant, string>(
'merchants', 'merchants',
@ -81,5 +108,5 @@ export class MerchantService {
); );
return new DataSource<IMerchant>(builder.create()); return new DataSource<IMerchant>(builder.create());
} }*/
} }