blob: 8583fd9c91686b3378b09c40ac357cb3a2ea2f72 [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>
<div class="table-responsive">
<table ng-class="vm.classes">
<thead>
<tr>
<th ng-repeat="col in vm.config.columns">
{{col.label}}
<div ng-if="vm.config.order">
<a href="" ng-click="vm.orderBy = col.prop; vm.reverse = false">
<i class="fa fa-chevron-up"></i>
</a>
<a href="" ng-click="vm.orderBy = col.prop; vm.reverse = true">
<i class="fa fa-chevron-down"></i>
</a>
</div>
</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.config.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 | pagination:vm.currentPage * vm.config.pagination.pageSize | limitTo: (vm.config.pagination.pageSize || vm.data.length) track by $index">
<td ng-repeat="col in vm.config.columns" xos-link-wrapper>
<span ng-if="!col.type || col.type === 'text'">{{item[col.prop]}}</span>
<span ng-if="col.type === 'boolean'">
<i class="fa"
ng-class="{'fa-ok': item[col.prop], 'fa-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'">
{{item[col.prop + '-formatted']}}
<i class="ng-hide">{{col.formatter(item)}}</i>
</span>
<span ng-if="col.type === 'icon'">
<i class="fa fa-{{col.formatter(item)}}">
</i>
</span>
<div class="xos-table-hover" ng-if="col.hover">
<div class="alert alert-info">
{{col.hover(item)}}
</div>
</div>
</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="fa fa-{{action.icon}}"
style="color: {{action.color}};"></i>
</a>
</td>
</tr>
</tbody>
</table>
<xos-pagination
ng-if="vm.config.pagination"
page-size="vm.config.pagination.pageSize"
total-elements="vm.data.length"
change="vm.goToPage">
</xos-pagination>
</div>
</div>
<div ng-show="(vm.data.length == 0 || !vm.data) && vm.loader == false">
<xos-alert config="{type: 'info'}" show="true">
No data to show.
</xos-alert>
</div>
<div ng-show="vm.loader == true">
<div class="loader"></div>
</div>