Feat(INVT-CPC-988): Include user friendly action handlers (#562)

JIRA: link to jira ticket https://champlainsaintlambert.atlassian.net/browse/CPC-988 ## Context: This change is about re styling the inventory action handlers. ## Changes - Added different animated icons from library set in the index - Added titles when hovering the buttons - This change only affects the styling of the action handlers - Equalized the list borders ## Before and After UI (Required for UI-impacting PRs) InventoryProducts-Before ![image](https://github.com/cgerard321/champlain_petclinic/assets/119442915/2ed38001-c70e-4d6f-a55f-1daddb1a909c) InventoryProducts-After ![image](https://github.com/cgerard321/champlain_petclinic/assets/119442915/c5a45107-8691-4386-8cb8-5829539c4e8f) Inventory-Before ![image](https://github.com/cgerard321/champlain_petclinic/assets/119442915/3ba8eb6b-bb15-4512-8734-75f91f1ede4b) Inventory-After ![image](https://github.com/cgerard321/champlain_petclinic/assets/119442915/8c3f1110-3437-41f9-b6dd-d6cd117234aa)
cgerard321 · Oct 22, 2023 · 8f2c851 · 8f2c851
1 parent b6adfd7
commit 8f2c851
Show file tree

Hide file tree

Showing 3 changed files with 77 additions and 13 deletions.
diff --git a/api-gateway/src/main/resources/static/index.html b/api-gateway/src/main/resources/static/index.html
@@ -14,6 +14,7 @@
     <title>PetClinic :: a Spring Framework demonstration</title>
     <link href="/css/petclinic.css" rel="stylesheet" type="text/css "/>
     <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.7/angular-resource.min.js"></script>
+
     <!--Vet service styling for modal on vet hover-->
     <link href="/css/vets/modal.css" rel="stylesheet" type="text/css"/>
     <!-- Vet service styling for vet table on different screen widths-->
@@ -37,7 +38,7 @@
     <script crossorigin="anonymous"
             integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl"
             src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
-
+    <script src="https://cdn.lordicon.com/lordicon-1.1.0.js"></script>
     <script src="/webjars/angular/1.8.3/angular.min.js"></script>
     <script src="/webjars/angular-ui-router/1.0.28/release/angular-ui-router.min.js"></script>
 

diff --git a/api-gateway/src/main/resources/static/scripts/inventory-list/inventory-list.template.html b/api-gateway/src/main/resources/static/scripts/inventory-list/inventory-list.template.html
@@ -2,6 +2,13 @@
     .table-striped tbody tr:hover {
         background-color: #D8D8D8;
     }
+
+     .btn:hover {
+         transform: translateY(2px);
+         box-shadow: 0 0 rgba(0, 0, 0, 2);
+         border-bottom-width: 1px;
+     }
+
 </style>
 
 
@@ -14,7 +21,9 @@ <h2>Inventory</h2>
         <td>Name</td>
         <td>Type</td>
         <td>Description</td>
-
+        <td></td>
+        <td></td>
+        <td></td>
     </tr>
     <tr>
         <td>
@@ -38,7 +47,13 @@ <h2>Inventory</h2>
         <td></td>
         <td>
         <span>
-            <input class="btn btn-success" type="button" value="Search" ng-click="searchInventory(inventoryName, inventoryType, inventoryDescription)">
+            <a class="btn btn-success" type="button" ng-click="searchInventory(inventoryName, inventoryType, inventoryDescription)" title="Search">
+                <lord-icon
+                        src="https://cdn.lordicon.com/fkdzyfle.json"
+                        trigger="hover"
+                        style="width:32px;height:32px">
+                </lord-icon>
+            </a>
         </span>
         </td>
     </tr>
@@ -57,12 +72,28 @@ <h2>Inventory</h2>
 
     <td>
         <td>
-            <a class="btn btn-warning" ui-sref="updateInventory({inventoryId: inventory.inventoryId, method: 'edit'})" ng-click="$event.stopPropagation()">Edit</a>
+            <a class="btn btn-warning" ui-sref="updateInventory({inventoryId: inventory.inventoryId, method: 'edit'})" ng-click="$event.stopPropagation()" title="Edit">
+
+                <lord-icon
+                        src="https://cdn.lordicon.com/wkvacbiw.json"
+                        trigger="hover"
+                        style="width:32px;height:32px">
+                </lord-icon>
+
+            </a>
 
         </td>
 
         <td>
-            <a class="btn btn-danger" href="javascript:void(0)" ng-click="deleteInventory(inventory); $event.stopPropagation()">Delete</a>
+            <a class="btn btn-danger" href="javascript:void(0)" ng-click="deleteInventory(inventory); $event.stopPropagation()" title="Delete">
+
+                <lord-icon
+                        src="https://cdn.lordicon.com/skkahier.json"
+                        trigger="hover"
+                        style="width:32px;height:32px">
+                </lord-icon>
+
+            </a>
         </td>
 
     </td>

diff --git a/...main/resources/static/scripts/inventory-product-list/inventory-product-list.template.html b/...main/resources/static/scripts/inventory-product-list/inventory-product-list.template.html
@@ -1,5 +1,5 @@
 <style>
-    .btn-danger:hover {
+    .btn:hover {
         transform: translateY(2px);
         box-shadow: 0 0 rgba(0, 0, 0, 2);
         border-bottom-width: 1px;
@@ -21,6 +21,9 @@ <h2>Inventory Products</h2>
         <td>Price</td>
         <td>Description</td>
         <td>Sale Price</td>
+        <td></td>
+        <td></td>
+        <td></td>
     </tr>
     <tr>
         <td>
@@ -49,7 +52,15 @@ <h2>Inventory Products</h2>
         <td></td>
         <td>
             <span>
-                <input class="btn btn-success" type="button" value="Search" ng-click="searchProduct(productName, productQuantity, productPrice, productSalePrice)">
+
+                <a class="btn btn-success" type="button" ng-click="searchProduct(productName, productQuantity, productPrice)" title="Search">
+                    <lord-icon
+                            src="https://cdn.lordicon.com/fkdzyfle.json"
+                            trigger="hover"
+                            style="width:32px;height:32px">
+                    </lord-icon>
+                </a>
+
             </span>
         </td>
     </tr>
@@ -64,18 +75,39 @@ <h2>Inventory Products</h2>
         <td><span>{{product.productSalePrice}}$</span></td>
 
         <td>
-            <a href="#!/inventory/{{$ctrl.inventory.inventoryId}}/products/{{product.productId}}">
-                Get Product Details
+            <a class="btn btn-info" href="#!/inventory/{{$ctrl.inventory.inventoryId}}/products/{{product.productId}}" title="Details">
+                <lord-icon
+                        src="https://cdn.lordicon.com/jnzhohhs.json"
+                        trigger="hover"
+                        style="width:32px;height:32px">
+                </lord-icon>
             </a>
 
         </td>
 
 
-        <td><a ui-sref="updateProductInventory({inventoryId: $ctrl.inventoryProductList[0].inventoryId, productId: product.productId})">
-            <button class="add-bundle-button btn btn-warning">Edit</button>
+        <td><a ui-sref="updateProductInventory({inventoryId: $ctrl.inventoryProductList[0].inventoryId, productId: product.productId})" title="Edit">
+            <button class="add-bundle-button btn btn-warning">
+
+                <lord-icon
+                        src="https://cdn.lordicon.com/wkvacbiw.json"
+                        trigger="hover"
+                        style="width:32px;height:32px">
+                </lord-icon>
+
+            </button>
+        </a></td>
+
+
+
+        <td><a class="btn btn-danger" href="javascript:void(0)" ng-click="deleteProduct(product)" title="Delete">
+            <lord-icon
+                    src="https://cdn.lordicon.com/skkahier.json"
+                    trigger="hover"
+                    style="width:32px;height:32px">
+            </lord-icon>
         </a></td>
-
-        <td><a class="btn btn-danger" href="javascript:void(0)" ng-click="deleteProduct(product)">Delete</a></td>
+
         <td></td>
     </tr>
 </table>