diff --git a/springboot-petclinic-client/bower.json b/springboot-petclinic-client/bower.json index 145f7d8bb..89f91536a 100644 --- a/springboot-petclinic-client/bower.json +++ b/springboot-petclinic-client/bower.json @@ -18,8 +18,8 @@ ], "dependencies": { "angular": "~1.5.8", - "angular-route": "~1.5.8", "bootstrap": "components/bootstrap#~3.3.7", - "jquery": "components/jquery#~3.1.0" + "jquery": "components/jquery#~3.1.0", + "angular-ui-router": "ui-router#^0.3.2" } } diff --git a/springboot-petclinic-client/src/scripts/app.js b/springboot-petclinic-client/src/scripts/app.js index 7af1a5e0b..870aeb209 100644 --- a/springboot-petclinic-client/src/scripts/app.js +++ b/springboot-petclinic-client/src/scripts/app.js @@ -1,37 +1,29 @@ 'use strict'; /* App Module */ var petClinicApp = angular.module('petClinicApp', [ - 'ngRoute', 'layoutNav', 'layoutFooter', 'layoutWelcome', + 'ui.router', 'layoutNav', 'layoutFooter', 'layoutWelcome', 'ownerList', 'ownerDetails', 'ownerForm', 'petForm', 'visits', 'vetList']); -petClinicApp.config(['$locationProvider', '$routeProvider', '$httpProvider', function( - $locationProvider, $routeProvider, $httpProvider) { +petClinicApp.config(['$stateProvider', '$urlRouterProvider', '$locationProvider', '$httpProvider', function( + $stateProvider, $urlRouterProvider, $locationProvider, $httpProvider) { // safari turns to be lazy sending the Cache-Control header $httpProvider.defaults.headers.common["Cache-Control"] = 'no-cache'; $locationProvider.hashPrefix('!'); - $routeProvider.when('/welcome', { - template: '' - }).when('/owners/:ownerId', { - template: '' - }).when('/owners', { - template: '' - }).when('/owners/:ownerId/edit', { - template: '' - }).when('/new-owner', { - template: '' - }).when('/owners/:ownerId/new-pet', { - template: '' - }).when('/owners/:ownerId/pets/:petId', { - template: '' - }).when('/owners/:ownerId/pets/:petId/visits', { - template: '' - }).when('/vets', { - template: '' - }).otherwise('/welcome'); - + $urlRouterProvider.otherwise('/welcome'); + $stateProvider + .state('app', { + abstract: true, + url: '', + template: '' + }) + .state('welcome', { + parent: 'app', + url: '/welcome', + template: '' + }); }]); ['welcome', 'nav', 'footer'].forEach(function(c) { diff --git a/springboot-petclinic-client/src/scripts/fragments/nav.html b/springboot-petclinic-client/src/scripts/fragments/nav.html index fab8edf78..8d3ac0925 100644 --- a/springboot-petclinic-client/src/scripts/fragments/nav.html +++ b/springboot-petclinic-client/src/scripts/fragments/nav.html @@ -11,11 +11,9 @@ - \ No newline at end of file + diff --git a/springboot-petclinic-client/src/scripts/owner-details/owner-details.component.js b/springboot-petclinic-client/src/scripts/owner-details/owner-details.component.js index cbf9492eb..3569642df 100644 --- a/springboot-petclinic-client/src/scripts/owner-details/owner-details.component.js +++ b/springboot-petclinic-client/src/scripts/owner-details/owner-details.component.js @@ -1,16 +1,7 @@ 'use strict'; -angular.module('ownerDetails', [ - 'ngRoute' -]); - -angular.module("ownerDetails").component("ownerDetails", { - templateUrl: "scripts/owner-details/owner-details.template.html", - controller: ["$http", '$routeParams', function($http, $routeParams) { - var self = this; - - $http.get('owner/' + $routeParams.ownerId).then(function(resp) { - self.owner = resp.data; - }); - }] -}); \ No newline at end of file +angular.module('ownerDetails') + .component('ownerDetails', { + templateUrl: 'scripts/owner-details/owner-details.template.html', + controller: 'OwnerDetailsController' + }); \ No newline at end of file diff --git a/springboot-petclinic-client/src/scripts/owner-details/owner-details.controller.js b/springboot-petclinic-client/src/scripts/owner-details/owner-details.controller.js new file mode 100644 index 000000000..f66274c01 --- /dev/null +++ b/springboot-petclinic-client/src/scripts/owner-details/owner-details.controller.js @@ -0,0 +1,10 @@ +'use strict'; + +angular.module('ownerDetails') + .controller('OwnerDetailsController', ['$http', '$stateParams', function ($http, $stateParams) { + var self = this; + + $http.get('owner/' + $stateParams.ownerId).then(function (resp) { + self.owner = resp.data; + }); + }]); diff --git a/springboot-petclinic-client/src/scripts/owner-details/owner-details.js b/springboot-petclinic-client/src/scripts/owner-details/owner-details.js new file mode 100644 index 000000000..670f24bee --- /dev/null +++ b/springboot-petclinic-client/src/scripts/owner-details/owner-details.js @@ -0,0 +1,11 @@ +'use strict'; + +angular.module('ownerDetails', ['ui.router']) + .config(['$stateProvider', function ($stateProvider) { + $stateProvider + .state('ownerDetails', { + parent: 'app', + url: '/owners/details/:ownerId', + template: '' + }) + }]); \ No newline at end of file diff --git a/springboot-petclinic-client/src/scripts/owner-details/owner-details.template.html b/springboot-petclinic-client/src/scripts/owner-details/owner-details.template.html index 5450aa0ea..ed2810f9c 100644 --- a/springboot-petclinic-client/src/scripts/owner-details/owner-details.template.html +++ b/springboot-petclinic-client/src/scripts/owner-details/owner-details.template.html @@ -19,10 +19,10 @@ - Edit Owner + Edit Owner - Add New Pet + Add New Pet @@ -30,11 +30,11 @@

Pets and Visits

- + - +
Name
-
{{pet.name}}
+
{{pet.name}}
Birth Date
{{pet.birthDate | date:'yyyy MMM dd'}}
Type
@@ -49,21 +49,20 @@
Description
{{visit.date | date:'yyyy MMM dd'}} {{visit.description}}
- Edit Pet + Edit Pet - Add Visit + Add Visit
- diff --git a/springboot-petclinic-client/src/scripts/owner-form/owner-form.component.js b/springboot-petclinic-client/src/scripts/owner-form/owner-form.component.js index 2f832ef68..dd409691b 100644 --- a/springboot-petclinic-client/src/scripts/owner-form/owner-form.component.js +++ b/springboot-petclinic-client/src/scripts/owner-form/owner-form.component.js @@ -1,41 +1,7 @@ 'use strict'; -angular.module('ownerForm', [ - 'ngRoute' -]); - -angular.module("ownerForm").component("ownerForm", { - templateUrl: "scripts/owner-form/owner-form.template.html", - controller: ["$http", '$routeParams', '$location', function ($http, $routeParams, $location) { - var self = this; - - var ownerId = $routeParams.ownerId || 0; - - if (!ownerId) { - self.owner = {}; - } else { - $http.get("owner/" + ownerId).then(function(resp) { - self.owner = resp.data; - }); - } - - self.submitOwnerForm = function() { - var id = self.owner.id; - var req; - if (id) { - req = $http.put("owner/" + id, self.owner); - } else { - req = $http.post("owner", self.owner); - } - - req.then(function () { - $location.url("/owners"); - }, function (response) { - var error = response.data; - alert(error.error + "\r\n" + error.errors.map(function (e) { - return e.field + ": " + e.defaultMessage; - }).join("\r\n")); - }); - }; - }] -}); \ No newline at end of file +angular.module('ownerForm') + .component('ownerForm', { + templateUrl: 'scripts/owner-form/owner-form.template.html', + controller: 'OwnerFormController' + }); \ No newline at end of file diff --git a/springboot-petclinic-client/src/scripts/owner-form/owner-form.controller.js b/springboot-petclinic-client/src/scripts/owner-form/owner-form.controller.js new file mode 100644 index 000000000..55bbe9629 --- /dev/null +++ b/springboot-petclinic-client/src/scripts/owner-form/owner-form.controller.js @@ -0,0 +1,35 @@ +'use strict'; + +angular.module('ownerForm') + .controller('OwnerFormController', ["$http", '$state', '$stateParams', function ($http, $state, $stateParams) { + var self = this; + + var ownerId = $stateParams.ownerId || 0; + + if (!ownerId) { + self.owner = {}; + } else { + $http.get("owner/" + ownerId).then(function (resp) { + self.owner = resp.data; + }); + } + + self.submitOwnerForm = function () { + var id = self.owner.id; + var req; + if (id) { + req = $http.put("owner/" + id, self.owner); + } else { + req = $http.post("owner", self.owner); + } + + req.then(function () { + $state.go('owners'); + }, function (response) { + var error = response.data; + alert(error.error + "\r\n" + error.errors.map(function (e) { + return e.field + ": " + e.defaultMessage; + }).join("\r\n")); + }); + }; + }]); diff --git a/springboot-petclinic-client/src/scripts/owner-form/owner-form.js b/springboot-petclinic-client/src/scripts/owner-form/owner-form.js new file mode 100644 index 000000000..1bb615913 --- /dev/null +++ b/springboot-petclinic-client/src/scripts/owner-form/owner-form.js @@ -0,0 +1,16 @@ +'use strict'; + +angular.module('ownerForm', ['ui.router']) + .config(['$stateProvider', function ($stateProvider) { + $stateProvider + .state('ownerNew', { + parent: 'app', + url: '/owners/new', + template: '' + }) + .state('ownerEdit', { + parent: 'app', + url: '/owners/:ownerId/edit', + template: '' + }) + }]); diff --git a/springboot-petclinic-client/src/scripts/owner-list/owner-list.component.js b/springboot-petclinic-client/src/scripts/owner-list/owner-list.component.js index bba44cd24..55b6b253f 100644 --- a/springboot-petclinic-client/src/scripts/owner-list/owner-list.component.js +++ b/springboot-petclinic-client/src/scripts/owner-list/owner-list.component.js @@ -1,15 +1,7 @@ 'use strict'; -angular.module('ownerList', [ - 'ngRoute' -]); - -angular.module("ownerList").component("ownerList", { - templateUrl: "scripts/owner-list/owner-list.template.html", - controller: ["$http", function ($http) { - var self = this; - $http.get('owner/list').then(function(resp) { - self.owners = resp.data; - }); - }] -}); \ No newline at end of file +angular.module('ownerList') + .component('ownerList', { + templateUrl: 'scripts/owner-list/owner-list.template.html', + controller: 'OwnerListController' + }); diff --git a/springboot-petclinic-client/src/scripts/owner-list/owner-list.controller.js b/springboot-petclinic-client/src/scripts/owner-list/owner-list.controller.js new file mode 100644 index 000000000..991c6c644 --- /dev/null +++ b/springboot-petclinic-client/src/scripts/owner-list/owner-list.controller.js @@ -0,0 +1,10 @@ +'use strict'; + +angular.module('ownerList') + .controller('OwnerListController', ['$http', function ($http) { + var self = this; + + $http.get('owner/list').then(function (resp) { + self.owners = resp.data; + }); + }]); diff --git a/springboot-petclinic-client/src/scripts/owner-list/owner-list.js b/springboot-petclinic-client/src/scripts/owner-list/owner-list.js new file mode 100644 index 000000000..4714a2f97 --- /dev/null +++ b/springboot-petclinic-client/src/scripts/owner-list/owner-list.js @@ -0,0 +1,11 @@ +'use strict'; + +angular.module('ownerList', ['ui.router']) + .config(['$stateProvider', function ($stateProvider) { + $stateProvider + .state('owners', { + parent: 'app', + url: '/owners', + template: '' + }) + }]); \ No newline at end of file diff --git a/springboot-petclinic-client/src/scripts/owner-list/owner-list.template.html b/springboot-petclinic-client/src/scripts/owner-list/owner-list.template.html index 37603db6a..fc784631a 100644 --- a/springboot-petclinic-client/src/scripts/owner-list/owner-list.template.html +++ b/springboot-petclinic-client/src/scripts/owner-list/owner-list.template.html @@ -17,15 +17,15 @@ - + - + {{owner.firstName}} {{owner.lastName}} {{owner.address}} {{owner.city}} {{owner.telephone}} - {{pet.name + ' '}} + {{pet.name + ' '}} - \ No newline at end of file + diff --git a/springboot-petclinic-client/src/scripts/pet-form/pet-form.component.js b/springboot-petclinic-client/src/scripts/pet-form/pet-form.component.js index 187356659..6f5e13bb6 100644 --- a/springboot-petclinic-client/src/scripts/pet-form/pet-form.component.js +++ b/springboot-petclinic-client/src/scripts/pet-form/pet-form.component.js @@ -1,66 +1,7 @@ 'use strict'; -angular.module('petForm', [ - 'ngRoute' -]); - -angular.module("petForm").component("petForm", { - templateUrl: "scripts/pet-form/pet-form.template.html", - controller: ["$http", '$routeParams', '$location', function ($http, $routeParams, $location) { - var self = this; - var ownerId = $routeParams.ownerId || 0; - - $http.get('petTypes').then(function(resp) { - self.types = resp.data; - }).then(function () { - - var petId = $routeParams.petId || 0; - - if (petId) { // edit - $http.get("owner/" + ownerId + "/pet/" + petId).then(function(resp) { - self.pet = resp.data; - self.pet.birthDate = new Date(self.pet.birthDate); - self.petTypeId = "" + self.pet.type.id; - }); - } else { - $http.get('owner/' + ownerId).then(function(resp) { - self.pet = { - owner: resp.data.firstName + " " + resp.data.lastName - }; - self.petTypeId = "1"; - }) - - } - }); - - self.submit = function() { - console.log(this.pet); - - var id = self.pet.id || 0; - - var data = { - id : id, - name : self.pet.name, - birthDate : self.pet.birthDate, - typeId: self.petTypeId - }; - - var req; - if (id) { - req = $http.put("owners/" + ownerId + "/pets/" + id, data); - } else { - req = $http.post("owners/" + ownerId + "/pets", data); - } - - req.then(function () { - $location.url("owners/" + ownerId); - }, function (response) { - var error = response.data; - error.errors = error.errors || []; - alert(error.error + "\r\n" + error.errors.map(function (e) { - return e.field + ": " + e.defaultMessage; - }).join("\r\n")); - }); - }; - }] -}); \ No newline at end of file +angular.module('petForm') + .component('petForm', { + templateUrl: 'scripts/pet-form/pet-form.template.html', + controller: 'PetFormController' + }); diff --git a/springboot-petclinic-client/src/scripts/pet-form/pet-form.controller.js b/springboot-petclinic-client/src/scripts/pet-form/pet-form.controller.js new file mode 100644 index 000000000..fd4c005d4 --- /dev/null +++ b/springboot-petclinic-client/src/scripts/pet-form/pet-form.controller.js @@ -0,0 +1,58 @@ +'use strict'; + +angular.module('petForm') + .controller('PetFormController', ['$http', '$state', '$stateParams', function ($http, $state, $stateParams) { + var self = this; + var ownerId = $stateParams.ownerId || 0; + + $http.get('petTypes').then(function (resp) { + self.types = resp.data; + }).then(function () { + + var petId = $stateParams.petId || 0; + + if (petId) { // edit + $http.get("owner/" + ownerId + "/pet/" + petId).then(function (resp) { + self.pet = resp.data; + self.pet.birthDate = new Date(self.pet.birthDate); + self.petTypeId = "" + self.pet.type.id; + }); + } else { + $http.get('owner/' + ownerId).then(function (resp) { + self.pet = { + owner: resp.data.firstName + " " + resp.data.lastName + }; + self.petTypeId = "1"; + }) + + } + }); + + self.submit = function () { + var id = self.pet.id || 0; + + var data = { + id: id, + name: self.pet.name, + birthDate: self.pet.birthDate, + typeId: self.petTypeId + }; + + var req; + if (id) { + req = $http.put("owners/" + ownerId + "/pets/" + id, data); + } else { + req = $http.post("owners/" + ownerId + "/pets", data); + } + + req.then(function () { + $state.go("owners", {ownerId: ownerId}); + }, function (response) { + var error = response.data; + error.errors = error.errors || []; + alert(error.error + "\r\n" + error.errors.map(function (e) { + return e.field + ": " + e.defaultMessage; + }).join("\r\n")); + }); + }; + }]); diff --git a/springboot-petclinic-client/src/scripts/pet-form/pet-form.js b/springboot-petclinic-client/src/scripts/pet-form/pet-form.js new file mode 100644 index 000000000..70292ad68 --- /dev/null +++ b/springboot-petclinic-client/src/scripts/pet-form/pet-form.js @@ -0,0 +1,16 @@ +'use strict'; + +angular.module('petForm', ['ui.router']) + .config(['$stateProvider', function ($stateProvider) { + $stateProvider + .state('petNew', { + parent: 'app', + url: '/owners/:ownerId/new-pet', + template: '' + }) + .state('petEdit', { + parent: 'app', + url: '/owners/:ownerId/pets/:petId', + template: '' + }) + }]); diff --git a/springboot-petclinic-client/src/scripts/pet-form/pet-form.template.html b/springboot-petclinic-client/src/scripts/pet-form/pet-form.template.html index 36884378c..76317e557 100644 --- a/springboot-petclinic-client/src/scripts/pet-form/pet-form.template.html +++ b/springboot-petclinic-client/src/scripts/pet-form/pet-form.template.html @@ -28,7 +28,7 @@
diff --git a/springboot-petclinic-client/src/scripts/vet-list/vet-list.component.js b/springboot-petclinic-client/src/scripts/vet-list/vet-list.component.js index fbe63f46f..892f4f986 100644 --- a/springboot-petclinic-client/src/scripts/vet-list/vet-list.component.js +++ b/springboot-petclinic-client/src/scripts/vet-list/vet-list.component.js @@ -1,16 +1,7 @@ 'use strict'; -angular.module('vetList', [ - 'ngRoute' -]); - -angular.module("vetList").component("vetList", { - templateUrl: "scripts/vet-list/vet-list.template.html", - controller: ["$http", '$routeParams', function($http) { - var self = this; - - $http.get('vets').then(function(resp) { - self.vetList = resp.data; - }); - }] -}); \ No newline at end of file +angular.module('vetList') + .component('vetList', { + templateUrl: 'scripts/vet-list/vet-list.template.html', + controller: 'VetListController' + }); \ No newline at end of file diff --git a/springboot-petclinic-client/src/scripts/vet-list/vet-list.controller.js b/springboot-petclinic-client/src/scripts/vet-list/vet-list.controller.js new file mode 100644 index 000000000..3e90bca6e --- /dev/null +++ b/springboot-petclinic-client/src/scripts/vet-list/vet-list.controller.js @@ -0,0 +1,10 @@ +'use strict'; + +angular.module('vetList') + .controller('VetListController', ['$http', function ($http) { + var self = this; + + $http.get('vets').then(function (resp) { + self.vetList = resp.data; + }); + }]); diff --git a/springboot-petclinic-client/src/scripts/vet-list/vet-list.js b/springboot-petclinic-client/src/scripts/vet-list/vet-list.js new file mode 100644 index 000000000..bcecacc0c --- /dev/null +++ b/springboot-petclinic-client/src/scripts/vet-list/vet-list.js @@ -0,0 +1,11 @@ +'use strict'; + +angular.module('vetList', ['ui.router']) + .config(['$stateProvider', function ($stateProvider) { + $stateProvider + .state('vets', { + parent: 'app', + url: '/vets', + template: '' + }) + }]); \ No newline at end of file diff --git a/springboot-petclinic-client/src/scripts/visits/visits.component.js b/springboot-petclinic-client/src/scripts/visits/visits.component.js index e083fa1fb..bf6a17a48 100644 --- a/springboot-petclinic-client/src/scripts/visits/visits.component.js +++ b/springboot-petclinic-client/src/scripts/visits/visits.component.js @@ -1,37 +1,7 @@ 'use strict'; -angular.module('visits', [ - 'ngRoute' -]); - -angular.module("visits").component("visits", { - templateUrl: "scripts/visits/visits.template.html", - controller: ["$http", '$routeParams', '$location', '$filter', function ($http, $routeParams, $location, $filter) { - var self = this; - var petId = $routeParams.petId || 0; - var url = "owners/" + ($routeParams.ownerId || 0) + "/pets/" + petId + "/visits"; - self.date = new Date(); - self.desc = ""; - - $http.get(url).then(function(resp) { - self.visits = resp.data; - }); - - self.submit = function() { - - var data = { - date : $filter('date')(self.date, "yyyy-MM-dd"), - description : self.desc - }; - console.log(data); - $http.post(url, data).then(function() { - $location.url("owners/" + $routeParams.ownerId); - }, function (response) { - var error = response.data; - alert(error.error + "\r\n" + error.errors.map(function (e) { - return e.field + ": " + e.defaultMessage; - }).join("\r\n")); - }); - }; - }] -}); \ No newline at end of file +angular.module('visits') + .component('visits', { + templateUrl: 'scripts/visits/visits.template.html', + controller: 'VisitsController' + }); \ No newline at end of file diff --git a/springboot-petclinic-client/src/scripts/visits/visits.controller.js b/springboot-petclinic-client/src/scripts/visits/visits.controller.js new file mode 100644 index 000000000..607836b4f --- /dev/null +++ b/springboot-petclinic-client/src/scripts/visits/visits.controller.js @@ -0,0 +1,30 @@ +'use strict'; + +angular.module('visits') + .controller('VisitsController', ['$http', '$state', '$stateParams', '$filter', function ($http, $state, $stateParams, $filter) { + var self = this; + var petId = $stateParams.petId || 0; + var url = "owners/" + ($stateParams.ownerId || 0) + "/pets/" + petId + "/visits"; + self.date = new Date(); + self.desc = ""; + + $http.get(url).then(function (resp) { + self.visits = resp.data; + }); + + self.submit = function () { + var data = { + date: $filter('date')(self.date, "yyyy-MM-dd"), + description: self.desc + }; + + $http.post(url, data).then(function () { + $state.go("owners", { ownerId: $stateParams.ownerId }); + }, function (response) { + var error = response.data; + alert(error.error + "\r\n" + error.errors.map(function (e) { + return e.field + ": " + e.defaultMessage; + }).join("\r\n")); + }); + }; + }]); diff --git a/springboot-petclinic-client/src/scripts/visits/visits.js b/springboot-petclinic-client/src/scripts/visits/visits.js new file mode 100644 index 000000000..10821acaa --- /dev/null +++ b/springboot-petclinic-client/src/scripts/visits/visits.js @@ -0,0 +1,11 @@ +'use strict'; + +angular.module('visits', ['ui.router']) + .config(['$stateProvider', function ($stateProvider) { + $stateProvider + .state('visits', { + parent: 'app', + url: '/owners/:ownerId/pets/:petId/visits', + template: '' + }) + }]); diff --git a/springboot-petclinic-server/src/main/resources/templates/index.html b/springboot-petclinic-server/src/main/resources/templates/index.html index 5d6429aab..441679f97 100644 --- a/springboot-petclinic-server/src/main/resources/templates/index.html +++ b/springboot-petclinic-server/src/main/resources/templates/index.html @@ -18,24 +18,41 @@ - - + + - - - - - - + + + + + + + + + + + + + + + + + + + + + + +
-
+