number filter & datetime filter
This commit is contained in:
Yubing325
parent
1e6e02cf69
commit
9e02901937
@ -1,24 +1,66 @@
|
||||
<div class="row">
|
||||
<div class="col-xs-12 col-12 col-md-4 form-group">
|
||||
<input type="text"
|
||||
placeholder="Datepicker"
|
||||
class="form-control"
|
||||
bsDatepicker>
|
||||
</div>
|
||||
<div class="col-xs-12 col-12 col-md-4 form-group">
|
||||
<input type="text"
|
||||
placeholder="Daterangepicker"
|
||||
class="form-control"
|
||||
bsDaterangepicker>
|
||||
</div>
|
||||
<ng-template #popTemplate>
|
||||
<div class="container" >
|
||||
<div class="row">
|
||||
<div class="form-group">
|
||||
<input type="text"
|
||||
placeholder="Datepicker"
|
||||
class="form-control"
|
||||
bsDatepicker [(ngModel)]="filterValue">
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<input type="text"
|
||||
placeholder="Daterangepicker"
|
||||
class="form-control"
|
||||
bsDaterangepicker>
|
||||
</div>
|
||||
<div class="row mt-2">
|
||||
<button class="btn btn-primary mr-1" >Filter</button>
|
||||
<button type="button" class="btn btn-warning" *ngIf="!isFiltering" (click)="pop.hide()">Hide</button>
|
||||
<button type="button" class="btn btn-dark" *ngIf="isFiltering">Clear</button>
|
||||
</div>
|
||||
</div>
|
||||
</ng-template>
|
||||
|
||||
<!--
|
||||
<div class="row">
|
||||
<div class="pr-3 pb-3">
|
||||
<bs-datepicker-inline [bsValue]="bsInlineValue"></bs-datepicker-inline>
|
||||
</div>
|
||||
<div class="pr-3 pb-3">
|
||||
<bs-daterangepicker-inline [bsValue]="bsInlineRangeValue"></bs-daterangepicker-inline>
|
||||
</div>
|
||||
</div> -->
|
||||
<button [popover]="popTemplate" class="btn btn-default" [(isOpen)]="filterPopUpOpened" [outsideClick]="true" #pop="bs-popover">
|
||||
<svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
|
||||
viewBox="0 0 477.875 477.875" style="enable-background:new 0 0 477.875 477.875;" xml:space="preserve" fill-opacity="0.5" [tooltip]="showTooltip()" [tooltipEnable]="!filterPopUpOpened" width="13px" height="13px" [ngStyle]="{'fill': isFiltering ? 'red': 'black', 'fill-opacity': isFiltering ? '1': '0.5'}">
|
||||
<g>
|
||||
<g>
|
||||
<path d="M460.804,0H17.071C7.645,0,0.004,7.641,0.004,17.067V102.4c-0.004,4.842,2.05,9.458,5.649,12.698l165.018,148.514V460.8
|
||||
c-0.004,9.426,7.633,17.07,17.059,17.075c2.651,0.001,5.266-0.615,7.637-1.8l102.4-51.2c5.786-2.891,9.441-8.806,9.438-15.275
|
||||
V263.612l165.018-148.48c3.608-3.247,5.662-7.878,5.649-12.732V17.067C477.871,7.641,470.23,0,460.804,0z"/>
|
||||
</g>
|
||||
</g>
|
||||
<g>
|
||||
</g>
|
||||
<g>
|
||||
</g>
|
||||
<g>
|
||||
</g>
|
||||
<g>
|
||||
</g>
|
||||
<g>
|
||||
</g>
|
||||
<g>
|
||||
</g>
|
||||
<g>
|
||||
</g>
|
||||
<g>
|
||||
</g>
|
||||
<g>
|
||||
</g>
|
||||
<g>
|
||||
</g>
|
||||
<g>
|
||||
</g>
|
||||
<g>
|
||||
</g>
|
||||
<g>
|
||||
</g>
|
||||
<g>
|
||||
</g>
|
||||
<g>
|
||||
</g>
|
||||
</svg>
|
||||
</button>
|
||||
@ -1,4 +1,5 @@
|
||||
import { Component, OnInit } from '@angular/core';
|
||||
import { Component, OnInit, Input } from '@angular/core';
|
||||
import { IDataSource, ISimpleFilter } from '@poweredsoft/data';
|
||||
|
||||
@Component({
|
||||
selector: 'psbx-datetime-filter',
|
||||
@ -7,6 +8,17 @@ import { Component, OnInit } from '@angular/core';
|
||||
})
|
||||
export class DatetimeFilterComponent {
|
||||
|
||||
@Input() path: string;
|
||||
@Input() dataSource : IDataSource<any>;
|
||||
filterPopUpOpened: boolean = false;
|
||||
isFiltering: boolean;
|
||||
filterValue: Date = null;
|
||||
filterType: string = 'Equal';
|
||||
filterTypes = [
|
||||
{key:'equal', value: 'Equal'},
|
||||
];
|
||||
|
||||
|
||||
bsInlineValue = new Date();
|
||||
bsInlineRangeValue: Date[];
|
||||
maxDate = new Date();
|
||||
@ -15,5 +27,31 @@ export class DatetimeFilterComponent {
|
||||
this.maxDate.setDate(this.maxDate.getDate() + 7);
|
||||
this.bsInlineRangeValue = [this.bsInlineValue, this.maxDate];
|
||||
}
|
||||
showTooltip(){
|
||||
return "Filter by "+ this.path;
|
||||
}
|
||||
|
||||
applyFilter(){debugger;
|
||||
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
|
||||
})
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
|
||||
@ -1,57 +1,62 @@
|
||||
<ng-template #popTemplate>
|
||||
<select class="custom-select" title="Choose one of the following..." [(ngModel)]="filterType">
|
||||
<option *ngFor="let filter of filterTypes">{{filter}}</option>
|
||||
</select>
|
||||
|
||||
<input type="text" class="form-control" placeholder="column value" aria-label="Username"
|
||||
<div class="container" >
|
||||
<div class="row">
|
||||
<select class="custom-select" title="Choose one of the following..." [(ngModel)]="filterType">
|
||||
<option *ngFor="let filter of filterTypes" [value]="filter.value">{{filter.key}}</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<div class="row mt-1 mb-1">
|
||||
<input type="number" class="form-control" placeholder="column value" aria-label="number"
|
||||
aria-describedby="basic-addon1" [(ngModel)]="filterValue">
|
||||
<button class="btn btn-primary" (click)="applyFilter()">Filter</button>
|
||||
</div>
|
||||
|
||||
<button class="btn btn-primary mr-1" (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>
|
||||
</ng-template>
|
||||
|
||||
|
||||
<button [popover]="popTemplate" popoverTitle="Template ref content inside" [outsideClick]="true" >
|
||||
<svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px"
|
||||
y="0px" viewBox="0 0 477.875 477.875" style="enable-background:new 0 0 477.875 477.875;" xml:space="preserve"
|
||||
width="13px" height="13px">
|
||||
<g>
|
||||
<g>
|
||||
<path d="M460.804,0H17.071C7.645,0,0.004,7.641,0.004,17.067V102.4c0.001,4.836,2.054,9.445,5.649,12.681l165.018,148.514V460.8
|
||||
<button [popover]="popTemplate" class="btn btn-default" [(isOpen)]="filterIsOpenned" [outsideClick]="true" #pop="bs-popover">
|
||||
<svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
|
||||
viewBox="0 0 477.875 477.875" style="enable-background:new 0 0 477.875 477.875;" xml:space="preserve" fill-opacity="0.5" [tooltip]="showTooltip()" [tooltipEnable]="!filterIsOpenned" width="13px" height="13px" [ngStyle]="{'fill': isFiltering ? 'red': 'black', 'fill-opacity': isFiltering ? '1': '0.5'}">
|
||||
<g>
|
||||
<g>
|
||||
<path d="M460.804,0H17.071C7.645,0,0.004,7.641,0.004,17.067V102.4c-0.004,4.842,2.05,9.458,5.649,12.698l165.018,148.514V460.8
|
||||
c-0.004,9.426,7.633,17.07,17.059,17.075c2.651,0.001,5.266-0.615,7.637-1.8l102.4-51.2c5.786-2.891,9.441-8.806,9.438-15.275
|
||||
V263.595l165.018-148.48c3.604-3.243,5.658-7.866,5.649-12.715V17.067C477.871,7.641,470.23,0,460.804,0z M443.737,94.805
|
||||
L278.72,243.285c-3.604,3.243-5.657,7.866-5.649,12.715v143.053l-68.267,34.133V256c-0.001-4.836-2.054-9.445-5.649-12.68
|
||||
L34.137,94.805V34.133h409.6V94.805z" />
|
||||
</g>
|
||||
</g>
|
||||
<g>
|
||||
</g>
|
||||
<g>
|
||||
</g>
|
||||
<g>
|
||||
</g>
|
||||
<g>
|
||||
</g>
|
||||
<g>
|
||||
</g>
|
||||
<g>
|
||||
</g>
|
||||
<g>
|
||||
</g>
|
||||
<g>
|
||||
</g>
|
||||
<g>
|
||||
</g>
|
||||
<g>
|
||||
</g>
|
||||
<g>
|
||||
</g>
|
||||
<g>
|
||||
</g>
|
||||
<g>
|
||||
</g>
|
||||
<g>
|
||||
</g>
|
||||
<g>
|
||||
</g>
|
||||
</svg>
|
||||
|
||||
</button>{{columnName}}
|
||||
V263.612l165.018-148.48c3.608-3.247,5.662-7.878,5.649-12.732V17.067C477.871,7.641,470.23,0,460.804,0z"/>
|
||||
</g>
|
||||
</g>
|
||||
<g>
|
||||
</g>
|
||||
<g>
|
||||
</g>
|
||||
<g>
|
||||
</g>
|
||||
<g>
|
||||
</g>
|
||||
<g>
|
||||
</g>
|
||||
<g>
|
||||
</g>
|
||||
<g>
|
||||
</g>
|
||||
<g>
|
||||
</g>
|
||||
<g>
|
||||
</g>
|
||||
<g>
|
||||
</g>
|
||||
<g>
|
||||
</g>
|
||||
<g>
|
||||
</g>
|
||||
<g>
|
||||
</g>
|
||||
<g>
|
||||
</g>
|
||||
<g>
|
||||
</g>
|
||||
</svg>
|
||||
</button>
|
||||
@ -1,4 +1,4 @@
|
||||
import { Component, OnInit, Input, Output, EventEmitter } from '@angular/core';
|
||||
import { Component, OnInit, Input, Output, EventEmitter, ElementRef, ViewChild } from '@angular/core';
|
||||
import { IDataSource,IFilter } from '@poweredsoft/data';
|
||||
import { ISimpleFilter } from '../../models/IFilter';
|
||||
|
||||
@ -9,29 +9,62 @@ import { ISimpleFilter } from '../../models/IFilter';
|
||||
})
|
||||
export class NumberFilterComponent implements OnInit {
|
||||
@Input() dataSource : IDataSource<any>;
|
||||
@Output() onFilter: EventEmitter<IFilter> = new EventEmitter();
|
||||
@Input() columnName:string;
|
||||
@Input() path:string;
|
||||
|
||||
filterType: string = 'Contains';
|
||||
filterValue: string = null;
|
||||
|
||||
get filterTypes(){
|
||||
return ["contains","equals","startsWith","GreaterThan","LessThan"]
|
||||
}
|
||||
filterType: string = 'Equals';
|
||||
filterValue: number = 0;
|
||||
isFiltering: boolean;
|
||||
filterTypes = [
|
||||
{key:'Equals', value: 'Equal'},
|
||||
{key:'Greater Than', value: 'GreaterThan'},
|
||||
{key:'Less Than', value: 'LessThan'},
|
||||
{key:'Greater Than Equal', value: 'GreaterThanOrEqual'},
|
||||
{key:'Less Than Equal', value: 'LessThanOrEqual'},
|
||||
];
|
||||
filterIsOpenned: boolean = false;
|
||||
|
||||
constructor() { }
|
||||
|
||||
|
||||
ngOnInit(): void {
|
||||
|
||||
|
||||
}
|
||||
|
||||
clearFilter() {
|
||||
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(){
|
||||
this.onFilter.emit(<ISimpleFilter>{
|
||||
path: this.columnName,
|
||||
value: this.filterValue,
|
||||
type: this.filterType,
|
||||
and: true
|
||||
});
|
||||
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
|
||||
})
|
||||
}
|
||||
|
||||
showTooltip(){
|
||||
return "Filter by "+ this.path;
|
||||
}
|
||||
}
|
||||
|
||||
@ -2,7 +2,7 @@
|
||||
<div class="container" >
|
||||
<div class="row">
|
||||
<select class="custom-select" title="Choose one of the following..." [(ngModel)]="filterType">
|
||||
<option *ngFor="let filter of filterTypes">{{filter.value}}</option>
|
||||
<option *ngFor="let filter of filterTypes" [value]="filter.value">{{filter.key}}</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
|
||||
@ -17,10 +17,10 @@ export class TextFilterComponent implements OnInit {
|
||||
filterValue: string = null;
|
||||
isFiltering: boolean;
|
||||
filterTypes = [
|
||||
{key:'contains', value: 'Contains'},
|
||||
{key:'equal', value: 'Equal'},
|
||||
{key:'startsWith', value: 'Starts With'},
|
||||
{key:'endsWith', value: 'Ends With'}
|
||||
{key:'Contains', value: 'Contains'},
|
||||
{key:'Equals', value: 'Equal'},
|
||||
{key:'Starts With', value: 'startsWith'},
|
||||
{key:'Ends With', value: 'endsWith'}
|
||||
];
|
||||
filterIsOpenned: boolean = false;
|
||||
|
||||
|
||||
@ -1,3 +1,3 @@
|
||||
<span>
|
||||
<span class="caret dropdown-toggle" [class.not-sorting-state]="!isSorting" [class.sort-desc]="!isAscending" (click)="ascending()"></span>
|
||||
<span class="caret dropdown-toggle" [class.not-sorting-state]="!isSorting" [class.sort-desc]="!isAscending" (click)="sorting()"></span>
|
||||
</span>
|
||||
@ -17,10 +17,9 @@ export class GridSortingComponent implements OnInit {
|
||||
ngOnInit(): void {
|
||||
}
|
||||
|
||||
ascending(){
|
||||
this.isSorting = !this.isSorting;
|
||||
sorting(){
|
||||
this.isSorting = true;
|
||||
this.isAscending = !this.isAscending;
|
||||
console.log("ascending result...")
|
||||
const existingSort = this.dataSource.sorts.find(t => t.path == this.path);
|
||||
if (existingSort){
|
||||
existingSort.ascending = (this.isAscending)? true : false;
|
||||
|
||||
@ -1,11 +1,13 @@
|
||||
export interface IChangeMerchantNameCommand {
|
||||
export interface IChangeMerchantCommand {
|
||||
id: string;
|
||||
name: string;
|
||||
address: string;
|
||||
ordering: number;
|
||||
}
|
||||
export interface IAddMerchantCommand {
|
||||
name: string;
|
||||
address: string;
|
||||
ordering: number;
|
||||
}
|
||||
|
||||
export interface IRemoveMerchantCommand {
|
||||
@ -2,4 +2,6 @@ export interface IMerchant {
|
||||
id: string;
|
||||
name: string;
|
||||
address: string;
|
||||
ordering:number;
|
||||
openDate: Date;
|
||||
}
|
||||
|
||||
@ -4,7 +4,7 @@ import { IDataSource, DataSource } from '@poweredsoft/data';
|
||||
import { Apollo } from 'apollo-angular';
|
||||
import gql from 'graphql-tag';
|
||||
import { of } from 'rxjs';
|
||||
import { IChangeMerchantNameCommand, IAddMerchantCommand, IRemoveMerchantCommand } from './IChangeMerchantNameCommand';
|
||||
import { IChangeMerchantCommand as IChangeMerchantCommand, IAddMerchantCommand, IRemoveMerchantCommand } from './IChangeMerchantCommand';
|
||||
import { IMerchant } from './IMerchant';
|
||||
|
||||
@Injectable({
|
||||
@ -23,7 +23,7 @@ export class MerchantService {
|
||||
>(
|
||||
'merchants',
|
||||
'GraphQLAdvanceQueryOfMerchantInput',
|
||||
'id, name, address',
|
||||
'id, name, address, ordering, openDate',
|
||||
(model) => model.id,
|
||||
{
|
||||
page: 1,
|
||||
@ -31,8 +31,8 @@ export class MerchantService {
|
||||
},
|
||||
true
|
||||
);
|
||||
|
||||
builder.addMutation<IChangeMerchantNameCommand, string>(
|
||||
|
||||
builder.addMutation<IChangeMerchantCommand, string>(
|
||||
'changeMerchant', //<-- command name
|
||||
'changeMerchant', //<-- graph ql mutation name
|
||||
|
||||
@ -51,10 +51,11 @@ export class MerchantService {
|
||||
},
|
||||
|
||||
// viewModel -> transform to the form model for that command -> IChangeMerchantName
|
||||
e => of(<IChangeMerchantNameCommand>{
|
||||
e => of(<IChangeMerchantCommand>{
|
||||
id: e.model.id,
|
||||
name: e.model.name,
|
||||
address: e.model.address
|
||||
address: e.model.address,
|
||||
ordering:e.model.ordering,
|
||||
})
|
||||
);
|
||||
|
||||
@ -80,7 +81,8 @@ export class MerchantService {
|
||||
// viewModel -> transform to the form model for that command -> IChangeMerchantName
|
||||
e => of(<IAddMerchantCommand>{
|
||||
name: 'A New merchant',
|
||||
address: ''
|
||||
address: '',
|
||||
ordering: 11
|
||||
})
|
||||
);
|
||||
|
||||
|
||||
@ -1,6 +1,4 @@
|
||||
<h2>grid-filter-demo works!</h2>
|
||||
<psbx-datetime-filter></psbx-datetime-filter>
|
||||
|
||||
|
||||
<ps-data-grid [dataSource]="merchantDataSource" [(columns)]="columns"
|
||||
tableClasses="table table-sm table-striped table-bordered">
|
||||
@ -10,11 +8,11 @@
|
||||
[dataSource]="merchantDataSource" command="addMerchant" [template]="theModal">Create Record</button>
|
||||
</ng-container>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<ng-container psDataGridCol="id">
|
||||
<div *psDataGridColHeader>ID</div>
|
||||
<psbx-ds-text-filter *psDataGridCellFilter [dataSource]="merchantDataSource" path="id"></psbx-ds-text-filter>
|
||||
<psbx-ds-text-filter *psDataGridCellFilter [dataSource]="merchantDataSource" path="id"></psbx-ds-text-filter>
|
||||
<psbx-grid-sorting *psDataGridColSort [dataSource]="merchantDataSource" path="id"></psbx-grid-sorting>
|
||||
<div *psDataGridCell="let model">{{model.id}}</div>
|
||||
<!--<psbx-number-filter *psDataGridCellFilter [dataSource]="merchantDataSource" path="id"></psbx-number-filter>-->
|
||||
@ -34,50 +32,73 @@
|
||||
|
||||
<ng-container psDataGridCol="name">
|
||||
<div *psDataGridColHeader>Name</div>
|
||||
<psbx-ds-text-filter *psDataGridCellFilter [dataSource]="merchantDataSource" path="name"></psbx-ds-text-filter>
|
||||
<psbx-ds-text-filter *psDataGridCellFilter [dataSource]="merchantDataSource" path="name"></psbx-ds-text-filter>
|
||||
<psbx-grid-sorting *psDataGridColSort [dataSource]="merchantDataSource" path="name"></psbx-grid-sorting>
|
||||
<div *psDataGridCell="let model">{{model.name}}</div>
|
||||
</ng-container>
|
||||
|
||||
|
||||
<ng-container psDataGridCol="address">
|
||||
<div *psDataGridColHeader>Address</div>
|
||||
<div *psDataGridCell="let model">{{model.address}}</div>
|
||||
<psbx-ds-text-filter *psDataGridCellFilter [dataSource]="merchantDataSource" path="address"></psbx-ds-text-filter>
|
||||
<psbx-ds-text-filter *psDataGridCellFilter [dataSource]="merchantDataSource" path="address">
|
||||
</psbx-ds-text-filter>
|
||||
<psbx-grid-sorting *psDataGridColSort [dataSource]="merchantDataSource" path="address"></psbx-grid-sorting>
|
||||
</ng-container>
|
||||
|
||||
<ng-container psDataGridCol="ordering">
|
||||
<div *psDataGridColHeader>Priority</div>
|
||||
<div *psDataGridCell="let model">{{model.ordering}}</div>
|
||||
<psbx-number-filter *psDataGridCellFilter [dataSource]="merchantDataSource" path="ordering">
|
||||
</psbx-number-filter>
|
||||
<psbx-grid-sorting *psDataGridColSort [dataSource]="merchantDataSource" path="ordering"></psbx-grid-sorting>
|
||||
</ng-container>
|
||||
|
||||
<ng-container psDataGridCol="openDate">
|
||||
<div *psDataGridColHeader>Open Date</div>
|
||||
<div *psDataGridCell="let model">{{model.openDate}}</div>
|
||||
<psbx-datetime-filter *psDataGridCellFilter [dataSource]="merchantDataSource" path="openDate">
|
||||
</psbx-datetime-filter>
|
||||
<psbx-grid-sorting *psDataGridColSort [dataSource]="merchantDataSource" path="openDate"></psbx-grid-sorting>
|
||||
</ng-container>
|
||||
|
||||
<ng-container psDataGridCol="commands">
|
||||
<ng-container *psDataGridColHeader>Actions</ng-container>
|
||||
<ng-container *psDataGridCell="let model">
|
||||
<button class="btn-info btn" psbxCommandModal [commandTitle]="'Change ' + model.name + ' name'" commandText="Update"
|
||||
[dataSource]="merchantDataSource" command="changeMerchant" [model]="model" [template]="theModal">Change</button>
|
||||
<button class="btn-danger btn" psbxConfirmModal [commandTitle]="'Are you sure you wnat to remove ' + model.name + '?'" commandText="Remove"
|
||||
[dataSource]="merchantDataSource" command="removeMerchant" [model]="model" >Remove</button>
|
||||
<button class="btn-info btn" psbxCommandModal [commandTitle]="'Change ' + model.name + ' name'"
|
||||
commandText="Update" [dataSource]="merchantDataSource" command="changeMerchant" [model]="model"
|
||||
[template]="theModal">Change</button>
|
||||
<button class="btn-danger btn" psbxConfirmModal
|
||||
[commandTitle]="'Are you sure you wnat to remove ' + model.name + '?'" commandText="Remove"
|
||||
[dataSource]="merchantDataSource" command="removeMerchant" [model]="model">Remove</button>
|
||||
</ng-container>
|
||||
</ng-container>
|
||||
<ng-container *psDataGridFooter>
|
||||
<psbx-ds-pagination [dataSource]="merchantDataSource"></psbx-ds-pagination>
|
||||
<psbx-ds-pagination [dataSource]="merchantDataSource"></psbx-ds-pagination>
|
||||
</ng-container>
|
||||
</ps-data-grid>
|
||||
|
||||
|
||||
<ng-template #theModal let-command let-loading="loading">
|
||||
<label for="name">Name</label>
|
||||
<input type="text" required [(ngModel)]="command.name" placeholder="Enter a merchant name"
|
||||
class="form-control">
|
||||
<label for="address">Address</label>
|
||||
<input type="text" required [(ngModel)]="command.address"
|
||||
placeholder="Enter the merchant's address" class="form-control">
|
||||
<label for="address">Priority</label>
|
||||
<input type="number" required [(ngModel)]="command.ordering"
|
||||
placeholder="Enter the merchant's Priority" class="form-control">
|
||||
<label for="address">Priority</label>
|
||||
<input type="date" required [(ngModel)]="command.openDate"
|
||||
placeholder="Enter the merchant's Priority" class="form-control">
|
||||
|
||||
</ng-template>
|
||||
|
||||
|
||||
<ng-template #confirm>
|
||||
<div class="modal-body text-center">
|
||||
<p>Do you want to confirm?</p>
|
||||
<button type="button" class="btn btn-default" >Yes</button>
|
||||
<button type="button" class="btn btn-primary" >No</button>
|
||||
<p>Do you want to confirm?</p>
|
||||
<button type="button" class="btn btn-default">Yes</button>
|
||||
<button type="button" class="btn btn-primary">No</button>
|
||||
</div>
|
||||
</ng-template>
|
||||
|
||||
|
||||
|
||||
<ng-template #theModal let-command let-loading="loading">
|
||||
<label for="name">Name</label>
|
||||
<input type="text" required [attr.disabled]="loading" [(ngModel)]="command.name" placeholder="Enter a merchant name"
|
||||
class="form-control" >
|
||||
<label for="address">Address</label>
|
||||
<input type="text" required [attr.disabled]="loading" [(ngModel)]="command.address" placeholder="Enter the merchant's address"
|
||||
class="form-control" >
|
||||
|
||||
</ng-template>
|
||||
</ng-template>
|
||||
@ -11,7 +11,7 @@ import { ConfirmModalService } from '@poweredsoft/ngx-bootstrap';
|
||||
})
|
||||
export class GridFilterDemoComponent implements OnInit {
|
||||
|
||||
columns = ['id','name', 'address','commands']
|
||||
columns = ['id','name', 'address', 'ordering','openDate', 'commands']
|
||||
merchantDataSource: IDataSource<IMerchant>;
|
||||
constructor(private merchantService: MerchantService){
|
||||
this.merchantDataSource = this.createDataSource();
|
||||
|
||||
Loading…
Reference in New Issue
Block a user