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

temp commit

Browse Source
This commit is contained in:
Yubing325 2020-06-20 07:16:32 -05:00
parent b08c007d56
commit 970cc15210
23 changed files with 248 additions and 49 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
angular.json
View File

@ -28,6 +28,7 @@
"src/assets"
],
"styles": [
"node_modules/bootstrap/dist/css/bootstrap.min.css",
"src/styles.scss"
],
"scripts": []

24
projects/poweredsoft/ngx-bootstrap/src/lib/grid-filter/datetime-filter/datetime-filter.component.html Normal file
View File

@ -0,0 +1,24 @@
<div class="row">
<div class="col-xs-12 col-12 col-md-4 form-group">
<input type="text"
placeholder="Datepicker"
class="form-control"
bsDatepicker>
</div>
<div class="col-xs-12 col-12 col-md-4 form-group">
<input type="text"
placeholder="Daterangepicker"
class="form-control"
bsDaterangepicker>
</div>
</div>
<!--
<div class="row">
<div class="pr-3 pb-3">
<bs-datepicker-inline [bsValue]="bsInlineValue"></bs-datepicker-inline>
</div>
<div class="pr-3 pb-3">
<bs-daterangepicker-inline [bsValue]="bsInlineRangeValue"></bs-daterangepicker-inline>
</div>
</div> -->

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

19
projects/poweredsoft/ngx-bootstrap/src/lib/grid-filter/datetime-filter/datetime-filter.component.ts Normal file
View File

@ -0,0 +1,19 @@
import { Component, OnInit } from '@angular/core';
@Component({
selector: 'psbx-datetime-filter',
templateUrl: './datetime-filter.component.html',
styleUrls: ['./datetime-filter.component.scss']
})
export class DatetimeFilterComponent {
bsInlineValue = new Date();
bsInlineRangeValue: Date[];
maxDate = new Date();
constructor() {
this.maxDate.setDate(this.maxDate.getDate() + 7);
this.bsInlineRangeValue = [this.bsInlineValue, this.maxDate];
}
}

15
projects/poweredsoft/ngx-bootstrap/src/lib/grid-filter/grid-filter.module.ts
View File

@ -1,14 +1,23 @@
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { TextFilterComponent } from './text-filter/text-filter.component';
import { FormsModule } from '@angular/forms';
import { NumberFilterComponent } from './number-filter/number-filter.component';
import { DatetimeFilterComponent } from './datetime-filter/datetime-filter.component';
import { BsDatepickerModule } from 'ngx-bootstrap/datepicker';
@NgModule({
declarations: [TextFilterComponent],
declarations: [TextFilterComponent, NumberFilterComponent,DatetimeFilterComponent],
imports: [
CommonModule
CommonModule,
FormsModule,
BsDatepickerModule.forRoot(),
],
exports: [TextFilterComponent]
exports: [TextFilterComponent, NumberFilterComponent,DatetimeFilterComponent]
})
export class GridFilterModule { }

1
projects/poweredsoft/ngx-bootstrap/src/lib/grid-filter/number-filter/number-filter.component.html Normal file
View File

@ -0,0 +1 @@
<p>number-filter works!</p>

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

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

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

7
projects/poweredsoft/ngx-bootstrap/src/lib/grid-filter/text-filter/text-filter.component.html
View File

@ -1 +1,6 @@
<h1>text-filter works!</h1>
<label class="ml-2">
<span>Filter: </span><input type="text" [(ngModel)]="searchTerm">
</label>

36
projects/poweredsoft/ngx-bootstrap/src/lib/grid-filter/text-filter/text-filter.component.ts
View File

