Added Error handling and messages.
diff --git a/employee/employee.web-js/src/main/webapp/css/local.css b/employee/employee.web-js/src/main/webapp/css/local.css
index b2a2d01..5c28315 100644
--- a/employee/employee.web-js/src/main/webapp/css/local.css
+++ b/employee/employee.web-js/src/main/webapp/css/local.css
@@ -32,5 +32,6 @@
}
.button-group {
float: right;
+ font-weight: normal;
}
diff --git a/employee/employee.web-js/src/main/webapp/employee/delete.html b/employee/employee.web-js/src/main/webapp/employee/delete.html
index 1f12e1f..501631e 100644
--- a/employee/employee.web-js/src/main/webapp/employee/delete.html
+++ b/employee/employee.web-js/src/main/webapp/employee/delete.html
@@ -15,57 +15,63 @@
<div class="row-fluid">
<div class="span6 offset1">
- <div class="row-fluid">
+ <div class="row-fluid" ng-show="error">
+ <h3 class="form-h3">Delete Employee?</h3>
+ <div class="alert alert-error">{{error}}</div>
+ <a href='#/home' class='btn'>Ok</a>
+ </div>
+ <div ng-hide="error">
+ <div class="row-fluid">
<h3 class="form-h3">
Delete Employee?
<div class="button-group">
- <button ng-click='confirm()' class='button-small'>Ok</button>
- <button ng-click='cancel()' class='button-small'>Cancel</button>
+ <button class='btn' ng-click='confirm()'>Ok</button>
+ <a href='#/home' class='btn'>Cancel</a>
</div>
</h3>
- </div>
- <div class="row-fluid">
- <form class="form-horizontal span12">
- <div class="control-group">
- <label class="control-label">Id</label>
- <div class="controls">
- <input type="text" ng-model='employee.id' disabled />
- </div>
- </div>
- <div class="control-group">
- <label class="control-label">First Name</label>
- <div class="controls">
- <input type="text" ng-model='employee.firstName' disabled />
- </div>
- </div>
- <div class="control-group">
- <label class="control-label">Last Name</label>
- <div class="controls">
- <input type="text" ng-model='employee.lastName' disabled />
- </div>
- </div>
- <div class="control-group">
- <label class="control-label">Gender</label>
- <div class="controls">
- <select ng-model="employee.gender" disabled>
- <option value="Female">Female</option>
- <option value="Male">Male</option>
- </select>
- </div>
- </div>
- <div class="control-group">
- <label class="control-label">Salary</label>
- <div class="controls">
- <div class="input-prepend">
- <span class="add-on">$</span> <input type="text"
- ng-model='employee.salary' disabled />
+ </div>
+ <div class="row-fluid">
+ <form class="form-horizontal span12">
+ <div class="control-group">
+ <label class="control-label">Id</label>
+ <div class="controls">
+ <input type="text" ng-model='employee.id' disabled />
</div>
</div>
- </div>
- </form>
+ <div class="control-group">
+ <label class="control-label">First Name</label>
+ <div class="controls">
+ <input type="text" ng-model='employee.firstName' disabled />
+ </div>
+ </div>
+ <div class="control-group">
+ <label class="control-label">Last Name</label>
+ <div class="controls">
+ <input type="text" ng-model='employee.lastName' disabled />
+ </div>
+ </div>
+ <div class="control-group">
+ <label class="control-label">Gender</label>
+ <div class="controls">
+ <select ng-model="employee.gender" disabled>
+ <option value="Female">Female</option>
+ <option value="Male">Male</option>
+ </select>
+ </div>
+ </div>
+ <div class="control-group">
+ <label class="control-label">Salary</label>
+ <div class="controls">
+ <div class="input-prepend">
+ <span class="add-on">$</span> <input type="text"
+ ng-model='employee.salary' disabled />
+ </div>
+ </div>
+ </div>
+ </form>
+ </div>
</div>
</div>
- <!--/span-->
<div class="span4 offset1">
<div class="aside">
<img src='resources/images/eclipselink-logo.png' alt='EclipseLink'
diff --git a/employee/employee.web-js/src/main/webapp/employee/edit.html b/employee/employee.web-js/src/main/webapp/employee/edit.html
index a52254c..c0e79dd 100644
--- a/employee/employee.web-js/src/main/webapp/employee/edit.html
+++ b/employee/employee.web-js/src/main/webapp/employee/edit.html
@@ -15,125 +15,133 @@
<div class="row-fluid">
<div class="span6 offset1">
- <div class="row-fluid">
+ <div class="row-fluid" ng-show="error">
+ <h3 class="form-h3">Employee</h3>
+ <div class="alert alert-error">{{error}}</div>
+ <a href='#/home' class='btn'>Ok</a>
+ </div>
+ <div ng-hide="error">
+ <div class="row-fluid">
<h3 class="form-h3">
Employee
<div class="button-group">
- <button ng-click='save()'>Save</button>
- <button ng-show='removeEnabled' ng-click='remove()'>Delete</button>
- <button ng-click='cancel()'>Cancel</button>
+ <button class='btn' ng-click='save()'>Save</button>
+ <button class='btn' ng-show='removeEnabled' ng-click='remove()'>Delete</button>
+ <a href='#/home' class='btn'>Cancel</a>
</div>
</h3>
- </div>
+ </div>
- <div class="row-fluid">
- <form class="form-horizontal">
- <div class="control-group">
- <label class="control-label">Id</label>
- <div class="controls">
- <input type="text" ng-model='employee.id' disabled />
- </div>
- </div>
- <div class="control-group">
- <label class="control-label">First Name</label>
- <div class="controls">
- <input type="text" ng-model='employee.firstName' />
- </div>
- </div>
- <div class="control-group">
- <label class="control-label">Last Name</label>
- <div class="controls">
- <input type="text" ng-model='employee.lastName' />
- </div>
- </div>
- <div class="control-group">
- <label class="control-label">Gender</label>
- <div class="controls">
- <select ng-model="employee.gender">
- <option value="Female">Female</option>
- <option value="Male">Male</option>
- </select>
- </div>
- </div>
- <div class="control-group">
- <label class="control-label">Salary</label>
- <div class="controls">
- <div class="input-prepend">
- <span class="add-on">$</span> <input type="text"
- ng-model='employee.salary' />
+ <div class="row-fluid">
+ <form class="form-horizontal">
+ <div class="control-group">
+ <label class="control-label">Id</label>
+ <div class="controls">
+ <input type="text" ng-model='employee.id' disabled />
</div>
</div>
- </div>
- </form>
- </div>
- <div class="row-fluid">
+ <div class="control-group">
+ <label class="control-label">First Name</label>
+ <div class="controls">
+ <input type="text" ng-model='employee.firstName' />
+ </div>
+ </div>
+ <div class="control-group">
+ <label class="control-label">Last Name</label>
+ <div class="controls">
+ <input type="text" ng-model='employee.lastName' />
+ </div>
+ </div>
+ <div class="control-group">
+ <label class="control-label">Gender</label>
+ <div class="controls">
+ <select ng-model="employee.gender">
+ <option value="Female">Female</option>
+ <option value="Male">Male</option>
+ </select>
+ </div>
+ </div>
+ <div class="control-group">
+ <label class="control-label">Salary</label>
+ <div class="controls">
+ <div class="input-prepend">
+ <span class="add-on">$</span> <input type="text"
+ ng-model='employee.salary' />
+ </div>
+ </div>
+ </div>
+ </form>
+ </div>
+ <div class="row-fluid">
<h4 class="form-h4">
Address
- <button class="button-group" ng-hide='address'
+ <button class="button-group btn btn-small" ng-hide='address'
ng-click='addAddress()'>Add</button>
</h4>
- </div>
- <div class="row-fluid" ng-show="address">
- <form class="form-horizontal">
- <div class="control-group">
- <label class="control-label">Street</label>
- <div class="controls">
- <input type="text" ng-model='address.street' />
+ </div>
+ <div class="row-fluid" ng-show="address">
+ <form class="form-horizontal">
+ <div class="control-group">
+ <label class="control-label">Street</label>
+ <div class="controls">
+ <input type="text" ng-model='address.street' />
+ </div>
</div>
- </div>
- <div class="control-group">
- <label class="control-label">City</label>
- <div class="controls">
- <input type="text" ng-model='address.city' />
+ <div class="control-group">
+ <label class="control-label">City</label>
+ <div class="controls">
+ <input type="text" ng-model='address.city' />
+ </div>
</div>
- </div>
- <div class="control-group">
- <label class="control-label">Country</label>
- <div class="controls">
- <input type="text" ng-model='address.country' />
+ <div class="control-group">
+ <label class="control-label">Country</label>
+ <div class="controls">
+ <input type="text" ng-model='address.country' />
+ </div>
</div>
- </div>
- <div class="control-group">
- <div class="controls">
- <button 'ng-show='address' ng-click='removeAddress()'>Remove</button>
+ <div class="control-group">
+ <div class="controls">
+ <button class='btn btn-small' ng-show='address'
+ ng-click='removeAddress()'>Remove</button>
+ </div>
</div>
- </div>
- </form>
- </div>
- <div class="row-fluid">
+ </form>
+ </div>
+ <div class="row-fluid">
<h4 class="form-h4">
Phone Numbers
- <button class="button-group" ng-click='addPhone()'>Add</button>
+ <button class="button-group btn btn-small" ng-click='addPhone()'>Add</button>
</h4>
- </div>
- <div class="row-fluid" ng-show='phoneNumbers.length'>
- <form class="form-horizontal">
- <div ng-repeat='phoneNumber in phoneNumbers'>
- <div class="control-group">
- <label class="control-label">Type</label>
- <div class="controls">
- <input type="text" ng-model='phoneNumber.type' />
+ </div>
+ <div class="row-fluid" ng-show='phoneNumbers.length'>
+ <form class="form-horizontal">
+ <div ng-repeat='phoneNumber in phoneNumbers'>
+ <div class="control-group">
+ <label class="control-label">Type</label>
+ <div class="controls">
+ <input type="text" ng-model='phoneNumber.type' />
+ </div>
+ </div>
+ <div class="control-group">
+ <label class="control-label">Area Code</label>
+ <div class="controls">
+ <input type="text" ng-model='phoneNumber.areaCode' />
+ </div>
+ </div>
+ <div class="control-group">
+ <label class="control-label">Number</label>
+ <div class="controls">
+ <input type="text" ng-model='phoneNumber.number' />
+ </div>
+ </div>
+ <div class="control-group">
+ <div class="controls">
+ <button class='btn btn-small' ng-click='removePhone($index)'>Remove</button>
+ </div>
</div>
</div>
- <div class="control-group">
- <label class="control-label">Area Code</label>
- <div class="controls">
- <input type="text" ng-model='phoneNumber.areaCode' />
- </div>
- </div>
- <div class="control-group">
- <label class="control-label">Number</label>
- <div class="controls">
- <input type="text" ng-model='phoneNumber.number' />
- </div>
- </div>
- <div class="control-group">
- <div class="controls">
- <button ng-click='removePhone($index)'>Remove</button>
- </div>
- </div>
- </div>
- </form>
+ </form>
+ </div>
</div>
</div>
<div class="span4">
@@ -147,10 +155,10 @@
<p>A PUT uses the URI of the resource and a payload containing
the changed resource in either XML or JSON.</p>
<p>A POST uses the URI of the resource type without the resource
- id. If the payload object doesn't contain an id one will be created by EclipseLink
- using the generation mechanism specified in the JPA mappings.
- If the payload object does have an id a POST will not use id generation.
- </p>
+ id. If the payload object doesn't contain an id one will be created
+ by EclipseLink using the generation mechanism specified in the JPA
+ mappings. If the payload object does have an id a POST will not use
+ id generation.</p>
</div>
</div>
</div>
diff --git a/employee/employee.web-js/src/main/webapp/employee/search.html b/employee/employee.web-js/src/main/webapp/employee/search.html
index 57272f3..a4e9ac3 100644
--- a/employee/employee.web-js/src/main/webapp/employee/search.html
+++ b/employee/employee.web-js/src/main/webapp/employee/search.html
@@ -21,76 +21,84 @@
</div>
</div>
- <div class="row-fluid">
- <div class="span5 row">
- <label>First Name</label> <input class="span12" type='text' ng-model='firstName' />
- </div>
- <div class="span5 row">
- <label>Last Name</label> <input class="span12" type='text' ng-model='lastName' />
- </div>
+ <div class="row-fluid" ng-show="error">
+ <div class="alert alert-error">{{error}}</div>
+ <a href='#/home' class='btn'>Ok</a>
</div>
-
- <div class="row-fluid">
- <div class="span12 row">
- <label class='checkbox'>Page Results <input type='checkbox'
- ng-model='pageResults'></label>
-
+ <div ng-hide="error">
+ <div class="row-fluid">
+ <div class="span5 row">
+ <label>First Name</label> <input class="span12" type='text'
+ ng-model='firstName' />
+ </div>
+ <div class="span5 row">
+ <label>Last Name</label> <input class="span12" type='text'
+ ng-model='lastName' />
+ </div>
</div>
- </div>
- <div class="row-fluid">
- <div class="span12 row ">
- <button ng-click='search()' class='menu-button'>Search</button>
- </div>
- </div>
- <div class="row-fluid" ng-show='employees.length'>
- <div class="span10">
- <h4>Search Results</h4>
- <table class='table'>
- <thead>
- <tr ng-hide='pageResults' class="form-search">
- <td colspan='4'><label>Filter <input type="text"
- class="input-medium search-query" ng-model='query' /></label></td>
- </tr>
- <tr>
- <td>ID</td>
- <td>Last Name</td>
- <td>First Name</td>
- <td colspan='2'></td>
- </tr>
- </thead>
- <tbody>
- <tr ng-repeat='employee in employees | filter:query'>
- <td>{{employee.id}}</td>
- <td>{{employee.lastName}}</td>
- <td>{{employee.firstName}}</td>
- <td class='employee-action'><button class='button-small'
- ng-click='edit(employee.id)'>Edit</button>
- <button class='button-small' ng-click='remove(employee.id)'>Delete</button></td>
- </tr>
- </tbody>
- <tfoot ng-show='pageResults'>
- <tr>
- <td colspan='5'>
- <table width='100%'>
- <tr>
- <td>
- <button ng-show='prevAvailable' class='button-small'
- type='button' ng-click='pagePrevious()'>Previous</button>
- </td>
- <td align='center' width='100%' colspan='3'><span
- id='employees-pages'>Page {{pageNum}} of
- {{totalPages}}</span></td>
- <td>
- <button ng-show='nextAvailable' class='button-small'
- type='button' ng-click='pageNext()'>Next</button>
- </td>
- </tr>
- </table>
- </td>
- </tr>
- </tfoot>
- </table>
+ <div class="row-fluid">
+ <div class="span12 row">
+ <label class='checkbox'>Page Results <input type='checkbox'
+ ng-model='pageResults'></label>
+
+ </div>
+ </div>
+ <div class="row-fluid">
+ <div class="span12 row ">
+ <button class='btn' ng-click='search()' class='menu-button'>Search</button>
+ </div>
+ </div>
+
+ <div class="row-fluid" ng-show='employees.length'>
+ <div class="span10">
+ <h4>Search Results</h4>
+ <table class='table'>
+ <thead>
+ <tr ng-hide='pageResults' class="form-search">
+ <td colspan='4'><label>Filter <input type="text"
+ class="input-medium search-query" ng-model='query' /></label></td>
+ </tr>
+ <tr>
+ <td>ID</td>
+ <td>Last Name</td>
+ <td>First Name</td>
+ <td colspan='2'></td>
+ </tr>
+ </thead>
+ <tbody>
+ <tr ng-repeat='employee in employees | filter:query'>
+ <td>{{employee.id}}</td>
+ <td>{{employee.lastName}}</td>
+ <td>{{employee.firstName}}</td>
+ <td class='employee-action'><button class='btn'
+ ng-click='edit(employee.id)'>Edit</button>
+ <button class='btn' ng-click='remove(employee.id)'>Delete</button></td>
+ </tr>
+ </tbody>
+ <tfoot ng-show='pageResults'>
+ <tr>
+ <td colspan='5'>
+ <table width='100%'>
+ <tr>
+ <td>
+ <button ng-show='prevAvailable' class='btn' type='button'
+ ng-click='pagePrevious()'>Previous</button>
+ </td>
+ <td align='center' width='100%' colspan='3'><span
+ id='employees-pages'>Page {{pageNum}} of
+ {{totalPages}}</span></td>
+ <td>
+ <button ng-show='nextAvailable' class='btn' type='button'
+ ng-click='pageNext()'>Next</button>
+ </td>
+ </tr>
+ </table>
+ </td>
+ </tr>
+ </tfoot>
+ </table>
+ </div>
</div>
</div>
</div>
@@ -100,10 +108,16 @@
title='EclipseLink Employee Example' />
<div class='commentary'>
<h3>Querying Resources</h3>
- <p>This page executes a predefined JPA named query that finds all Employees with a specified first and last name
- using a JPQL LIKE operator to support inexact matches. </p>
- <p>Paging is implemented using the EclipseLink <code>eclipselink.jdbc.first-result</code> and <code>eclipselink.jdbc.max-rows</code> query hints which can be attached to a named
- query invocation.</p>
+ <p>This page executes a predefined JPA named query that finds
+ all Employees with a specified first and last name using a JPQL
+ LIKE operator to support inexact matches.</p>
+ <p>
+ Paging is implemented using the EclipseLink
+ <code>eclipselink.jdbc.first-result</code>
+ and
+ <code>eclipselink.jdbc.max-rows</code>
+ query hints which can be attached to a named query invocation.
+ </p>
</div>
</div>
</div>
diff --git a/employee/employee.web-js/src/main/webapp/js/controllers.js b/employee/employee.web-js/src/main/webapp/js/controllers.js
index 05fe2a6..3739034 100755
--- a/employee/employee.web-js/src/main/webapp/js/controllers.js
+++ b/employee/employee.web-js/src/main/webapp/js/controllers.js
@@ -28,20 +28,35 @@
$scope.search = function() {
if ($scope.pageResults) {
resetPaging();
- Employees.count($scope.firstName, $scope.lastName).then(
- function(response) {
- $scope.count = response.data.COUNT;
- $scope.totalPages = Math.floor($scope.count
- / $scope.pageSize)
- + ($scope.count % $scope.pageSize > 0 ? 1 : 0);
- fetchPage();
- });
+ Employees
+ .count($scope.firstName, $scope.lastName)
+ .then(
+ function(response) {
+ $scope.count = response.data.COUNT;
+ $scope.totalPages = Math.floor($scope.count
+ / $scope.pageSize)
+ + ($scope.count % $scope.pageSize > 0 ? 1
+ : 0);
+ fetchPage();
+ },
+ function(response) {
+ $scope.error = 'Error retrieving number of resources. Server response code '
+ + response.status;
+ });
} else {
- $scope.employees = Employees.getAll({
- firstName : $scope.firstName,
- lastName : $scope.lastName
- });
+ $scope.employees = Employees
+ .getAll(
+ {
+ firstName : $scope.firstName,
+ lastName : $scope.lastName
+ },
+ function() {
+ },
+ function(response) {
+ $scope.error = 'Error retrieving resources. Server response code '
+ + response.status;
+ });
}
};
@@ -109,18 +124,24 @@
function EmployeeDeleteCtrl($scope, $routeParams, $location, Employee) {
$scope.employee = Employee.get({
id : $routeParams.id
+ }, function() {
+ // success
+ }, function(response) {
+ $scope.error = 'Resource not found. Server response code ' + response.status;
});
$scope.confirm = function() {
Employee.remove({}, {
id : $scope.employee.id
+ }, function() {
+ $location.path("/home");
+ }, function(response) {
+ $scope.error = 'Error deleting resource. Server response code '
+ + response.status;
});
- $location.path("/home");
+
};
- $scope.cancel = function() {
- $location.path("/home");
- };
}
function EmployeeCommon($scope, $location) {
@@ -131,18 +152,19 @@
// work
$scope.employee.address = $scope.address;
$scope.employee.phoneNumbers = $scope.phoneNumbers;
- $scope.employee.$save();
- $location.path("/home");
+ $scope.employee.$save(function() {
+ $location.path("/home");
+ }, function(response) {
+ $scope.error = 'Error saving resource. Server response code '
+ + response.status;
+ });
+
};
$scope.remove = function() {
$location.path("/employee/delete/" + $scope.employee.id);
};
- $scope.cancel = function() {
- $location.path("/home");
- };
-
$scope.addAddress = function() {
$scope.address = {};
};
@@ -195,6 +217,9 @@
EmployeeAddress.get($scope.employee, function(address) {
$scope.address = address;
});
+ }, function(response) {
+ $scope.error = 'Error retrieving resource. Server response code '
+ + response.status;
});
return that;
