blob: 6854fc3c6b1c80661e483ba03f503b56f5fac3f2 [file] [log] [blame]
Matteo Scandolo500e4c42017-08-08 13:05:24 -07001
2<!--
3Copyright 2017-present Open Networking Foundation
4
5Licensed under the Apache License, Version 2.0 (the "License");
6you may not use this file except in compliance with the License.
7You may obtain a copy of the License at
8
9http://www.apache.org/licenses/LICENSE-2.0
10
11Unless required by applicable law or agreed to in writing, software
12distributed under the License is distributed on an "AS IS" BASIS,
13WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
14See the License for the specific language governing permissions and
15limitations under the License.
16-->
Matteo Scandoloe9cdf9a2017-11-21 10:41:28 -080017
Matteo Scandolo710dc152017-04-11 13:54:23 -070018<div ng-show="vm.data.length > 0 && vm.loader == false">
Matteo Scandolo9f87f302016-12-13 18:11:10 -080019 <div class="row" ng-if="vm.config.filter == 'fulltext'">
20 <div class="col-xs-12">
21 <input
22 class="form-control"
23 placeholder="Type to search.."
24 type="text"
25 ng-model="vm.query"/>
26 </div>
27 </div>
Matteo Scandolod62ea792016-12-22 14:02:28 -080028 <div class="table-responsive">
29 <table ng-class="vm.classes">
Matteo Scandolo9f87f302016-12-13 18:11:10 -080030 <thead>
31 <tr>
Matteo Scandolob53dd4b2018-06-25 15:09:57 -070032 <th ng-if="vm.config.actions">Actions:</th>
Matteo Scandolo04f487c2017-09-12 10:37:48 -070033 <th ng-repeat="col in ::vm.config.columns">
Matteo Scandolo9f87f302016-12-13 18:11:10 -080034 {{col.label}}
Matteo Scandolod62ea792016-12-22 14:02:28 -080035 <div ng-if="vm.config.order">
Matteo Scandolo9f87f302016-12-13 18:11:10 -080036 <a href="" ng-click="vm.orderBy = col.prop; vm.reverse = false">
Matteo Scandolod58d5042016-12-16 16:59:21 -080037 <i class="fa fa-chevron-up"></i>
Matteo Scandolo9f87f302016-12-13 18:11:10 -080038 </a>
39 <a href="" ng-click="vm.orderBy = col.prop; vm.reverse = true">
Matteo Scandolod58d5042016-12-16 16:59:21 -080040 <i class="fa fa-chevron-down"></i>
Matteo Scandolo9f87f302016-12-13 18:11:10 -080041 </a>
Matteo Scandolod62ea792016-12-22 14:02:28 -080042 </div>
Matteo Scandolo9f87f302016-12-13 18:11:10 -080043 </th>
Matteo Scandolo9f87f302016-12-13 18:11:10 -080044 </tr>
45 </thead>
46 <tbody ng-if="vm.config.filter == 'field'">
Matteo Scandoloee655a12016-12-19 15:38:43 -080047 <tr>
Matteo Scandolo5d962a32017-08-01 18:16:14 -070048 <td ng-repeat="col in vm.config.columns">
Matteo Scandoloee655a12016-12-19 15:38:43 -080049 <input
50 ng-if="col.type !== 'boolean' && col.type !== 'array' && col.type !== 'object' && col.type !== 'custom'"
51 class="form-control"
52 placeholder="Type to search by {{col.label}}"
53 type="text"
54 ng-model="vm.query[col.prop]"/>
55 <select
56 ng-if="col.type === 'boolean'"
57 class="form-control"
58 ng-model="vm.query[col.prop]">
59 <option value="">-</option>
60 <option value="true">True</option>
61 <option value="false">False</option>
62 </select>
63 </td>
64 <td ng-if="vm.config.actions"></td>
65 </tr>
Matteo Scandolo9f87f302016-12-13 18:11:10 -080066 </tbody>
67 <tbody>
Matteo Scandoloe9cdf9a2017-11-21 10:41:28 -080068 <tr ng-class="{active: vm.config.selectedRow == $index, deleted: item.deleted}" ng-repeat="item in (vm.config.filteredData = (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 Scandolob53dd4b2018-06-25 15:09:57 -070069 <td class="xos-table-actions" ng-if="vm.config.actions">
70 <a href=""
71 ng-repeat="action in vm.config.actions"
72 ng-click="action.cb(item)"
73 title="{{action.label}}">
74 <i
75 class="fa fa-{{action.icon}}"
76 style="color: {{action.color}};"></i>
77 </a>
78 </td>
Matteo Scandolo5d962a32017-08-01 18:16:14 -070079 <td ng-repeat="col in vm.config.columns" xos-link-wrapper>
Matteo Scandolo9f87f302016-12-13 18:11:10 -080080 <span ng-if="!col.type || col.type === 'text'">{{item[col.prop]}}</span>
81 <span ng-if="col.type === 'boolean'">
Matteo Scandolod58d5042016-12-16 16:59:21 -080082 <i class="fa"
83 ng-class="{'fa-ok': item[col.prop], 'fa-remove': !item[col.prop]}">
Matteo Scandolo9f87f302016-12-13 18:11:10 -080084 </i>
85 </span>
86 <span ng-if="col.type === 'date'">
87 {{item[col.prop] | date:'H:mm MMM d, yyyy'}}
88 </span>
89 <span ng-if="col.type === 'array'">
90 {{item[col.prop] | arrayToList}}
91 </span>
92 <span ng-if="col.type === 'object'">
93 <dl class="dl-horizontal">
94 <span ng-repeat="(k,v) in item[col.prop]">
95 <dt>{{k}}</dt>
96 <dd>{{v}}</dd>
97 </span>
98 </dl>
99 </span>
100 <span ng-if="col.type === 'custom'">
Matteo Scandolo04964232017-01-07 12:53:46 -0800101 {{item[col.prop + '-formatted']}}
102 <i class="ng-hide">{{col.formatter(item)}}</i>
Matteo Scandolo9f87f302016-12-13 18:11:10 -0800103 </span>
104 <span ng-if="col.type === 'icon'">
Matteo Scandolod58d5042016-12-16 16:59:21 -0800105 <i class="fa fa-{{col.formatter(item)}}">
Matteo Scandolo9f87f302016-12-13 18:11:10 -0800106 </i>
Matteo Scandolo8b2370c2017-02-02 17:19:07 -0800107 </span>
108 <div class="xos-table-hover" ng-if="col.hover">
109 <div class="alert alert-info">
110 {{col.hover(item)}}
111 </div>
112 </div>
Matteo Scandolo9f87f302016-12-13 18:11:10 -0800113 </td>
Matteo Scandolo9f87f302016-12-13 18:11:10 -0800114 </tr>
115 </tbody>
116 </table>
Matteo Scandolo8b2370c2017-02-02 17:19:07 -0800117 <xos-pagination
118 ng-if="vm.config.pagination"
119 page-size="vm.config.pagination.pageSize"
120 total-elements="vm.data.length"
121 change="vm.goToPage">
122 </xos-pagination>
Matteo Scandolod62ea792016-12-22 14:02:28 -0800123 </div>
Matteo Scandolo710dc152017-04-11 13:54:23 -0700124</div>
125<div ng-show="(vm.data.length == 0 || !vm.data) && vm.loader == false">
126 <xos-alert config="{type: 'info'}" show="true">
127 No data to show.
128 </xos-alert>
129</div>
130<div ng-show="vm.loader == true">
131 <div class="loader"></div>
132</div>