blob: 2d52feb48d829e41a6b554437223e056c4aec18a [file] [log] [blame]
Matteo Scandolo710dc152017-04-11 13:54:23 -07001<div ng-show="vm.data.length > 0 && vm.loader == false">
Matteo Scandolo9f87f302016-12-13 18:11:10 -08002 <div class="row" ng-if="vm.config.filter == 'fulltext'">
3 <div class="col-xs-12">
4 <input
5 class="form-control"
6 placeholder="Type to search.."
7 type="text"
8 ng-model="vm.query"/>
9 </div>
10 </div>
Matteo Scandolod62ea792016-12-22 14:02:28 -080011 <div class="table-responsive">
12 <table ng-class="vm.classes">
Matteo Scandolo9f87f302016-12-13 18:11:10 -080013 <thead>
14 <tr>
Matteo Scandolo5d962a32017-08-01 18:16:14 -070015 <th ng-repeat="col in vm.config.columns">
Matteo Scandolo9f87f302016-12-13 18:11:10 -080016 {{col.label}}
Matteo Scandolod62ea792016-12-22 14:02:28 -080017 <div ng-if="vm.config.order">
Matteo Scandolo9f87f302016-12-13 18:11:10 -080018 <a href="" ng-click="vm.orderBy = col.prop; vm.reverse = false">
Matteo Scandolod58d5042016-12-16 16:59:21 -080019 <i class="fa fa-chevron-up"></i>
Matteo Scandolo9f87f302016-12-13 18:11:10 -080020 </a>
21 <a href="" ng-click="vm.orderBy = col.prop; vm.reverse = true">
Matteo Scandolod58d5042016-12-16 16:59:21 -080022 <i class="fa fa-chevron-down"></i>
Matteo Scandolo9f87f302016-12-13 18:11:10 -080023 </a>
Matteo Scandolod62ea792016-12-22 14:02:28 -080024 </div>
Matteo Scandolo9f87f302016-12-13 18:11:10 -080025 </th>
26 <th ng-if="vm.config.actions">Actions:</th>
27 </tr>
28 </thead>
29 <tbody ng-if="vm.config.filter == 'field'">
Matteo Scandoloee655a12016-12-19 15:38:43 -080030 <tr>
Matteo Scandolo5d962a32017-08-01 18:16:14 -070031 <td ng-repeat="col in vm.config.columns">
Matteo Scandoloee655a12016-12-19 15:38:43 -080032 <input
33 ng-if="col.type !== 'boolean' && col.type !== 'array' && col.type !== 'object' && col.type !== 'custom'"
34 class="form-control"
35 placeholder="Type to search by {{col.label}}"
36 type="text"
37 ng-model="vm.query[col.prop]"/>
38 <select
39 ng-if="col.type === 'boolean'"
40 class="form-control"
41 ng-model="vm.query[col.prop]">
42 <option value="">-</option>
43 <option value="true">True</option>
44 <option value="false">False</option>
45 </select>
46 </td>
47 <td ng-if="vm.config.actions"></td>
48 </tr>
Matteo Scandolo9f87f302016-12-13 18:11:10 -080049 </tbody>
50 <tbody>
Matteo Scandolo8b2370c2017-02-02 17:19:07 -080051 <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">
Matteo Scandolo5d962a32017-08-01 18:16:14 -070052 <td ng-repeat="col in vm.config.columns" xos-link-wrapper>
Matteo Scandolo9f87f302016-12-13 18:11:10 -080053 <span ng-if="!col.type || col.type === 'text'">{{item[col.prop]}}</span>
54 <span ng-if="col.type === 'boolean'">
Matteo Scandolod58d5042016-12-16 16:59:21 -080055 <i class="fa"
56 ng-class="{'fa-ok': item[col.prop], 'fa-remove': !item[col.prop]}">
Matteo Scandolo9f87f302016-12-13 18:11:10 -080057 </i>
58 </span>
59 <span ng-if="col.type === 'date'">
60 {{item[col.prop] | date:'H:mm MMM d, yyyy'}}
61 </span>
62 <span ng-if="col.type === 'array'">
63 {{item[col.prop] | arrayToList}}
64 </span>
65 <span ng-if="col.type === 'object'">
66 <dl class="dl-horizontal">
67 <span ng-repeat="(k,v) in item[col.prop]">
68 <dt>{{k}}</dt>
69 <dd>{{v}}</dd>
70 </span>
71 </dl>
72 </span>
73 <span ng-if="col.type === 'custom'">
Matteo Scandolo04964232017-01-07 12:53:46 -080074 {{item[col.prop + '-formatted']}}
75 <i class="ng-hide">{{col.formatter(item)}}</i>
Matteo Scandolo9f87f302016-12-13 18:11:10 -080076 </span>
77 <span ng-if="col.type === 'icon'">
Matteo Scandolod58d5042016-12-16 16:59:21 -080078 <i class="fa fa-{{col.formatter(item)}}">
Matteo Scandolo9f87f302016-12-13 18:11:10 -080079 </i>
Matteo Scandolo8b2370c2017-02-02 17:19:07 -080080 </span>
81 <div class="xos-table-hover" ng-if="col.hover">
82 <div class="alert alert-info">
83 {{col.hover(item)}}
84 </div>
85 </div>
Matteo Scandolo9f87f302016-12-13 18:11:10 -080086 </td>
Matteo Scandolocc4bce82017-08-07 13:11:47 -070087 <td class="xos-table-actions" ng-if="vm.config.actions">
Matteo Scandolo9f87f302016-12-13 18:11:10 -080088 <a href=""
89 ng-repeat="action in vm.config.actions"
90 ng-click="action.cb(item)"
91 title="{{action.label}}">
92 <i
Matteo Scandolod58d5042016-12-16 16:59:21 -080093 class="fa fa-{{action.icon}}"
Matteo Scandolo9f87f302016-12-13 18:11:10 -080094 style="color: {{action.color}};"></i>
95 </a>
96 </td>
97 </tr>
98 </tbody>
99 </table>
Matteo Scandolo8b2370c2017-02-02 17:19:07 -0800100 <xos-pagination
101 ng-if="vm.config.pagination"
102 page-size="vm.config.pagination.pageSize"
103 total-elements="vm.data.length"
104 change="vm.goToPage">
105 </xos-pagination>
Matteo Scandolod62ea792016-12-22 14:02:28 -0800106 </div>
Matteo Scandolo710dc152017-04-11 13:54:23 -0700107</div>
108<div ng-show="(vm.data.length == 0 || !vm.data) && vm.loader == false">
109 <xos-alert config="{type: 'info'}" show="true">
110 No data to show.
111 </xos-alert>
112</div>
113<div ng-show="vm.loader == true">
114 <div class="loader"></div>
115</div>