Added order by buttons to xosTable and filtered
diff --git a/views/ngXosLib/xosHelpers/spec/ui/table.test.js b/views/ngXosLib/xosHelpers/spec/ui/table.test.js
index d83b6f6..0b7fffb 100644
--- a/views/ngXosLib/xosHelpers/spec/ui/table.test.js
+++ b/views/ngXosLib/xosHelpers/spec/ui/table.test.js
@@ -154,6 +154,32 @@
});
});
});
+
+ describe('when order is true', () => {
+ beforeEach(() => {
+ isolatedScope.config.order = true;
+ scope.$digest();
+ });
+
+ it('should render a arrows beside', () => {
+ var arrows = element[0].getElementsByTagName('i');
+ expect(arrows.length).toEqual(4);
+ });
+
+ describe('and an order is set', () => {
+ beforeEach(() => {
+ isolatedScope.orderBy = 'label-1';
+ isolatedScope.reverse = true;
+ scope.$digest();
+ });
+
+ it('should orderBy', function() {
+ var tr = element[0].getElementsByTagName('tr');
+ expect(angular.element(tr[1]).text()).toContain('Sample 2.2');
+ expect(angular.element(tr[2]).text()).toContain('Sample 1.1');
+ });
+ });
+ });
});
});
});
diff --git a/views/ngXosLib/xosHelpers/src/ui_components/table/table.component.js b/views/ngXosLib/xosHelpers/src/ui_components/table/table.component.js
index f889a3b..891e96d 100644
--- a/views/ngXosLib/xosHelpers/src/ui_components/table/table.component.js
+++ b/views/ngXosLib/xosHelpers/src/ui_components/table/table.component.js
@@ -155,7 +155,17 @@
<table ng-class="vm.classes" ng-show="vm.data.length > 0">
<thead>
<tr>
- <th ng-repeat="col in vm.columns">{{col.label}}</th>
+ <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>
@@ -172,7 +182,7 @@
</tr>
</tbody>
<tbody>
- <tr ng-repeat="item in vm.data | filter:vm.query">
+ <tr ng-repeat="item in vm.data | filter:vm.query | orderBy:vm.orderBy:vm.reverse">
<td ng-repeat="col in vm.columns">{{item[col.prop]}}</td>
<td ng-if="vm.config.actions">
<a href=""
diff --git a/views/ngXosViews/sampleView/src/js/main.js b/views/ngXosViews/sampleView/src/js/main.js
index 31fc373..90374ab 100644
--- a/views/ngXosViews/sampleView/src/js/main.js
+++ b/views/ngXosViews/sampleView/src/js/main.js
@@ -52,7 +52,8 @@
color: 'red'
}
],
- filter: 'field'
+ filter: 'field',
+ order: true
};
// retrieving user list