commit for current
This commit is contained in:
parent
66d34d1019
commit
f702608640
@ -1,4 +1,4 @@
|
|||||||
import { Directive, TemplateRef, Input } from '@angular/core';
|
import { Directive, TemplateRef } from '@angular/core';
|
||||||
|
|
||||||
@Directive({
|
@Directive({
|
||||||
selector: '[psNgSelectLabel]'
|
selector: '[psNgSelectLabel]'
|
@ -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',
|
||||||
|
@ -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({
|
||||||
|
@ -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';
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
@ -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';
|
||||||
|
@ -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 { }
|
||||||
|
@ -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();
|
|
||||||
});
|
|
||||||
});
|
|
@ -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..
|
||||||
});
|
});
|
||||||
|
@ -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,
|
||||||
|
@ -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.");
|
|
||||||
}
|
|
||||||
|
|
||||||
}
|
|
@ -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 { }
|
@ -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();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
@ -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 {
|
||||||
|
@ -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 => {
|
|
||||||
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
}
|
|
@ -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 { }
|
||||||
|
@ -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">
|
@ -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
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
}
|
@ -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}">
|
@ -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 = [
|
@ -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">
|
@ -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';
|
||||||
|
|
||||||
|
|
@ -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
|
|
||||||
})
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
}
|
|
@ -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 => {
|
||||||
|
|
||||||
});
|
});
|
||||||
|
@ -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..
|
||||||
});
|
});
|
||||||
|
@ -1,9 +0,0 @@
|
|||||||
export interface IFilter {
|
|
||||||
type: string;
|
|
||||||
and?: boolean;
|
|
||||||
}
|
|
||||||
|
|
||||||
export interface ISimpleFilter extends IFilter {
|
|
||||||
path: string;
|
|
||||||
value: any;
|
|
||||||
}
|
|
@ -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 { }
|
@ -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';
|
@ -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 { }
|
||||||
|
@ -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>
|
||||||
|
@ -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);
|
||||||
});
|
});
|
||||||
|
@ -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();
|
||||||
|
@ -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
|
||||||
|
|
||||||
]
|
]
|
||||||
})
|
})
|
||||||
|
@ -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>
|
||||||
|
@ -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);
|
||||||
});
|
});
|
||||||
|
@ -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 { }
|
||||||
|
@ -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>
|
||||||
|
@ -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>
|
||||||
|
@ -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,
|
||||||
|
@ -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>
|
||||||
|
|
||||||
|
@ -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);
|
||||||
});
|
});
|
||||||
|
Loading…
Reference in New Issue
Block a user