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

temp commit for spinner

Browse Source
This commit is contained in:
Yubing325 2020-06-15 15:02:27 -05:00
parent 49a647c88e
commit 7ffcc93769
13 changed files with 96 additions and 30 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
projects/poweredsoft/ngx-bootstrap/src/lib/spinner/spinner.module.ts Normal file
View File

@ -0,0 +1,14 @@
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { SpinnerComponent } from './spinner/spinner.component';
@NgModule({
declarations: [SpinnerComponent],
imports: [
CommonModule
],
exports:[SpinnerComponent]
})
export class SpinnerModule { }

3
projects/poweredsoft/ngx-bootstrap/src/lib/spinner/spinner/spinner.component.html Normal file
View File

@ -0,0 +1,3 @@
<div class="spinner-border" role="status">
<span class="sr-only">Loading...</span>
</div>

0
projects/poweredsoft/ngx-bootstrap/src/lib/spinner/spinner/spinner.component.scss Normal file
View File

15
projects/poweredsoft/ngx-bootstrap/src/lib/spinner/spinner/spinner.component.ts Normal file
View File

@ -0,0 +1,15 @@
import { Component, OnInit } from '@angular/core';
@Component({
selector: 'psbx-spinner',
templateUrl: './spinner.component.html',
styleUrls: ['./spinner.component.scss']
})
export class SpinnerComponent implements OnInit {
constructor() { }
ngOnInit(): void {
}
}

2
projects/poweredsoft/ngx-bootstrap/src/public-api.ts
View File

@ -10,3 +10,5 @@ export * from './lib/pagination/psbxPagination.module';
export * from './lib/pagination/data-source-pagination/data-source-pagination.component';
export * from './lib/confirm-modal/confirm-modal.module';
export * from './lib/confirm-modal/confirm-modal.service';
export * from './lib/spinner/spinner.module';
export * from './lib/spinner/spinner/spinner.component';

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

