first test done!
This commit is contained in:
parent
39755ddf43
commit
e1180ac9a9
@ -1,14 +1,17 @@
|
|||||||
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 { DataGridColHeaderDirective } from './directives/DataGridColHeader.directive';
|
||||||
|
import { DataGridCellDirective } from './directives/DataGridCell.directive';
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
@NgModule({
|
@NgModule({
|
||||||
declarations: [DataGridComponent],
|
declarations: [DataGridComponent,DataGridColDirective,DataGridColHeaderDirective,DataGridCellDirective],
|
||||||
imports: [
|
imports: [
|
||||||
CommonModule
|
CommonModule
|
||||||
],
|
],
|
||||||
exports: [DataGridComponent]
|
exports: [DataGridComponent,DataGridColDirective,DataGridColHeaderDirective,DataGridCellDirective]
|
||||||
})
|
})
|
||||||
export class DataGridModule { }
|
export class DataGridModule { }
|
||||||
|
@ -1,5 +1,36 @@
|
|||||||
|
<p>some content is showing up here!</p>
|
||||||
|
|
||||||
<table>
|
<table>
|
||||||
<tr>
|
<thead>
|
||||||
<th>some header</th>
|
<tr>
|
||||||
</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>
|
</table>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
<!-- test content !!! -->
|
@ -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({
|
@Component({
|
||||||
selector: 'ps-data-grid',
|
selector: 'ps-data-grid',
|
||||||
@ -7,9 +9,56 @@ import { Component, OnInit } from '@angular/core';
|
|||||||
})
|
})
|
||||||
export class DataGridComponent implements OnInit {
|
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() { }
|
constructor() { }
|
||||||
|
|
||||||
ngOnInit(): void {
|
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;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
}
|
}
|
||||||
|
@ -0,0 +1,10 @@
|
|||||||
|
import { Directive, TemplateRef } from '@angular/core';
|
||||||
|
|
||||||
|
@Directive({
|
||||||
|
selector: '[psDataGridCell]'
|
||||||
|
})
|
||||||
|
export class DataGridCellDirective {
|
||||||
|
|
||||||
|
constructor(public template: TemplateRef<any>) { }
|
||||||
|
|
||||||
|
}
|
@ -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() { }
|
||||||
|
|
||||||
|
}
|
@ -0,0 +1,10 @@
|
|||||||
|
import { Directive, TemplateRef } from '@angular/core';
|
||||||
|
|
||||||
|
@Directive({
|
||||||
|
selector: '[psDataGridColHeader]'
|
||||||
|
})
|
||||||
|
export class DataGridColHeaderDirective {
|
||||||
|
|
||||||
|
constructor(public template: TemplateRef<any>) { }
|
||||||
|
|
||||||
|
}
|
@ -3,4 +3,7 @@
|
|||||||
*/
|
*/
|
||||||
|
|
||||||
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/DataGridCol.directive';
|
||||||
|
export * from './lib/data-grid/directives/DataGridColHeader.directive';
|
@ -2,4 +2,24 @@
|
|||||||
This is a demo for a grid.
|
This is a demo for a grid.
|
||||||
</h1>
|
</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>
|
@ -1,4 +1,9 @@
|
|||||||
import { Component, OnInit } from '@angular/core';
|
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({
|
@Component({
|
||||||
selector: 'ps-data-grid-demo-home',
|
selector: 'ps-data-grid-demo-home',
|
||||||
@ -7,9 +12,33 @@ import { Component, OnInit } from '@angular/core';
|
|||||||
})
|
})
|
||||||
export class DataGridDemoHomeComponent implements OnInit {
|
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();
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
}
|
}
|
||||||
|
@ -2,7 +2,7 @@ import { Injectable } from '@angular/core';
|
|||||||
import { GraphQLDataSourceService } from '@poweredsoft/ngx-data-apollo';
|
import { GraphQLDataSourceService } from '@poweredsoft/ngx-data-apollo';
|
||||||
import { IDataSource, DataSource } from '@poweredsoft/data';
|
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 } from './IChangeMerchantNameCommand';
|
||||||
import { IMerchant } from './IMerchant';
|
import { IMerchant } from './IMerchant';
|
||||||
@ -16,11 +16,53 @@ export class MerchantService {
|
|||||||
private apollo: Apollo
|
private apollo: Apollo
|
||||||
) {}
|
) {}
|
||||||
|
|
||||||
createMerchantDataSource(): IDataSource<IMerchant> {
|
// createMerchantDataSource(): IDataSource<IMerchant> {
|
||||||
const builder = this.dataSourceGenericService.createDataSourceOptionsBuilder<
|
// const builder = this.dataSourceGenericService.createDataSourceOptionsBuilder<
|
||||||
IMerchant,
|
// IMerchant,
|
||||||
string
|
// 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',
|
'merchants',
|
||||||
'GraphQLAdvanceQueryOfMerchantInput',
|
'GraphQLAdvanceQueryOfMerchantInput',
|
||||||
'id, name, address',
|
'id, name, address',
|
||||||
@ -28,36 +70,16 @@ export class MerchantService {
|
|||||||
{
|
{
|
||||||
page: 1,
|
page: 1,
|
||||||
pageSize: 4,
|
pageSize: 4,
|
||||||
},
|
sorts: [
|
||||||
|
{
|
||||||
|
path: 'name',
|
||||||
|
ascending: true
|
||||||
|
}
|
||||||
|
]
|
||||||
|
},
|
||||||
true
|
true
|
||||||
);
|
);
|
||||||
|
|
||||||
builder.addMutation<IChangeMerchantNameCommand, string>(
|
return new DataSource<IMerchant>(builder.create());
|
||||||
'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);
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
Loading…
Reference in New Issue
Block a user