From 7c67d814396f63313c4c2b5881767c6cf9b74141 Mon Sep 17 00:00:00 2001 From: Yubing325 <35515298+Yubing325@users.noreply.github.com> Date: Thu, 11 Jun 2020 15:34:36 -0500 Subject: [PATCH] pagination & pagination demo 1st done --- .../data-source-pagination.component.html | 3 ++ .../data-source-pagination.component.scss | 0 .../data-source-pagination.component.ts | 26 ++++++++++ .../lib/pagination/psbxPagination.module.ts | 15 ++++++ .../ngx-bootstrap/src/public-api.ts | 4 +- src/app/app-routing.module.ts | 4 ++ src/app/app.component.html | 3 ++ .../pagination-demo-routing.module.ts | 15 ++++++ .../pagination-demo/pagination-demo.module.ts | 22 ++++++++ .../pagination/pagination-demo.component.html | 43 ++++++++++++++++ .../pagination/pagination-demo.component.scss | 0 .../pagination/pagination-demo.component.ts | 51 +++++++++++++++++++ 12 files changed, 185 insertions(+), 1 deletion(-) create mode 100644 projects/poweredsoft/ngx-bootstrap/src/lib/pagination/data-source-pagination/data-source-pagination.component.html create mode 100644 projects/poweredsoft/ngx-bootstrap/src/lib/pagination/data-source-pagination/data-source-pagination.component.scss create mode 100644 projects/poweredsoft/ngx-bootstrap/src/lib/pagination/data-source-pagination/data-source-pagination.component.ts create mode 100644 projects/poweredsoft/ngx-bootstrap/src/lib/pagination/psbxPagination.module.ts create mode 100644 src/app/pagination-demo/pagination-demo-routing.module.ts create mode 100644 src/app/pagination-demo/pagination-demo.module.ts create mode 100644 src/app/pagination-demo/pagination-demo/pagination/pagination-demo.component.html create mode 100644 src/app/pagination-demo/pagination-demo/pagination/pagination-demo.component.scss create mode 100644 src/app/pagination-demo/pagination-demo/pagination/pagination-demo.component.ts diff --git a/projects/poweredsoft/ngx-bootstrap/src/lib/pagination/data-source-pagination/data-source-pagination.component.html b/projects/poweredsoft/ngx-bootstrap/src/lib/pagination/data-source-pagination/data-source-pagination.component.html new file mode 100644 index 0000000..fe8aa1a --- /dev/null +++ b/projects/poweredsoft/ngx-bootstrap/src/lib/pagination/data-source-pagination/data-source-pagination.component.html @@ -0,0 +1,3 @@ + \ No newline at end of file diff --git a/projects/poweredsoft/ngx-bootstrap/src/lib/pagination/data-source-pagination/data-source-pagination.component.scss b/projects/poweredsoft/ngx-bootstrap/src/lib/pagination/data-source-pagination/data-source-pagination.component.scss new file mode 100644 index 0000000..e69de29 diff --git a/projects/poweredsoft/ngx-bootstrap/src/lib/pagination/data-source-pagination/data-source-pagination.component.ts b/projects/poweredsoft/ngx-bootstrap/src/lib/pagination/data-source-pagination/data-source-pagination.component.ts new file mode 100644 index 0000000..5e67119 --- /dev/null +++ b/projects/poweredsoft/ngx-bootstrap/src/lib/pagination/data-source-pagination/data-source-pagination.component.ts @@ -0,0 +1,26 @@ +import { Component, OnInit, Input } from '@angular/core'; +import { IDataSource } from '@poweredsoft/data'; + +@Component({ + selector: 'psbx-ds-pagination', + templateUrl: './data-source-pagination.component.html', + styleUrls: ['./data-source-pagination.component.scss'] +}) +export class DataSourcePaginationComponent implements OnInit { + + @Input() pages: any[]; + @Input() dataSource: IDataSource + + totalItems:Number; + + constructor() { } + + pageChanged(event){ + this.dataSource.page = event.page; + } + + ngOnInit(): void { + + } + +} diff --git a/projects/poweredsoft/ngx-bootstrap/src/lib/pagination/psbxPagination.module.ts b/projects/poweredsoft/ngx-bootstrap/src/lib/pagination/psbxPagination.module.ts new file mode 100644 index 0000000..2d3d1d3 --- /dev/null +++ b/projects/poweredsoft/ngx-bootstrap/src/lib/pagination/psbxPagination.module.ts @@ -0,0 +1,15 @@ +import { NgModule } from '@angular/core'; +import { CommonModule } from '@angular/common'; +import { DataSourcePaginationComponent } from './data-source-pagination/data-source-pagination.component'; +import { PaginationModule } from 'ngx-bootstrap/pagination'; + + +@NgModule({ + declarations: [DataSourcePaginationComponent], + imports: [ + CommonModule, + PaginationModule.forRoot(), + ], + exports:[DataSourcePaginationComponent] +}) +export class psbxPaginationModule { } diff --git a/projects/poweredsoft/ngx-bootstrap/src/public-api.ts b/projects/poweredsoft/ngx-bootstrap/src/public-api.ts index 9c101bf..a535aac 100644 --- a/projects/poweredsoft/ngx-bootstrap/src/public-api.ts +++ b/projects/poweredsoft/ngx-bootstrap/src/public-api.ts @@ -5,4 +5,6 @@ export * from './lib/command-modal/command-modal.module'; export * from './lib/command-modal/directives/command-modal.directive'; export * from './lib/form-group-command-modal/form-group-command-modal.module'; -export * from './lib/form-group-command-modal/directives/form-group-command-modal.directive'; \ No newline at end of file +export * from './lib/form-group-command-modal/directives/form-group-command-modal.directive'; +export * from './lib/pagination/psbxPagination.module'; +export * from './lib/pagination/data-source-pagination/data-source-pagination.component'; \ No newline at end of file diff --git a/src/app/app-routing.module.ts b/src/app/app-routing.module.ts index 68d66ae..abeccd4 100644 --- a/src/app/app-routing.module.ts +++ b/src/app/app-routing.module.ts @@ -23,6 +23,10 @@ const routes: Routes = [ { path: 'form-group', loadChildren: () => import('./form-group-modal-demo/form-group-modal-demo.module').then(m => m.FormGroupModalDemoModule) + }, + { + path: 'pagination-demo', + loadChildren: ()=> import('./pagination-demo/pagination-demo.module').then(m => m.PaginationDemoModule) } ]; diff --git a/src/app/app.component.html b/src/app/app.component.html index 91bf4b4..1353de0 100644 --- a/src/app/app.component.html +++ b/src/app/app.component.html @@ -18,6 +18,9 @@ +
diff --git a/src/app/pagination-demo/pagination-demo-routing.module.ts b/src/app/pagination-demo/pagination-demo-routing.module.ts new file mode 100644 index 0000000..2fc85ac --- /dev/null +++ b/src/app/pagination-demo/pagination-demo-routing.module.ts @@ -0,0 +1,15 @@ +import { NgModule } from '@angular/core'; +import { Routes, RouterModule } from '@angular/router'; +import { PaginationDemoComponent } from './pagination-demo/pagination/pagination-demo.component'; + + +const routes: Routes = [{ + path: '', + component: PaginationDemoComponent +}]; + +@NgModule({ + imports: [RouterModule.forChild(routes)], + exports: [RouterModule] +}) +export class PaginationDemoRoutingModule { } diff --git a/src/app/pagination-demo/pagination-demo.module.ts b/src/app/pagination-demo/pagination-demo.module.ts new file mode 100644 index 0000000..ba62201 --- /dev/null +++ b/src/app/pagination-demo/pagination-demo.module.ts @@ -0,0 +1,22 @@ +import { NgModule } from '@angular/core'; +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 { FormGroupCommandModalModule,psbxPaginationModule, CommandModalModule } from '@poweredsoft/ngx-bootstrap'; +import { ReactiveFormsModule, FormsModule } from '@angular/forms'; + + +@NgModule({ + declarations: [PaginationDemoComponent], + imports: [ + CommonModule, + PaginationDemoRoutingModule, + psbxPaginationModule, + DataGridModule, + CommandModalModule, + FormsModule + ] +}) +export class PaginationDemoModule { } diff --git a/src/app/pagination-demo/pagination-demo/pagination/pagination-demo.component.html b/src/app/pagination-demo/pagination-demo/pagination/pagination-demo.component.html new file mode 100644 index 0000000..86d4878 --- /dev/null +++ b/src/app/pagination-demo/pagination-demo/pagination/pagination-demo.component.html @@ -0,0 +1,43 @@ + + + + + + +
ID
+
{{model.id}}
+
+ +
Name
+
{{model.name}}
+
+ +
Address
+
{{model.address}}
+
+ + + Actions + + + + + + + +
+ + + New Name + + + + + Name + + Address + + \ No newline at end of file diff --git a/src/app/pagination-demo/pagination-demo/pagination/pagination-demo.component.scss b/src/app/pagination-demo/pagination-demo/pagination/pagination-demo.component.scss new file mode 100644 index 0000000..e69de29 diff --git a/src/app/pagination-demo/pagination-demo/pagination/pagination-demo.component.ts b/src/app/pagination-demo/pagination-demo/pagination/pagination-demo.component.ts new file mode 100644 index 0000000..39af576 --- /dev/null +++ b/src/app/pagination-demo/pagination-demo/pagination/pagination-demo.component.ts @@ -0,0 +1,51 @@ +import { Component, OnInit } from '@angular/core'; +import { IDataSource } from '@poweredsoft/data'; +import { IMerchant } from 'src/app/data/services/IMerchant'; +import { MerchantService } from 'src/app/data/services/merchant.service'; +import { IModelFormCreateEvent } from '@poweredsoft/ngx-bootstrap'; +import { FormBuilder, Validators } from '@angular/forms'; + +@Component({ + selector: 'ps-pagination', + templateUrl: './pagination-demo.component.html', + styleUrls: ['./pagination-demo.component.scss'] +}) +export class PaginationDemoComponent implements OnInit { + columns = ['id','name', 'address', 'commands'] + merchantDataSource: IDataSource; + constructor(private merchantService: MerchantService){ + this.merchantDataSource = this.createDataSource(); + + } + + pages:any; + + 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(); + } + + ngOnInit() { + this.merchantDataSource.refresh(); + this.merchantDataSource.data$.subscribe(newData => { + if (newData) + this.pages = new Array(newData.numberOfPages); + }); + } + + +}