commit for current

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

View File

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

View File

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

View File

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

View File

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

View File

@ -5,6 +5,6 @@
export * from './lib/ps-ng-select/ps-ng-select.module'; 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/ng-select/ng-select.component';
export * from './lib/ps-ng-select/multi-select/multi-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/directives/select-label-template.directive';
export * from './lib/ps-ng-select/select-option-template.directive'; export * from './lib/ps-ng-select/directives/select-option-template.directive';
export * from './lib/ps-ng-select/not-found-template.directive'; export * from './lib/ps-ng-select/directives/not-found-template.directive';

View File

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

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();
});
});

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

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

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.");
}
}

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 { }

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();
}
}
}

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 { BsModalRef, BsModalService } from 'ngx-bootstrap/modal';
import { Observer } from 'rxjs'; import { Observer } from 'rxjs';
@ -27,11 +27,11 @@ export class ConfirmModalComponent implements OnInit {
} }
get yesButtonClass() { get yesButtonClass() {
return `btn btn-sm btn-${this.yesClass}` return `btn btn-${this.yesClass}`
} }
get noButtonClass() { get noButtonClass() {
return `btn btn-sm btn-${this.noClass}` return `btn btn-${this.noClass}`
} }
confirm(): void { confirm(): void {

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 => {
});
}
}

View File

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

View File

@ -1,4 +1,5 @@
<ng-template #popTemplate> <ng-template #popTemplate>
<form (ngSubmit)="applyFilter(pop)" novalidate>
<div class="container" > <div class="container" >
<div class="row"> <div class="row">
<select class="custom-select" title="Choose one of the following..." [(ngModel)]="filterType" [ngModelOptions]="{standalone: true}"> <select class="custom-select" title="Choose one of the following..." [(ngModel)]="filterType" [ngModelOptions]="{standalone: true}">
@ -6,26 +7,55 @@
</select> </select>
</div> </div>
<div class="row mt-1 mb-1"> <div class="row mt-1 mb-1">
<input *ngIf="filterType =='GreaterThan' || filterType == 'LessThan'" type="text" <input *ngIf="filterType !='Range'"
type="text"
placeholder="Datepicker" placeholder="Datepicker"
class="form-control" class="form-control"
bsDatepicker [(ngModel)]="filterValue"> bsDatepicker [(ngModel)]="filterValue" [ngModelOptions]="{standalone: true}">
</div> </div>
<div class="row mt-1 mb-1"> <div class="row mt-1 mb-1">
<input *ngIf="filterType =='Equal'" type="text" <input *ngIf="filterType =='Range'" type="text"
placeholder="Daterangepicker" placeholder="Daterangepicker"
class="form-control" class="form-control"
bsDaterangepicker [(ngModel)]="filterValue"> bsDaterangepicker [(ngModel)]="filterValue" [ngModelOptions]="{standalone: true}">
</div> </div>
<div class="row mt-2"> <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-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>
</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> </ng-template>
<button [popover]="popTemplate" class="btn btn-default" [(isOpen)]="filterPopUpOpened" [outsideClick]="true" #pop="bs-popover"> <button [popover]="popTemplate" class="btn btn-default" [(isOpen)]="filterPopUpOpened" [outsideClick]="true" #pop="bs-popover">

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
})
}
}

View File

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

View File

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

View File

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

View File

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

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
})
}
}

View File

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

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

View File

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

View File

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

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/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/form-group-command-modal.module';
export * from './lib/form-group-command-modal/directives/form-group-command-modal.directive'; 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/pagination/data-source-pagination/data-source-pagination.component';
export * from './lib/confirm-modal/confirm-modal.module'; export * from './lib/confirm-modal/confirm-modal.module';
export * from './lib/confirm-modal/confirm-modal.service'; 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.module';
export * from './lib/spinner/spinner/spinner.component'; export * from './lib/spinner/spinner/spinner.component';
export * from './lib/dataSource-filter/data-source-filter.module'; export * from './lib/data-source-filter/data-source-filter.module';
export * from './lib/dataSource-filter/text-filter/data-source-text-filter.component'; export * from './lib/data-source-filter/text-filter/data-source-text-filter.component';
export * from './lib/dataSource-filter/number-filter/data-source-number-filter.component'; export * from './lib/data-source-filter/number-filter/data-source-number-filter.component';
export * from './lib/dataSource-filter/datetime-filter/data-source-datetime-filter.component'; export * from './lib/data-source-filter/datetime-filter/data-source-datetime-filter.component';
export * from './lib/dataSource-sorting/data-source-sorting.module'; export * from './lib/data-source-sorting/data-source-sorting.module';
export * from './lib/dataSource-sorting/ds-sorting/data-source-sorting.component'; 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';