@ -1,18 +1,46 @@
import { Component, OnInit, Input } from '@angular/core';
import { IDataSource } from '@poweredsoft/data';
import { Component, OnInit, Input, OnDestroy, Output,EventEmitter } from '@angular/core';
import { IDataSource, IQueryExecutionResult, IQueryExecutionGroupResult } from '@poweredsoft/data';
import { Subscription } from 'rxjs';
@Component({
selector: 'psbx-ds-text-filter',
templateUrl: './text-filter.component.html',
styleUrls: ['./text-filter.component.scss']
})
export class TextFilterComponent implements OnInit {
export class TextFilterComponent implements OnInit, OnDestroy {
@Input() dataSource : IDataSource<any>;
@Input() dataSource : IDataSource<any>;
@Output() filteredResults: EventEmitter<any> = new EventEmitter();
latestResult: IQueryExecutionResult<any> & IQueryExecutionGroupResult<any>;
private _dataSubscription: Subscription;
private _searchTerm: string;
get searchTerm(): string {
return this._searchTerm;
}
set searchTerm(value: string) {
this._searchTerm = value;
//this.filteredResults.emit(this.dataFilter(value));
}
// dataFilter(searchString: string) {
// return this.latestResult.data.filter(x =>
// x.name.toLowerCase().indexOf(searchString.toLowerCase()) !== -1);
// }
constructor() { }
ngOnDestroy(): void {
this._dataSubscription.unsubscribe();
}
ngOnInit(): void {
this._dataSubscription = this.dataSource.data$.subscribe(newData => {
this.latestResult = newData;
});
}
}

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

@ -14,4 +14,6 @@ export * from './lib/confirm-modal/confirm-modal.directive';
export * from './lib/spinner/spinner.module';
export * from './lib/spinner/spinner/spinner.component';
export * from './lib/grid-filter/grid-filter.module';
export * from './lib/grid-filter/text-filter/text-filter.component';
export * from './lib/grid-filter/text-filter/text-filter.component';
export * from './lib/grid-filter/number-filter/number-filter.component';
export * from './lib/grid-filter/datetime-filter/datetime-filter.component';

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

@ -7,6 +7,7 @@ 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';
import { DataGridCellFilterDirective } from './directives/data-grid-cell-filter.directive';
@ -16,7 +17,7 @@ import { DataGridLoaderDirective } from './directives/data-grid-loader.directive
declarations: [
DataGridComponent,DataGridColDirective,DataGridColHeaderDirective,
DataGridCellDirective, DataGridFooterDirective, DataGridHeaderDirective,
DataGridLoaderDirective,
DataGridLoaderDirective, DataGridCellFilterDirective,
],
imports: [
@ -25,6 +26,6 @@ import { DataGridLoaderDirective } from './directives/data-grid-loader.directive
exports: [
DataGridComponent,DataGridColDirective,DataGridColHeaderDirective,
DataGridCellDirective,DataGridFooterDirective, DataGridHeaderDirective,
DataGridLoaderDirective]
DataGridLoaderDirective,DataGridCellFilterDirective]
})
export class DataGridModule { }

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

@ -5,6 +5,9 @@
<tr>
<th *ngFor="let header of gridHeaders" [attr.colspan]="columns.length">
<ng-container [ngTemplateOutlet]="header.template"></ng-container>
<ng-container *ngFor="let filter of filters" >
<ng-container [ngTemplateOutlet]="filter.template"></ng-container>
</ng-container>
</th>
</tr>
<tr>

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

