Permalink
Browse files

feat(project): Add search bar

  • Loading branch information...
jeremyvergnas committed May 11, 2016
1 parent 0fec60e commit 1f09365198d242e33acbac3f2afdd28b02d2d754
Showing with 71 additions and 6 deletions.
  1. +5 −0 src/columns-filter.js
  2. +18 −3 src/data-table.html
  3. +48 −3 src/data-table.js
@@ -0,0 +1,5 @@
export class ColumnsFilterValueConverter {
toView(array) {
return array.filter(item => item.column.indexOf('.') === -1);
}
}
@@ -1,4 +1,19 @@
<template>
<require from="./columns-filter"></require>
<!-- Search bar -->
<div if.bind="searchable !== null" class="row">
<div class="col-xs-2">
<select value.bind="defaultColumn" class="form-control" id="columnSelect">
<option model.bind="columnLabel.column" repeat.for="columnLabel of columnLabels | columnsFilter">${columnLabel.label}</option>
</select>
</div>
<div class="col-xs-10">
<input class="form-control" type="text" id="search" placeholder="search" value.bind="search" keyup.delegate="doSearch(search) & debounce:500">
</div>
</div>
<br/>
<table class="table table-striped table-bordered table-hover">
<thead>
<tr>
@@ -21,12 +36,12 @@
</td>
<!-- Actions -->
<td style="white-space: nowrap; width: 1px;" if.bind="destroy != null || update != null">
<button if.bind="update != null" class="btn btn-sm btn-white" click.delegate="doUpdate(row)">
<td style="white-space: nowrap; width: 1px;" if.bind="destroy !== null || update !== null">
<button if.bind="update !== null" class="btn btn-sm btn-white" click.delegate="doUpdate(row)">
<i class="fa fa-pencil"></i>
</button>
<button if.bind="destroy != null" class="btn btn-sm btn-danger" click.delegate="doDelete(row)">
<button if.bind="destroy !== null" class="btn btn-sm btn-danger" click.delegate="doDelete(row)">
<i class="fa fa-trash"></i>
</button>
</td>
@@ -20,12 +20,19 @@ export class DataTable {
@bindable sortable = null;
@bindable defaultColumn;
@bindable searchable = null;
count = 0;
columnsArray = [];
sortingCriteria = {};
searchCriteria = {};
@computedFrom('columns')
get columnLabels () {
let labelsRaw = this.columns.split(','),
let instance = this,
labelsRaw = instance.columns.split(','),
labels = [];
function clean (str) {
@@ -37,17 +44,35 @@ export class DataTable {
}
labelsRaw.forEach(function (label) {
let aliased = label.split(' as ');
if(!label) {
return;
}
let aliased = label.split(' as '),
cleanedLabel = clean(aliased[0]);
if (instance.columnsArray.indexOf(cleanedLabel) === -1) {
instance.columnsArray.push(cleanedLabel);
}
labels.push({
column: clean(aliased[0]),
column: cleanedLabel,
label : ucfirst(clean(aliased[1] || aliased[0]))
});
});
this.checkDefaultColumn();
return labels;
}
checkDefaultColumn() {
let hasNameColumn = (this.columnsArray.indexOf('name') !== -1);
if (!this.defaultColumn || (this.defaultColumn && this.columnsArray.indexOf(this.defaultColumn) === -1)) {
this.defaultColumn = (hasNameColumn ? 'name' : (this.columnsArray[0] || null));
}
}
constructor (Router, element) {
this.router = Router;
this.element = element;
@@ -124,6 +149,14 @@ export class DataTable {
buildCriteria() {
let criteria = {};
if (this.searchable !== null && Object.keys(this.searchCriteria).length ) {
let propertyName = Object.keys(this.searchCriteria)[0];
if (this.searchCriteria[propertyName]) {
criteria['where'] = {};
criteria['where'][propertyName] = {};
criteria['where'][propertyName]['contains'] = this.searchCriteria[propertyName];
}
}
if (this.sortable !== null && Object.keys(this.sortingCriteria).length ) {
let propertyName = Object.keys(this.sortingCriteria)[0];
if (this.sortingCriteria[propertyName]) {
@@ -149,6 +182,18 @@ export class DataTable {
this.load();
}
doSearch(searchInput) {
if (this.searchable === null) {
return;
}
if (!(this.defaultColumn in this.searchCriteria)) {
this.searchCriteria = {};
}
this.searchCriteria[this.defaultColumn] = searchInput;
this.load();
}
displayValue (row, propertyName) {
if (row[propertyName]) {
return row[propertyName];

0 comments on commit 1f09365

Please sign in to comment.