67 lines
1.9 KiB
TypeScript
67 lines
1.9 KiB
TypeScript
import { Input, Component } from 'angular-ts-decorators';
|
|
|
|
|
|
/**
|
|
* An element which displays the matches and non-matches for a regular expression against a set of
|
|
* items.
|
|
*/
|
|
@Component({
|
|
selector: 'regexMatchView',
|
|
template: `
|
|
<div class="regex-match-view-element">
|
|
<div ng-if="$ctrl.filterMatches($ctrl.regex, $ctrl.items, false) == null">
|
|
<i class="fa fa-exclamation-triangle"></i>Invalid Regular Expression!
|
|
</div>
|
|
<div ng-if="$ctrl.filterMatches($ctrl.regex, $ctrl.items, false) != null">
|
|
<table class="match-table">
|
|
<tr>
|
|
<td>Matching:</td>
|
|
<td>
|
|
<ul class="matching match-list">
|
|
<li ng-repeat="item in $ctrl.filterMatches($ctrl.regex, $ctrl.items, true)">
|
|
<i class="fa {{ item.icon }}"></i>{{ item.title }}
|
|
</li>
|
|
</ul>
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td>Not Matching:</td>
|
|
<td>
|
|
<ul class="not-matching match-list">
|
|
<li ng-repeat="item in $ctrl.filterMatches($ctrl.regex, $ctrl.items, false)">
|
|
<i class="fa {{ item.icon }}"></i>{{ item.title }}
|
|
</li>
|
|
</ul>
|
|
</td>
|
|
</tr>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
`
|
|
})
|
|
export class RegexMatchViewComponent implements ng.IComponentController {
|
|
|
|
@Input('=') private regex: string;
|
|
@Input('=') private items: any[];
|
|
|
|
constructor() {
|
|
|
|
}
|
|
|
|
public filterMatches(regexstr: string, items: ({value: string})[], shouldMatch: boolean): ({value: string})[] | null {
|
|
regexstr = regexstr || '.+';
|
|
|
|
try {
|
|
var regex = new RegExp(regexstr);
|
|
} catch (ex) {
|
|
return null;
|
|
}
|
|
|
|
return items.filter(function(item) {
|
|
var value: string = item.value;
|
|
var m: RegExpMatchArray = value.match(regex);
|
|
var matches: boolean = !!(m && m[0].length == value.length);
|
|
return matches == shouldMatch;
|
|
});
|
|
}
|
|
}
|