Matteo Scandolo | 91fe03d | 2016-03-24 15:29:52 -0700 | [diff] [blame] | 1 | /** |
| 2 | * © OpenCORD |
| 3 | * |
| 4 | * Visit http://guide.xosproject.org/devguide/addview/ for more information |
| 5 | * |
| 6 | * Created by teone on 3/24/16. |
| 7 | */ |
| 8 | |
| 9 | (function () { |
| 10 | 'use strict'; |
| 11 | |
Matteo Scandolo | aa683dd | 2016-04-14 15:34:12 -0700 | [diff] [blame] | 12 | /** |
| 13 | * @ngdoc overview |
| 14 | * @name xos.uiComponents.table |
| 15 | * @description A table component |
| 16 | **/ |
Matteo Scandolo | b7a86dc | 2016-04-14 11:46:30 -0700 | [diff] [blame] | 17 | |
Matteo Scandolo | cc6954e | 2016-04-15 12:20:14 -0700 | [diff] [blame] | 18 | angular.module('xos.uiComponents') |
Matteo Scandolo | aa683dd | 2016-04-14 15:34:12 -0700 | [diff] [blame] | 19 | |
| 20 | /** |
| 21 | * @ngdoc directive |
| 22 | * @name xos.uiComponents.table.directive:xosTable |
| 23 | * @restrict E |
| 24 | * @description The xos-table directive |
Matteo Scandolo | a6a9e61 | 2016-04-14 16:52:13 -0700 | [diff] [blame] | 25 | * @param {Object} config The configuration for the component. |
| 26 | * ``` |
| 27 | * { |
| 28 | * columns: [ |
| 29 | * { |
| 30 | * label: 'Human readable name', |
| 31 | * prop: 'Property to read in the model object' |
| 32 | * } |
| 33 | * ], |
| 34 | * classes: 'table table-striped table-bordered', |
| 35 | * actions: [ // if defined add an action column |
| 36 | { |
| 37 | label: 'delete', |
| 38 | icon: 'remove', // refers to bootstraps glyphicon |
| 39 | cb: (user) => { // receive the model |
| 40 | console.log(user); |
| 41 | }, |
| 42 | color: 'red' |
| 43 | } |
Matteo Scandolo | 5677bb1 | 2016-04-14 17:21:45 -0700 | [diff] [blame] | 44 | ], |
| 45 | filter: 'field', // can be by `field` or `fulltext` |
| 46 | order: true // whether to show ordering arrows |
Matteo Scandolo | a6a9e61 | 2016-04-14 16:52:13 -0700 | [diff] [blame] | 47 | * } |
| 48 | * ``` |
| 49 | * @param {Array} data The data that should be rendered |
Matteo Scandolo | aa683dd | 2016-04-14 15:34:12 -0700 | [diff] [blame] | 50 | * @element ANY |
| 51 | * @scope |
| 52 | * @example |
| 53 | |
| 54 | <example module="sampleModule1"> |
| 55 | <file name="index.html"> |
| 56 | <div ng-controller="SampleCtrl1 as vm"> |
| 57 | <xos-table data="vm.data" config="vm.config"></xos-table> |
Matteo Scandolo | aa683dd | 2016-04-14 15:34:12 -0700 | [diff] [blame] | 58 | </div> |
| 59 | </file> |
| 60 | <file name="script.js"> |
| 61 | angular.module('sampleModule1', ['xos.uiComponents.table']) |
| 62 | .controller('SampleCtrl1', function(){ |
| 63 | this.config = { |
| 64 | columns: [ |
| 65 | { |
Matteo Scandolo | a6a9e61 | 2016-04-14 16:52:13 -0700 | [diff] [blame] | 66 | label: 'First Name', // column title |
| 67 | prop: 'name' // property to read in the data array |
Matteo Scandolo | aa683dd | 2016-04-14 15:34:12 -0700 | [diff] [blame] | 68 | }, |
| 69 | { |
| 70 | label: 'Last Name', |
| 71 | prop: 'lastname' |
| 72 | } |
| 73 | ] |
| 74 | }; |
| 75 | |
| 76 | this.data = [ |
| 77 | { |
| 78 | name: 'John', |
| 79 | lastname: 'Doe' |
| 80 | }, |
| 81 | { |
| 82 | name: 'Gili', |
| 83 | lastname: 'Fereydoun' |
| 84 | } |
| 85 | ] |
| 86 | }); |
| 87 | </file> |
| 88 | </example> |
| 89 | |
Matteo Scandolo | a6a9e61 | 2016-04-14 16:52:13 -0700 | [diff] [blame] | 90 | <example module="sampleModule2"> |
Matteo Scandolo | aa683dd | 2016-04-14 15:34:12 -0700 | [diff] [blame] | 91 | <file name="index.html"> |
| 92 | <div ng-controller="SampleCtrl2 as vm"> |
| 93 | <xos-table data="vm.data" config="vm.config"></xos-table> |
Matteo Scandolo | aa683dd | 2016-04-14 15:34:12 -0700 | [diff] [blame] | 94 | </div> |
| 95 | </file> |
| 96 | <file name="script.js"> |
| 97 | angular.module('sampleModule2', ['xos.uiComponents.table']) |
| 98 | .controller('SampleCtrl2', function(){ |
| 99 | this.config = { |
| 100 | columns: [ |
| 101 | { |
Matteo Scandolo | a6a9e61 | 2016-04-14 16:52:13 -0700 | [diff] [blame] | 102 | label: 'First Name', // column title |
| 103 | prop: 'name' // property to read in the data array |
Matteo Scandolo | aa683dd | 2016-04-14 15:34:12 -0700 | [diff] [blame] | 104 | }, |
| 105 | { |
| 106 | label: 'Last Name', |
| 107 | prop: 'lastname' |
| 108 | } |
| 109 | ], |
Matteo Scandolo | a6a9e61 | 2016-04-14 16:52:13 -0700 | [diff] [blame] | 110 | classes: 'table table-striped table-condensed', // table classes, default to `table table-striped table-bordered` |
| 111 | actions: [ // if defined add an action column |
Matteo Scandolo | aa683dd | 2016-04-14 15:34:12 -0700 | [diff] [blame] | 112 | { |
Matteo Scandolo | a6a9e61 | 2016-04-14 16:52:13 -0700 | [diff] [blame] | 113 | label: 'delete', // label |
| 114 | icon: 'remove', // icons, refers to bootstraps glyphicon |
| 115 | cb: (user) => { // callback, get feeded with the full object |
Matteo Scandolo | aa683dd | 2016-04-14 15:34:12 -0700 | [diff] [blame] | 116 | console.log(user); |
| 117 | }, |
Matteo Scandolo | a6a9e61 | 2016-04-14 16:52:13 -0700 | [diff] [blame] | 118 | color: 'red' // icon color |
Matteo Scandolo | aa683dd | 2016-04-14 15:34:12 -0700 | [diff] [blame] | 119 | } |
Matteo Scandolo | 5677bb1 | 2016-04-14 17:21:45 -0700 | [diff] [blame] | 120 | ], |
| 121 | filter: 'field', // can be by `field` or `fulltext` |
| 122 | order: true |
Matteo Scandolo | aa683dd | 2016-04-14 15:34:12 -0700 | [diff] [blame] | 123 | }; |
| 124 | |
| 125 | this.data = [ |
| 126 | { |
| 127 | name: 'John', |
| 128 | lastname: 'Doe' |
| 129 | }, |
| 130 | { |
| 131 | name: 'Gili', |
| 132 | lastname: 'Fereydoun' |
| 133 | } |
| 134 | ] |
| 135 | }); |
| 136 | </file> |
| 137 | </example> |
| 138 | |
| 139 | **/ |
| 140 | |
Matteo Scandolo | 91fe03d | 2016-03-24 15:29:52 -0700 | [diff] [blame] | 141 | .directive('xosTable', function(){ |
| 142 | return { |
| 143 | restrict: 'E', |
| 144 | scope: { |
| 145 | data: '=', |
Matteo Scandolo | 18adcb5 | 2016-04-14 12:06:50 -0700 | [diff] [blame] | 146 | config: '=' |
Matteo Scandolo | 91fe03d | 2016-03-24 15:29:52 -0700 | [diff] [blame] | 147 | }, |
Matteo Scandolo | b7a86dc | 2016-04-14 11:46:30 -0700 | [diff] [blame] | 148 | template: ` |
Matteo Scandolo | 18adcb5 | 2016-04-14 12:06:50 -0700 | [diff] [blame] | 149 | <!-- <pre>{{vm.data | json}}</pre> --> |
Matteo Scandolo | a6a9e61 | 2016-04-14 16:52:13 -0700 | [diff] [blame] | 150 | <div class="row" ng-if="vm.config.filter == 'fulltext'"> |
| 151 | <div class="col-xs-12"> |
| 152 | <input |
| 153 | class="form-control" |
| 154 | placeholder="Type to search.." |
| 155 | type="text" |
| 156 | ng-model="vm.query"/> |
| 157 | </div> |
| 158 | </div> |
Matteo Scandolo | 18adcb5 | 2016-04-14 12:06:50 -0700 | [diff] [blame] | 159 | <table ng-class="vm.classes" ng-show="vm.data.length > 0"> |
Matteo Scandolo | b7a86dc | 2016-04-14 11:46:30 -0700 | [diff] [blame] | 160 | <thead> |
| 161 | <tr> |
Matteo Scandolo | 03e5960 | 2016-04-14 17:19:08 -0700 | [diff] [blame] | 162 | <th ng-repeat="col in vm.columns"> |
| 163 | {{col.label}} |
| 164 | <span ng-if="vm.config.order"> |
| 165 | <a href="" ng-click="vm.orderBy = col.prop; vm.reverse = false"> |
| 166 | <i class="glyphicon glyphicon-chevron-up"></i> |
| 167 | </a> |
| 168 | <a href="" ng-click="vm.orderBy = col.prop; vm.reverse = true"> |
| 169 | <i class="glyphicon glyphicon-chevron-down"></i> |
| 170 | </a> |
| 171 | </span> |
| 172 | </th> |
Matteo Scandolo | 9e6c6fc | 2016-04-14 14:59:09 -0700 | [diff] [blame] | 173 | <th ng-if="vm.config.actions">Actions</th> |
Matteo Scandolo | b7a86dc | 2016-04-14 11:46:30 -0700 | [diff] [blame] | 174 | </tr> |
| 175 | </thead> |
Matteo Scandolo | a6a9e61 | 2016-04-14 16:52:13 -0700 | [diff] [blame] | 176 | <tbody ng-if="vm.config.filter == 'field'"> |
| 177 | <tr> |
| 178 | <td ng-repeat="col in vm.columns"> |
| 179 | <input |
| 180 | class="form-control" |
| 181 | placeholder="Type to search by {{col.label}}" |
| 182 | type="text" |
| 183 | ng-model="vm.query[col.prop]"/> |
| 184 | </td> |
| 185 | <td ng-if="vm.config.actions"></td> |
| 186 | </tr> |
| 187 | </tbody> |
Matteo Scandolo | b7a86dc | 2016-04-14 11:46:30 -0700 | [diff] [blame] | 188 | <tbody> |
Matteo Scandolo | cc6954e | 2016-04-15 12:20:14 -0700 | [diff] [blame] | 189 | <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 track by $index"> |
Matteo Scandolo | 18adcb5 | 2016-04-14 12:06:50 -0700 | [diff] [blame] | 190 | <td ng-repeat="col in vm.columns">{{item[col.prop]}}</td> |
Matteo Scandolo | 9e6c6fc | 2016-04-14 14:59:09 -0700 | [diff] [blame] | 191 | <td ng-if="vm.config.actions"> |
Matteo Scandolo | a6a9e61 | 2016-04-14 16:52:13 -0700 | [diff] [blame] | 192 | <a href="" |
Matteo Scandolo | 9e6c6fc | 2016-04-14 14:59:09 -0700 | [diff] [blame] | 193 | ng-repeat="action in vm.config.actions" |
| 194 | ng-click="action.cb(item)" |
Matteo Scandolo | a6a9e61 | 2016-04-14 16:52:13 -0700 | [diff] [blame] | 195 | title="{{action.label}}"> |
| 196 | <i |
| 197 | class="glyphicon glyphicon-{{action.icon}}" |
| 198 | style="color: {{action.color}};"></i> |
| 199 | </a> |
Matteo Scandolo | 9e6c6fc | 2016-04-14 14:59:09 -0700 | [diff] [blame] | 200 | </td> |
Matteo Scandolo | b7a86dc | 2016-04-14 11:46:30 -0700 | [diff] [blame] | 201 | </tr> |
| 202 | </tbody> |
| 203 | </table> |
Matteo Scandolo | cc6954e | 2016-04-15 12:20:14 -0700 | [diff] [blame] | 204 | <xos-pagination |
| 205 | ng-if="vm.config.pagination" |
| 206 | page-size="vm.config.pagination.pageSize" |
| 207 | total-elements="vm.data.length" |
| 208 | change="vm.goToPage"> |
| 209 | </xos-pagination> |
Matteo Scandolo | b7a86dc | 2016-04-14 11:46:30 -0700 | [diff] [blame] | 210 | `, |
Matteo Scandolo | 91fe03d | 2016-03-24 15:29:52 -0700 | [diff] [blame] | 211 | bindToController: true, |
| 212 | controllerAs: 'vm', |
| 213 | controller: function(){ |
Matteo Scandolo | 18adcb5 | 2016-04-14 12:06:50 -0700 | [diff] [blame] | 214 | |
| 215 | if(!this.config){ |
| 216 | throw new Error('[xosTable] Please provide a configuration via the "config" attribute'); |
| 217 | } |
| 218 | |
| 219 | if(!this.config.columns){ |
| 220 | throw new Error('[xosTable] Please provide a columns list in the configuration'); |
| 221 | } |
| 222 | |
| 223 | this.columns = this.config.columns; |
| 224 | this.classes = this.config.classes || 'table table-striped table-bordered'; |
| 225 | |
Matteo Scandolo | 9e6c6fc | 2016-04-14 14:59:09 -0700 | [diff] [blame] | 226 | if(this.config.actions){ |
Matteo Scandolo | cc6954e | 2016-04-15 12:20:14 -0700 | [diff] [blame] | 227 | // TODO validate action format |
| 228 | } |
| 229 | if(this.config.pagination){ |
| 230 | this.currentPage = 0; |
| 231 | this.goToPage = (n) => { |
| 232 | this.currentPage = n; |
| 233 | }; |
Matteo Scandolo | 9e6c6fc | 2016-04-14 14:59:09 -0700 | [diff] [blame] | 234 | } |
| 235 | |
Matteo Scandolo | 91fe03d | 2016-03-24 15:29:52 -0700 | [diff] [blame] | 236 | } |
| 237 | } |
| 238 | }) |
| 239 | })(); |