feat(CSTM-CPC-976)Add a pet to an Owner

api-gateway/src/main/java/com/petclinic/bffapigateway/domainclientlayer/CustomersServiceClient.java

@@ -140,14 +140,14 @@ public Mono<PetResponseDTO> getPet(final String ownerId, final String petId) {
 
     public Flux<PetResponseDTO> getPetsByOwnerId(final String ownerId) {
         return webClientBuilder.build().get()
-                .uri(customersServiceUrl + "/pet/owner/" + ownerId + "/pets")
+                .uri(customersServiceUrl + "/pet/owner/" + ownerId)
                 .retrieve()
                 .bodyToFlux(PetResponseDTO.class);
     }
 
     public Mono<PetResponseDTO> createPet(PetResponseDTO model, final String ownerId) {
         return webClientBuilder.build().post()
-                .uri(customersServiceUrl + "{ownerId}/pets", ownerId)
+                .uri(customersServiceUrl + "/pet", ownerId)
                 .body(just(model), PetResponseDTO.class)
                 .accept(MediaType.APPLICATION_JSON)
                 .retrieve().bodyToMono(PetResponseDTO.class);

api-gateway/src/main/java/com/petclinic/bffapigateway/dtos/Pets/PetRequestDTO.java

@@ -18,7 +18,7 @@ public class PetRequestDTO {
     private String name;
     private Date birthDate;
     private String petTypeId;
-    private String photoId;
+    //private String photoId;
     private String isActive;
 
 }

api-gateway/src/main/java/com/petclinic/bffapigateway/dtos/Pets/PetResponseDTO.java

@@ -22,7 +22,7 @@ public class PetResponseDTO {
     private String name;
     private Date birthDate;
     private String petTypeId;
-    private String photoId;
+    //private String photoId;
     private String isActive;
 
 

api-gateway/src/main/java/com/petclinic/bffapigateway/presentationlayer/BFFApiGatewayController.java

@@ -147,7 +147,7 @@ public Mono<ResponseEntity<Void>> deleteBillsByCustomerId(final @PathVariable St
 
 
     @IsUserSpecific(idToMatch = {"customerId"}, bypassRoles = {Roles.ADMIN,Roles.VET})
-    @PostMapping(value = "owners/{ownerId}/pets" , produces = "application/json", consumes = "application/json")
+    @PostMapping(value = "/owners/{ownerId}/pets" , produces = "application/json", consumes = "application/json")
     public Mono<ResponseEntity<PetResponseDTO>> createPet(@RequestBody PetResponseDTO pet, @PathVariable String ownerId){
         return customersServiceClient.createPet(pet, ownerId).map(s -> ResponseEntity.status(HttpStatus.CREATED).body(s))
                 .defaultIfEmpty(ResponseEntity.badRequest().build());

api-gateway/src/main/resources/static/index.html

@@ -166,6 +166,10 @@
     <script src="scripts/auth/reset-pwd-form/reset-pwd-form.controller.js"></script>
     <script src="scripts/auth/reset-pwd-form/reset-pwd-form.component.js"></script>
 
+    <script src="scripts/pet-register/pet-register.js"></script>
+    <script src="scripts/pet-register/pet-register.controller.js"></script>
+    <script src="scripts/pet-register/pet-register.component.js"></script>
+
     <script src="scripts/inventory-list/inventory-service.js"></script>
 
 

api-gateway/src/main/resources/static/scripts/app.js

@@ -9,7 +9,7 @@ const whiteList = new Set([
 
 /* App Module */
 const petClinicApp = angular.module('petClinicApp', [
-    'ui.router', 'layoutNav', 'layoutFooter', 'layoutWelcome', 'ownerList', 'ownerDetails', 'ownerForm', 'ownerRegister', 'petForm'
+    'ui.router', 'layoutNav', 'layoutFooter', 'layoutWelcome', 'ownerList', 'ownerDetails', 'ownerForm', 'ownerRegister', 'petRegister', 'petForm'
     , 'visits', 'vetList','vetForm','vetDetails', 'visitList', 'billForm', 'billUpdateForm', 'loginForm', 'rolesDetails', 'signupForm',
     'billDetails', 'billsByOwnerId', 'billHistory','billsByVetId','inventoryList', 'inventoryForm', 'productForm','inventoryProductList', 'inventoryUpdateForm', 'productUpdateForm'
     , 'verification' , 'adminPanel','resetPwdForm','forgotPwdForm','petTypeList']);

api-gateway/src/main/resources/static/scripts/owner-details/owner-details.controller.js

@@ -1,81 +1,101 @@
 angular.module('ownerDetails')
-    .controller('OwnerDetailsController', ['$http', '$state', '$stateParams', '$scope', '$timeout', '$q', function ($http, $state, $stateParams, $scope, $timeout, $q) {
-        var self = this;
-        self.owner = {};
-        self.pet = {};
+    .controller('OwnerDetailsController', OwnerDetailsController);
 
-        $http.get('api/gateway/owners/' + $stateParams.ownerId).then(function (resp) {
-            self.owner = resp.data;
-            console.log(self.owner);
+OwnerDetailsController.$inject = ['$http', '$state', '$stateParams', '$scope', '$timeout', '$q'];
 
-            var petPromises = self.owner.pets.map(function (pet) {
-                return $http.get('api/gateway/pets/' + pet.petid, { cache: false });
-            });
+function OwnerDetailsController($http, $state, $stateParams, $scope, $timeout, $q) {
+    var vm = this; // Use 'vm' (short for ViewModel) instead of 'self'
 
+    // Initialize properties
+    vm.owner = {};
+    vm.pet = {};
+    vm.pets = [];
 
-            $q.all(petPromises).then(function (responses) {
-                self.owner.pets = responses.map(function (response) {
-                    return response.data;
-                });
-            });
+    // Fetch owner data
+    $http.get('api/gateway/owners/' + $stateParams.ownerId)
+        .then(function (resp) {
+            vm.owner = resp.data;
+            console.log(vm.owner);
+        })
+        .catch(function (error) {
+            console.error('Error fetching owner data:', error);
         });
 
-        self.deletePet = function (petId) {
-            var config = {
-                headers: {
-                    'Content-Type': 'application/json'
-                }
-            };
-            $http.delete('api/gateway/pets/' + petId, config)
-                .then(function (resp) {
-                    console.log("Pet deleted successfully");
+    // Fetch associated pets and their details
+    $http.get(`api/gateway/owners/${$stateParams.ownerId}/pets`)
+        .then(function (response) {
+            // Split the response by newline characters to get individual pet objects
+            var petResponses = response.data.split('\n');
 
-                  /*  $http.get('api/gateway/owners/' + $stateParams.ownerId).then(function (resp) {
-                        self.owner = resp.data;
-                    });
-                   */
+// Parse each pet response as JSON, remove the "data:" prefix, and trim any leading/trailing whitespace
+            var petObjects = petResponses.map(function (petResponse) {
+                // Remove the "data:" prefix and trim any leading/trailing whitespace
+                var trimmedResponse = petResponse.replace(/^data:/, '').trim();
+                console.log("Trimmed results: ", trimmedResponse)
 
-                    self.owner.pets = self.owner.pets.filter(function(pet) {
-                        return pet.petId !== petId;
-                    });
+                // Check if the trimmed response is empty
+                if (!trimmedResponse) {
+                    return null; // Skip empty responses
+                }
 
-                    $scope.$applyAsync();
-                    // Handle the success appropriately
-                }).catch(function (error) {
-                console.error("Error deleting pet:", error);
-                // Handle the error appropriately
+                try {
+                    return JSON.parse(trimmedResponse);
+                } catch (error) {
+                    console.error('Error parsing pet response:', error);
+                    return null;
+                }
             });
-        };
-
 
+// Filter out any parsing errors (null values)
+            petObjects = petObjects.filter(function (pet) {
+                return pet !== null;
+            });
 
 
+            // Assuming that each pet has a 'petId' property, you can create an array of promises to fetch detailed pet data
+            var petPromises = petObjects.map(function (pet) {
+                return $http.get(`api/gateway/pets/${pet.petId}`);
+            });
 
+            return $q.all(petPromises);
+        })
+        .then(function (responses) {
+            vm.pets = responses.map(function (response) {
+                return response.data;
+            });
+            console.log("Pet Array:", vm.pets);
+        })
+        .catch(function (error) {
+            console.error('Error fetching pet data:', error);
+        });
 
-        self.toggleActiveStatus = function (petId) {
-            $http.get('api/gateway/pets/' + petId + '?_=' + new Date().getTime(), { headers: { 'Cache-Control': 'no-cache' } }).then(function (resp) {
+    // Toggle pet's active status
+    vm.toggleActiveStatus = function (petId) {
+        $http.get('api/gateway/pets/' + petId + '?_=' + new Date().getTime(), { headers: { 'Cache-Control': 'no-cache' } })
+            .then(function (resp) {
                 console.log("Pet id is " + petId);
                 console.log(resp.data);
-                self.pet = resp.data;
-                console.log("Pet id is " + self.pet.petId);
-                console.log(self.pet);
+                vm.pet = resp.data;
+                console.log("Pet id is " + vm.pet.petId);
+                console.log(vm.pet);
                 console.log("=====================================");
                 console.log(resp.data);
-                console.log("Active status before is:" + self.pet.isActive);
-                self.pet.isActive = self.pet.isActive === "true" ? "false" : "true";
-                console.log("Active status after is:" + self.pet.isActive);
+                console.log("Active status before is:" + vm.pet.isActive);
+                vm.pet.isActive = vm.pet.isActive === "true" ? "false" : "true";
+                console.log("Active status after is:" + vm.pet.isActive);
 
-                $http.patch('api/gateway/pet/' + petId, {
-                    isActive: self.pet.isActive
-                }, { headers: { 'Cache-Control': 'no-cache' } }).then(function (resp) {
-                    console.log("Pet active status updated successfully");
-                    self.pet = resp.data;
-                    $scope.$applyAsync()
-                    $timeout(); // Manually trigger the $digest cycle to update the UI
-                }).catch(function (error) {
-                    console.error("Error updating pet active status:", error);
-                    // Handle the error appropriately
-                });
+                return $http.patch('api/gateway/pet/' + petId, {
+                    isActive: vm.pet.isActive
+                }, { headers: { 'Cache-Control': 'no-cache' } });
+            })
+            .then(function (resp) {
+                console.log("Pet active status updated successfully");
+                vm.pet = resp.data;
+                $timeout(); // Manually trigger the $digest cycle to update the UI
+            })
+            .catch(function (error) {
+                console.error("Error updating pet active status:", error);
+                // Handle the error appropriately
             });
-        };
-    }]);
+    };
+}

api-gateway/src/main/resources/static/scripts/owner-details/owner-details.template.html

@@ -73,34 +73,30 @@ <h3 class="">Owner Details</h3>
                 <div class="d-flex justify-content-between gap-5">
                     <h3 class="">Pet Details</h3>
 
-                    <div class="border-5 rounded">
-                        <a style="color: rgba(0,0,0,0.5);" class="btn btn-light" ui-sref="ownerEdit({ownerId: $ctrl.owner.ownerId, method: 'edit'})">Add Pet</a>
+                        <div class="border-5 rounded">
+                            <a style="color: rgba(0,0,0,0.5);" class="btn btn-light" ui-sref="petRegister({ownerId: $ctrl.owner.ownerId})">Add Pet</a>
+                        </div>
                     </div>
-                </div>
 
-                    <div>
-                        <!-- Use ng-repeat to iterate through the owner's pets -->
-                        <div ng-repeat="pet in $ctrl.owner.pets" ng-show="$ctrl.owner.pets.length > 0" class="d-flex justify-content-between">
-                            <div class="mt-3">
-                                <a style="color: rgba(0,0,0,0.5);" class="btn btn-light" ui-sref="editPet({ownerId: $ctrl.owner.ownerId, petId: pet.petId, method: 'edit'})">Edit Pet</a>
-                                <p>Name: {{ pet.name }}</p>
-                                <p>Pet Id: {{pet.petId}}</p>
-                                <!-- Add more pet details as needed -->
-                            </div>
-                            <div class="border-5 rounded">
-                                <input type="checkbox" ng-model="$ctrl.pet.isActive" ng-change="$ctrl.toggleActiveStatus(pet.petId)">
-                                <label ng-if="$ctrl.pet.isActive === 'true'" style="color: rgba(0,0,0,0.5);">Deactivate Pet</label>
-                                <label ng-if="$ctrl.pet.isActive !== 'true'" style="color: rgba(0,0,0,0.5);">Activate Pet</label>
-                            </div>
-                            <div class="border-5 rounded">
-                                <a style="color: rgba(0,0,0,0.5);" class="btn btn-light" ng-click="$ctrl.deletePet(pet.petId)">Delete Pet</a>
-                            </div>
+                <div>
+                    <!-- Use ng-repeat to iterate through the owner's pets -->
+                    <div ng-repeat="pet in $ctrl.pets" class="d-flex justify-content-between">
+                        <div class="mt-3">
+                            <a style="color: rgba(0,0,0,0.5);" class="btn btn-light" ui-sref="editPet({ownerId: $ctrl.owner.ownerId, petId: pet.petId, method: 'edit'})">Edit Pet</a>
+                            <p>Name: {{ pet.name }}</p>
+                            <!-- Add more pet details as needed -->
+                        </div>
+                        <div class="border-5 rounded">
+                            <input type="checkbox" ng-model="$ctrl.pet.isActive" ng-change="$ctrl.toggleActiveStatus(pet.petId)">
+                            <label ng-if="$ctrl.pet.isActive === 'true'" style="color: rgba(0,0,0,0.5);">Deactivate Pet</label>
+                            <label ng-if="$ctrl.pet.isActive !== 'true'" style="color: rgba(0,0,0,0.5);">Activate Pet</label>
                         </div>
-
                     </div>
+                </div>
+                </div>
+
 
 
-                </div>
 
             </div>
 

api-gateway/src/main/resources/static/scripts/pet-register/pet-register.component.js

@@ -0,0 +1,8 @@
+'use strict';
+
+angular.module('petRegister')
+    .component('petRegister', {
+        templateUrl: 'scripts/pet-register/pet-register.template.html',
+        controller: 'PetRegisterController'
+    });
+

api-gateway/src/main/resources/static/scripts/pet-register/pet-register.controller.js

@@ -0,0 +1,68 @@
+'use strict';
+
+angular.module('petRegister')
+    .controller('PetRegisterController', ["$http", '$state', '$stateParams', function ($http, $state, $stateParams) {
+        var self = this;
+        var ownerId = $stateParams.ownerId || 0;
+        console.log("properly running on load")
+
+        $http.get('api/gateway/owners/petTypes').then(function (resp) {
+            self.types = resp.data;
+        });
+
+
+        // Function to submit the form
+        self.submitPetForm = function () {
+            console.log("function calls")
+            var petType = {
+                id: self.pet.type.id,
+                name: self.pet.type.name
+            }
+
+            var data = {
+                ownerId: ownerId,
+                petId: randomUUID,
+                name: self.pet.name,
+                birthDate: self.pet.birthDate,
+                type: petType.id,
+                isActive : "true"
+            }
+
+
+           $http.post("api/gateway/" + "owners/" + ownerId + "/pets", data).then(function (){
+                console.log("before if")
+                $state.go('ownerDetails', {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"));
+            });
+        };
+
+        function generateUUID() {
+            // Generate a random hexadecimal string of length 12
+            var randomHex = 'xxxxxxxxxxxx'.replace(/x/g, function () {
+                return (Math.random() * 16 | 0).toString(16);
+            });
+
+            // Format the UUID
+            var uuid = [
+                randomHex.substr(0, 8),
+                randomHex.substr(8, 4),
+                '4' + randomHex.substr(13, 3), // Set the version to 4 (random)
+                '89ab'[Math.floor(Math.random() * 4)] + randomHex.substr(17, 3), // Set the variant
+                randomHex.substr(20, 12)
+            ].join('-');
+
+            return uuid;
+        }
+
+// Example usage:
+        var randomUUID = generateUUID();
+        console.log(randomUUID);
+
+
+    }]);
+

api-gateway/src/main/resources/static/scripts/pet-register/pet-register.js

@@ -0,0 +1,14 @@
+'use strict';
+
+angular.module('petRegister', ['ui.router'])
+    .config(['$stateProvider', function ($stateProvider) {
+        $stateProvider
+            .state('petRegister', {
+                parent: 'app',
+                url: '/owners/{ownerId}/pets/register',
+                param: {ownerId: null},
+                template: '<pet-register></pet-register>'
+            })
+
+    }]);
+