Added link property to xosTable
last
diff --git a/views/ngXosLib/xosHelpers/spec/ui/table.test.js b/views/ngXosLib/xosHelpers/spec/ui/table.test.js
index 52c8b6c..d00d19e 100644
--- a/views/ngXosLib/xosHelpers/spec/ui/table.test.js
+++ b/views/ngXosLib/xosHelpers/spec/ui/table.test.js
@@ -263,6 +263,25 @@
expect(errorFunctionWrapper).toThrow(new Error('[xosTable] You have provided a custom field type, a formatter function should provided too.'));
});
+ it('should check that the formatter property is a function', () => {
+ function errorFunctionWrapper(){
+ // setup the parent scope
+ scope = rootScope.$new();
+ scope.config = {
+ columns: [
+ {
+ label: 'Categories',
+ prop: 'categories',
+ type: 'custom',
+ formatter: 'formatter'
+ }
+ ]
+ };
+ compileElement();
+ }
+ expect(errorFunctionWrapper).toThrow(new Error('[xosTable] You have provided a custom field type, a formatter function should provided too.'));
+ });
+
it('should format data using the formatter property', () => {
let td1 = $(element).find('tbody tr:first-child')[0];
expect($(td1).text().trim()).toEqual('Formatted Content');
@@ -270,6 +289,50 @@
});
});
+ describe('when a link property is provided', () => {
+ beforeEach(() => {
+ scope.data = [
+ {
+ id: 1}
+ ];
+ scope.config = {
+ columns: [
+ {
+ label: 'Id',
+ prop: 'id',
+ link: (item) => {
+ return `/link/${item.id}`;
+ }
+ }
+ ]
+ }
+ compileElement();
+ });
+
+ it('should check that the link property is a function', () => {
+ function errorFunctionWrapper(){
+ // setup the parent scope
+ scope = rootScope.$new();
+ scope.config = {
+ columns: [
+ {
+ label: 'Categories',
+ prop: 'categories',
+ link: 'custom'
+ }
+ ]
+ };
+ compileElement();
+ }
+ expect(errorFunctionWrapper).toThrow(new Error('[xosTable] The link property should be a function.'));
+ });
+
+ it('should render a comma separated list', () => {
+ let link = $(element).find('tbody tr:first-child td a')[0];
+ expect($(link).attr('href')).toEqual('/link/1');
+ });
+ });
+
describe('when actions are passed', () => {
let cb = jasmine.createSpy('callback')
@@ -366,9 +429,9 @@
});
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');
+ var tr = $(element).find('tr');
+ expect($(tr[1]).text()).toContain('Sample 2.2');
+ expect($(tr[2]).text()).toContain('Sample 1.1');
});
});
});
diff --git a/views/ngXosLib/xosHelpers/src/ui_components/dumbComponents/table/table.component.js b/views/ngXosLib/xosHelpers/src/ui_components/dumbComponents/table/table.component.js
index 2d3a061..8b49932 100644
--- a/views/ngXosLib/xosHelpers/src/ui_components/dumbComponents/table/table.component.js
+++ b/views/ngXosLib/xosHelpers/src/ui_components/dumbComponents/table/table.component.js
@@ -206,7 +206,8 @@
columns: [
{
label: 'First Name',
- prop: 'name'
+ prop: 'name',
+ link: item => `https://www.google.it/#q=${item.name}`
},
{
label: 'Enabled',
@@ -362,7 +363,7 @@
</tbody>
<tbody>
<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 || vm.data.length) track by $index">
- <td ng-repeat="col in vm.columns">
+ <td ng-repeat="col in vm.columns" link-wrapper>
<span ng-if="!col.type">{{item[col.prop]}}</span>
<span ng-if="col.type === 'boolean'">
<i class="glyphicon"
@@ -430,12 +431,23 @@
let customCols = _.filter(this.config.columns, {type: 'custom'});
if(angular.isArray(customCols) && customCols.length > 0){
_.forEach(customCols, (col) => {
- if(!col.formatter){
+ 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 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';
@@ -452,12 +464,27 @@
}
}
})
-.filter('arrayToList', function(){
- return (input) => {
- if(!angular.isArray(input)){
- return input;
- }
- return input.join(', ');
- }
-});
+ // TODO move in separate files
+ // TODO test
+ .filter('arrayToList', function(){
+ return (input) => {
+ if(!angular.isArray(input)){
+ return input;
+ }
+ return input.join(', ');
+ }
+ })
+ // TODO test
+ .directive('linkWrapper', function() {
+ return {
+ restrict: 'A',
+ transclude: true,
+ template: `
+ <a ng-if="col.link" href="{{col.link(item)}}">
+ <div ng-transclude></div>
+ </a>
+ <div ng-transclude ng-if="!col.link"></div>
+ `
+ };
+ });
})();