feat(CSTM-CPC-876)Finalize Owner Details Page (#570)

JIRA: https://champlainsaintlambert.atlassian.net/browse/CPC-867?atlOrigin=eyJpIjoiYmJhODI4MjQ4YWE3NDM3Y2JlMjZkZjdmNTQzNzFjZDIiLCJwIjoiaiJ9 ## Context: Owner Details did not match our end result goal ## Changes Changed page styling to match end goal and ensure responsiveness ## Before and After UI (Required for UI-impacting PRs) BEFORE ![image](https://github.com/cgerard321/champlain_petclinic/assets/52589448/162280ed-54ea-4c89-a024-3846009947f6) AFTER ![image](https://github.com/cgerard321/champlain_petclinic/assets/52589448/f1b53f77-b7f2-4fe8-80ea-ed8f21c5de1b) ## Dev notes (Optional) -Do people read these notes?
cgerard321 · Oct 22, 2023 · 90e1c01 · 90e1c01
1 parent b0aa122
commit 90e1c01
Show file tree

Hide file tree

Showing 7 changed files with 81 additions and 36 deletions.
diff --git a/api-gateway/src/main/resources/static/css/ownerdetail.css b/api-gateway/src/main/resources/static/css/ownerdetail.css
@@ -6,6 +6,17 @@
     border-bottom: 1.5px solid rgba(0,0,0,0.1);
     color: #2f2b2b;
 }
+.ownerRow{
+    display: flex;
+}
+.ownerCol{
+    flex: .35;
+    padding: 1em;
+}
+
+.hrColor{
+    border-top: 1px solid rgba(143,143,143,.30);
+}
 
 .ownerDetailContainer {
     background-Color:white;
@@ -18,5 +29,15 @@
     text-align:left;
     color:rgba(0,0,0,0.25);
 }
-
-
+.photoBorder{
+    border: 1px solid rgba(143,143,143,.5);
+    box-shadow: 0 0 5px rgba(143,143,143,.5);
+}
+.petBody{
+    );
+    box-shadow: 0 0 5px rgba(143,143,143,.5);
+}
+.petBody:hover{
+    border: 1px solid #6db33f;
+    box-shadow: 0 0 5px #6db33f;
+}
diff --git a/api-gateway/src/main/resources/static/images/animaldefault.png b/api-gateway/src/main/resources/static/images/animaldefault.png
diff --git a/api-gateway/src/main/resources/static/images/default-user-icon.png b/api-gateway/src/main/resources/static/images/default-user-icon.png
diff --git a/api-gateway/src/main/resources/static/scripts/owner-details/owner-details.controller.js b/api-gateway/src/main/resources/static/scripts/owner-details/owner-details.controller.js
@@ -14,6 +14,18 @@ function OwnerDetailsController($http, $state, $stateParams, $scope, $timeout, $
     // Function to get pet type name based on petTypeId
 
 
+    vm.getBirthday = function(birthday) {
+        if (birthday) {
+            var date = new Date(birthday);
+            var year = date.getUTCFullYear();
+            var month = (date.getUTCMonth() + 1).toString().padStart(2, '0'); // Months are zero-based, so we add 1
+            var day = date.getUTCDate().toString().padStart(2, '0');
+            return year + ' / ' + month + ' / ' + day;
+        } else {
+            return '';
+        }
+    };
+
 
     // Fetch owner data
     $http.get('api/gateway/owners/' + $stateParams.ownerId)

diff --git a/api-gateway/src/main/resources/static/scripts/owner-details/owner-details.template.html b/api-gateway/src/main/resources/static/scripts/owner-details/owner-details.template.html
@@ -1,13 +1,21 @@
 <link href="/css/ownerdetail.css" rel="stylesheet" type="text/css"/>
 
-    <div ng-controller="OwnerDetailsController" ng-app="ownerDetails" class="d-flex justify-content-center mt-5 mb-5 gap-5">
-        <div class="d-flex flex-column">
-            <div class=" d-flex flex-column p-5 shadow">
+    <div ng-controller="OwnerDetailsController" ng-app="ownerDetails" class="ownerRow justify-content-center mt-5 mb-5 gap-5">
+        <div class="ownerCol d-flex flex-column">
+            <div class=" d-flex flex-column p-5 shadow rounded">
+                <div class="d-flex flex-row justify-content-between">
+                    <h3 class="">Owner Details</h3>
 
-                <h3 class="">Owner Details</h3>
+                    <div class="d-flex flex-row">
+                            <a style="color: rgba(0,0,0,0.5);" class="btn btn-light mx-2 px-2" ui-sref="ownerEdit({ownerId: $ctrl.owner.ownerId, method: 'edit'})">Edit</a>
 
-                <div class="bg-white shadow-sm mt-3 mb-1" style="width: 75px; height: 75px; border-radius: 50px;">
-                    <img style="width: 100%; height: 100%; border-radius: 50px" src="../../images/default-owner-profile-picture.jpg"/>
+                            <a style="color: rgba(0,0,0,0.5);" class="btn btn-light mx-2 px-2" ui-sref="ownerEdit({ownerId: $ctrl.owner.ownerId, method: 'delete'})">Delete</a>
+                    </div>
+                </div>
+
+
+                <div class="bg-white shadow-sm photoBorder mt-3 mb-1" style="width: 75px; height: 75px; border-radius: 50px;">
+                    <img style="width: 100%; height: 100%; border-radius: 50px" src="../../images/default-user-icon.png"/>
                 </div>
 
                 <form action="" class="pt-3">
@@ -51,43 +59,34 @@ <h3 class="">Owner Details</h3>
                             <label class="inputLabel">Phone Number</label>
                         </div>
                     </div>
-
-                    <div class="d-flex flex-row gap-3 justify-content-end">
-                        <div>
-                            <a style="color: rgba(0,0,0,0.5);" class="btn btn-light" ui-sref="ownerEdit({ownerId: $ctrl.owner.ownerId, method: 'edit'})">Edit</a>
-                        </div>
-                        <div>
-                            <a style="color: rgba(0,0,0,0.5);" class="btn btn-light" ui-sref="ownerEdit({ownerId: $ctrl.owner.ownerId, method: 'delete'})">Delete</a>
-                        </div>
-                    </div>
-
                 </form>
 
             </div>
 
         </div>
+        <div class="ownerCol d-flex flex-column">
+            <div class="d-flex h-100 flex-column p-5 shadow rounded">
 
-        <div class="d-flex flex-column">
-            <div class="d-flex flex-column p-5 shadow">
                 <div class="d-flex justify-content-between gap-5">
-                    <h3 class="">Pet Details</h3>
-
-
+                    <h3 class="">Pets</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>
+                        <a style="color: rgba(0,0,0,0.5);" class="btn btn-light" ui-sref="petRegister({ownerId: $ctrl.owner.ownerId})">+</a>
                     </div>
                 </div>
+                <hr class="hrColor">
+                <div class="w-100">
+                    <!-- Use ng-repeat to iterate through the owner's pets -->
+                    <div ng-repeat="pet in $ctrl.pets" class="petBody d-flex m-2" ui-sref="petDetails({petId: pet.petId})">
+                        <div class="bg-white shadow-sm m-2" style="width: 40px; height: 40px; border-radius: 50px;">
+                            <img style="width: 100%; height: 100%; border-radius: 50px" src="../../images/animaldefault.png"/>
 
-                    <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 ui-sref="petDetails({petId: pet.petId})">Name: {{ pet.name }}</p>
-                                <p>Pet Id: {{pet.petId}}</p>
-                                <!-- Add more pet details as needed -->
-                            </div>
                         </div>
+                        <div class="d-flex align-items-center">
+                            <p class="mt-2 mx-4">({{$ctrl.getPetTypeName(pet.petTypeId)}}) - {{pet.name}}<br>
+                            {{$ctrl.getBirthday(pet.birthDate)}}</p>
+                        </div>
+                    </div>
+                </div>
 
                     </div>
 

diff --git a/api-gateway/src/main/resources/static/scripts/pet-details/pet-details.controller.js b/api-gateway/src/main/resources/static/scripts/pet-details/pet-details.controller.js
@@ -42,6 +42,20 @@ function PetDetailsController($http, $state, $stateParams, $scope, $timeout, $q)
         });
 
 
