blob: 58a46e0ef6a525c876950c40f6c3c16b95460055 [file] [log] [blame]
<!--<div ng-show="vm.data.length > 0 && vm.loader == false">-->
<div class="row" ng-if="vm.config.filter == 'fulltext'">
<div class="col-xs-12">
<input
class="form-control"
placeholder="Type to search.."
type="text"
ng-model="vm.query"/>
</div>
</div>
<table ng-class="vm.classes">
<thead>
<tr>
<th ng-repeat="col in vm.columns">
{{col.label}}
<span ng-if="vm.config.order">
<a href="" ng-click="vm.orderBy = col.prop; vm.reverse = false">
<i class="glyphicon glyphicon-chevron-up"></i>
</a>
<a href="" ng-click="vm.orderBy = col.prop; vm.reverse = true">
<i class="glyphicon glyphicon-chevron-down"></i>
</a>
</span>
</th>
<th ng-if="vm.config.actions">Actions:</th>
</tr>
</thead>
<tbody ng-if="vm.config.filter == 'field'">
<tr>
<td ng-repeat="col in vm.columns">
<input
ng-if="col.type !== 'boolean' && col.type !== 'array' && col.type !== 'object' && col.type !== 'custom'"
class="form-control"
placeholder="Type to search by {{col.label}}"
type="text"
ng-model="vm.query[col.prop]"/>
<select
ng-if="col.type === 'boolean'"
class="form-control"
ng-model="vm.query[col.prop]">
<option value="">-</option>
<option value="true">True</option>
<option value="false">False</option>
</select>
</td>
<td ng-if="vm.config.actions"></td>
</tr>
</tbody>
<tbody>
<tr ng-repeat="item in vm.data | filter:vm.query | orderBy:vm.orderBy:vm.reverse track by $index">
<td ng-repeat="col in vm.columns">
<span ng-if="!col.type || col.type === 'text'">{{item[col.prop]}}</span>
<span ng-if="col.type === 'boolean'">
<i class="glyphicon"
ng-class="{'glyphicon-ok': item[col.prop], 'glyphicon-remove': !item[col.prop]}">
</i>
</span>
<span ng-if="col.type === 'date'">
{{item[col.prop] | date:'H:mm MMM d, yyyy'}}
</span>
<span ng-if="col.type === 'array'">
{{item[col.prop] | arrayToList}}
</span>
<span ng-if="col.type === 'object'">
<dl class="dl-horizontal">
<span ng-repeat="(k,v) in item[col.prop]">
<dt>{{k}}</dt>
<dd>{{v}}</dd>
</span>
</dl>
</span>
<span ng-if="col.type === 'custom'">
{{col.formatter(item)}}
</span>
<span ng-if="col.type === 'icon'">
<i class="glyphicon glyphicon-{{col.formatter(item)}}">
</i>
</span>
</td>
<td ng-if="vm.config.actions">
<a href=""
ng-repeat="action in vm.config.actions"
ng-click="action.cb(item)"
title="{{action.label}}">
<i
class="glyphicon glyphicon-{{action.icon}}"
style="color: {{action.color}};"></i>
</a>
</td>
</tr>
</tbody>
</table>
<!--</div>-->
<!--<div ng-show="(vm.data.length == 0 || !vm.data) && vm.loader == false">-->
<!--<xos-alert config="{type: 'info'}">-->
<!--No data to show.-->
<!--</xos-alert>-->
<!--</div>-->
<!--<div ng-show="vm.loader == true">-->
<!--<div class="loader"></div>-->
<!--</div>-->