Skip to content

Commit e3aafa4

Browse files
johannesjojohannesjo
committed
add aaal-overview-table component to make the overviews more flexible
1 parent d64ced9 commit e3aafa4

File tree

8 files changed

+147
-52
lines changed

8 files changed

+147
-52
lines changed

‎app/index.js

+3-1
Original file line numberDiff line numberDiff line change
@@ -85,9 +85,11 @@ module.exports = yeoman.Base.extend({
8585
this.fullComponentsPath = dirs.basePath + '/' + dirs.components;
8686

8787
var componentsRealPath = dirs.app + '/' + dirs.basePath + '/' + dirs.components;
88+
var filtersRealPath = dirs.app + '/' + dirs.basePath + '/' + dirs.filters;
8889

89-
// copy components
90+
// copy components and global filters
9091
this.directory('app/components', componentsRealPath);
92+
this.directory('app/global-filters', filtersRealPath);
9193
},
9294

9395
createLbServices: function() {

‎default-settings.js

+2-1
Original file line numberDiff line numberDiff line change
@@ -35,7 +35,8 @@ module.exports = {
3535
app: 'app',
3636
basePath: 'scripts/aaal',
3737
routes: 'routes',
38-
components: 'components'
38+
components: 'components',
39+
filters: 'global-filters'
3940
},
4041
subGenerators: {
4142
overview: {

‎templates/app/components/aaal-overview-table/_aaal-overview-table.scss

+8
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
aaal-overview-table {
2+
table {
3+
td:last-child,
4+
th:last-child {
5+
text-align: right;
6+
}
7+
}
8+
}

‎templates/app/components/aaal-overview-table/aaal-overview-table-d.html

+41
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,41 @@
1+
<table st-table="vm.displayedCollection"
2+
st-safe-src="vm.rows"
3+
class="table table-striped">
4+
<thead>
5+
<tr>
6+
<!-- just make it large enough -->
7+
<th colspan="22">
8+
<input st-search=""
9+
class="form-control"
10+
placeholder="Search ..."
11+
type="text"/>
12+
</th>
13+
</tr>
14+
<tr>
15+
<th ng-repeat="col in vm.columns"
16+
st-sort="{{(col.name||col)}}">{{(col.name||col)}}
17+
</th>
18+
<th>actions</th>
19+
</tr>
20+
</thead>
21+
<tbody>
22+
<tr ng-repeat="row in vm.displayedCollection">
23+
<td ng-repeat="col in vm.columns">{{row[(col.name||col)]|flexible:col.filter}}</td>
24+
<td>
25+
<button type="button"
26+
ng-click="vm.removeItem(row)"
27+
class="btn btn-sm btn-danger">
28+
<i class="glyphicon glyphicon-remove"></i>
29+
</button>
30+
<a ng-href="{{vm.$state.href(vm.editStateLink,{'id':row.id})}}"
31+
class="btn btn-sm btn-info">
32+
<i class="glyphicon glyphicon-edit"></i>
33+
</a>
34+
<a ng-href="{{vm.$state.href(vm.viewStateLink,{'id':row.id})}}"
35+
class="btn btn-sm btn-default">
36+
<i class="glyphicon glyphicon-play"></i>
37+
</a>
38+
</td>
39+
</tr>
40+
</tbody>
41+
</table>

‎templates/app/components/aaal-overview-table/aaal-overview-table-d.js

+42
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,42 @@
1+
/**
2+
* @ngdoc directive
3+
* @name <%= moduleName %>.directive:aaalOverviewTable
4+
* @description
5+
* # aaalOverviewTable
6+
*/
7+
8+
(function() {
9+
'use strict';
10+
11+
angular
12+
.module('<%= moduleName %>')
13+
.directive('aaalOverviewTable', aaalOverviewTable);
14+
15+
16+
/* @ngInject */
17+
function aaalOverviewTable() {
18+
var directive = {
19+
templateUrl: '<%=fullComponentsPath%>/aaal-overview-table/aaal-overview-table-d.html',
20+
bindToController: true,
21+
controller: aaalOverviewTableCtrl,
22+
controllerAs: 'vm',
23+
restrict: 'E',
24+
scope: {
25+
rows: '=',
26+
columns: '=',
27+
deleteFn: '&',
28+
viewStateLink: '@',
29+
editStateLink: '@'
30+
}
31+
};
32+
return directive;
33+
}
34+
35+
36+
/* @ngInject */
37+
function aaalOverviewTableCtrl($state) {
38+
var vm = this;
39+
vm.$state = $state;
40+
}
41+
})();
42+

‎templates/app/global-filters/flexible-filter.js

+37
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,37 @@
1+
/**
2+
* @ngdoc function
3+
* @name <%= moduleName %>.filter:flexible
4+
* @description
5+
* # flexible
6+
* Filter of <%= moduleName %>. Allows using filters conditionally and flexibly
7+
*/
8+
9+
(function() {
10+
'use strict';
11+
12+
angular
13+
.module('<%= moduleName %>')
14+
.filter('flexible', flexible);
15+
16+
/* @ngInject */
17+
function flexible($interpolate) {
18+
return flexibleFilter;
19+
20+
function flexibleFilter() {
21+
var value = arguments[0];
22+
23+
if (arguments.length > 1 && !!arguments[1]) {
24+
var copiedArgs = Array.prototype.slice.call(arguments);
25+
// delete value
26+
copiedArgs.splice(0, 1);
27+
// join to allow multiple params
28+
var joinedArgs = copiedArgs.join(':');
29+
var result = $interpolate('{{value | ' + joinedArgs + '}}');
30+
return result({value: value});
31+
} else {
32+
return value;
33+
}
34+
}
35+
}
36+
})();
37+

‎templates/app/overview.html

+5-50
Original file line numberDiff line numberDiff line change
@@ -6,54 +6,9 @@
66
</i> Add new item
77
</button>
88

9-
<table st-table="displayedCollection"
10-
st-safe-src="vm.rowCollection"
11-
class="table table-striped">
12-
<thead>
13-
<tr>
14-
<th colspan="5">
15-
<input st-search=""
16-
class="form-control"
17-
placeholder="Search ..."
18-
type="text"/>
19-
</th>
20-
</tr>
21-
<tr>
22-
<th st-sort="id">id</th>
23-
<th st-sort="title">title</th>
24-
<th st-sort="createdAt"
25-
ng-if="vm.createdAt">createdAt
26-
</th>
27-
<th st-sort="updatedAt"
28-
ng-if="vm.updatedAt">updatedAt
29-
</th>
30-
<th style="text-align: right">actions</th>
31-
</tr>
32-
</thead>
33-
<tbody>
34-
<tr ng-repeat="row in displayedCollection">
35-
<td>{{row.id}}</td>
36-
<td>{{row.name||row.title}}</td>
37-
<td ng-if="vm.createdAt">{{row.createdAt|date}}</td>
38-
<td ng-if="vm.updatedAt">{{row.updatedAt|date}}</td>
39-
<td style="text-align: right">
40-
<button type="button"
41-
ng-click="vm.removeItem(row)"
42-
class="btn btn-sm btn-danger">
43-
<i class="glyphicon glyphicon-remove"></i>
44-
</button>
45-
<button type="button"
46-
ui-sref="<%=editStateFull%>({id:row.id})"
47-
class="btn btn-sm btn-info">
48-
<i class="glyphicon glyphicon-edit"></i>
49-
</button>
50-
<button type="button"
51-
ui-sref="<%=viewStateFull%>({id:row.id})"
52-
class="btn btn-sm btn-default">
53-
<i class="glyphicon glyphicon-play"></i>
54-
</button>
55-
</td>
56-
</tr>
57-
</tbody>
58-
</table>
9+
<aaal-overview-table columns="vm.columns"
10+
rows="vm.rowCollection"
11+
delete-fn="vm.removeItem"
12+
view-state-link="private.TestModelView"
13+
edit-state-link="private.TestModelEdit"></aaal-overview-table>
5914
</div>

‎templates/app/overview.js

+9
Original file line numberDiff line numberDiff line change
@@ -22,6 +22,15 @@
2222
vm.rowCollection = ModelService.find();
2323
}
2424

25+
/**
26+
* you can add columns and add filters to them like so
27+
* {name:'modelPropertyName': filter:'date:dd/MM/yy'}
28+
*/
29+
vm.columns = [
30+
'id',
31+
'title'
32+
];
33+
2534
//remove to the real data holder
2635
vm.removeItem = function removeItem(row) {
2736
var index = vm.rowCollection.indexOf(row);

0 commit comments

Comments
 (0)