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

first test done!

Browse Source
This commit is contained in:
Yubing325 2020-06-05 16:06:01 -05:00
parent 39755ddf43
commit e1180ac9a9
10 changed files with 237 additions and 44 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -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 { }

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

@ -1,5 +1,36 @@
<p>some content is showing up here!</p>
<table>
<tr>
<th>some header</th>
</tr>
<thead>
<tr>
<th *ngFor="let column of columns">
<p *ngIf="hasHeaderTemplate(column)">
<ng-container
[ngTemplateOutlet]="getColumnHeaderTemplate(column)"
></ng-container>
</p>
</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>
</table>
<!-- test content !!! -->

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

@ -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<any> & IQueryExecutionGroupResult<any>;
pages: any[];
@ContentChildren(DataGridColDirective) headers: QueryList<DataGridColDirective>;
@Input() columns: string[];
@Input() dataSource: IDataSource<any>;
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;
}
}

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

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

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

@ -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() { }
}

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

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

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

@ -3,4 +3,7 @@
*/
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/DataGridCol.directive';
export * from './lib/data-grid/directives/DataGridColHeader.directive';

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

@ -2,4 +2,24 @@
This is a demo for a grid.
</h1>
<ps-data-grid></ps-data-grid>
<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>
</ng-container>
</ng-container>
</ps-data-grid>

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

@ -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<IMerchant>;
constructor(private merchantService: MerchantService){
this.merchantDataSource = this.createDataSource();
ngOnInit(): void {
}
createDataSource(): DataSource<IMerchant> {
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();
}
}

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

@ -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<IMerchant> {
const builder = this.dataSourceGenericService.createDataSourceOptionsBuilder<
IMerchant,
string
>(
// createMerchantDataSource(): IDataSource<IMerchant> {
// const builder = this.dataSourceGenericService.createDataSourceOptionsBuilder<
// IMerchant,
// string
// >(
// 'merchants',
// 'GraphQLAdvanceQueryOfMerchantInput',
// 'id, name, address',
// (model) => model.id,
// {
// page: 3,
// pageSize: 10,
// },
// true
// );
// 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,
// },
// });
// },
// // 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);
// }
createDataSource(): DataSource<IMerchant> {
const builder = this.dataSourceGenericService.createDataSourceOptionsBuilder<IMerchant, string>(
'merchants',
'GraphQLAdvanceQueryOfMerchantInput',
'id, name, address',
@ -28,36 +70,16 @@ export class MerchantService {
{
page: 1,
pageSize: 4,
},
sorts: [
{
path: 'name',
ascending: true
}
]
},
true
);
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,
},
});
},
// 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);
return new DataSource<IMerchant>(builder.create());
}
}