@ -6,18 +6,19 @@ import { DataGridColHeaderDirective } from './directives/data-grid-col-header.di
import { DataGridCellDirective } from './directives/data-grid-cell.directive';
import { DataGridFooterDirective } from './directives/data-grid-footer.directive';
import { DataGridHeaderDirective } from './directives/data-grid-header.directive';
import { DataGridLoaderDirective } from './directives/data-grid-loader.directive';
@NgModule({
declarations: [DataGridComponent,DataGridColDirective,DataGridColHeaderDirective,DataGridCellDirective, DataGridFooterDirective, DataGridHeaderDirective,
declarations: [DataGridComponent,DataGridColDirective,DataGridColHeaderDirective,DataGridCellDirective, DataGridFooterDirective, DataGridHeaderDirective, DataGridLoaderDirective,
],
imports: [
CommonModule
],
exports: [DataGridComponent,DataGridColDirective,DataGridColHeaderDirective,DataGridCellDirective,DataGridFooterDirective, DataGridHeaderDirective]
exports: [DataGridComponent,DataGridColDirective,DataGridColHeaderDirective,DataGridCellDirective,DataGridFooterDirective, DataGridHeaderDirective,DataGridLoaderDirective]
})
export class DataGridModule { }

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

@ -15,8 +15,12 @@
</th>
</tr>
</thead>
<tbody *ngIf="latestResult">
<tbody *ngIf="loading">
<tr>
<td [attr.colspan]="columns.length"><ng-content select="psDataGridLoader"></ng-content></td>
</tr>
</tbody>
<tbody *ngIf="latestResult&&!loading">
<tr *ngFor="let rowModel of latestResult.data; let i = index">
<td *ngFor="let column of columns">
<ng-container *ngIf="hasCellTemplate(column)">

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

@ -21,7 +21,7 @@ export class DataGridComponent implements OnInit {
@Input() dataSource: IDataSource<any>;
@Input() tableClasses: any;
private _columns: string[];
loading:boolean;
@Input() set columns(value: string[]) {
this._columns = value;
this.columnsChange.emit(value);
@ -35,8 +35,10 @@ export class DataGridComponent implements OnInit {
constructor() { }
ngOnInit(): void {
this.loading = true;
console.log(this.columnDefinitions);
this.dataSource.data$.subscribe(newData => {
this.loading=false;
this.latestResult = newData;
});
}

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

@ -0,0 +1,10 @@
import { Directive } from '@angular/core';
@Directive({
selector: '[psDataGridLoader]'
})
export class DataGridLoaderDirective {
constructor() { }
}

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

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

7
src/app/pagination-demo/pagination-demo.module.ts
View File

@ -4,11 +4,13 @@ import { CommonModule } from '@angular/common';
import { PaginationDemoRoutingModule } from './pagination-demo-routing.module';
import { PaginationDemoComponent } from './pagination-demo/pagination/pagination-demo.component';
import { DataGridModule } from '@poweredsoft/ngx-cdk-ui';
import { psbxPaginationModule, CommandModalModule, ConfirmModalModule } from '@poweredsoft/ngx-bootstrap';
import { psbxPaginationModule, CommandModalModule, ConfirmModalModule,SpinnerModule } from '@poweredsoft/ngx-bootstrap';
import { FormsModule } from '@angular/forms';
import { ModalModule } from 'ngx-bootstrap/modal';
@NgModule({
declarations: [PaginationDemoComponent],
imports: [
@ -18,7 +20,8 @@ import { ModalModule } from 'ngx-bootstrap/modal';
DataGridModule,
CommandModalModule,
ConfirmModalModule,
FormsModule
FormsModule,
SpinnerModule
]
})

15
src/app/pagination-demo/pagination-demo/pagination/pagination-demo.component.html
View File

@ -1,29 +1,42 @@
<psbx-spinner psDataGridLoader></psbx-spinner>
<ps-data-grid [dataSource]="merchantDataSource" [(columns)]="columns"
tableClasses="table table-sm table-dark table-striped table-bordered">
<ng-container *psDataGridHeader>
<button class="btn-warning btn" psbxCommandModal commandTitle="Adding a new merchant" commandText="Add"
[dataSource]="merchantDataSource" command="addMerchant" [template]="theModal">Create a new record</button>
</ng-container>
<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">
<ng-container *psDataGridColHeader>Actions</ng-container>
<ng-container *psDataGridCell="let model">
<!-- <button class="btn-warning btn" psbxCommandModal [commandTitle]="'Change ' + model.name + ' name'" commandText="Update"
[dataSource]="merchantDataSource" command="changeMerchant" [model]="model" [template]="changeName">Change</button> -->
<button class="btn-danger btn" (click)="removeMerchant(model.id)">Remove</button>
</ng-container>
</ng-container>
<ng-container *psDataGridFooter>
<psbx-ds-pagination [dataSource]="merchantDataSource"></psbx-ds-pagination>
</ng-container>
</ps-data-grid>
<!-- <button (click)="testService()">Test confirm</button> -->
<button (click)="testService()">Test confirm</button>
<ng-template #confirm>
<div class="modal-body text-center">

32
src/app/pagination-demo/pagination-demo/pagination/pagination-demo.component.ts
View File

@ -11,7 +11,7 @@ import { ConfirmModalService } from '@poweredsoft/ngx-bootstrap';
styleUrls: ['./pagination-demo.component.scss']
})
export class PaginationDemoComponent implements OnInit {
columns = ['id','name', 'address']
columns = ['id','name', 'address','commands']
merchantDataSource: IDataSource<IMerchant>;
constructor(private merchantService: MerchantService, private confirmModalService: ConfirmModalService){
this.merchantDataSource = this.createDataSource();
@ -20,7 +20,7 @@ export class PaginationDemoComponent implements OnInit {
pages:any;
testService() {
removeMerchant(id:string) {
this.confirmModalService.confirm({
message: 'Do you want to delete this merchant?',
yesText: 'yes delete this merchant',
@ -28,24 +28,22 @@ export class PaginationDemoComponent implements OnInit {
noText: 'no please dont',
noClass: 'light'
}).subscribe(result => {
console.log(result);
if(result){
this.merchantDataSource.executeCommandByName('removeMerchant', {
id: id
}).subscribe(
res => {
this.merchantDataSource.refresh();
},
err => {
console.log(err);
alert('failed');
}
);
}
})
}
removeMerchant(id: string) {
this.merchantDataSource.executeCommandByName('removeMerchant', {
id: id
}).subscribe(
res => {
alert('removed!');
this.merchantDataSource.refresh();
},
err => {
console.log(err);
alert('failed');
}
);
}
createDataSource(): IDataSource<IMerchant> {
return this.merchantService.createDataSource();