View File

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

View File

@ -26,11 +26,26 @@
<ng-container psDataGridCol="commands"> <ng-container psDataGridCol="commands">
<ng-container *psDataGridColHeader>Actions</ng-container> <ng-container *psDataGridColHeader>Actions</ng-container>
<ng-container *psDataGridCell="let model"> <ng-container *psDataGridCell="let model">
<div class="btn-group">
<button class="btn-primary btn" psbxCommandModal [commandTitle]="'Change ' + model.name + ' name'" commandText="Update" <button class="btn-primary btn" psbxCommandModal [commandTitle]="'Change ' + model.name + ' name'" commandText="Update"
[dataSource]="merchantDataSource" command="changeMerchant" [model]="model" [template]="changeName">Change</button> [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" <button class="btn-danger btn" psbxCommand
[dataSource]="merchantDataSource" command="removeMerchant" [model]="model" >RemoveIt</button> [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> </ng-container>
<ng-container *psDataGridFooter> <ng-container *psDataGridFooter>

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

@ -55,9 +55,9 @@
<button class="btn-info btn" psbxCommandModal [commandTitle]="'Change ' + model.name + ' name'" <button class="btn-info btn" psbxCommandModal [commandTitle]="'Change ' + model.name + ' name'"
commandText="Update" [dataSource]="merchantDataSource" command="changeMerchant" [model]="model" commandText="Update" [dataSource]="merchantDataSource" command="changeMerchant" [model]="model"
[template]="theModal">Change</button> [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" [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> </div>
</ng-container> </ng-container>

View File

@ -30,10 +30,13 @@ selected: {{ myForm.value | json }}
selected: {{ myValue3 | json }} selected: {{ myValue3 | json }}
<h2>Single Select Demo | notFound Template</h2> <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 *psNgNotFoundTemplate="let searchTerm">
<div class="ng-option disabled"> <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>
</div> </div>
</ps-ng-select> </ps-ng-select>

View File

@ -4,7 +4,7 @@ import { CommonModule } from '@angular/common';
import { PaginationDemoRoutingModule } from './pagination-demo-routing.module'; import { PaginationDemoRoutingModule } from './pagination-demo-routing.module';
import { PaginationDemoComponent } from './pagination-demo/pagination/pagination-demo.component'; import { PaginationDemoComponent } from './pagination-demo/pagination/pagination-demo.component';
import { DataGridModule } from '@poweredsoft/ngx-cdk-ui'; 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 { FormsModule } from '@angular/forms';
import { ModalModule } from 'ngx-bootstrap/modal'; import { ModalModule } from 'ngx-bootstrap/modal';
@ -16,7 +16,7 @@ import { ModalModule } from 'ngx-bootstrap/modal';
imports: [ imports: [
CommonModule, CommonModule,
PaginationDemoRoutingModule, PaginationDemoRoutingModule,
psbxPaginationModule, PaginationModule,
DataGridModule, DataGridModule,
CommandModalModule, CommandModalModule,
ConfirmModalModule, ConfirmModalModule,

View File

@ -42,8 +42,8 @@
<ng-container psDataGridCol="commands"> <ng-container psDataGridCol="commands">
<ng-container *psDataGridColHeader>Actions</ng-container> <ng-container *psDataGridColHeader>Actions</ng-container>
<ng-container *psDataGridCell="let model"> <ng-container *psDataGridCell="let model">
<button class="btn-danger btn" psbxConfirmModal [commandTitle]="'Are you sure you wnat to remove ' + model.name + '?'" commandText="Remove" <!-- <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> -->
</ng-container> </ng-container>
</ng-container> </ng-container>

View File

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