Skip to content

Commit 73e9415

Browse files
radcortezradcortez
committed
Added form validations.
Added Person id generator.
1 parent 5d0b21c commit 73e9415

7 files changed

Lines changed: 125 additions & 39 deletions

File tree

‎src/main/java/com/cortez/samples/javaee7angular/data/Person.java‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,6 @@
11
package com.cortez.samples.javaee7angular.data;
22

3-
import javax.persistence.Entity;
4-
import javax.persistence.Id;
3+
import javax.persistence.*;
54

65
/**
76
* Simple entity.
@@ -11,6 +10,8 @@
1110
@Entity
1211
public class Person {
1312
@Id
13+
@GeneratedValue(strategy = GenerationType.SEQUENCE, generator = "id")
14+
@SequenceGenerator(name = "id", sequenceName = "id")
1415
private Long id;
1516

1617
private String name;

‎src/main/java/com/cortez/samples/javaee7angular/rest/PersonResource.java‎

Lines changed: 8 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -77,14 +77,17 @@ public Person getPerson( @PathParam("id") Long id) {
7777
@POST
7878
public Person savePerson(Person person) {
7979
if (person.getId() == null) {
80-
person.setId(countPersons().longValue() + 1);
81-
entityManager.persist(person);
82-
} else {
83-
Person personToSave = getPerson(person.getId());
80+
Person personToSave = new Person();
8481
personToSave.setName(person.getName());
8582
personToSave.setDescription(person.getDescription());
8683
personToSave.setLink(person.getLink());
87-
person = entityManager.merge(personToSave);
84+
entityManager.persist(person);
85+
} else {
86+
Person personToUpdate = getPerson(person.getId());
87+
personToUpdate.setName(person.getName());
88+
personToUpdate.setDescription(person.getDescription());
89+
personToUpdate.setLink(person.getLink());
90+
person = entityManager.merge(personToUpdate);
8891
}
8992

9093
return person;

‎src/main/resources/sql/create.sql‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1 +1,2 @@
1-
CREATE TABLE PERSON("ID" INTEGER not null primary key, "NAME" VARCHAR(50), "DESCRIPTION" VARCHAR(100), "LINK" VARCHAR(500))
1+
CREATE SEQUENCE ID START WITH 100;
2+
CREATE TABLE PERSON("ID" INTEGER not null primary key, "NAME" VARCHAR(50), "DESCRIPTION" VARCHAR(100), "LINK" VARCHAR(500));

‎src/main/resources/sql/drop.sql‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1 +1,2 @@
11
DROP TABLE PERSON;
2+
DROP SEQUENCE ID;

‎src/main/webapp/css/style.css‎

Lines changed: 22 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,11 @@ body {
55
text-align: center;
66
}
77

8+
h3 {
9+
margin: 0 0 20px;
10+
text-align: left;
11+
}
12+
813
.message {
914
margin-left: 5%;
1015
margin-right: 5%;
@@ -17,6 +22,13 @@ body {
1722
margin-right: 5%;
1823
}
1924

25+
.grid .remove {
26+
width: 20px;
27+
height: 20px;
28+
margin-top: 8px;
29+
color: #a94442;
30+
}
31+
2032
.gridStyle {
2133
border: 1px solid rgb(212, 212, 212);
2234
height: 335px;
@@ -43,17 +55,26 @@ body {
4355
float: right;
4456
width: 20px;
4557
height: 20px;
58+
margin-top: 5px;
4659
margin-left: 5px;
47-
color: green;
60+
color: #5cb85c;
61+
}
62+
63+
.form .form-group p {
64+
margin-top: 15px;
65+
margin-left: 200px;
66+
color: #a94442;
4867
}
4968

5069
.form .avatar {
5170
height: 250px;
5271
float: right;
72+
margin-right: 25px;
5373
}
5474

5575
.form .buttons {
5676
clear: both;
5777
float: right;
5878
margin-top: 10px;
79+
margin-right: 25px;
5980
}

‎src/main/webapp/index.html‎

Lines changed: 57 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -42,46 +42,81 @@ <h1>Java EE - Angular Application</h1>
4242

4343
<br>
4444

45-
<div class="grid">
46-
<!-- Specify a JavaScript controller script that binds Javascript variables to the HTML.-->
47-
<div ng-controller="personsListController">
48-
<!-- Binds the grid component to be displayed. -->
49-
<div class="gridStyle" ng-grid="gridOptions"></div>
50-
51-
<!-- Bind the pagination component to be displayed. -->
52-
<pagination direction-links="true" boundary-links="true"
53-
total-items="persons.totalResults" items-per-page="persons.pageSize"
54-
ng-model="persons.currentPage" ng-change="refreshGrid()">
55-
</pagination>
45+
<!-- Specify a JavaScript controller script that binds Javascript variables to the HTML.-->
46+
<div class="grid" ng-controller="personsListController">
47+
<div>
48+
<h3>List Persons</h3>
5649
</div>
50+
51+
<!-- Binds the grid component to be displayed. -->
52+
<div class="gridStyle" ng-grid="gridOptions"></div>
53+
54+
<!-- Bind the pagination component to be displayed. -->
55+
<pagination direction-links="true" boundary-links="true"
56+
total-items="persons.totalResults" items-per-page="persons.pageSize"
57+
ng-model="persons.currentPage" ng-change="refreshGrid()">
58+
</pagination>
5759
</div>
5860

59-
<div class="form">
61+
62+
63+
<div class="form" ng-controller="personsFormController">
64+
<div ng-if="person.id == null">
65+
<h3>Add Person</h3>
66+
</div>
67+
68+
<div ng-if="person.id != null">
69+
<h3>Edit Person</h3>
70+
</div>
71+
6072
<div>
61-
<form name="personForm" ng-controller="personsFormController" ng-submit="updatePerson()">
62-
<div class="form-group">
73+
<form name="personForm" ng-submit="updatePerson()" novalidate>
74+
75+
<div class="form-group" ng-class="{'has-error' : personForm.name.$invalid && personForm.name.$dirty}">
6376
<label for="name">Name:</label>
64-
<input id="name" name="name" type="text" class="form-control" ng-model="person.name" required/>
77+
<span ng-class="{'glyphicon glyphicon-ok' : personForm.name.$valid && personForm.name.$dirty}"></span>
78+
79+
<input id="name" name="name" type="text" class="form-control" maxlength="50"
80+
ng-model="person.name"
81+
required ng-minlength="2" ng-maxlength="50"/>
82+
83+
<p class="help-block" ng-show="personForm.name.$error.required">Add Name.</p>
84+
<p class="help-block" ng-show="personForm.name.$error.minlength">Name must be at least 2 characters long.</p>
85+
<p class="help-block" ng-show="personForm.name.$error.maxlength">Name cannot be longer than 50 characters.</p>
6586
</div>
6687

67-
<div class="form-group">
88+
<div class="form-group" ng-class="{'has-error' : personForm.description.$invalid && personForm.description.$dirty}">
6889
<label for="description">Description:</label>
69-
<input id="description" name="description" type="text" class="form-control" ng-model="person.description"/>
90+
<span ng-class="{'glyphicon glyphicon-ok' : personForm.description.$valid && personForm.description.$dirty}"></span>
91+
92+
<input id="description" name="description" type="text" class="form-control" maxlength="100"
93+
ng-model="person.description"
94+
required ng-minlength="5" ng-maxlength="100"/>
95+
96+
<p class="help-block" ng-show="personForm.description.$error.required">Add Description.</p>
97+
<p class="help-block" ng-show="personForm.description.$error.minlength">Description must be at least 5 characters long.</p>
98+
<p class="help-block" ng-show="personForm.description.$error.maxlength">Description cannot be longer than 100 characters.</p>
7099
</div>
71100

72-
<div class="form-group">
101+
<div class="form-group" ng-class="{'has-error' : personForm.link.$invalid && personForm.link.$dirty}">
73102
<label for="link">Link:</label>
74-
<input id="link" name="link" type="url" class="form-control" ng-model="person.link"/>
103+
<span ng-class="{'glyphicon glyphicon-ok' : personForm.link.$valid && personForm.link.$dirty}"></span>
104+
105+
<input id="link" name="link" type="url" class="form-control" maxlength="500"
106+
ng-model="person.link"
107+
required/>
108+
109+
<p class="help-block" ng-show="personForm.link.$error.required">Add Link.</p>
110+
<p class="help-block" ng-show="personForm.link.$invalid && personForm.link.$dirty">Invalid Link.</p>
75111
</div>
76112

77113
<div class="avatar" ng-if="person.link">
78-
<img src="{{person.link}}"/>
114+
<img ng-src="{{person.link}}" width="400" height="250"/>
79115
</div>
80116

81117
<div class="buttons">
82118
<button type="button" class="btn btn-primary" ng-click="clearForm()">Clear</button>
83-
<button type="button" class="btn btn-primary" ng-click="deletePerson()">Delete</button>
84-
<button type="submit" class="btn btn-primary">Save</button>
119+
<button type="submit" class="btn btn-primary" ng-disabled="personForm.$invalid">Save</button>
85120
</div>
86121
</form>
87122
</div>

‎src/main/webapp/script/person.js‎

Lines changed: 32 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -40,7 +40,8 @@ app.controller('personsListController', function ($scope, $rootScope, personServ
4040
columnDefs: [
4141
{ field: 'id', displayName:'Id' },
4242
{ field: 'name', displayName: 'Name' },
43-
{ field: 'description', displayName: 'Description' }
43+
{ field: 'description', displayName: 'Description' },
44+
{ field: '', width: 30, cellTemplate: '<span class="glyphicon glyphicon-remove remove" ng-click="deleteRow(row)"></span>' }
4445
],
4546

4647
multiSelect: false,
@@ -52,37 +53,54 @@ app.controller('personsListController', function ($scope, $rootScope, personServ
5253
}
5354
};
5455

56+
$scope.deleteRow = function (row) {
57+
$rootScope.$broadcast('deletePerson', row.entity.id);
58+
};
59+
5560
$scope.$on('personsDirty', function () {
5661
$scope.refreshGrid();
5762
});
63+
64+
$scope.$on('clear', function (event) {
65+
$scope.gridOptions.selectAll(false);
66+
});
5867
});
5968

6069
app.controller('personsFormController', function ($scope, $rootScope, personService) {
6170
$scope.clearForm = function () {
6271
$scope.person = null;
72+
document.getElementById('link').value = null;
73+
$scope.personForm.$setPristine();
74+
$rootScope.$broadcast('clear');
6375
};
6476

65-
$scope.$on('personSelected', function (event, id) {
66-
$scope.person = personService.get({id: id});
67-
});
68-
6977
$scope.updatePerson = function () {
7078
personService.save($scope.person).$promise.then(
7179
function () {
7280
$rootScope.$broadcast('personsDirty');
7381
$rootScope.$broadcast('personSaved')
7482
$scope.clearForm();
83+
},
84+
function () {
85+
$rootScope.$broadcast('error');
7586
});
7687
};
7788

78-
$scope.deletePerson = function () {
79-
personService.delete({id: $scope.person.id}).$promise.then(
89+
$scope.$on('personSelected', function (event, id) {
90+
$scope.person = personService.get({id: id});
91+
});
92+
93+
$scope.$on('deletePerson', function (event, id) {
94+
personService.delete({id: id}).$promise.then(
8095
function () {
8196
$rootScope.$broadcast('personsDirty');
8297
$rootScope.$broadcast('personDeleted');
8398
$scope.clearForm();
99+
},
100+
function () {
101+
$rootScope.$broadcast('error');
84102
});
85-
};
103+
});
86104
});
87105

88106
app.controller('alertMessagesController', function ($scope) {
@@ -98,6 +116,12 @@ app.controller('alertMessagesController', function ($scope) {
98116
];
99117
});
100118

119+
$scope.$on('error', function (event) {
120+
$scope.alerts = [
121+
{ type: 'danger', msg: 'There was a problem in the server!' }
122+
];
123+
});
124+
101125
$scope.closeAlert = function(index) {
102126
$scope.alerts.splice(index, 1);
103127
};

0 commit comments

Comments
 (0)