Added .component syntax in ng-xos-lib
Change-Id: Icc6ff26cff1369038cc9684612f742af0a78c799
diff --git a/src/ui_components/dumbComponents/table/table.component.js b/src/ui_components/dumbComponents/table/table.component.js
index 1e60458..e8f66b4 100644
--- a/src/ui_components/dumbComponents/table/table.component.js
+++ b/src/ui_components/dumbComponents/table/table.component.js
@@ -330,196 +330,193 @@
</example>
**/
- .directive('xosTable', function(){
- return {
- restrict: 'E',
- scope: {
- data: '=',
- config: '='
- },
- template: `
- <div ng-show="vm.data.length > 0 && vm.loader == false">
- <div class="row" ng-if="vm.config.filter == 'fulltext'">
- <div class="col-xs-12">
- <input
- class="form-control"
- placeholder="Type to search.."
- type="text"
- ng-model="vm.query"/>
- </div>
+ .component('xosTable', {
+ restrict: 'E',
+ bindings: {
+ data: '=',
+ config: '='
+ },
+ template: `
+ <div ng-show="vm.data.length > 0 && vm.loader == false">
+ <div class="row" ng-if="vm.config.filter == 'fulltext'">
+ <div class="col-xs-12">
+ <input
+ class="form-control"
+ placeholder="Type to search.."
+ type="text"
+ ng-model="vm.query"/>
</div>
- <table ng-class="vm.classes" ng-hide="vm.data.length == 0">
- <thead>
- <tr>
- <th ng-repeat="col in vm.columns">
- {{col.label}}
- <span ng-if="vm.config.order">
- <a href="" ng-click="vm.orderBy = col.prop; vm.reverse = false">
- <i class="glyphicon glyphicon-chevron-up"></i>
- </a>
- <a href="" ng-click="vm.orderBy = col.prop; vm.reverse = true">
- <i class="glyphicon glyphicon-chevron-down"></i>
- </a>
- </span>
- </th>
- <th ng-if="vm.config.actions">Actions:</th>
- </tr>
- </thead>
- <tbody ng-if="vm.config.filter == 'field'">
- <tr>
- <td ng-repeat="col in vm.columns">
- <input
- ng-if="col.type !== 'boolean' && col.type !== 'array' && col.type !== 'object' && col.type !== 'custom'"
- class="form-control"
- placeholder="Type to search by {{col.label}}"
- type="text"
- ng-model="vm.query[col.prop]"/>
- <select
- ng-if="col.type === 'boolean'"
- class="form-control"
- ng-model="vm.query[col.prop]">
- <option value="">-</option>
- <option value="true">True</option>
- <option value="false">False</option>
- </select>
- </td>
- <td ng-if="vm.config.actions"></td>
- </tr>
- </tbody>
- <tbody>
- <tr ng-repeat="item in vm.data | filter:vm.query:vm.comparator | orderBy:vm.orderBy:vm.reverse | pagination:vm.currentPage * vm.config.pagination.pageSize | limitTo: (vm.config.pagination.pageSize || vm.data.length) track by $index">
- <td ng-repeat="col in vm.columns" xos-link-wrapper>
- <span ng-if="!col.type">{{item[col.prop]}}</span>
- <span ng-if="col.type === 'boolean'">
- <i class="glyphicon"
- ng-class="{'glyphicon-ok': item[col.prop], 'glyphicon-remove': !item[col.prop]}">
- </i>
- </span>
- <span ng-if="col.type === 'date'">
- {{item[col.prop] | date:'H:mm MMM d, yyyy'}}
- </span>
- <span ng-if="col.type === 'array'">
- {{item[col.prop] | arrayToList}}
- </span>
- <span ng-if="col.type === 'object'">
- <dl class="dl-horizontal">
- <span ng-repeat="(k,v) in item[col.prop]">
- <dt>{{k}}</dt>
- <dd>{{v}}</dd>
- </span>
- </dl>
- </span>
- <span ng-if="col.type === 'custom'">
- {{col.formatter(item)}}
- </span>
- <span ng-if="col.type === 'icon'">
- <i class="glyphicon glyphicon-{{col.formatter(item)}}">
- </i>
- </span>
- </td>
- <td ng-if="vm.config.actions">
- <a href=""
- ng-repeat="action in vm.config.actions"
- ng-click="action.cb(item)"
- title="{{action.label}}">
- <i
- class="glyphicon glyphicon-{{action.icon}}"
- style="color: {{action.color}};"></i>
+ </div>
+ <table ng-class="vm.classes" ng-hide="vm.data.length == 0">
+ <thead>
+ <tr>
+ <th ng-repeat="col in vm.columns">
+ {{col.label}}
+ <span ng-if="vm.config.order">
+ <a href="" ng-click="vm.orderBy = col.prop; vm.reverse = false">
+ <i class="glyphicon glyphicon-chevron-up"></i>
</a>
- </td>
- </tr>
- </tbody>
- </table>
- <xos-pagination
- ng-if="vm.config.pagination"
- page-size="vm.config.pagination.pageSize"
- total-elements="vm.data.length"
- change="vm.goToPage">
- </xos-pagination>
- </div>
- <div ng-show="(vm.data.length == 0 || !vm.data) && vm.loader == false">
- <xos-alert config="{type: 'info'}">
- No data to show.
- </xos-alert>
- </div>
- <div ng-show="vm.loader == true">
- <div class="loader"></div>
- </div>
- `,
- bindToController: true,
- controllerAs: 'vm',
- controller: function(_, $scope, Comparator){
+ <a href="" ng-click="vm.orderBy = col.prop; vm.reverse = true">
+ <i class="glyphicon glyphicon-chevron-down"></i>
+ </a>
+ </span>
+ </th>
+ <th ng-if="vm.config.actions">Actions:</th>
+ </tr>
+ </thead>
+ <tbody ng-if="vm.config.filter == 'field'">
+ <tr>
+ <td ng-repeat="col in vm.columns">
+ <input
+ ng-if="col.type !== 'boolean' && col.type !== 'array' && col.type !== 'object' && col.type !== 'custom'"
+ class="form-control"
+ placeholder="Type to search by {{col.label}}"
+ type="text"
+ ng-model="vm.query[col.prop]"/>
+ <select
+ ng-if="col.type === 'boolean'"
+ class="form-control"
+ ng-model="vm.query[col.prop]">
+ <option value="">-</option>
+ <option value="true">True</option>
+ <option value="false">False</option>
+ </select>
+ </td>
+ <td ng-if="vm.config.actions"></td>
+ </tr>
+ </tbody>
+ <tbody>
+ <tr ng-repeat="item in vm.data | filter:vm.query:vm.comparator | orderBy:vm.orderBy:vm.reverse | pagination:vm.currentPage * vm.config.pagination.pageSize | limitTo: (vm.config.pagination.pageSize || vm.data.length) track by $index">
+ <td ng-repeat="col in vm.columns" xos-link-wrapper>
+ <span ng-if="!col.type">{{item[col.prop]}}</span>
+ <span ng-if="col.type === 'boolean'">
+ <i class="glyphicon"
+ ng-class="{'glyphicon-ok': item[col.prop], 'glyphicon-remove': !item[col.prop]}">
+ </i>
+ </span>
+ <span ng-if="col.type === 'date'">
+ {{item[col.prop] | date:'H:mm MMM d, yyyy'}}
+ </span>
+ <span ng-if="col.type === 'array'">
+ {{item[col.prop] | arrayToList}}
+ </span>
+ <span ng-if="col.type === 'object'">
+ <dl class="dl-horizontal">
+ <span ng-repeat="(k,v) in item[col.prop]">
+ <dt>{{k}}</dt>
+ <dd>{{v}}</dd>
+ </span>
+ </dl>
+ </span>
+ <span ng-if="col.type === 'custom'">
+ {{col.formatter(item)}}
+ </span>
+ <span ng-if="col.type === 'icon'">
+ <i class="glyphicon glyphicon-{{col.formatter(item)}}">
+ </i>
+ </span>
+ </td>
+ <td ng-if="vm.config.actions">
+ <a href=""
+ ng-repeat="action in vm.config.actions"
+ ng-click="action.cb(item)"
+ title="{{action.label}}">
+ <i
+ class="glyphicon glyphicon-{{action.icon}}"
+ style="color: {{action.color}};"></i>
+ </a>
+ </td>
+ </tr>
+ </tbody>
+ </table>
+ <xos-pagination
+ ng-if="vm.config.pagination"
+ page-size="vm.config.pagination.pageSize"
+ total-elements="vm.data.length"
+ change="vm.goToPage">
+ </xos-pagination>
+ </div>
+ <div ng-show="(vm.data.length == 0 || !vm.data) && vm.loader == false">
+ <xos-alert config="{type: 'info'}">
+ No data to show.
+ </xos-alert>
+ </div>
+ <div ng-show="vm.loader == true">
+ <div class="loader"></div>
+ </div>
+ `,
+ bindToController: true,
+ controllerAs: 'vm',
+ controller: function(_, $scope, Comparator){
- this.comparator = Comparator;
+ this.comparator = Comparator;
- this.loader = true;
+ this.loader = true;
- $scope.$watch(() => this.data, data => {
- if(angular.isDefined(data)){
- this.loader = false;
+ $scope.$watch(() => this.data, data => {
+ if(angular.isDefined(data)){
+ this.loader = false;
+ }
+ });
+
+ if(!this.config){
+ throw new Error('[xosTable] Please provide a configuration via the "config" attribute');
+ }
+
+ if(!this.config.columns){
+ throw new Error('[xosTable] Please provide a columns list in the configuration');
+ }
+
+ // handle default ordering
+ if(this.config.order && angular.isObject(this.config.order)){
+ this.reverse = this.config.order.reverse || false;
+ this.orderBy = this.config.order.field || 'id';
+ }
+
+ // if columns with type 'custom' are provided
+ // check that a custom formatte3 is provided too
+ let customCols = _.filter(this.config.columns, {type: 'custom'});
+ if(angular.isArray(customCols) && customCols.length > 0){
+ _.forEach(customCols, (col) => {
+ if(!col.formatter || !angular.isFunction(col.formatter)){
+ throw new Error('[xosTable] You have provided a custom field type, a formatter function should provided too.');
}
- });
+ })
+ }
- if(!this.config){
- throw new Error('[xosTable] Please provide a configuration via the "config" attribute');
- }
+ // if columns with type 'icon' are provided
+ // check that a custom formatte3 is provided too
+ let iconCols = _.filter(this.config.columns, {type: 'icon'});
+ if(angular.isArray(iconCols) && iconCols.length > 0){
+ _.forEach(iconCols, (col) => {
+ if(!col.formatter || !angular.isFunction(col.formatter)){
+ throw new Error('[xosTable] You have provided an icon field type, a formatter function should provided too.');
+ }
+ })
+ }
- if(!this.config.columns){
- throw new Error('[xosTable] Please provide a columns list in the configuration');
- }
+ // if a link property is passed,
+ // it should be a function
+ let linkedColumns = _.filter(this.config.columns, col => angular.isDefined(col.link));
+ if(angular.isArray(linkedColumns) && linkedColumns.length > 0){
+ _.forEach(linkedColumns, (col) => {
+ if(!angular.isFunction(col.link)){
+ throw new Error('[xosTable] The link property should be a function.');
+ }
+ })
+ }
- // handle default ordering
- if(this.config.order && angular.isObject(this.config.order)){
- this.reverse = this.config.order.reverse || false;
- this.orderBy = this.config.order.field || 'id';
- }
+ this.columns = this.config.columns;
+ this.classes = this.config.classes || 'table table-striped table-bordered';
- // if columns with type 'custom' are provided
- // check that a custom formatte3 is provided too
- let customCols = _.filter(this.config.columns, {type: 'custom'});
- if(angular.isArray(customCols) && customCols.length > 0){
- _.forEach(customCols, (col) => {
- if(!col.formatter || !angular.isFunction(col.formatter)){
- throw new Error('[xosTable] You have provided a custom field type, a formatter function should provided too.');
- }
- })
- }
-
- // if columns with type 'icon' are provided
- // check that a custom formatte3 is provided too
- let iconCols = _.filter(this.config.columns, {type: 'icon'});
- if(angular.isArray(iconCols) && iconCols.length > 0){
- _.forEach(iconCols, (col) => {
- if(!col.formatter || !angular.isFunction(col.formatter)){
- throw new Error('[xosTable] You have provided an icon field type, a formatter function should provided too.');
- }
- })
- }
-
- // if a link property is passed,
- // it should be a function
- let linkedColumns = _.filter(this.config.columns, col => angular.isDefined(col.link));
- if(angular.isArray(linkedColumns) && linkedColumns.length > 0){
- _.forEach(linkedColumns, (col) => {
- if(!angular.isFunction(col.link)){
- throw new Error('[xosTable] The link property should be a function.');
- }
- })
- }
-
- this.columns = this.config.columns;
- this.classes = this.config.classes || 'table table-striped table-bordered';
-
- if(this.config.actions){
- // TODO validate action format
- }
- if(this.config.pagination){
- this.currentPage = 0;
- this.goToPage = (n) => {
- this.currentPage = n;
- };
- }
-
+ if(this.config.actions){
+ // TODO validate action format
+ }
+ if(this.config.pagination){
+ this.currentPage = 0;
+ this.goToPage = (n) => {
+ this.currentPage = n;
+ };
}
}
})