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

some fix regarding multi-select

Browse Source
This commit is contained in:
Yubing325 2020-07-07 12:08:36 -05:00
parent 3806e44945
commit f4cec5c48f
7 changed files with 36 additions and 26 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
projects/poweredsoft/ng-select/src/lib/ps-ng-selectors/multi-select/multi-select.component.html
View File

@ -18,12 +18,12 @@
</ng-container>
<ng-container *ngIf="hasLabelTemplate">
<ng-template ng-label-tmp let-item="item" let-index="index">
<ng-container [ngTemplateOutlet]="selectLabelTemplate"
[ngTemplateOutletContext]="{
$implicit: item,
index: index
}"></ng-container>
<ng-template ng-label-tmp let-item="item" let-index="index" let-clear="clear">
<span class="ng-value-label">
<ng-container [ngTemplateOutlet]="selectLabelTemplate"
[ngTemplateOutletContext]="{ $implicit: item, index: index, clear: clear }"></ng-container>
</span>
<span class="ng-value-icon right" (click)="clear(item)" aria-hidden="true">×</span>
</ng-template>
</ng-container>
</ng-select>

3
projects/poweredsoft/ng-select/src/lib/ps-ng-selectors/select-label-template.directive.ts
View File

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

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

@ -1,9 +1,10 @@
:host .flex-container{
display: flex;
justify-content: space-between;
align-items: baseline;
align-items: center;
}
:host .flex-item{
margin-right: 1px;
height: 100%;
}

2
src/app/app.component.html
View File

@ -29,7 +29,7 @@
</li>
</ul>
</div>
<div class="col-lg-10" style="padding-top: 5px">
<div class="col-lg-10" style="padding-top: 5px;">
<router-outlet></router-outlet>
</div>
</div>

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

@ -11,10 +11,10 @@
<ng-container psDataGridCol="id">
<div *psDataGridColHeader>ID</div>
<ng-container *psDataGridColHeader>ID</ng-container>
<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>
<ng-container *psDataGridCell="let model">{{model.id}}</ng-container>
<!--<psbx-number-filter *psDataGridCellFilter [dataSource]="merchantDataSource" path="id"></psbx-number-filter>-->
<!--<psbx-grid-sorting *psDataGridColSort path="id" [dataSource]="merchantDataSource"></psbx-grid-sorting>-->
<!-- <psfa-ds-sort-icon *psDataGridColSort [sortPath]="id" [dataSource]="merchantDataSource">
@ -31,31 +31,31 @@
</ng-container>
<ng-container psDataGridCol="name">
<div *psDataGridColHeader>Name</div>
<ng-container *psDataGridColHeader>Name</ng-container>
<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 *psDataGridCell="let model">{{model.name}}</ng-container>
</ng-container>
<ng-container psDataGridCol="address">
<div *psDataGridColHeader>Address</div>
<div *psDataGridCell="let model">{{model.address}}</div>
<ng-container *psDataGridColHeader>Address</ng-container>
<ng-container *psDataGridCell="let model">{{model.address}}</ng-container>
<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>
<ng-container *psDataGridColHeader>Priority</ng-container>
<ng-container *psDataGridCell="let model">{{model.ordering}}</ng-container>
<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>
<ng-container *psDataGridColHeader>Open Date</ng-container>
<ng-container *psDataGridCell="let model">{{model.openDate}}</ng-container>
<psbx-datetime-filter *psDataGridCellFilter [dataSource]="merchantDataSource" path="openDate">
</psbx-datetime-filter>
<psbx-grid-sorting *psDataGridColSort [dataSource]="merchantDataSource" path="openDate"></psbx-grid-sorting>
@ -64,12 +64,15 @@
<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'"
<div class="btn-group">
<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>
</div>
</ng-container>
</ng-container>
<ng-container *psDataGridFooter>

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

@ -24,10 +24,16 @@ selected: {{ myForm.value | json }}
<img src="assets/32x32-blue.png"><span>Name: </span>{{ item.name }} - <span> Address: </span>{{item.address }}
</div>
</ps-ng-select>
selected: {{ myValue3 | json }}
<h2>Multi-Select Demo</h2>
<ps-ng-multi-select [dataSource]="merchantDataSource4" bindLabel="name" bindValue="id" [serverFiltering]="true" [(ngModel)]="myValue4" >
<div *psNgSelectOption="let item">
<img src="assets/32x32-blue.png"><span>Name: </span>{{ item.name }} - <span> Address: </span>{{item.address }}
</div>
<ng-container *psNgSelectLabel="let item;">
{{ item.name }}
</ng-container>
</ps-ng-multi-select>
selected: {{ myValue | json }}
selected: {{ myValue4 | json }}

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

@ -20,11 +20,12 @@ export class NgSelectDemoComponent implements OnInit {
merchantDataSource4: IDataSource<IMerchant>;
selectedValue: IMerchant;
selectedValue2: IMerchant;
selectedValue3: IMerchant;
selectedValue4: IMerchant;
myForm: FormGroup;
myValue: string;
myValue2: string;
myValue3: string;
myValue4: string;
constructor(private merchantService: MerchantService, private fb: FormBuilder
) {