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 | 91fe03d | 2016-03-24 15:29:52 -0700 | [diff] [blame] | 18 | angular.module('xos.uiComponents.table', []) |
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 | } |
| 44 | ] |
| 45 | * } |
| 46 | * ``` |
| 47 | * @param {Array} data The data that should be rendered |
Matteo Scandolo | aa683dd | 2016-04-14 15:34:12 -0700 | [diff] [blame] | 48 | * @element ANY |
| 49 | * @scope |
| 50 | * @example |
| 51 | |
| 52 | <example module="sampleModule1"> |
| 53 | <file name="index.html"> |
| 54 | <div ng-controller="SampleCtrl1 as vm"> |
| 55 | <xos-table data="vm.data" config="vm.config"></xos-table> |
Matteo Scandolo | aa683dd | 2016-04-14 15:34:12 -0700 | [diff] [blame] | 56 | </div> |
| 57 | </file> |
| 58 | <file name="script.js"> |
| 59 | angular.module('sampleModule1', ['xos.uiComponents.table']) |
| 60 | .controller('SampleCtrl1', function(){ |
| 61 | this.config = { |
| 62 | columns: [ |
| 63 | { |
Matteo Scandolo | a6a9e61 | 2016-04-14 16:52:13 -0700 | [diff] [blame^] | 64 | label: 'First Name', // column title |
| 65 | prop: 'name' // property to read in the data array |
Matteo Scandolo | aa683dd | 2016-04-14 15:34:12 -0700 | [diff] [blame] | 66 | }, |
| 67 | { |
| 68 | label: 'Last Name', |
| 69 | prop: 'lastname' |
| 70 | } |
| 71 | ] |
| 72 | }; |
| 73 | |
| 74 | this.data = [ |
| 75 | { |
| 76 | name: 'John', |
| 77 | lastname: 'Doe' |
| 78 | }, |
| 79 | { |
| 80 | name: 'Gili', |
| 81 | lastname: 'Fereydoun' |
| 82 | } |
| 83 | ] |
| 84 | }); |
| 85 | </file> |
| 86 | </example> |
| 87 | |
Matteo Scandolo | a6a9e61 | 2016-04-14 16:52:13 -0700 | [diff] [blame^] | 88 | <example module="sampleModule2"> |
Matteo Scandolo | aa683dd | 2016-04-14 15:34:12 -0700 | [diff] [blame] | 89 | <file name="index.html"> |
| 90 | <div ng-controller="SampleCtrl2 as vm"> |
| 91 | <xos-table data="vm.data" config="vm.config"></xos-table> |
Matteo Scandolo | aa683dd | 2016-04-14 15:34:12 -0700 | [diff] [blame] | 92 | </div> |
| 93 | </file> |
| 94 | <file name="script.js"> |
| 95 | angular.module('sampleModule2', ['xos.uiComponents.table']) |
| 96 | .controller('SampleCtrl2', function(){ |
| 97 | this.config = { |
| 98 | columns: [ |
| 99 | { |
Matteo Scandolo | a6a9e61 | 2016-04-14 16:52:13 -0700 | [diff] [blame^] | 100 | label: 'First Name', // column title |
| 101 | prop: 'name' // property to read in the data array |
Matteo Scandolo | aa683dd | 2016-04-14 15:34:12 -0700 | [diff] [blame] | 102 | }, |
| 103 | { |
| 104 | label: 'Last Name', |
| 105 | prop: 'lastname' |
| 106 | } |
| 107 | ], |
Matteo Scandolo | a6a9e61 | 2016-04-14 16:52:13 -0700 | [diff] [blame^] | 108 | classes: 'table table-striped table-condensed', // table classes, default to `table table-striped table-bordered` |
| 109 | actions: [ // if defined add an action column |
Matteo Scandolo | aa683dd | 2016-04-14 15:34:12 -0700 | [diff] [blame] | 110 | { |
Matteo Scandolo | a6a9e61 | 2016-04-14 16:52:13 -0700 | [diff] [blame^] | 111 | label: 'delete', // label |
| 112 | icon: 'remove', // icons, refers to bootstraps glyphicon |
| 113 | cb: (user) => { // callback, get feeded with the full object |
Matteo Scandolo | aa683dd | 2016-04-14 15:34:12 -0700 | [diff] [blame] | 114 | console.log(user); |
| 115 | }, |
Matteo Scandolo | a6a9e61 | 2016-04-14 16:52:13 -0700 | [diff] [blame^] | 116 | color: 'red' // icon color |
Matteo Scandolo | aa683dd | 2016-04-14 15:34:12 -0700 | [diff] [blame] | 117 | } |
| 118 | ] |
| 119 | }; |
| 120 | |
| 121 | this.data = [ |
| 122 | { |
| 123 | name: 'John', |
| 124 | lastname: 'Doe' |
| 125 | }, |
| 126 | { |
| 127 | name: 'Gili', |
| 128 | lastname: 'Fereydoun' |
| 129 | } |
| 130 | ] |
| 131 | }); |
| 132 | </file> |
| 133 | </example> |
| 134 | |
| 135 | **/ |
| 136 | |
Matteo Scandolo | 91fe03d | 2016-03-24 15:29:52 -0700 | [diff] [blame] | 137 | .directive('xosTable', function(){ |
| 138 | return { |
| 139 | restrict: 'E', |
| 140 | scope: { |
| 141 | data: '=', |
Matteo Scandolo | 18adcb5 | 2016-04-14 12:06:50 -0700 | [diff] [blame] | 142 | config: '=' |
Matteo Scandolo | 91fe03d | 2016-03-24 15:29:52 -0700 | [diff] [blame] | 143 | }, |
Matteo Scandolo | b7a86dc | 2016-04-14 11:46:30 -0700 | [diff] [blame] | 144 | template: ` |
Matteo Scandolo | 18adcb5 | 2016-04-14 12:06:50 -0700 | [diff] [blame] | 145 | <!-- <pre>{{vm.data | json}}</pre> --> |
Matteo Scandolo | a6a9e61 | 2016-04-14 16:52:13 -0700 | [diff] [blame^] | 146 | <div class="row" ng-if="vm.config.filter == 'fulltext'"> |
| 147 | <div class="col-xs-12"> |
| 148 | <input |
| 149 | class="form-control" |
| 150 | placeholder="Type to search.." |
| 151 | type="text" |
| 152 | ng-model="vm.query"/> |
| 153 | </div> |
| 154 | </div> |
Matteo Scandolo | 18adcb5 | 2016-04-14 12:06:50 -0700 | [diff] [blame] | 155 | <table ng-class="vm.classes" ng-show="vm.data.length > 0"> |
Matteo Scandolo | b7a86dc | 2016-04-14 11:46:30 -0700 | [diff] [blame] | 156 | <thead> |
| 157 | <tr> |
Matteo Scandolo | 18adcb5 | 2016-04-14 12:06:50 -0700 | [diff] [blame] | 158 | <th ng-repeat="col in vm.columns">{{col.label}}</th> |
Matteo Scandolo | 9e6c6fc | 2016-04-14 14:59:09 -0700 | [diff] [blame] | 159 | <th ng-if="vm.config.actions">Actions</th> |
Matteo Scandolo | b7a86dc | 2016-04-14 11:46:30 -0700 | [diff] [blame] | 160 | </tr> |
| 161 | </thead> |
Matteo Scandolo | a6a9e61 | 2016-04-14 16:52:13 -0700 | [diff] [blame^] | 162 | <tbody ng-if="vm.config.filter == 'field'"> |
| 163 | <tr> |
| 164 | <td ng-repeat="col in vm.columns"> |
| 165 | <input |
| 166 | class="form-control" |
| 167 | placeholder="Type to search by {{col.label}}" |
| 168 | type="text" |
| 169 | ng-model="vm.query[col.prop]"/> |
| 170 | </td> |
| 171 | <td ng-if="vm.config.actions"></td> |
| 172 | </tr> |
| 173 | </tbody> |
Matteo Scandolo | b7a86dc | 2016-04-14 11:46:30 -0700 | [diff] [blame] | 174 | <tbody> |
Matteo Scandolo | a6a9e61 | 2016-04-14 16:52:13 -0700 | [diff] [blame^] | 175 | <tr ng-repeat="item in vm.data | filter:vm.query"> |
Matteo Scandolo | 18adcb5 | 2016-04-14 12:06:50 -0700 | [diff] [blame] | 176 | <td ng-repeat="col in vm.columns">{{item[col.prop]}}</td> |
Matteo Scandolo | 9e6c6fc | 2016-04-14 14:59:09 -0700 | [diff] [blame] | 177 | <td ng-if="vm.config.actions"> |
Matteo Scandolo | a6a9e61 | 2016-04-14 16:52:13 -0700 | [diff] [blame^] | 178 | <a href="" |
Matteo Scandolo | 9e6c6fc | 2016-04-14 14:59:09 -0700 | [diff] [blame] | 179 | ng-repeat="action in vm.config.actions" |
| 180 | ng-click="action.cb(item)" |
Matteo Scandolo | a6a9e61 | 2016-04-14 16:52:13 -0700 | [diff] [blame^] | 181 | title="{{action.label}}"> |
| 182 | <i |
| 183 | class="glyphicon glyphicon-{{action.icon}}" |
| 184 | style="color: {{action.color}};"></i> |
| 185 | </a> |
Matteo Scandolo | 9e6c6fc | 2016-04-14 14:59:09 -0700 | [diff] [blame] | 186 | </td> |
Matteo Scandolo | b7a86dc | 2016-04-14 11:46:30 -0700 | [diff] [blame] | 187 | </tr> |
| 188 | </tbody> |
| 189 | </table> |
| 190 | `, |
Matteo Scandolo | 91fe03d | 2016-03-24 15:29:52 -0700 | [diff] [blame] | 191 | bindToController: true, |
| 192 | controllerAs: 'vm', |
| 193 | controller: function(){ |
Matteo Scandolo | 18adcb5 | 2016-04-14 12:06:50 -0700 | [diff] [blame] | 194 | |
| 195 | if(!this.config){ |
| 196 | throw new Error('[xosTable] Please provide a configuration via the "config" attribute'); |
| 197 | } |
| 198 | |
| 199 | if(!this.config.columns){ |
| 200 | throw new Error('[xosTable] Please provide a columns list in the configuration'); |
| 201 | } |
| 202 | |
| 203 | this.columns = this.config.columns; |
| 204 | this.classes = this.config.classes || 'table table-striped table-bordered'; |
| 205 | |
Matteo Scandolo | 9e6c6fc | 2016-04-14 14:59:09 -0700 | [diff] [blame] | 206 | if(this.config.actions){ |
| 207 | |
| 208 | } |
| 209 | |
Matteo Scandolo | 91fe03d | 2016-03-24 15:29:52 -0700 | [diff] [blame] | 210 | } |
| 211 | } |
| 212 | }) |
| 213 | })(); |