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] 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());
}
}