-
Notifications
You must be signed in to change notification settings - Fork 10
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Feat (INVT-CPC 885 ) : Ability to get product by id and details page #541
Changes from all commits
16d94b6
7a06e46
9f3e363
5c6e2b2
c98528a
f34cae9
a3c02a1
010c891
074d552
1bf8a53
8a19798
eddbc83
05a9fde
File filter
Filter by extension
Conversations
Jump to
Diff view
Diff view
There are no files selected for viewing
Original file line number | Diff line number | Diff line change |
---|---|---|
|
@@ -10,9 +10,9 @@ const whiteList = new Set([ | |
/* App Module */ | ||
const petClinicApp = angular.module('petClinicApp', [ | ||
'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']); | ||
, 'visits', 'vetList','vetForm','vetDetails', 'visitList', 'billForm', 'billUpdateForm', 'loginForm', 'rolesDetails', 'signupForm', 'productDetailsInfo', | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. Glad that you found out, that the order matters when setting the module on the app.js when it comes to loading new files. There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. Thanks, took me a while to figure it out but after doing some debugging found my issue. |
||
'billDetails', 'billsByOwnerId', 'billHistory','billsByVetId','inventoryList', 'inventoryForm', 'productForm','inventoryProductList', 'inventoryUpdateForm', 'productUpdateForm', | ||
'verification' , 'adminPanel','resetPwdForm','forgotPwdForm','petTypeList']); | ||
|
||
|
||
|
||
|
Original file line number | Diff line number | Diff line change |
---|---|---|
|
@@ -14,7 +14,7 @@ <h2>Inventory</h2> | |
<td>Name</td> | ||
<td>Type</td> | ||
<td>Description</td> | ||
<td>Update</td> | ||
|
||
</tr> | ||
<tr> | ||
<td> | ||
|
Original file line number | Diff line number | Diff line change |
---|---|---|
|
@@ -52,14 +52,27 @@ <h2>Inventory Products</h2> | |
</thead> | ||
<tr ng-repeat="product in $ctrl.inventoryProductList | filter:$ctrl.query track by product.productId"> | ||
<td><span>{{product.productName}}</span></td> | ||
<td><span>{{product.productId}}</span></td> | ||
<td><span>{{product.productId}}</span></td> | ||
<td><span>{{product.productQuantity}}</span></td> | ||
<td><span>{{product.productPrice}}</span></td> | ||
<td><span>{{product.productDescription}}</span></td> | ||
<td><span>{{product.productSalePrice}}</span></td> | ||
|
||
<td> | ||
<a href="#!/inventory/{{$ctrl.inventory.inventoryId}}/products/{{product.productId}}"> | ||
Get Product Details | ||
</a> | ||
|
||
</td> | ||
|
||
|
||
<td><a ui-sref="updateProductInventory({inventoryId: $ctrl.inventoryProductList[0].inventoryId, productId: product.productId})"> | ||
<button class="add-bundle-button btn btn-success">Edit</button> | ||
<button class="add-bundle-button btn btn-warning">Edit</button> | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. Can you elaborate on why you changed the btn-success to the btn-warning? There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. My pleasure, so I changed the color from btn -success to btn - warning, because green means success and you haven't changed or modified any value yet, thats why i changed the btn color to yellow to show that you need to test the functionality of the button. There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. I see thank you for informing me. It does make sense now because it will also match better with the inventory since the other update button in the inventories has it on "Warning" as well now that I look at it. |
||
</a></td> | ||
|
||
|
||
|
||
|
||
<td><a class="btn btn-danger" href="javascript:void(0)" ng-click="deleteProduct(product)">Delete</a></td> | ||
<td></td> | ||
</tr> | ||
|
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,7 @@ | ||
'use strict'; | ||
|
||
angular.module('productDetailsInfo') | ||
.component('productDetailsInfo', { | ||
templateUrl: 'scripts/product-details-info/product-details-info.template.html', | ||
controller: 'ProductDetailsInfoController' | ||
}); |
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,20 @@ | ||
angular.module('productDetailsInfo') | ||
.controller('ProductDetailsInfoController', ["$http", '$state', '$stateParams', '$scope', 'InventoryService', function ($http, $state, $stateParams, $scope, InventoryService) { | ||
var self = this; | ||
self.product = {}; // Initialize self.product | ||
var inventoryId = InventoryService.getInventoryId(); | ||
var productId = $stateParams.productId; | ||
|
||
$http.get('/api/gateway/inventory/' + inventoryId + '/products/' + productId) | ||
.then(function (resp) { | ||
// Handle the response data for the specific product | ||
var product = resp.data; | ||
console.log("Product found:", product); | ||
self.product = product; // Update the product data in your controller | ||
}) | ||
.catch(function (error) { | ||
// Handle errors if the product is not found or other issues | ||
console.error("Error fetching product:", error); | ||
}); | ||
|
||
}]); |
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,17 @@ | ||
'use strict'; | ||
|
||
angular.module('productDetailsInfo', ['ui.router']) | ||
.config(['$stateProvider', function ($stateProvider) { | ||
$stateProvider | ||
.state('productDetails', { | ||
parent: 'app', | ||
url: '/inventory/:inventoryId/products/:productId', | ||
template: '<product-details-info></product-details-info>' | ||
}) | ||
|
||
.state('products', { | ||
parent: 'app', | ||
url: '/inventory/:inventoryId/products', | ||
template: '<inventory-product-list></inventory-product-list>' | ||
}) | ||
}]); |
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,75 @@ | ||
<link crossorigin="anonymous" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" | ||
integrity="sha384-KyZXEAg3QhqLMpG8r+8fhAXLRk2vvoC2f3B09zVXn8CA5QIVfZOJ3BCsw2P0p/We" rel="stylesheet"> | ||
<link href="https://cdn.jsdelivr.net/npm/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet"> | ||
|
||
<div class="bColor text-center"><h2 class="titleBundle form" id="title">Product Details Info</h2></div> | ||
<div class="container mt-5"> | ||
<div class="card"> | ||
<div class="card-body"> | ||
<div class="row"> | ||
<div class="col-md-6 text-end"> | ||
<h3 class="inventory-id">Inventory Id: </h3> | ||
</div> | ||
<div class="col-md-6"> | ||
<h3>{{$ctrl.product.inventoryId}}</h3> | ||
</div> | ||
</div> | ||
<hr> <!-- Horizontal line --> | ||
<div class="row"> | ||
<div class="col-md-6 text-end"> | ||
<h3 class="product-id">Product Id: </h3> | ||
</div> | ||
<div class="col-md-6"> | ||
<h3>{{$ctrl.product.productId}}</h3> | ||
</div> | ||
</div> | ||
<hr> <!-- Horizontal line --> | ||
<div class="row"> | ||
<div class="col-md-6 text-end"> | ||
<h5 class="product-description-label">Product Description:</h5> | ||
</div> | ||
<div class="col-md-6"> | ||
<h5>{{$ctrl.product.productDescription}}</h5> | ||
</div> | ||
</div> | ||
<hr> <!-- Horizontal line --> | ||
<div class="row"> | ||
<div class="col-md-6 text-end"> | ||
<h5 class="product-price-label">Product Price:</h5> | ||
</div> | ||
<div class="col-md-6"> | ||
<h5>{{$ctrl.product.productPrice}}</h5> | ||
</div> | ||
|
||
|
||
|
||
</div> | ||
<hr> <!-- Horizontal line --> | ||
<div class="row"> | ||
<div class="col-md-6 text-end"> | ||
<h5 class="product-price-label">Product SalePrice:</h5> | ||
</div> | ||
<div class="col-md-6"> | ||
<h5>{{$ctrl.product.productSalePrice}}</h5> | ||
</div> | ||
|
||
</div> | ||
|
||
<hr> <!-- Horizontal line --> | ||
<div class="row"> | ||
<div class="col-md-6 text-end"> | ||
<h5 class="product-quantity-label">Product Quantity:</h5> | ||
</div> | ||
<div class="col-md-6"> | ||
<h5>{{$ctrl.product.productQuantity}}</h5> | ||
</div> | ||
</div> | ||
<hr> <!-- Horizontal line --> | ||
</div> | ||
</div> | ||
<div class="text-center mt-4"> | ||
<a class="btn btn-primary" href="#!/inventory/{{$ctrl.product.inventoryId}}/products"> | ||
Back to Products page | ||
</a> | ||
</div> | ||
</div> |
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,7 @@ | ||
'use strict'; | ||
|
||
angular.module('productDetails') | ||
.component('productDetails', { | ||
templateUrl: 'scripts/product-details/product-details.template.html', | ||
controller: 'ProductDetailsController' | ||
}); |
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,80 @@ | ||
<link crossorigin="anonymous" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" | ||
integrity="sha384-KyZXEAg3QhqLMpG8r+8fhAXLRk2vvoC2f3B09zVXn8CA5QIVfZOJ3BCsw2P0p/We" rel="stylesheet"> | ||
<link href="https://cdn.jsdelivr.net/npm/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet"> | ||
|
||
<div class="bColor text-center"><h2 class="titleBundle form" id="title">Product Details</h2></div> | ||
<div class="container mt-5"> | ||
<div class="card"> | ||
<div class="card-body"> | ||
<div class="row"> | ||
<div class="col-md-6 text-end"> | ||
<h3 class="inventory-id">Inventory Id: </h3> | ||
</div> | ||
<div class="col-md-6"> | ||
<h3>{{$ctrl.product.inventoryId}}</h3> | ||
</div> | ||
</div> | ||
<hr> <!-- Horizontal line --> | ||
<div class="row"> | ||
<div class="col-md-6 text-end"> | ||
<h3 class="product-id">Product Id: </h3> | ||
</div> | ||
<div class="col-md-6"> | ||
<h3>{{$ctrl.product.productId}}</h3> | ||
</div> | ||
</div> | ||
<hr> <!-- Horizontal line --> | ||
<div class="row"> | ||
<div class="col-md-6 text-end"> | ||
<h5 class="product-description-label">Product Description:</h5> | ||
</div> | ||
<div class="col-md-6"> | ||
<h5>{{$ctrl.product.productDescription}}</h5> | ||
</div> | ||
</div> | ||
<hr> <!-- Horizontal line --> | ||
<div class="row"> | ||
<div class="col-md-6 text-end"> | ||
<h5 class="product-price-label">Product Price:</h5> | ||
</div> | ||
<div class="col-md-6"> | ||
<h5>{{$ctrl.product.productPrice}}</h5> | ||
</div> | ||
|
||
|
||
|
||
</div> | ||
<hr> <!-- Horizontal line --> | ||
<div class="row"> | ||
<div class="col-md-6 text-end"> | ||
<h5 class="product-price-label">Product SalePrice:</h5> | ||
</div> | ||
<div class="col-md-6"> | ||
<h5>{{$ctrl.product.productSalePrice}}</h5> | ||
</div> | ||
|
||
</div> | ||
|
||
<hr> <!-- Horizontal line --> | ||
<div class="row"> | ||
<div class="col-md-6 text-end"> | ||
<h5 class="product-quantity-label">Product Quantity:</h5> | ||
</div> | ||
<div class="col-md-6"> | ||
<h5>{{$ctrl.product.productQuantity}}</h5> | ||
</div> | ||
</div> | ||
<hr> <!-- Horizontal line --> | ||
</div> | ||
</div> | ||
<div class="text-center mt-4"> | ||
<a class="btn btn-primary" href="#!/inventory/{{$ctrl.product.inventoryId}}/products"> | ||
Back to Products page | ||
</a> | ||
</div> | ||
</div> | ||
|
||
|
||
|
||
|
||
|
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Why do you think it was necessary to add "productDetailsInfo" in the app.js?
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
If i didn't add the product detail info, in the app.js, then my page would never render when called.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
That's very smart thank you for your input Mr Siddiqui.