Matteo Scandolo | 6635143 | 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 | 5614b90 | 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 | 1dab3e0 | 2016-04-14 11:46:30 -0700 | [diff] [blame] | 17 | |
Matteo Scandolo | 6635143 | 2016-03-24 15:29:52 -0700 | [diff] [blame] | 18 | angular.module('xos.uiComponents.table', []) |
Matteo Scandolo | 5614b90 | 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 |
| 25 | * @element ANY |
| 26 | * @scope |
| 27 | * @example |
| 28 | |
| 29 | <example module="sampleModule1"> |
| 30 | <file name="index.html"> |
| 31 | <div ng-controller="SampleCtrl1 as vm"> |
| 32 | <xos-table data="vm.data" config="vm.config"></xos-table> |
| 33 | </xos-table> |
| 34 | </div> |
| 35 | </file> |
| 36 | <file name="script.js"> |
| 37 | angular.module('sampleModule1', ['xos.uiComponents.table']) |
| 38 | .controller('SampleCtrl1', function(){ |
| 39 | this.config = { |
| 40 | columns: [ |
| 41 | { |
| 42 | label: 'First Name', |
| 43 | prop: 'name' |
| 44 | }, |
| 45 | { |
| 46 | label: 'Last Name', |
| 47 | prop: 'lastname' |
| 48 | } |
| 49 | ] |
| 50 | }; |
| 51 | |
| 52 | this.data = [ |
| 53 | { |
| 54 | name: 'John', |
| 55 | lastname: 'Doe' |
| 56 | }, |
| 57 | { |
| 58 | name: 'Gili', |
| 59 | lastname: 'Fereydoun' |
| 60 | } |
| 61 | ] |
| 62 | }); |
| 63 | </file> |
| 64 | </example> |
| 65 | |
| 66 | <example module="sampleModule2"> |
| 67 | <file name="index.html"> |
| 68 | <div ng-controller="SampleCtrl2 as vm"> |
| 69 | <xos-table data="vm.data" config="vm.config"></xos-table> |
| 70 | </xos-table> |
| 71 | </div> |
| 72 | </file> |
| 73 | <file name="script.js"> |
| 74 | angular.module('sampleModule2', ['xos.uiComponents.table']) |
| 75 | .controller('SampleCtrl2', function(){ |
| 76 | this.config = { |
| 77 | columns: [ |
| 78 | { |
| 79 | label: 'First Name', |
| 80 | prop: 'name' |
| 81 | }, |
| 82 | { |
| 83 | label: 'Last Name', |
| 84 | prop: 'lastname' |
| 85 | } |
| 86 | ], |
| 87 | classes: 'table table-striped table-condensed', |
| 88 | actions: [ |
| 89 | { |
| 90 | label: 'delete', |
| 91 | icon: 'remove', |
| 92 | cb: (user) => { |
| 93 | console.log(user); |
| 94 | }, |
| 95 | color: 'red' |
| 96 | } |
| 97 | ] |
| 98 | }; |
| 99 | |
| 100 | this.data = [ |
| 101 | { |
| 102 | name: 'John', |
| 103 | lastname: 'Doe' |
| 104 | }, |
| 105 | { |
| 106 | name: 'Gili', |
| 107 | lastname: 'Fereydoun' |
| 108 | } |
| 109 | ] |
| 110 | }); |
| 111 | </file> |
| 112 | </example> |
| 113 | |
| 114 | **/ |
| 115 | |
Matteo Scandolo | 6635143 | 2016-03-24 15:29:52 -0700 | [diff] [blame] | 116 | .directive('xosTable', function(){ |
| 117 | return { |
| 118 | restrict: 'E', |
| 119 | scope: { |
| 120 | data: '=', |
Matteo Scandolo | dcc6524 | 2016-04-14 12:06:50 -0700 | [diff] [blame] | 121 | config: '=' |
Matteo Scandolo | 6635143 | 2016-03-24 15:29:52 -0700 | [diff] [blame] | 122 | }, |
Matteo Scandolo | 1dab3e0 | 2016-04-14 11:46:30 -0700 | [diff] [blame] | 123 | template: ` |
Matteo Scandolo | dcc6524 | 2016-04-14 12:06:50 -0700 | [diff] [blame] | 124 | <!-- <pre>{{vm.data | json}}</pre> --> |
| 125 | <table ng-class="vm.classes" ng-show="vm.data.length > 0"> |
Matteo Scandolo | 1dab3e0 | 2016-04-14 11:46:30 -0700 | [diff] [blame] | 126 | <thead> |
| 127 | <tr> |
Matteo Scandolo | dcc6524 | 2016-04-14 12:06:50 -0700 | [diff] [blame] | 128 | <th ng-repeat="col in vm.columns">{{col.label}}</th> |
Matteo Scandolo | a7e64fd | 2016-04-14 14:59:09 -0700 | [diff] [blame] | 129 | <th ng-if="vm.config.actions">Actions</th> |
Matteo Scandolo | 1dab3e0 | 2016-04-14 11:46:30 -0700 | [diff] [blame] | 130 | </tr> |
| 131 | </thead> |
| 132 | <tbody> |
| 133 | <tr ng-repeat="item in vm.data"> |
Matteo Scandolo | dcc6524 | 2016-04-14 12:06:50 -0700 | [diff] [blame] | 134 | <td ng-repeat="col in vm.columns">{{item[col.prop]}}</td> |
Matteo Scandolo | a7e64fd | 2016-04-14 14:59:09 -0700 | [diff] [blame] | 135 | <td ng-if="vm.config.actions"> |
| 136 | <i |
| 137 | ng-repeat="action in vm.config.actions" |
| 138 | ng-click="action.cb(item)" |
| 139 | class="glyphicon glyphicon-{{action.icon}}" |
| 140 | style="color: {{action.color}};"></i> |
| 141 | </td> |
Matteo Scandolo | 1dab3e0 | 2016-04-14 11:46:30 -0700 | [diff] [blame] | 142 | </tr> |
| 143 | </tbody> |
| 144 | </table> |
| 145 | `, |
Matteo Scandolo | 6635143 | 2016-03-24 15:29:52 -0700 | [diff] [blame] | 146 | bindToController: true, |
| 147 | controllerAs: 'vm', |
| 148 | controller: function(){ |
Matteo Scandolo | dcc6524 | 2016-04-14 12:06:50 -0700 | [diff] [blame] | 149 | |
| 150 | if(!this.config){ |
| 151 | throw new Error('[xosTable] Please provide a configuration via the "config" attribute'); |
| 152 | } |
| 153 | |
| 154 | if(!this.config.columns){ |
| 155 | throw new Error('[xosTable] Please provide a columns list in the configuration'); |
| 156 | } |
| 157 | |
| 158 | this.columns = this.config.columns; |
| 159 | this.classes = this.config.classes || 'table table-striped table-bordered'; |
| 160 | |
Matteo Scandolo | a7e64fd | 2016-04-14 14:59:09 -0700 | [diff] [blame] | 161 | if(this.config.actions){ |
| 162 | |
| 163 | } |
| 164 | |
Matteo Scandolo | 6635143 | 2016-03-24 15:29:52 -0700 | [diff] [blame] | 165 | } |
| 166 | } |
| 167 | }) |
| 168 | })(); |