+
+    vm.getBirthday = function(birthday) {
+        if (birthday) {
+            var date = new Date(birthday);
+            var year = date.getUTCFullYear();
+            var month = (date.getUTCMonth() + 1).toString().padStart(2, '0'); // Months are zero-based, so we add 1
+            var day = date.getUTCDate().toString().padStart(2, '0');
+            return year + ' / ' + month + ' / ' + day;
+        } else {
+            return '';
+        }
+    };
+
+
     // Toggle pet's active status
     vm.toggleActiveStatus = function (petId) {
         return $http.get('api/gateway/pets/' +$stateParams.petId + '?_=' + new Date().getTime(), { headers: { 'Cache-Control': 'no-cache' } })
@@ -100,5 +114,4 @@ function PetDetailsController($http, $state, $stateParams, $scope, $timeout, $q)
         $state.go('ownerDetails', {ownerId: vm.pet.ownerId});
     };
 
-
 }
diff --git a/api-gateway/src/main/resources/static/scripts/pet-details/pet-details.template.html b/api-gateway/src/main/resources/static/scripts/pet-details/pet-details.template.html
@@ -12,7 +12,7 @@ <h3>No pet found</h3>
 
 
                 <div class="bg-white shadow-sm mt-3 mb-1" style="width: 75px; height: 75px; border-radius: 50px;">
-                    <img style="width: 100%; height: 100%; border-radius: 50px" src="../../images/default-owner-profile-picture.jpg"/>
+                    <img style="width: 100%; height: 100%; border-radius: 50px" src="../../images/animaldefault.png"/>
                 </div>
 
                 <form action="" class="pt-3">
@@ -37,7 +37,7 @@ <h3>No pet found</h3>
                             <label class="inputLabel">Name</label>
                         </div>
                         <div class="d-flex flex-column">
-                            <input class="inputFieldsStyle bg-white" value="{{$ctrl.pet.birthDate | date:'yyyy-MM-dd'}}" readonly disabled/>
+                            <input class="inputFieldsStyle bg-white" value="{{$ctrl.getBirthday($ctrl.pet.birthDate)}}" readonly disabled/>
                             <label class="inputLabel">Birthday</label>
                         </div>
                     </div>