From e1180ac9a9b58418f8931833d74fd0becd30df32 Mon Sep 17 00:00:00 2001
From: Yubing325 <35515298+Yubing325@users.noreply.github.com>
Date: Fri, 5 Jun 2020 16:06:01 -0500
Subject: [PATCH 1/3] first test done!
---
.../src/lib/data-grid/data-grid.module.ts | 7 +-
.../data-grid/data-grid.component.html | 37 +++++++-
.../data-grid/data-grid.component.ts | 51 ++++++++++-
.../directives/DataGridCell.directive.ts | 10 +++
.../directives/DataGridCol.directive.ts | 16 ++++
.../directives/DataGridColHeader.directive.ts | 10 +++
.../poweredsoft/ngx-cdk-ui/src/public-api.ts | 5 +-
.../data-grid-demo-home.component.html | 22 ++++-
.../data-grid-demo-home.component.ts | 33 ++++++-
src/app/data/services/merchant.service.ts | 90 ++++++++++++-------
10 files changed, 237 insertions(+), 44 deletions(-)
create mode 100644 projects/poweredsoft/ngx-cdk-ui/src/lib/data-grid/directives/DataGridCell.directive.ts
create mode 100644 projects/poweredsoft/ngx-cdk-ui/src/lib/data-grid/directives/DataGridCol.directive.ts
create mode 100644 projects/poweredsoft/ngx-cdk-ui/src/lib/data-grid/directives/DataGridColHeader.directive.ts
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 718c82f..b8d8cc1 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,14 +1,17 @@
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';
@NgModule({
- declarations: [DataGridComponent],
+ declarations: [DataGridComponent,DataGridColDirective,DataGridColHeaderDirective,DataGridCellDirective],
imports: [
CommonModule
],
- exports: [DataGridComponent]
+ exports: [DataGridComponent,DataGridColDirective,DataGridColHeaderDirective,DataGridCellDirective]
})
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 1b479e7..df30d05 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,5 +1,36 @@
+
some content is showing up here!
+
-
- some header |
-
+
+
+
+
+
+
+ |
+
+
+
+
+
+
+
+
+
+ |
+
+
+
+
+
+
\ No newline at end of file
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 bacfb5a..6ae3149 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,4 +1,6 @@
-import { Component, OnInit } from '@angular/core';
+import { Component, OnInit, ContentChildren, QueryList, Input } from '@angular/core';
+import { IQueryExecutionResult, IQueryExecutionGroupResult, IDataSource } from '@poweredsoft/data';
+import { DataGridColDirective } from '../directives/DataGridCol.directive';
@Component({
selector: 'ps-data-grid',
@@ -7,9 +9,56 @@ import { Component, OnInit } from '@angular/core';
})
export class DataGridComponent implements OnInit {
+ latestResult: IQueryExecutionResult & IQueryExecutionGroupResult;
+ pages: any[];
+
+ @ContentChildren(DataGridColDirective) headers: QueryList;
+
+ @Input() columns: string[];
+ @Input() dataSource: IDataSource;
constructor() { }
ngOnInit(): void {
+ this.dataSource.data$.subscribe(newData => {
+ this.latestResult = newData;
+ if (newData)
+ this.pages = new Array(newData.numberOfPages);
+ });
}
+ getColumn(columnName: string) {
+
+ const ret = this.headers.find(t =>
+ {
+ return t.columnName == columnName;
+ });
+
+ return ret;
+ }
+
+ getColumnHeaderTemplate(columnName: string) {
+ const ret = this.getColumn(columnName);
+ if (ret && ret.headerTemplate)
+ return ret.headerTemplate.template;
+
+ return null;
+ }
+
+ getColumnCellTemplate(columnName: string) {
+ const ret = this.getColumn(columnName);
+ if (ret && ret.cellTemplate)
+ return ret.cellTemplate.template;
+
+ return null;
+ }
+
+ hasHeaderTemplate(columnName: string) {
+ return this.getColumnHeaderTemplate(columnName) ? true :false;
+ }
+
+ hasCellTemplate(columnName: string) {
+ return this.getColumnCellTemplate(columnName) ? true :false;
+ }
+
+
}
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/DataGridCell.directive.ts
new file mode 100644
index 0000000..cd57380
--- /dev/null
+++ b/projects/poweredsoft/ngx-cdk-ui/src/lib/data-grid/directives/DataGridCell.directive.ts
@@ -0,0 +1,10 @@
+import { Directive, TemplateRef } from '@angular/core';
+
+@Directive({
+ selector: '[psDataGridCell]'
+})
+export class DataGridCellDirective {
+
+ constructor(public template: TemplateRef) { }
+
+}
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/DataGridCol.directive.ts
new file mode 100644
index 0000000..4a35aff
--- /dev/null
+++ b/projects/poweredsoft/ngx-cdk-ui/src/lib/data-grid/directives/DataGridCol.directive.ts
@@ -0,0 +1,16 @@
+import { Directive, Input, ContentChild } from '@angular/core';
+import { DataGridColHeaderDirective } from './DataGridColHeader.directive';
+import { DataGridCellDirective } from './DataGridCell.directive';
+
+@Directive({
+ selector: '[psDataGridCol]'
+})
+export class DataGridColDirective {
+
+ @Input('psDataGridCol') columnName:string;
+ @ContentChild(DataGridColHeaderDirective) headerTemplate:DataGridColHeaderDirective;
+ @ContentChild(DataGridCellDirective) cellTemplate:DataGridCellDirective;
+
+ constructor() { }
+
+}
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/DataGridColHeader.directive.ts
new file mode 100644
index 0000000..f78c34f
--- /dev/null
+++ b/projects/poweredsoft/ngx-cdk-ui/src/lib/data-grid/directives/DataGridColHeader.directive.ts
@@ -0,0 +1,10 @@
+import { Directive, TemplateRef } from '@angular/core';
+
+@Directive({
+ selector: '[psDataGridColHeader]'
+})
+export class DataGridColHeaderDirective {
+
+ 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 b671c28..497e87f 100644
--- a/projects/poweredsoft/ngx-cdk-ui/src/public-api.ts
+++ b/projects/poweredsoft/ngx-cdk-ui/src/public-api.ts
@@ -3,4 +3,7 @@
*/
export * from './lib/data-grid/data-grid.module';
-export * from './lib/data-grid/data-grid/data-grid.component';
\ No newline at end of file
+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
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 7d51f4f..82be427 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,4 +2,24 @@
This is a demo for a grid.
-
\ No newline at end of file
+
+
+ ID
+ {{model.id}}
+
+
+ Name
+ {{model.name}}
+
+
+ Address
+ {{model.address}}
+
+
+
+ Actions
+
+
+
+
+
\ 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 7b0e0c2..c0aaa30 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,4 +1,9 @@
import { Component, OnInit } from '@angular/core';
+import { DataSource } 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({
selector: 'ps-data-grid-demo-home',
@@ -7,9 +12,33 @@ import { Component, OnInit } from '@angular/core';
})
export class DataGridDemoHomeComponent implements OnInit {
- constructor() { }
+ title = 'cdkDemo';
+ columns = ['id','name', 'address', 'commands']
+ merchantDataSource: DataSource;
+ constructor(private merchantService: MerchantService){
+ this.merchantDataSource = this.createDataSource();
- ngOnInit(): void {
}
+ createDataSource(): DataSource {
+ return this.merchantService.createDataSource();
+ }
+
+ ngOnInit() {
+ this.merchantDataSource.loading$.subscribe(isLoading => {
+ console.log('merchant data source event loading', isLoading);
+ });
+
+ this.merchantDataSource.data$.subscribe(receivedData => {
+ console.log('new data is coming from the server', receivedData);
+ });
+
+ this.merchantDataSource.refresh();
+ }
+
+
+
+
+
+
}
diff --git a/src/app/data/services/merchant.service.ts b/src/app/data/services/merchant.service.ts
index 0f8234f..71b3ede 100644
--- a/src/app/data/services/merchant.service.ts
+++ b/src/app/data/services/merchant.service.ts
@@ -2,7 +2,7 @@ import { Injectable } from '@angular/core';
import { GraphQLDataSourceService } from '@poweredsoft/ngx-data-apollo';
import { IDataSource, DataSource } from '@poweredsoft/data';
import { Apollo } from 'apollo-angular';
-import { gql } from 'graphql-tag';
+import gql from 'graphql-tag';
import { of } from 'rxjs';
import { IChangeMerchantNameCommand } from './IChangeMerchantNameCommand';
import { IMerchant } from './IMerchant';
@@ -16,11 +16,53 @@ export class MerchantService {
private apollo: Apollo
) {}
- createMerchantDataSource(): IDataSource {
- const builder = this.dataSourceGenericService.createDataSourceOptionsBuilder<
- IMerchant,
- string
- >(
+// createMerchantDataSource(): IDataSource {
+// const builder = this.dataSourceGenericService.createDataSourceOptionsBuilder<
+// IMerchant,
+// string
+// >(
+// 'merchants',
+// 'GraphQLAdvanceQueryOfMerchantInput',
+// 'id, name, address',
+// (model) => model.id,
+// {
+// page: 3,
+// pageSize: 10,
+// },
+// true
+// );
+
+// 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,
+// },
+// });
+// },
+
+// // 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);
+// }
+
+ createDataSource(): DataSource {
+ const builder = this.dataSourceGenericService.createDataSourceOptionsBuilder(
'merchants',
'GraphQLAdvanceQueryOfMerchantInput',
'id, name, address',
@@ -28,36 +70,16 @@ export class MerchantService {
{
page: 1,
pageSize: 4,
- },
+ sorts: [
+ {
+ path: 'name',
+ ascending: true
+ }
+ ]
+ },
true
);
- 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,
- },
- });
- },
-
- // 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);
+ return new DataSource(builder.create());
}
}
From 915ec6f9b6678c456ad58f84f1615ba8d6e2fb78 Mon Sep 17 00:00:00 2001
From: Yubing325 <35515298+Yubing325@users.noreply.github.com>
Date: Fri, 5 Jun 2020 16:18:19 -0500
Subject: [PATCH 2/3] clean codes from lib
---
.../ngx-cdk-ui/src/lib/data-grid/data-grid.module.ts | 2 +-
.../src/lib/data-grid/data-grid/data-grid.component.html | 6 ------
2 files changed, 1 insertion(+), 7 deletions(-)
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 b8d8cc1..17db762 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
@@ -12,6 +12,6 @@ import { DataGridCellDirective } from './directives/DataGridCell.directive';
imports: [
CommonModule
],
- exports: [DataGridComponent,DataGridColDirective,DataGridColHeaderDirective,DataGridCellDirective]
+ exports: [DataGridComponent]
})
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 df30d05..2e1f60c 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,5 +1,3 @@
-some content is showing up here!
-
-
-
-
-
\ No newline at end of file
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 3/3] 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());
- }
+ }*/
}