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

commit for current

Browse Source
This commit is contained in:
Yubing325 2020-07-09 13:41:22 -05:00
parent 66d34d1019
commit f702608640
50 changed files with 369 additions and 268 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

0
projects/poweredsoft/ng-select/src/lib/ps-ng-select/not-found-template.directive.ts → projects/poweredsoft/ng-select/src/lib/ps-ng-select/directives/not-found-template.directive.ts
View File

2
projects/poweredsoft/ng-select/src/lib/ps-ng-select/select-label-template.directive.ts → projects/poweredsoft/ng-select/src/lib/ps-ng-select/directives/select-label-template.directive.ts
View File

@ -1,4 +1,4 @@
import { Directive, TemplateRef, Input } from '@angular/core';
import { Directive, TemplateRef } from '@angular/core';
@Directive({
selector: '[psNgSelectLabel]'

0
projects/poweredsoft/ng-select/src/lib/ps-ng-select/select-option-template.directive.ts → projects/poweredsoft/ng-select/src/lib/ps-ng-select/directives/select-option-template.directive.ts
View File

4
projects/poweredsoft/ng-select/src/lib/ps-ng-select/multi-select/multi-select.component.ts
View File

@ -1,11 +1,11 @@
import { Component, OnInit, ContentChild, ViewChild, Input, Output, EventEmitter, ChangeDetectorRef, forwardRef, OnDestroy } from '@angular/core';
import { SelectLabelTemplateDirective } from '../select-label-template.directive';
import { SelectLabelTemplateDirective } from '../directives/select-label-template.directive';
import { IDataSource, ISimpleFilter } from '@poweredsoft/data';
import { Observable, Subject, Subscription } from 'rxjs';
import { map, distinctUntilChanged, debounceTime } from 'rxjs/operators';
import { NgSelectComponent as SelectComponent } from '@ng-select/ng-select';
import { NG_VALUE_ACCESSOR } from '@angular/forms';
import { SelectOptionTemplateDirective } from '../select-option-template.directive';
import { SelectOptionTemplateDirective } from '../directives/select-option-template.directive';
@Component({
selector: 'ps-ng-multi-select',

6
projects/poweredsoft/ng-select/src/lib/ps-ng-select/ng-select/ng-select.component.ts
View File

@ -1,12 +1,12 @@
import { Component, OnInit, ContentChild, ViewChild, Input, Output, EventEmitter, ChangeDetectorRef, forwardRef, OnDestroy } from '@angular/core';
import { SelectLabelTemplateDirective } from '../select-label-template.directive';
import { SelectLabelTemplateDirective } from '../directives/select-label-template.directive';
import { IDataSource, ISimpleFilter } from '@poweredsoft/data';
import { Observable, Subject, Subscription } from 'rxjs';
import { map, distinctUntilChanged, debounceTime } from 'rxjs/operators';
import { NgSelectComponent as SelectComponent } from '@ng-select/ng-select';
import { NG_VALUE_ACCESSOR } from '@angular/forms';
import { SelectOptionTemplateDirective } from '../select-option-template.directive';
import { NotFoundTemplateDirective } from '../not-found-template.directive';
import { SelectOptionTemplateDirective } from '../directives/select-option-template.directive';
import { NotFoundTemplateDirective } from '../directives/not-found-template.directive';
@Component({

6
projects/poweredsoft/ng-select/src/lib/ps-ng-select/ps-ng-select.module.ts
View File

@ -4,9 +4,9 @@ import { NgSelectComponent } from './ng-select/ng-select.component';
import { MultiSelectComponent } from './multi-select/multi-select.component';
import { FormsModule } from '@angular/forms';
import { NgSelectModule } from '@ng-select/ng-select';
import { SelectLabelTemplateDirective } from './select-label-template.directive';
import { SelectOptionTemplateDirective } from './select-option-template.directive';
import { NotFoundTemplateDirective } from './not-found-template.directive';
import { SelectLabelTemplateDirective } from './directives/select-label-template.directive';
import { SelectOptionTemplateDirective } from './directives/select-option-template.directive';
import { NotFoundTemplateDirective } from './directives/not-found-template.directive';

6
projects/poweredsoft/ng-select/src/public-api.ts
View File

@ -5,6 +5,6 @@
export * from './lib/ps-ng-select/ps-ng-select.module';
export * from './lib/ps-ng-select/ng-select/ng-select.component';
export * from './lib/ps-ng-select/multi-select/multi-select.component';
export * from './lib/ps-ng-select/select-label-template.directive';
export * from './lib/ps-ng-select/select-option-template.directive';
export * from './lib/ps-ng-select/not-found-template.directive';
export * from './lib/ps-ng-select/directives/select-label-template.directive';
export * from './lib/ps-ng-select/directives/select-option-template.directive';
export * from './lib/ps-ng-select/directives/not-found-template.directive';

4
projects/poweredsoft/ngx-bootstrap/src/lib/command-modal/command-modal.module.ts
View File

@ -3,7 +3,7 @@ import { CommonModule } from '@angular/common';
import { ModalModule } from 'ngx-bootstrap/modal';
import { CommandModalDirective } from './directives/command-modal.directive';
import { CommandModalComponent } from './command-modal/command-modal.component';
import { InputValidatorDirective } from './directives/input-validator.directive';
import { FormsModule } from '@angular/forms';
@NgModule({
@ -12,7 +12,7 @@ import { FormsModule } from '@angular/forms';
ModalModule.forRoot(),
FormsModule
],
declarations: [CommandModalDirective, CommandModalComponent, InputValidatorDirective],
declarations: [CommandModalDirective, CommandModalComponent],
exports: [CommandModalDirective]
})
export class CommandModalModule { }

25
projects/poweredsoft/ngx-bootstrap/src/lib/command-modal/command-modal/command-modal.component.spec.ts
View File

@ -1,25 +0,0 @@
import { async, ComponentFixture, TestBed } from '@angular/core/testing';
import { CommandModalComponent } from './command-modal.component';
describe('CommandModalComponent', () => {
let component: CommandModalComponent;
let fixture: ComponentFixture<CommandModalComponent>;
beforeEach(async(() => {
TestBed.configureTestingModule({
declarations: [ CommandModalComponent ]
})
.compileComponents();
}));
beforeEach(() => {
fixture = TestBed.createComponent(CommandModalComponent);
component = fixture.componentInstance;
fixture.detectChanges();
});
it('should create', () => {
expect(component).toBeTruthy();
});
});

7
projects/poweredsoft/ngx-bootstrap/src/lib/command-modal/command-modal/command-modal.component.ts
View File

@ -1,4 +1,4 @@
import { Component, OnInit, TemplateRef, OnDestroy } from '@angular/core';
import { Component, OnInit, TemplateRef, OnDestroy, EventEmitter } from '@angular/core';
import { IDataSource } from '@poweredsoft/data';
import { BsModalRef } from 'ngx-bootstrap/modal';
import { finalize} from 'rxjs/operators';
@ -24,6 +24,8 @@ export class CommandModalComponent implements OnInit, OnDestroy {
form:NgForm;
validationMessage:string ;
successEmitter: EventEmitter<any>;
private _notifyMessage: Subscription;
private _validationError: Subscription;
@ -62,11 +64,12 @@ export class CommandModalComponent implements OnInit, OnDestroy {
this.loading = false;
})
)
.subscribe(success => {
.subscribe(commandResult => {
if (this.refreshOnSuccess)
this.dataSource.refresh();
this.modalRef.hide();
this.successEmitter.emit(commandResult);
}, fail => {
// you do not want to close on failure.. so just ignore..
});

7
projects/poweredsoft/ngx-bootstrap/src/lib/command-modal/directives/command-modal.directive.ts
View File

@ -1,4 +1,4 @@
import { Directive, HostListener, Input, TemplateRef } from '@angular/core';
import { Directive, HostListener, Input, TemplateRef, Output, EventEmitter } from '@angular/core';
import { IDataSource } from '@poweredsoft/data';
import { BsModalService } from 'ngx-bootstrap/modal';
import { CommandModalComponent } from '../command-modal/command-modal.component';
@ -21,6 +21,8 @@ export class CommandModalDirective {
@Input() cancelText: string;
@Input() animated: boolean;
@Output() success: EventEmitter<any> = new EventEmitter<any>();
@HostListener('click')
wasClicked() {
this.dataSource.resolveCommandModelByName({
@ -35,7 +37,8 @@ export class CommandModalDirective {
title: this.commandTitle,
refreshOnSuccess: this.refreshOnSuccess === undefined ? true : this.refreshOnSuccess,
commandText: this.commandText || 'OK',
cancelText: this.cancelText || 'Cancel'
cancelText: this.cancelText || 'Cancel',
successEmitter: this.success
};
this.modalService.show(CommandModalComponent, {
animated: this.animated === undefined ? true : this.animated,

19
projects/poweredsoft/ngx-bootstrap/src/lib/command-modal/directives/input-validator.directive.ts
View File

@ -1,19 +0,0 @@
import { Directive } from '@angular/core';
import { Validator, AbstractControl, ValidationErrors, NG_VALIDATORS } from '@angular/forms';
@Directive({
selector: '[psbxInputValidator]',
providers: [{ provide: NG_VALIDATORS, useExisting: InputValidatorDirective, multi: true }]
})
export class InputValidatorDirective implements Validator{
constructor() { }
validate(control: AbstractControl): ValidationErrors {
throw new Error("Method not implemented.");
}
registerOnValidatorChange?(fn: () => void): void {
throw new Error("Method not implemented.");
}
}

16
projects/poweredsoft/ngx-bootstrap/src/lib/command/command.module.ts Normal file
View File

@ -0,0 +1,16 @@
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { CommandDirective } from './directives/command.directive';
import { ConfirmModalModule } from '../confirm-modal/confirm-modal.module';
@NgModule({
declarations: [CommandDirective],
imports: [
CommonModule,
ConfirmModalModule
],
exports:[CommandDirective]
})
export class CommandModule { }

70
projects/poweredsoft/ngx-bootstrap/src/lib/command/directives/command.directive.ts Normal file
View File

@ -0,0 +1,70 @@
import { Directive, Input, TemplateRef, HostListener, Output, EventEmitter } from '@angular/core';
import { IDataSource } from '@poweredsoft/data';
import { ConfirmModalService } from '../../confirm-modal/confirm-modal.service';
@Directive({
selector: '[psbxCommand]'
})
export class CommandDirective {
constructor(private confirmModalService: ConfirmModalService) { }
@Input() dataSource: IDataSource<any>;
@Input() command: string;
@Input() model: any;
@Input() refreshOnSuccess: boolean;
@Input() animated: boolean;
@Input() confirm: boolean;
@Input() confirmMessage: string;
@Input() yesText: string;
@Input() noText: string;
@Input() yesClass: string;
@Input() noClass: string;
@Output() success: EventEmitter<any> = new EventEmitter<any>();
@Output() failure: EventEmitter<any> = new EventEmitter<any>();
private doCommand() {
this.dataSource.resolveCommandModelByName({
command: this.command,
model: this.model
}).subscribe(commandModel => {
this.dataSource.executeCommandByName(this.command, commandModel).subscribe(
commandResult => {
if (this.refreshOnSuccess !== false)
this.dataSource.refresh();
this.success.emit(commandResult);
},
commandError => {
this.failure.emit(commandError);
}
);
}, resolveCommandError => {
this.failure.emit(resolveCommandError);
});
}
@HostListener('click')
wasClicked() {
if (this.confirm) {
this.confirmModalService.confirm({
message: this.confirmMessage,
yesText: this.yesText || 'yes',
yesClass: this.yesClass || 'danger',
noText: this.noText || 'no',
noClass: this.noClass || 'light',
}).subscribe(result => {
if (result)
this.doCommand();
})
} else {
this.doCommand();
}
}
}

6
projects/poweredsoft/ngx-bootstrap/src/lib/confirm-modal/confirm-modal-components/confirm-modal/confirm-modal.component.ts
View File

@ -1,4 +1,4 @@
import { Component, OnInit, TemplateRef } from '@angular/core';
import { Component, OnInit, TemplateRef, EventEmitter } from '@angular/core';
import { BsModalRef, BsModalService } from 'ngx-bootstrap/modal';
import { Observer } from 'rxjs';
@ -27,11 +27,11 @@ export class ConfirmModalComponent implements OnInit {
}
get yesButtonClass() {
return `btn btn-sm btn-${this.yesClass}`
return `btn btn-${this.yesClass}`
}
get noButtonClass() {
return `btn btn-sm btn-${this.noClass}`
return `btn btn-${this.noClass}`
}
confirm(): void {

55
projects/poweredsoft/ngx-bootstrap/src/lib/confirm-modal/confirm-modal.directive.ts
View File

@ -1,55 +0,0 @@
import { Directive, Input, TemplateRef, HostListener } from '@angular/core';
import { ConfirmModalService } from './confirm-modal.service';
import { IDataSource } from '@poweredsoft/data';
@Directive({
selector: '[psbxConfirmModal]'
})
export class ConfirmModalDirective {
constructor(private confirmModalService: ConfirmModalService) { }
@Input() dataSource: IDataSource<any>;
@Input() command: string;
@Input() model: any;
@Input() template: TemplateRef<any>;
@Input() commandTitle: string;
@Input() refreshOnSuccess: boolean;
@Input() commandText: string;
@Input() cancelText: string;
@Input() animated: boolean;
@HostListener('click')
wasClicked() {
this.dataSource.resolveCommandModelByName({
command: this.command,
model: this.model
}).subscribe(commandModel => {
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.dataSource.executeCommandByName(this.command, commandModel).subscribe(
res => {
this.dataSource.refresh();
},
err => {
console.log(err);
alert('failed');
}
);
}
})
}, error => {
});
}
}

8
projects/poweredsoft/ngx-bootstrap/src/lib/confirm-modal/confirm-modal.module.ts
View File

@ -3,18 +3,20 @@ import { CommonModule } from '@angular/common';
import { ConfirmModalComponent } from './confirm-modal-components/confirm-modal/confirm-modal.component';
import { ModalModule } from 'ngx-bootstrap/modal';
import { ConfirmModalService } from './confirm-modal.service';
import { ConfirmModalDirective } from './confirm-modal.directive';
import { CommandModule } from '../command/command.module';
@NgModule({
declarations: [ConfirmModalComponent, ConfirmModalDirective],
declarations: [ConfirmModalComponent],
imports: [
CommonModule,
//CommandModule,
ModalModule.forRoot(),
],
exports:[ConfirmModalDirective],
exports:[],
providers: [ConfirmModalService]
})
export class ConfirmModalModule { }

0
projects/poweredsoft/ngx-bootstrap/src/lib/dataSource-filter/data-source-filter.module.ts → projects/poweredsoft/ngx-bootstrap/src/lib/data-source-filter/data-source-filter.module.ts
View File

48
projects/poweredsoft/ngx-bootstrap/src/lib/dataSource-filter/datetime-filter/data-source-datetime-filter.component.html → projects/poweredsoft/ngx-bootstrap/src/lib/data-source-filter/datetime-filter/data-source-datetime-filter.component.html
View File

@ -1,4 +1,5 @@
<ng-template #popTemplate>
<form (ngSubmit)="applyFilter(pop)" novalidate>
<div class="container" >
<div class="row">
<select class="custom-select" title="Choose one of the following..." [(ngModel)]="filterType" [ngModelOptions]="{standalone: true}">
@ -6,26 +7,55 @@
</select>
</div>
<div class="row mt-1 mb-1">
<input *ngIf="filterType =='GreaterThan' || filterType == 'LessThan'" type="text"
<input *ngIf="filterType !='Range'"
type="text"
placeholder="Datepicker"
class="form-control"
bsDatepicker [(ngModel)]="filterValue">
bsDatepicker [(ngModel)]="filterValue" [ngModelOptions]="{standalone: true}">
</div>
<div class="row mt-1 mb-1">
<input *ngIf="filterType =='Equal'" type="text"
<input *ngIf="filterType =='Range'" type="text"
placeholder="Daterangepicker"
class="form-control"
bsDaterangepicker [(ngModel)]="filterValue">
bsDaterangepicker [(ngModel)]="filterValue" [ngModelOptions]="{standalone: true}">
</div>
<div class="row mt-2">
<button class="btn btn-primary mr-1" >Filter</button>
<button class="btn btn-primary mr-1" type="submit" >Filter</button>
<button type="button" class="btn btn-warning" *ngIf="!isFiltering" (click)="pop.hide()">Hide</button>
<button type="button" class="btn btn-dark" *ngIf="isFiltering">Clear</button>
<button type="button" class="btn btn-dark" *ngIf="isFiltering" (click)="clearFilter()">Clear</button>
</div>
</div>
</form>
<!-- <div class="container" >
<div class="row">
<select class="custom-select" title="Choose one of the following..." >
<option *ngFor="let filter of filterTypes" [value]="filter.value">{{filter.key}}</option>
</select>
</div>
<div class="row mt-1 mb-1">
<input *ngIf="filterType !='Range'"
type="text"
placeholder="Datepicker"
class="form-control"
bsDatepicker [(ngModel)]="filterValue" >
</div>
<div class="row mt-1 mb-1">
<input *ngIf="filterType =='Range'" type="text"
placeholder="Daterangepicker"
class="form-control"
bsDaterangepicker [(ngModel)]="filterValue">
</div>
<div class="row mt-2">
<button class="btn btn-primary mr-1" type="submit" (click)="applyFilter()">Filter</button>
<button type="button" class="btn btn-warning" *ngIf="!isFiltering" (click)="pop.hide()">Hide</button>
<button type="button" class="btn btn-dark" *ngIf="isFiltering" (click)="clearFilter()">Clear</button>
</div>
</div> -->
</ng-template>
<button [popover]="popTemplate" class="btn btn-default" [(isOpen)]="filterPopUpOpened" [outsideClick]="true" #pop="bs-popover">

0
projects/poweredsoft/ngx-bootstrap/src/lib/dataSource-filter/datetime-filter/data-source-datetime-filter.component.scss → projects/poweredsoft/ngx-bootstrap/src/lib/data-source-filter/datetime-filter/data-source-datetime-filter.component.scss
View File

137
projects/poweredsoft/ngx-bootstrap/src/lib/data-source-filter/datetime-filter/data-source-datetime-filter.component.ts Normal file
View File

@ -0,0 +1,137 @@
import { Component, OnInit, Input, Output, EventEmitter} from '@angular/core';
import { IDataSource, ISimpleFilter, ICompositeFilter, IFilter } from '@poweredsoft/data';
import { PopoverDirective } from 'ngx-bootstrap/popover';
@Component({
selector: 'psbx-ds-datetime-filter',
templateUrl: './data-source-datetime-filter.component.html',
styleUrls: ['./data-source-datetime-filter.component.scss']
})
export class DataSourceDatetimeFilterComponent implements OnInit {
@Input() path: string;
@Input() dataSource : IDataSource<any>;
@Input() filterType: string;
@Output() filterTypeChanged: EventEmitter<string> = new EventEmitter<string>();
filterPopUpOpened: boolean = false;
isFiltering: boolean;
filterValue: Date = null;
filterTypes = [
{key:'Equal', value: 'Equal'},
{key:'Greater Than', value: 'GreaterThan'},
{key:'Less Than', value: 'LessThan'},
{key:'Greater Than Equal', value: 'GreaterThanOrEqual'},
{key:'Less Than Equal', value: 'LessThanOrEqual'},
{key:'Range', value: 'Range' }
];
bsInlineValue = new Date();
bsInlineRangeValue: Date[];
maxDate = new Date();
constructor() {
this.maxDate.setDate(this.maxDate.getDate() + 7);
this.bsInlineRangeValue = [this.bsInlineValue, this.maxDate];
}
ngOnInit(): void {
if (!this.filterType)
this.filterType = 'Equal';
}
showTooltip(){
return "Filter by "+ this.path;
}
clearFilter() {
this.filterValue = null;
this.isFiltering = false;
const existingFilter = this.dataSource.filters.find(t => (t as ISimpleFilter).path == this.path) as ISimpleFilter;
if (existingFilter) {
this.dataSource.query({
page: 1,
filters: this.dataSource.filters.filter(t => t != existingFilter)
})
}
}
applyFilter(pop: PopoverDirective = null){
this.isFiltering = true;
const filters = this.dataSource.filters;
let compositeF: any = null;
let freshFilter: ISimpleFilter = null;
let startDate:Date;
let endDate:Date;
debugger;
if(Array.isArray(this.filterValue)){
startDate = this.filterValue[0];
endDate = this.filterValue[1];
compositeF = {
type: 'Composite',
filters: [
{
path: this.path,
type: 'GREATERTHANOREQUAL',
value: startDate, // check if this string works
},
{
and: true,
path: this.path,
type: 'LESSTHANOREQUAL',
value: endDate,
}
]
}
}else{
freshFilter = {
type: this.filterType,
and: true,
path: this.path,
value: this.filterValue
}
if (pop)
pop.hide();
}
// TODO???
// set this for gql better handling of variant.
//(freshFilter as IGraphQLFilter).__gqlVariantType = 'DATETIME';
// TODO create filter here.
const existingFilterIndex = filters.findIndex(t => {
if (t.type == 'Composite') {
const compositeFilter = t as ICompositeFilter;
return compositeFilter.filters && compositeFilter.filters.length
&& compositeFilter[0].path == this.path;
} else {
return (t as ISimpleFilter).path == this.path;
}
});
if (existingFilterIndex == -1) {
// create it.
if(compositeF){
filters.push(compositeF);
}else{
filters.push(freshFilter);
}
} else {
// replace it.
if(compositeF){
filters[existingFilterIndex] = compositeF;
}else{
filters[existingFilterIndex] = freshFilter;
}
}
this.dataSource.query({
filters: filters,
page: 1
})
}
}

2
projects/poweredsoft/ngx-bootstrap/src/lib/dataSource-filter/number-filter/data-source-number-filter.component.html → projects/poweredsoft/ngx-bootstrap/src/lib/data-source-filter/number-filter/data-source-number-filter.component.html
View File

@ -1,5 +1,5 @@
<ng-template #popTemplate>
<form (ngSubmit)="applyFilter()">
<form (ngSubmit)="applyFilter()" novalidate>
<div class="container" >
<div class="row">
<select class="custom-select" title="Choose one of the following..." [(ngModel)]="filterType" [ngModelOptions]="{standalone: true}">

0
projects/poweredsoft/ngx-bootstrap/src/lib/dataSource-filter/number-filter/data-source-number-filter.component.scss → projects/poweredsoft/ngx-bootstrap/src/lib/data-source-filter/number-filter/data-source-number-filter.component.scss
View File

6
projects/poweredsoft/ngx-bootstrap/src/lib/dataSource-filter/number-filter/data-source-number-filter.component.ts → projects/poweredsoft/ngx-bootstrap/src/lib/data-source-filter/number-filter/data-source-number-filter.component.ts
View File

@ -1,6 +1,6 @@
import { Component, OnInit, Input, Output, EventEmitter, ElementRef, ViewChild } from '@angular/core';
import { IDataSource,IFilter } from '@poweredsoft/data';
import { ISimpleFilter } from '../../models/IFilter';
import { IDataSource,IFilter, ISimpleFilter } from '@poweredsoft/data';
@Component({
selector: 'psbx-ds-number-filter',
@ -11,7 +11,7 @@ export class DataSourceNumberFilterComponent implements OnInit {
@Input() dataSource : IDataSource<any>;
@Input() path:string;
filterType: string = 'Equals';
filterType: string = 'Equal';
filterValue: number = 0;
isFiltering: boolean;
filterTypes = [

2
projects/poweredsoft/ngx-bootstrap/src/lib/dataSource-filter/text-filter/data-source-text-filter.component.html → projects/poweredsoft/ngx-bootstrap/src/lib/data-source-filter/text-filter/data-source-text-filter.component.html
View File

@ -1,6 +1,6 @@
<ng-template #popTemplate>
<form (ngSubmit)="applyFilter(pop)">
<form (ngSubmit)="applyFilter(pop)" novalidate>
<div class="container" >
<div class="row">

0
projects/poweredsoft/ngx-bootstrap/src/lib/dataSource-filter/text-filter/data-source-text-filter.component.scss → projects/poweredsoft/ngx-bootstrap/src/lib/data-source-filter/text-filter/data-source-text-filter.component.scss
View File

2
projects/poweredsoft/ngx-bootstrap/src/lib/dataSource-filter/text-filter/data-source-text-filter.component.ts → projects/poweredsoft/ngx-bootstrap/src/lib/data-source-filter/text-filter/data-source-text-filter.component.ts
View File

@ -1,6 +1,6 @@
import { Component, OnInit, Input } from '@angular/core';
import { IDataSource} from '@poweredsoft/data';
import { ISimpleFilter } from '../../models/IFilter';
import { ISimpleFilter } from '@poweredsoft/data';
import { PopoverDirective } from 'ngx-bootstrap/popover';

0
projects/poweredsoft/ngx-bootstrap/src/lib/dataSource-sorting/data-source-sorting.module.ts → projects/poweredsoft/ngx-bootstrap/src/lib/data-source-sorting/data-source-sorting.module.ts
View File

0
projects/poweredsoft/ngx-bootstrap/src/lib/dataSource-sorting/ds-sorting/data-source-sorting.component.html → projects/poweredsoft/ngx-bootstrap/src/lib/data-source-sorting/ds-sorting/data-source-sorting.component.html
View File

0
projects/poweredsoft/ngx-bootstrap/src/lib/dataSource-sorting/ds-sorting/data-source-sorting.component.scss → projects/poweredsoft/ngx-bootstrap/src/lib/data-source-sorting/ds-sorting/data-source-sorting.component.scss
View File

0
projects/poweredsoft/ngx-bootstrap/src/lib/dataSource-sorting/ds-sorting/data-source-sorting.component.ts → projects/poweredsoft/ngx-bootstrap/src/lib/data-source-sorting/ds-sorting/data-source-sorting.component.ts
View File

61
projects/poweredsoft/ngx-bootstrap/src/lib/dataSource-filter/datetime-filter/data-source-datetime-filter.component.ts
View File

@ -1,61 +0,0 @@
import { Component, OnInit, Input } from '@angular/core';
import { IDataSource, ISimpleFilter } from '@poweredsoft/data';
@Component({
selector: 'psbx-ds-datetime-filter',
templateUrl: './data-source-datetime-filter.component.html',
styleUrls: ['./data-source-datetime-filter.component.scss']
})
export class DataSourceDatetimeFilterComponent {
@Input() path: string;
@Input() dataSource : IDataSource<any>;
filterPopUpOpened: boolean = false;
isFiltering: boolean;
filterValue: Date = null;
filterType: string = 'Equal';
filterTypes = [
{key:'equal', value: 'Equal'},
{key:'Greater Than', value: 'GreaterThan'},
{key:'Less Than', value: 'LessThan'},
{key:'Greater Than Equal', value: 'GreaterThanOrEqual'},
{key:'Less Than Equal', value: 'LessThanOrEqual'},
];
bsInlineValue = new Date();
bsInlineRangeValue: Date[];
maxDate = new Date();
constructor() {
this.maxDate.setDate(this.maxDate.getDate() + 7);
this.bsInlineRangeValue = [this.bsInlineValue, this.maxDate];
}
showTooltip(){
return "Filter by "+ this.path;
}
applyFilter(){
this.isFiltering = true;
const filters = this.dataSource.filters;
const existingFilter = filters.find(t => (t as ISimpleFilter).path == this.path) as ISimpleFilter;
if (existingFilter) {
existingFilter.type = this.filterType;
existingFilter.value = this.filterValue.toString()
} else {
filters.push(<ISimpleFilter>{
and: true,
type: this.filterType,
path: this.path,
value: this.filterValue.toString()
})
}
this.dataSource.query({
filters: filters,
page: 1
})
}
}

27
projects/poweredsoft/ngx-bootstrap/src/lib/form-group-command-modal/directives/form-group-command-modal.directive.ts
View File

@ -29,9 +29,10 @@ export class FormGroupCommandModalDirective {
@Input() refreshOnSuccess: boolean;
@Input() commandText: string;
@Input() cancelText: string;
@Input() isConfirmModal:boolean;
@Output() formCreate: EventEmitter<IModelFormCreateEvent> = new EventEmitter<IModelFormCreateEvent>();
@Output() success: EventEmitter<any> = new EventEmitter<any>();
constructor(private modalService: BsModalService) { }
@HostListener('click')
@ -47,25 +48,6 @@ export class FormGroupCommandModalDirective {
shouldSetCommandModel: true
}
if(this.isConfirmModal){
const initialState = {
dataSource: this.dataSource,
command: this.command,
template: this.template,
title: this.commandTitle,
refreshOnSuccess: this.refreshOnSuccess === undefined ? true : this.refreshOnSuccess,
commandText: this.commandText || 'OK',
cancelText: this.cancelText || 'Cancel',
commandModel:commandModel
};
this.modalService.show(ConfirmModalComponent, {
animated: this.animated === undefined ? true : this.animated,
initialState
});
}else{
this.formCreate.emit(event);
if (event.formGroup == null)
throw new Error('form group should be set, after form createEvent');
@ -82,14 +64,15 @@ export class FormGroupCommandModalDirective {
commandText: this.commandText || 'OK',
cancelText: this.cancelText || 'Cancel',
modelForm: event.formGroup,
commandModel:commandModel
commandModel:commandModel,
successEmitter: this.success
};
this.modalService.show(FormGroupCommandModalComponent, {
animated: this.animated === undefined ? true : this.animated,
initialState
});
}
}, error => {
});

10
projects/poweredsoft/ngx-bootstrap/src/lib/form-group-command-modal/form-group-command-modal/form-group-command-modal.component.ts
View File

@ -1,4 +1,4 @@
import { Component, OnInit, TemplateRef, OnDestroy } from '@angular/core';
import { Component, OnInit, TemplateRef, OnDestroy, EventEmitter } from '@angular/core';
import { BsModalRef } from 'ngx-bootstrap/modal';
import { IDataSource } from '@poweredsoft/data';
import { finalize } from 'rxjs/operators';
@ -24,10 +24,13 @@ export class FormGroupCommandModalComponent implements OnInit, OnDestroy {
cancelText: string;
errorMessage: string;
commandModel:any;
successEmitter: EventEmitter<any>;
private _notifyMessage: Subscription;
private _validationError: Subscription;
constructor(public modalRef: BsModalRef) { }
ngOnDestroy(): void {
@ -71,11 +74,12 @@ export class FormGroupCommandModalComponent implements OnInit, OnDestroy {
this.loading = false;
})
)
.subscribe(success => {
.subscribe(commandResult => {
if (this.refreshOnSuccess)
this.dataSource.refresh();
this.modalRef.hide();
this.successEmitter.emit(commandResult);
}, fail => {
// you do not want to close on failure.. so just ignore..
});

9
projects/poweredsoft/ngx-bootstrap/src/lib/models/IFilter.ts
View File

@ -1,9 +0,0 @@
export interface IFilter {
type: string;
and?: boolean;
}
export interface ISimpleFilter extends IFilter {
path: string;
value: any;
}

6
projects/poweredsoft/ngx-bootstrap/src/lib/pagination/psbxPagination.module.ts → projects/poweredsoft/ngx-bootstrap/src/lib/pagination/pagination.module.ts
View File

@ -1,7 +1,7 @@
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';
import { PaginationModule as ValorPaginationModule } from 'ngx-bootstrap/pagination';
import { FormsModule } from '@angular/forms';
@ -9,9 +9,9 @@ import { FormsModule } from '@angular/forms';
declarations: [DataSourcePaginationComponent],
imports: [
CommonModule,
PaginationModule.forRoot(),
ValorPaginationModule.forRoot(),
FormsModule
],
exports:[DataSourcePaginationComponent]
})
export class psbxPaginationModule { }
export class PaginationModule { }

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

@ -6,16 +6,17 @@ 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';
export * from './lib/pagination/psbxPagination.module';
export * from './lib/pagination/Pagination.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/confirm-modal/confirm-modal.directive';
export * from './lib/spinner/spinner.module';
export * from './lib/spinner/spinner/spinner.component';
export * from './lib/dataSource-filter/data-source-filter.module';
export * from './lib/dataSource-filter/text-filter/data-source-text-filter.component';
export * from './lib/dataSource-filter/number-filter/data-source-number-filter.component';
export * from './lib/dataSource-filter/datetime-filter/data-source-datetime-filter.component';
export * from './lib/dataSource-sorting/data-source-sorting.module';
export * from './lib/dataSource-sorting/ds-sorting/data-source-sorting.component';
export * from './lib/data-source-filter/data-source-filter.module';
export * from './lib/data-source-filter/text-filter/data-source-text-filter.component';
export * from './lib/data-source-filter/number-filter/data-source-number-filter.component';
export * from './lib/data-source-filter/datetime-filter/data-source-datetime-filter.component';
export * from './lib/data-source-sorting/data-source-sorting.module';
export * from './lib/data-source-sorting/ds-sorting/data-source-sorting.component';
export * from './lib/command/command.module';
export * from './lib/command/directives/command.directive';

7
src/app/command-modal-demo/command-modal-demo.module.ts
View File

@ -5,7 +5,7 @@ import { CommandModalDemoRoutingModule } from './command-modal-demo-routing.modu
import { DataGridModule } from '@poweredsoft/ngx-cdk-ui';
import {FormsModule} from '@angular/forms';
import { CommandModalModule, psbxPaginationModule, ConfirmModalModule } from '@poweredsoft/ngx-bootstrap';
import { CommandModalModule, PaginationModule, ConfirmModalModule,CommandModule } from '@poweredsoft/ngx-bootstrap';
@NgModule({
declarations: [CommandModalDemoComponent],
imports: [
@ -14,8 +14,9 @@ import { CommandModalModule, psbxPaginationModule, ConfirmModalModule } from '@p
DataGridModule,
CommandModalModule,
FormsModule,
psbxPaginationModule,
ConfirmModalModule
PaginationModule,
ConfirmModalModule,
CommandModule
]
})
export class CommandModalDemoModule { }

19
src/app/command-modal-demo/command-modal-demo/command-modal-demo.component.html
View File

@ -26,11 +26,26 @@
<ng-container psDataGridCol="commands">
<ng-container *psDataGridColHeader>Actions</ng-container>
<ng-container *psDataGridCell="let model">
<div class="btn-group">
<button class="btn-primary btn" psbxCommandModal [commandTitle]="'Change ' + model.name + ' name'" commandText="Update"
[dataSource]="merchantDataSource" command="changeMerchant" [model]="model" [template]="changeName">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" >RemoveIt</button>
<button class="btn-danger btn" psbxCommand
[dataSource]="merchantDataSource"
command="removeMerchant"
[model]="model"
[confirm]="true"
confirmMessage="Are you sure you want to delete this merchant?"
>RemoveIt</button>
<button class="btn-warning btn" psbxCommand
[dataSource]="merchantDataSource"
command="removeMerchant"
[model]="model"
>Remove Without confirmation</button> </div>
</ng-container>
</ng-container>
<ng-container *psDataGridFooter>

2
src/app/command-modal-demo/command-modal-demo/command-modal-demo.component.ts
View File

@ -45,7 +45,7 @@ export class CommandModalDemoComponent implements OnInit,OnDestroy {
ngOnInit() {
this.merchantDataSource.refresh();
this.merchantDataSource.data$.subscribe(newData => {
this._dataSubscription = this.merchantDataSource.data$.subscribe(newData => {
if (newData)
this.pages = new Array(newData.numberOfPages);
});

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

@ -50,7 +50,7 @@ export class DataGridDemoHomeComponent implements OnInit, OnDestroy {
console.log('merchant data source event loading', isLoading);
});
this.merchantDataSource.data$.subscribe(receivedData => {
this._dataSubscription = this.merchantDataSource.data$.subscribe(receivedData => {
console.log('new data is coming from the server', receivedData);
});
this.merchantDataSource.refresh();

5
src/app/form-group-modal-demo/form-group-modal-demo.module.ts
View File

@ -3,7 +3,7 @@ import { CommonModule } from '@angular/common';
import { FormGroupModalDemoComponent } from './form-group-modal-demo/form-group-modal-demo.component';
import { FormGroupModalDemoRoutingModule } from './form-group-modal-demo-routing.module'
import { DataGridModule } from '@poweredsoft/ngx-cdk-ui';
import { FormGroupCommandModalModule,CommandModalModule, psbxPaginationModule } from '@poweredsoft/ngx-bootstrap';
import { FormGroupCommandModalModule, PaginationModule, CommandModule } from '@poweredsoft/ngx-bootstrap';
import { ReactiveFormsModule } from '@angular/forms';
import { ConfirmModalModule } from 'projects/poweredsoft/ngx-bootstrap/src/public-api';
@ -17,8 +17,9 @@ import { ConfirmModalModule } from 'projects/poweredsoft/ngx-bootstrap/src/publi
DataGridModule,
FormGroupCommandModalModule,
ReactiveFormsModule,
psbxPaginationModule,
PaginationModule,
ConfirmModalModule,
CommandModule
]
})

4
src/app/form-group-modal-demo/form-group-modal-demo/form-group-modal-demo.component.html
View File

@ -23,8 +23,8 @@
<ng-container *psDataGridCell="let model">
<button class="btn-success btn" psbxFormGroupCommandModal [commandTitle]="'Change ' + model.name + ' name'" commandText="Update"
[dataSource]="merchantDataSource" command="changeMerchant" (formCreate)="onFormCreate($event)" [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" >Delete!</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" >Delete!</button> -->
</ng-container>
</ng-container>
<ng-container *psDataGridFooter>

2
src/app/form-group-modal-demo/form-group-modal-demo/form-group-modal-demo.component.ts
View File

@ -31,7 +31,7 @@ export class FormGroupModalDemoComponent implements OnInit,OnDestroy {
ngOnInit(): void {
this.merchantDataSource.refresh();
this.merchantDataSource.data$.subscribe(newData => {
this._dataSubscription = this.merchantDataSource.data$.subscribe(newData => {
if (newData)
this.pages = new Array(newData.numberOfPages);
});

7
src/app/grid-filter&sorting-demo/grid-filter-demo.module.ts
View File

@ -3,7 +3,7 @@ import { CommonModule } from '@angular/common';
import { GridFilterDemoRoutingModule } from './grid-filter-demo-routing.module';
import { GridFilterDemoComponent } from './grid-filter-demo/grid-filter-demo.component';
import { DataSourceFilterModule, psbxPaginationModule, CommandModalModule, ConfirmModalModule, SpinnerModule, DataSourceSortingModule } from '@poweredsoft/ngx-bootstrap';
import { DataSourceFilterModule, PaginationModule, CommandModalModule, ConfirmModalModule, SpinnerModule, DataSourceSortingModule, CommandModule } from '@poweredsoft/ngx-bootstrap';
import { DataGridModule } from '@poweredsoft/ngx-cdk-ui';
import { FormsModule } from '@angular/forms';
@ -13,13 +13,14 @@ import { FormsModule } from '@angular/forms';
CommonModule,
GridFilterDemoRoutingModule,
DataSourceFilterModule,
psbxPaginationModule,
PaginationModule,
DataGridModule,
CommandModalModule,
ConfirmModalModule,
FormsModule,
SpinnerModule,
DataSourceSortingModule
DataSourceSortingModule,
CommandModule
]
})
export class GridFilterDemoModule { }

4
src/app/grid-filter&sorting-demo/grid-filter-demo/grid-filter-demo.component.html
View File

@ -55,9 +55,9 @@
<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
<!-- <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>
[dataSource]="merchantDataSource" command="removeMerchant" [model]="model">Remove</button> -->
</div>
</ng-container>

7
src/app/ng-select-demo/ng-select-demo/ng-select-demo.component.html
View File

@ -30,10 +30,13 @@ selected: {{ myForm.value | json }}
selected: {{ myValue3 | json }}
<h2>Single Select Demo | notFound Template</h2>
<ps-ng-select [dataSource]="merchantDataSource3" bindLabel="name" bindValue="id" [(ngModel)]="myValue2" [serverFiltering]="true">
<ps-ng-select [dataSource]="merchantDataSource3" bindLabel="name" bindValue="id" [(ngModel)]="myValue2" [serverFiltering]="false">
<div *psNgNotFoundTemplate="let searchTerm">
<div class="ng-option disabled">
No data found for "{{searchTerm}}" <button class="btn btn-success">Create New {{searchTerm}}</button>
No data found for "{{searchTerm}}" <button class="btn btn-success"
psbxCommand
(success)="myValue2 = $event">
Create New {{searchTerm}}</button>
</div>
</div>
</ps-ng-select>

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

@ -4,7 +4,7 @@ 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,SpinnerModule } from '@poweredsoft/ngx-bootstrap';
import { PaginationModule, CommandModalModule, ConfirmModalModule,SpinnerModule } from '@poweredsoft/ngx-bootstrap';
import { FormsModule } from '@angular/forms';
import { ModalModule } from 'ngx-bootstrap/modal';
@ -16,7 +16,7 @@ import { ModalModule } from 'ngx-bootstrap/modal';
imports: [
CommonModule,
PaginationDemoRoutingModule,
psbxPaginationModule,
PaginationModule,
DataGridModule,
CommandModalModule,
ConfirmModalModule,

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

@ -42,8 +42,8 @@
<ng-container psDataGridCol="commands">
<ng-container *psDataGridColHeader>Actions</ng-container>
<ng-container *psDataGridCell="let model">
<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>
<!-- <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>

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

@ -31,7 +31,7 @@ export class PaginationDemoComponent implements OnInit, OnDestroy {
ngOnInit() {
this.merchantDataSource.refresh();
this.merchantDataSource.data$.subscribe(newData => {
this._dataSubscription = this.merchantDataSource.data$.subscribe(newData => {
if (newData)
this.pages = new Array(newData.numberOfPages);
});