@ -5,6 +5,7 @@ import { DataGridHeaderDirective } from '../directives/data-grid-header.directiv
import { DataGridFooterDirective } from '../directives/data-grid-footer.directive';
import { DataGridLoaderDirective } from '../directives/data-grid-loader.directive';
import { Subscription } from 'rxjs';
import { DataGridCellFilterDirective } from '../directives/data-grid-cell-filter.directive';
@Component({
selector: 'ps-data-grid',
@ -20,9 +21,11 @@ export class DataGridComponent implements OnInit, OnDestroy {
@ContentChildren(DataGridHeaderDirective) gridHeaders: QueryList<DataGridHeaderDirective>;
@ContentChildren(DataGridFooterDirective) gridFooters: QueryList<DataGridFooterDirective>;
@ContentChildren(DataGridLoaderDirective) loaders: QueryList<DataGridLoaderDirective>;
@ContentChildren(DataGridCellFilterDirective) filters: QueryList<DataGridCellFilterDirective>;
@Input() dataSource: IDataSource<any>;
@Input() tableClasses: any;
@Input() headerClasses: any;
@Input() noRecordsText: string;
private _columns: string[];
@ -69,8 +72,7 @@ export class DataGridComponent implements OnInit, OnDestroy {
this.loading = isLoading;
this.cdr.detectChanges();
});
console.log(this.loaders);
}
getColumn(columnName: string) {

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

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

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

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

4
src/app/app.module.ts
View File

@ -10,6 +10,7 @@ import { HttpLink, HttpLinkModule } from 'apollo-angular-link-http';
import { DefaultOptions } from 'apollo-client';
import { InMemoryCache } from 'apollo-cache-inmemory';
import { HttpClientModule } from '@angular/common/http';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
export function app_Init(apollo: Apollo, httpLink: HttpLink) {
return async () => {
@ -56,7 +57,8 @@ export function app_Init(apollo: Apollo, httpLink: HttpLink) {
AppRoutingModule,
HttpClientModule,
ApolloModule,
HttpLinkModule
HttpLinkModule,
BrowserAnimationsModule
],
providers: [
{

12
src/app/grid-filter-demo/grid-filter-demo.module.ts
View File

@ -3,14 +3,22 @@ import { CommonModule } from '@angular/common';
import { GridFilterDemoRoutingModule } from './grid-filter-demo-routing.module';
import { GridFilterDemoComponent } from './grid-filter-demo/grid-filter-demo.component';
import { GridFilterModule } from '@poweredsoft/ngx-bootstrap';
import { GridFilterModule, psbxPaginationModule, CommandModalModule, ConfirmModalModule, SpinnerModule } from '@poweredsoft/ngx-bootstrap';
import { DataGridModule } from '@poweredsoft/ngx-cdk-ui';
import { FormsModule } from '@angular/forms';
@NgModule({
declarations: [GridFilterDemoComponent],
imports: [
CommonModule,
GridFilterDemoRoutingModule,
GridFilterModule,
GridFilterModule,
psbxPaginationModule,
DataGridModule,
CommandModalModule,
ConfirmModalModule,
FormsModule,
SpinnerModule
]
})
export class GridFilterDemoModule { }

76
src/app/grid-filter-demo/grid-filter-demo/grid-filter-demo.component.html
View File

@ -1,2 +1,74 @@
<p>grid-filter-demo works!</p>
<psbx-ds-text-filter></psbx-ds-text-filter>
<h2>grid-filter-demo works!</h2>
<psbx-datetime-filter></psbx-datetime-filter>
<button class="btn btn-danger" (click)="test()">Test</button>
<ps-data-grid [dataSource]="merchantDataSource" [(columns)]="columns"
tableClasses="table table-sm table-dark table-striped table-bordered">
<psbx-spinner *psDataGridLoader></psbx-spinner>
<ng-container *psDataGridHeader>
<button class="btn-info btn" psbxCommandModal commandTitle="Adding a new merchant" commandText="Add"
[dataSource]="merchantDataSource" command="addMerchant" [template]="theModal">Create Record</button>
</ng-container>
<psbx-ds-text-filter *psDataGridCellFilter [dataSource]="merchantDataSource" (filteredResults)="filteredResults = $event"></psbx-ds-text-filter>
<ng-container psDataGridCol="id">
<div *psDataGridColHeader>ID</div>
<div *psDataGridCell="let model">{{model.id}}</div>
<!-- <psfa-ds-sort-icon *psDataGridColSort [sortPath]="id" [dataSource]="merchantDataSource">
</psfa-ds-sort-icon> -->
<!-- <psbx-ds-text-filter *psDataGridCellFilter [dataSource]="merchantDataSource"></psbx-ds-text-filter>
<psdb-ds-date-filter *psDataGridCellFilter></psdb-ds-date-filter>
<psdb-ds-date-range-filter *psDataGridCellFilter></psdb-ds-date-range-filter>
<psbx-ds-number-filter *psDataGridCellFilter></psbx-ds-number-filter>
<psbx-ds-multi-select-filter [dataSource]="merchantDataSource" [selectDataSource]="selectDataSource" [valueField]="id">
<ng-container *psSelectOption="let option">{{ option.name }}</ng-container>
</psbx-ds-multi-select-filter> -->
</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-info btn" psbxCommandModal [commandTitle]="'Change ' + model.name + ' name'" commandText="Update"
[dataSource]="merchantDataSource" command="changeMerchant" [model]="model" [template]="theModal">Change</button>
<button class="btn-danger btn" psbxConfirmModal [commandTitle]="'Are you sure you wnat to remove ' + model.name + '?'" commandText="Remove"
[dataSource]="merchantDataSource" command="removeMerchant" [model]="model" >Remove</button>
</ng-container>
</ng-container>
<ng-container *psDataGridFooter>
<psbx-ds-pagination [dataSource]="merchantDataSource"></psbx-ds-pagination>
</ng-container>
</ps-data-grid>
<ng-template #confirm>
<div class="modal-body text-center">
<p>Do you want to confirm?</p>
<button type="button" class="btn btn-default" >Yes</button>
<button type="button" class="btn btn-primary" >No</button>
</div>
</ng-template>
<ng-template #theModal let-command let-loading="loading">
<label for="name">Name</label>
<input type="text" required [attr.disabled]="loading" [(ngModel)]="command.name" placeholder="Enter a merchant name"
class="form-control" >
<label for="address">Address</label>
<input type="text" required [attr.disabled]="loading" [(ngModel)]="command.address" placeholder="Enter the merchant's address"
class="form-control" >
</ng-template>

27
src/app/grid-filter-demo/grid-filter-demo/grid-filter-demo.component.ts
View File

@ -1,4 +1,8 @@
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 { ConfirmModalService } from '@poweredsoft/ngx-bootstrap';
@Component({
selector: 'ps-grid-filter-demo',
@ -7,9 +11,26 @@ import { Component, OnInit } from '@angular/core';
})
export class GridFilterDemoComponent implements OnInit {
constructor() { }
ngOnInit(): void {
columns = ['id','name', 'address','commands']
merchantDataSource: IDataSource<IMerchant>;
constructor(private merchantService: MerchantService){
this.merchantDataSource = this.createDataSource();
console.log(this.merchantDataSource);
}
pages:any;
filteredResults:any;
createDataSource(): IDataSource<IMerchant> {
return this.merchantService.createDataSource();
}
ngOnInit() {
this.merchantDataSource.refresh();
}
test(){
console.log(this.filteredResults);
}
}

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

@ -63,7 +63,6 @@
</ng-template>
<ng-template #theModal let-command let-loading="loading">
<label for="name">Name</label>
<input type="text" required [attr.disabled]="loading" [(ngModel)]="command.name" placeholder="Enter a merchant name"

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

@ -19,31 +19,6 @@ export class PaginationDemoComponent implements OnInit {
}
pages:any;
// removeMerchant(id:string) {
// this.confirmModalService.confirm({
// message: 'Do you want to delete this merchant?',
// yesText: 'yes delete this merchant',
// yesClass: 'danger',
// noText: 'no please dont',
// noClass: 'light'
// }).subscribe(result => {
// if(result){
// this.merchantDataSource.executeCommandByName('removeMerchant', {
// id: id
// }).subscribe(
// res => {
// this.merchantDataSource.refresh();
// },
// err => {
// console.log(err);
// alert('failed');
// }
// );
// }
// })
// }
createDataSource(): IDataSource<IMerchant> {
return this.merchantService.createDataSource();

3
src/styles.scss
View File

@ -1,2 +1,3 @@
/* You can add global styles to this file, and also import other style files */
@import '~bootstrap/scss/bootstrap';
@import '~bootstrap/scss/bootstrap';
@import '~ngx-bootstrap/datepicker/bs-datepicker.css';