Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Add No Matches Found inficator for filter #158

Open
wants to merge 6 commits into
base: development
Choose a base branch
from
Open

Add No Matches Found inficator for filter #158

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
4b3bde6
Merge pull request #1 from valor-software/development
WolvenOne27 Apr 21, 2016
154532c
Replaced hightlight with highlight
WolvenOne27 Apr 21, 2016
676cf0a
Merge pull request #2 from valor-software/development
WolvenOne27 Apr 22, 2016
2ea9cf3
Add No Matches Found indicator
WolvenOne27 Apr 22, 2016
aed2e97
Ability to specify id, text. and children columns
WolvenOne27 Apr 25, 2016
680662a
Rolled back changes for setting custom properties for id, text, and c…
WolvenOne27 Apr 25, 2016
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 4 additions & 0 deletions components/css/ng2-select.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -42,6 +42,10 @@
display:none;
}

.ui-select-match-close {
margin-top:2px;
}

body > .select2-container.open {
z-index: 9999; /* The z-index Select2 applies to the select2-drop */
}
Expand Down
1 change: 1 addition & 0 deletions components/select/select-item.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -45,3 +45,4 @@ export class SelectItem {
return r;
}
}

43 changes: 32 additions & 11 deletions components/select/select.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -20,9 +20,9 @@ import {IOptionsBehavior} from './select-interfaces';
import {escapeRegexp} from './common';

let optionsTemplate = `
<ul *ngIf="optionsOpened && options && options.length > 0 && !itemObjects[0].hasChildren()"
<ul *ngIf="optionsOpened && !itemObjects[0].hasChildren()"
class="ui-select-choices ui-select-choices-content ui-select-dropdown dropdown-menu">
<li class="ui-select-choices-group">
<li class="ui-select-choices-group" *ngIf="options && options.length > 0">
<div *ngFor="#o of options"
class="ui-select-choices-row"
[class.active]="isActive(o)"
Expand All @@ -33,11 +33,12 @@ let optionsTemplate = `
</a>
</div>
</li>
<li *ngIf="!options || options.length === 0" class="disabled" (click)="noMatchClick($event)"><a href="javascript:void(0)">No matches found</a></li>
</ul>

<ul *ngIf="optionsOpened && options && options.length > 0 && itemObjects[0].hasChildren()"
<ul *ngIf="optionsOpened && itemObjects[0].hasChildren()"
class="ui-select-choices ui-select-choices-content ui-select-dropdown dropdown-menu">
<li *ngFor="#c of options; #index=index" class="ui-select-choices-group">
<li *ngFor="#c of options; #index=index" class="ui-select-choices-group" *ngIf="options && options.length > 0">
<div class="divider" *ngIf="index > 0"></div>
<div class="ui-select-choices-group-label dropdown-header">{{c.text}}</div>

Expand All @@ -52,11 +53,12 @@ let optionsTemplate = `
</a>
</div>
</li>
<li *ngIf="!options || options.length === 0" class="disabled" (click)="noMatchClick($event)"><a href="javascript:void(0)">No matches found</a></li>
</ul>
`;

@Component({
selector: 'ng-select',
selector: 'ng2-select',
pipes: [HighlightPipe],
template: `
<div tabindex="0"
Expand Down Expand Up @@ -182,6 +184,14 @@ export class Select {
}, 0);
}

private noMatchClick(e: any) {
if (e) {
e.stopPropagation();
e.preventDefault();
this.focusToInput(this.inputValue);
}
}

private matchClick(e:any) {
if (this._disabled === true) {
return;
Expand Down Expand Up @@ -228,16 +238,23 @@ export class Select {
}

private open() {
this.options = this.itemObjects
.filter(option => (this.multiple === false ||
this.multiple === true && !this.active.find(o => option.text === o.text)));
if (this.optionsOpened)
return;

this.populateOptions();

if (this.options.length > 0) {
this.behavior.first();
}

this.optionsOpened = true;
}

private populateOptions() {
this.options = this.itemObjects
.filter(option => (this.multiple === false ||
this.multiple === true && !this.active.find(o => option.text === o.text)));
}

ngOnInit() {
this.behavior = this.itemObjects[0].hasChildren() ?
Expand All @@ -263,7 +280,7 @@ export class Select {
return;
}

if (e.srcElement.contains(context.element.nativeElement)
if (context.element.nativeElement.contains(e.srcElement)
&& e.srcElement && e.srcElement.className &&
e.srcElement.className.indexOf('ui-select') >= 0) {
if (e.target.nodeName !== 'INPUT') {
Expand Down Expand Up @@ -395,7 +412,8 @@ export class Select {
}

private selectActiveMatch() {
this.selectMatch(this.activeOption);
if (this.options && this.options.length > 0)
this.selectMatch(this.activeOption);
}

private selectMatch(value:SelectItem, e:Event = null) {
Expand All @@ -405,7 +423,7 @@ export class Select {
}

if (this.options.length <= 0) {
return;
this.populateOptions(); //load options, if they aren't yet populated
}

if (this.multiple === true) {
Expand All @@ -420,9 +438,11 @@ export class Select {

this.doEvent('selected', value);
this.hideOptions();
this.inputValue = ''; //clear highlight pipe match

if (this.multiple === true) {
this.focusToInput('');
this.open();
} else {
this.focusToInput( stripTags(value.text) );
this.element.nativeElement.querySelector('.ui-select-container').focus();
Expand Down Expand Up @@ -629,3 +649,4 @@ export class ChildrenBehavior extends Behavior implements IOptionsBehavior {
}