commit | author | age
|
f6dd9c
|
1 |
var app = angular.module('items', ['ngResource', 'ngGrid', 'ui.bootstrap']); |
SU |
2 |
|
|
3 |
// Create a controller with name itemListController to bind to the grid section. |
|
4 |
app.controller('itemsListController', function ($scope, $rootScope, itemService) { |
|
5 |
// Initialize required information: sorting, the first page to show and the grid options. |
|
6 |
$scope.sortInfo = {fields: ['id'], directions: ['asc']}; |
|
7 |
$scope.items = {currentPage: 1}; |
|
8 |
|
|
9 |
$scope.gridOptions = { |
|
10 |
data: 'items.list', |
|
11 |
useExternalSorting: true, |
|
12 |
sortInfo: $scope.sortInfo, |
|
13 |
|
|
14 |
|
|
15 |
columnDefs: [ |
|
16 |
{ field: 'id', displayName: 'Id' }, |
|
17 |
{ field: 'description', displayName: 'Description' }, |
|
18 |
{ field: 'done', displayName: 'Done' }, |
|
19 |
{ field: '', width: 30, cellTemplate: '<span class="glyphicon glyphicon-remove remove" ng-click="deleteRow(row)"></span>' } |
|
20 |
], |
|
21 |
|
|
22 |
multiSelect: false, |
|
23 |
selectedItems: [], |
|
24 |
// Broadcasts an event when a row is selected, to signal the form that it needs to load the row data. |
|
25 |
afterSelectionChange: function (rowItem) { |
|
26 |
if (rowItem.selected) { |
|
27 |
$rootScope.$broadcast('itemselected', $scope.gridOptions.selectedItems[0].id); |
|
28 |
} |
|
29 |
} |
|
30 |
}; |
|
31 |
|
|
32 |
// Refresh the grid, calling the appropriate rest method. |
|
33 |
$scope.refreshGrid = function () { |
|
34 |
var listitemsArgs = { |
|
35 |
page: $scope.items.currentPage, |
|
36 |
sortFields: $scope.sortInfo.fields[0], |
|
37 |
sortDirections: $scope.sortInfo.directions[0] |
|
38 |
}; |
|
39 |
|
|
40 |
itemService.get(listitemsArgs, function (data) { |
|
41 |
$scope.items = data; |
|
42 |
}) |
|
43 |
}; |
|
44 |
|
|
45 |
// Broadcast an event when an element in the grid is deleted. No real deletion is perfomed at this point. |
|
46 |
$scope.deleteRow = function (row) { |
|
47 |
$rootScope.$broadcast('deleteitem', row.entity.id); |
|
48 |
}; |
|
49 |
|
|
50 |
// Watch the sortInfo variable. If changes are detected than we need to refresh the grid. |
|
51 |
// This also works for the first page access, since we assign the initial sorting in the initialize section. |
|
52 |
$scope.$watch('sortInfo.fields[0]', function () { |
|
53 |
$scope.refreshGrid(); |
|
54 |
}, true); |
|
55 |
$scope.$watch('sortInfo.directions[0]', function () { |
|
56 |
$scope.refreshGrid(); |
|
57 |
}, true); |
|
58 |
|
|
59 |
// Do something when the grid is sorted. |
|
60 |
// The grid throws the ngGridEventSorted that gets picked up here and assigns the sortInfo to the scope. |
|
61 |
// This will allow to watch the sortInfo in the scope for changed and refresh the grid. |
|
62 |
$scope.$on('ngGridEventSorted', function (event, sortInfo) { |
|
63 |
$scope.sortInfo = sortInfo; |
|
64 |
}); |
|
65 |
|
|
66 |
// Picks the event broadcasted when a item is saved or deleted to refresh the grid elements with the most |
|
67 |
// updated information. |
|
68 |
$scope.$on('refreshGrid', function () { |
|
69 |
$scope.refreshGrid(); |
|
70 |
}); |
|
71 |
|
|
72 |
// Picks the event broadcasted when the form is cleared to also clear the grid selection. |
|
73 |
$scope.$on('clear', function () { |
|
74 |
$scope.gridOptions.selectAll(false); |
|
75 |
}); |
|
76 |
}); |
|
77 |
|
|
78 |
// Create a controller with name itemsFormController to bind to the form section. |
|
79 |
app.controller('itemsFormController', function ($scope, $rootScope, itemService) { |
|
80 |
// Clears the form. Either by clicking the 'Clear' button in the form, or when a successful save is performed. |
|
81 |
$scope.clearForm = function () { |
|
82 |
$scope.item = null; |
|
83 |
// Resets the form validation state. |
|
84 |
$scope.itemForm.$setPristine(); |
|
85 |
// Broadcast the event to also clear the grid selection. |
|
86 |
$rootScope.$broadcast('clear'); |
|
87 |
}; |
|
88 |
|
|
89 |
// Calls the rest method to save a item. |
|
90 |
$scope.updateItem = function () { |
|
91 |
itemService.save($scope.item).$promise.then( |
|
92 |
function () { |
|
93 |
// Broadcast the event to refresh the grid. |
|
94 |
$rootScope.$broadcast('refreshGrid'); |
|
95 |
// Broadcast the event to display a save message. |
|
96 |
$rootScope.$broadcast('itemsaved'); |
|
97 |
// XXX Generates null error in browser ?!? |
|
98 |
$scope.clearForm(); |
|
99 |
}, |
|
100 |
function () { |
|
101 |
// Broadcast the event for a server error. |
|
102 |
$rootScope.$broadcast('error'); |
|
103 |
}); |
|
104 |
}; |
|
105 |
|
|
106 |
// Picks up the event broadcasted when the item is selected from the grid and perform the item load by calling |
|
107 |
// the appropiate rest service. |
|
108 |
$scope.$on('itemselected', function (event, id) { |
|
109 |
$scope.item = itemService.get({id: id}); |
|
110 |
}); |
|
111 |
|
|
112 |
// Picks us the event broadcasted when the item is deleted from the grid and perform the actual item delete by |
|
113 |
// calling the appropiate rest service. |
|
114 |
$scope.$on('deleteitem', function (event, id) { |
|
115 |
itemService.delete({id: id}).$promise.then( |
|
116 |
function () { |
|
117 |
// Broadcast the event to refresh the grid. |
|
118 |
$rootScope.$broadcast('refreshGrid'); |
|
119 |
// Broadcast the event to display a delete message. |
|
120 |
$rootScope.$broadcast('itemDeleted'); |
|
121 |
$scope.clearForm(); |
|
122 |
}, |
|
123 |
function () { |
|
124 |
// Broadcast the event for a server error. |
|
125 |
$rootScope.$broadcast('error'); |
|
126 |
}); |
|
127 |
}); |
|
128 |
}); |
|
129 |
|
|
130 |
// Create a controller with name alertMessagesController to bind to the feedback messages section. |
|
131 |
app.controller('alertMessagesController', function ($scope) { |
|
132 |
// Picks up the event to display a saved message. |
|
133 |
$scope.$on('itemSaved', function () { |
|
134 |
$scope.alerts = [ |
|
135 |
{ type: 'success', msg: 'Record saved successfully!' } |
|
136 |
]; |
|
137 |
}); |
|
138 |
|
|
139 |
// Picks up the event to display a deleted message. |
|
140 |
$scope.$on('itemDeleted', function () { |
|
141 |
$scope.alerts = [ |
|
142 |
{ type: 'success', msg: 'Record deleted successfully!' } |
|
143 |
]; |
|
144 |
}); |
|
145 |
|
|
146 |
// Picks up the event to display a server error message. |
|
147 |
$scope.$on('error', function () { |
|
148 |
$scope.alerts = [ |
|
149 |
{ type: 'danger', msg: 'There was a problem in the server!' } |
|
150 |
]; |
|
151 |
}); |
|
152 |
|
|
153 |
$scope.closeAlert = function (index) { |
|
154 |
$scope.alerts.splice(index, 1); |
|
155 |
}; |
|
156 |
}); |
|
157 |
|
|
158 |
// Service that provides items operations |
|
159 |
app.factory('itemService', function ($resource) { |
|
160 |
return $resource('http://_BACKEND_/todo/api/items/:id'); |
|
161 |
}); |
|
162 |
|
|
163 |
|
|
164 |
// Create a controller that handles host information |
|
165 |
app.controller('hostController', function ($scope, hostService) { |
|
166 |
$scope.host = hostService.get(); |
|
167 |
}); |
|
168 |
|
|
169 |
//Service that provides host operations |
|
170 |
app.factory('hostService', function ($resource) { |
|
171 |
return $resource('http://_BACKEND_/todo/api/host', null, |
|
172 |
{ |
|
173 |
'get': { method:'GET' } |
|
174 |
}); |
|
175 |
}); |