Inventory details

InventoryTraker.Web/js/inventory/InventoryEditDirective.js

@@ -14,13 +14,24 @@
 		}
 	}
 
-	controller.$inject = ['$scope', 'inventorySvc'];
-	function controller($scope, inventorySvc) {
+	controller.$inject = ['$scope', 'inventorySvc', 'transactionSvc'];
+	function controller($scope, inventorySvc, transactionSvc) {
 		var vm = this;
-		vm.save = save;
-
-		vm.saving = false;
 		vm.inventory = angular.copy($scope.inventory);
+		vm.transactions = [];
+
+		function loadTransactions() {
+			transactionSvc
+				.filterByInventoryId(vm.inventory.id)
+				.success(function(data) {
+					angular.merge(vm.transactions, data.transactions);
+				});
+		}
+
+		loadTransactions();
+
+		vm.save = save;
+		vm.saving = false;
 		vm.errorMessage = null;
 
 		function save() {

InventoryTraker.Web/js/inventory/InventoryListDirective.js

@@ -1,11 +1,11 @@
 (function() {
 	'use strict';
 
-	window.app.directive('inventoryDetails', inventoryDetails);
-	function inventoryDetails() {
+	window.app.directive('inventoryList', inventoryList);
+	function inventoryList() {
 		return {
 			scope: {"inventories" : "="},
-			templateUrl: '/inventory/template/inventoryDetails.tmpl.cshtml',
+			templateUrl: '/inventory/template/inventoryList.tmpl.cshtml',
 			controller: controller,
 			controllerAs: 'vm'
 		}
@@ -18,10 +18,10 @@
 		vm.inventories = $scope.inventories;
 		vm.edit = edit;
 
-		function edit() {
+		function edit(inventory) {
 			$uibModal.open({
-				template: '<editInventory inventory="inventory" />',
-				scope: angular.extend($scope.$new(true), { inventory: vm.inventory })
+				template: '<edit-inventory inventory="inventory" />',
+				scope: angular.extend($scope.$new(true), { inventory: inventory })
 			});
 		}
 	}

InventoryTraker.Web/js/inventory/inventorySvc.js

@@ -46,11 +46,7 @@
 		}
 
 		function getInventory(id) {
-			for (var i = 0; i < inventories.length; i++) {
-				if (inventories[i].Id == id) return inventories[i];
-			}
-
-			return null;
+			return $http.post('/Inventory/Find', { id: id });
 		}
 	}
 })();

InventoryTraker.Web/js/inventory/templates/inventoryDetails.tmpl.cshtml

@@ -1,30 +0,0 @@
-@using InventoryTraker.Web.Helpers
-@model InventoryTraker.Web.Models.InventoryViewModel
-@{
-	var inventory = Html.Angular().ModelFor("inventory");
-}
-
-<table class="table">
-    <thead>
-        <tr>
-            <th>Name</th>
-            <th>Units per Case</th>
-            <th>Case Qty</th>
-            <th>Unit Qty</th>
-            <th>Exp Date</th>
-            <th>Added Date</th>
-            <th>Memo</th>
-        </tr>
-    </thead>
-    <tbody>
-        <tr ng-repeat="inventory in vm.inventories">
-            <td><a href="" ng-click="vm.edit()"><i class="fa fa-edit"></i></a> @inventory.BindingFor(x => x.Name) </td>
-            <td>@inventory.BindingFor(x => x.UnitsPerCase) / @inventory.BindingFor(x => x.ContainerType)</td>
-            <td>@inventory.BindingFor(x => x.Quantity)</td>
-            <td>{{inventory.quantity * inventory.unitsPerCase}}</td>
-            <td>@inventory.BindingFor(x => x.ExpirationDate, "date:'shortDate'")</td>
-            <td>@inventory.BindingFor(x => x.AddedDate, "date:'shortDate'")</td>
-            <td>@inventory.BindingFor(x => x.Memo)</td>
-        </tr>
-   </tbody>
-</table>

InventoryTraker.Web/js/inventory/templates/inventoryDistribute.tmpl.cshtml

@@ -23,10 +23,15 @@
 
             @distribution.FormGroupFor(m => m.Destination)
 
-            <table class="table" ng-class="vm.getValidationClass()">
+            @distribution.FormGroupFor(m => m.DistributedDate)
+
+            @distribution.FormGroupFor(m => m.Memo)
+
+            <table class="table table-condensed" ng-class="vm.getValidationClass()">
                 <thead>
                     <tr>
-                        <th>Name<br/>Units per Case<br/>Expiration Date</th>
+                        <th>Name<br/>Units per Case</th>
+                        <th>Expiration Date</th>
                         <th>Available Case Qty</th>
                         <th>Distribute Case Qty</th>
                     </tr>
@@ -34,13 +39,13 @@
                 <tbody>
                     <tr ng-repeat="inventory in vm.quantities" inventory="inventory">
                         <td>
-                            {{inventory.name}}<br />
+                            {{inventory.name}}<br/>
                             {{inventory.unitsPerCase}} / {{inventory.containerType}}<br/>
-                            Exp: {{inventory.expirationDate | date:'shortDate'}}
                         </td>
+                        <td>{{inventory.expirationDate | date:'shortDate'}}</td>
                         <td>{{inventory.quantity}}</td>
                         <td>
-                            <div class="form-group col-sm-7" form-group-validation="DistributeQuantity{{inventory.name}}">
+                            <div class="form-group col-sm-9" form-group-validation="DistributeQuantity{{inventory.name}}">
                                 <input name="DistributeQuantity{{inventory.name}}" type="number"
                                        class="form-control"
                                        ng-model="inventory.distributeQuantity"
@@ -53,10 +58,6 @@
             </table>
 
 
-            @distribution.FormGroupFor(m => m.DistributedDate)
-
-            @distribution.FormGroupFor(m => m.Memo)
-
         </div>
 
         <div class="modal-footer">

InventoryTraker.Web/js/inventory/templates/inventoryEdit.tmpl.cshtml

@@ -6,25 +6,56 @@
 	<fieldset ng-disabled="vm.saving">
 
 		<div class="modal-header">
-			<h3 class="modal-title"><i class="fa fa-cubes"></i> Edit Inventory</h3>
+			<h3 class="modal-title"><i class="fa fa-cubes"></i> Inventory Details</h3>
 		</div>
 
 		<div class="modal-body">
 
-			<div class="alert alert-info" ng-hide="vm.errorMessage != null">
-				Make changes to the inventory below.
-			</div>
 			<div class="alert alert-danger" ng-show="vm.errorMessage != null">
 				{{vm.errorMessage}}
 			</div>
 
-			@Html.Angular().FormForModel("vm.inventory")
+            <dl class="dl-horizontal">
+                <dt>Name</dt>
+                <dd>{{vm.inventory.name}}</dd>
+                <dt>Added</dt>
+                <dd>{{vm.inventory.addedDate | date:'shortDate'}}</dd>
+                <dt>Expiration</dt>
+                <dd>{{vm.inventory.expirationDate | date:'shortDate'}}</dd>
+            </dl>
 
-		</div>
+		    <table class="table table-striped table-condensed">
+		        <thead>
+		        <tr>
+		            <th>Type</th>
+		            <th>Memo</th>
+		            <th>Transaction Date</th>
+		            <th>Add Qty</th>
+		            <th>Remove Qty</th>
+		            <th>Qty</th>
+		            <th></th>
+		        </tr>
+		        </thead>
+		        <tbody>
+                <tr ng-repeat="transaction in vm.transactions | orderBy:'-transactionDate'">
+                    <td>{{transaction.transactionType}}</td>
+                    <td>{{transaction.memo}}</td>
+                    <td>{{transaction.transactionDate | date:'shortDate'}}</td>
+                    <td>{{transaction.addedQuantity}}</td>
+                    <td>{{transaction.removedQuantity}}</td>
+                    <td>{{transaction.currentQuantity}}</td>
+                    <td><a href="" ng-show="$first"><i class="fa fa-trash"></i></a></td>
+                </tr>
+		        </tbody>
+		    </table>
+		    <div >
+		        
+		    </div>
+        </div>
 
 		<div class="modal-footer">
 			<button class="btn btn-success">Save</button>
-			<button type="button" class="btn btn-warning" ng-click="$parent.$dismiss()">Cancel</button>
+			<button type="button" class="btn" ng-click="$parent.$dismiss()">Cancel</button>
 		</div>
 
 	</fieldset>

InventoryTraker.Web/js/inventory/templates/inventoryList.tmpl.cshtml

@@ -0,0 +1,34 @@
+@using InventoryTraker.Web.Helpers
+@model InventoryTraker.Web.Models.InventoryViewModel
+@{
+	var inventory = Html.Angular().ModelFor("inventory");
+}
+
+<table class="table table-striped">
+    <thead>
+    <tr>
+        <th class="control-column"></th>
+        <th>Name</th>
+        <th>Units per Case</th>
+        <th>Case Qty</th>
+        <th>Unit Qty</th>
+        <th>Exp Date</th>
+        <th>Added Date</th>
+        <th>Memo</th>
+    </tr>
+    </thead>
+    <tbody>
+    <tr ng-repeat="inventory in vm.inventories">
+        <td><a href="" ng-click="vm.edit(inventory)"><i class="fa fa-edit"></i></a></td>
+        <td>@inventory.BindingFor(x => x.Name) </td>
+        <td>@inventory.BindingFor(x => x.UnitsPerCase) / @inventory.BindingFor(x => x.ContainerType)</td>
+        <td>@inventory.BindingFor(x => x.Quantity)</td>
+        <td>{{inventory.quantity * inventory.unitsPerCase}}</td>
+        <td ng-class="{ danger: inventory.isExpired }">
+            @inventory.BindingFor(x => x.ExpirationDate, "date:'shortDate'")
+        </td>
+        <td>@inventory.BindingFor(x => x.AddedDate, "date:'shortDate'")</td>
+        <td>@inventory.BindingFor(x => x.Memo)</td>
+    </tr>
+   </tbody>
+</table>

InventoryTraker.Web/js/inventoryType/templates/inventoryTypeList.tmpl.cshtml

@@ -1,25 +1,24 @@
 <table class="table">
     <thead>
-        <tr>
-            <th>ID</th>
-            <th>Name</th>
-            <th>Units per Case</th>
-            <th>Container Type</th>
-            <th>Weight Per Case</th>
-            <th>Price Per Case</th>
-        </tr>
+    <tr>
+        <th class="control-column"></th>
+        <th>ID</th>
+        <th>Name</th>
+        <th>Units per Case</th>
+        <th>Container Type</th>
+        <th>Weight Per Case</th>
+        <th>Price Per Case</th>
+    </tr>
     </thead>
     <tbody>
-        <tr ng-repeat="inventoryType in vm.inventoryTypes | orderBy:'name'">
-            <td>
-                <a href="" ng-click="vm.edit(inventoryType)"><i class="fa fa-edit"></i></a>
-                {{inventoryType.identifier}}
-            </td>
-            <td>{{inventoryType.name}}</td>
-            <td>{{inventoryType.unitsPerCase}}</td>
-            <td>{{inventoryType.containerType}}</td>
-            <td>{{inventoryType.weightPerCase}} lbs</td>
-            <td>{{inventoryType.pricePerCase | currency}}</td>
-        </tr>
+    <tr ng-repeat="inventoryType in vm.inventoryTypes | orderBy:'name'">
+        <td><a href="" ng-click="vm.edit(inventoryType)"><i class="fa fa-edit"></i></a></td>
+        <td>{{inventoryType.identifier}}</td>
+        <td>{{inventoryType.name}}</td>
+        <td>{{inventoryType.unitsPerCase}}</td>
+        <td>{{inventoryType.containerType}}</td>
+        <td>{{inventoryType.weightPerCase}} lbs</td>
+        <td>{{inventoryType.pricePerCase | currency}}</td>
+    </tr>
    </tbody>
 </table>

InventoryTraker.Web/js/transaction/TransactionController.js

@@ -3,20 +3,21 @@
 
 	window.app.controller('TransactionController', TransactionController);
 
-	TransactionController.$inject = ['$scope', '$uibModal', 'transactionSvc', 'uiGridConstants'];
-	function TransactionController($scope, $uibModal, transactionSvc, uiGridConstants) {
+	TransactionController.$inject = ['$scope', '$uibModal', 'transactionSvc', 'inventorySvc', 'uiGridConstants'];
+	function TransactionController($scope, $uibModal, transactionSvc, inventorySvc, uiGridConstants) {
 		var vm = this;
 
 		var paginationOptions = {
 			pageNumber: 1,
 			pageSize: 20,
+			pageSizes: [20,50,100],
 			sort: null
 		};
-
+		
 		vm.gridOptions = {
 			enablePaginationControls: true,
 			paginationPageSize: paginationOptions.pageSize,
-			paginationPageSizes: [20,50,100],
+			paginationPageSizes: paginationOptions.pageSizes,
 			useExternalPagination: true,
 			enableSorting: false,
 			columnDefs: [
@@ -30,7 +31,7 @@
 						'\r{{row.entity.unitsPerCase}} / {{row.entity.containerType}}' +
 						'\rExp Date: {{row.entity.expirationDate | date:\'shortDate\'}}' +
 						'\rAdd Date: {{row.entity.addedDate | date:\'shortDate\'}}">' +
-						'<a href="" ng-click="vm.edit()"><i class="fa fa-edit"></i></a> ' +
+						'<a href="" ng-click="grid.appScope.editInventory(row.entity.inventoryId)"><i class="fa fa-edit"></i></a> ' +
 						'{{row.entity.name}}</div>'
 				},
 				{ field: 'transactionType', name: 'Type', width: "10%" },
@@ -43,33 +44,34 @@
 			],
 			onRegisterApi: function(gridApi) {
 				vm.gridApi = gridApi;
-				//vm.gridApi.core.on.sortChanged($scope,
-				//	function(grid, sortColumns) {
-				//		if (sortColumns.length == 0) {
-				//			paginationOptions.sort = null;
-				//		} else {
-				//			paginationOptions.sort = sortColumns[0].sort.direction;
-				//		}
-				//		getPage();
-				//	});
-				vm.gridApi.pagination.on.paginationChanged($scope,
-					function(newPage, pageSize) {
-						paginationOptions.pageNumber = newPage;
+				vm.gridApi.pagination
+					.on.paginationChanged($scope, function(pageNumber, pageSize) {
+						paginationOptions.pageNumber = pageNumber;
 						paginationOptions.pageSize = pageSize;
 						updateData();
 					});
 			}
 		};
 
-		var updateData = function () {
+		function updateData() {
 			transactionSvc
-				.getTransactions(paginationOptions.pageNumber, paginationOptions.pageSize)
-				.success(function(data) {
-					vm.gridOptions.totalItems = data.totalItems;
+				.filterByPage(paginationOptions.pageNumber, paginationOptions.pageSize)
+				.success(function (data) {
 					vm.gridOptions.data = data.transactions;
+					vm.gridOptions.totalItems = data.totalItems;
 				});
-		};
+		}
 
 		updateData();
+
+		$scope.editInventory = function (inventoryId) {
+			inventorySvc.getInventory(inventoryId)
+				.success(function(inventory) {
+					$uibModal.open({
+						template: '<edit-inventory inventory="inventory" />',
+						scope: angular.extend($scope.$new(true), { inventory: inventory })
+					});
+				});
+		}
 	}
 })();

InventoryTraker.Web/js/transaction/transactionSvc.js

@@ -5,33 +5,25 @@
 	function transactionSvc($http) {
 
 		var svc = {
-			update: update,
-			getTransactions: getTransactions,
-			getTransaction: getTransaction
+			filterByPage: filterByPage,
+			filterByInventoryId: filterByInventoryId
 		};
 
 		return svc;
+		
+		function filterByPage(pageNumber, pageSize) {
+			return getTransactions({ pageNumber: pageNumber, pageSize: pageSize });
+		}
 
-		function getTransactions(pageNumber, pageSize) {
+		function filterByInventoryId(inventoryId) {
+			return getTransactions({ inventoryId: inventoryId });
+		}
+
+		function getTransactions(params) {
 			var url = '/Transaction/GetTransactions';
-			return $http.post(url, { pageNumber: pageNumber, pageSize: pageSize });
-				//.success(function(data) {
-				//	return data.data;
-				//});
-		}
-
-		function update(existingTransaction, updatedTransaction) {
-			return $http.post('/Transaction/Update', updatedTransaction)
-				.success(function(transaction) {
-					angular.extend(existingTransaction, transaction);
+			return $http.post(url, params)
+				.success(function (data) {
 				});
 		}
-
-		function getTransaction(id) {
-			for (var i = 0; i < transactions.length; i++) {
-				if (transactions[i].Id == id) return transactions[i];
-			}
-			return null;
-		}
 	}
 })();