Remove inventory, delete transactions

InventoryTraker.Web/js/inventory/InventoryAddDirective.js

@@ -18,10 +18,10 @@
 
 		vm.add = add;
 		vm.saving = false;
-		vm.inventory = {};
+		vm.inventory = { };
 		vm.inventoryTypes = inventoryTypeSvc.inventoryTypes;
+		vm.errorMessages = [];
 
-		vm.errorMessage = null;
 		vm.quantity = quantity;
 
 		function zeroNaN(v) {
@@ -37,6 +37,11 @@
 			return vm.inventory.quantity > 0 ? vm.inventory.quantity : "";
 		}
 
+		$scope.$watch('vm.commodity', function (newValue) {
+			if (newValue)
+				vm.inventory.inventoryTypeId = newValue.id;
+		});
+
 		function add() {
 			vm.saving = true;
 			inventorySvc.add(vm.inventory)
@@ -45,17 +50,11 @@
 					$scope.$close();
 				})
 				.error(function(data) {
-					vm.errorMessage =
-						'There was a problem adding the inventory: ' + data.errorMessage;
+					vm.errorMessages = angular.copy(data.errorMessages, vm.errorMessages);
 				})
 				.finally(function() {
 					vm.saving = false;
 				});
 		}
-
-		$scope.$watch('vm.commodity', function (newValue, oldValue) {
-			if (newValue)
-				vm.inventory.inventoryTypeId = newValue.id;
-		});
 	}
 })();

InventoryTraker.Web/js/inventory/InventoryDistributeDirective.js

@@ -19,7 +19,7 @@
 		vm.saving = false;
 		vm.quantities = angular.copy(inventorySvc.inventories);
 		vm.distribution = {};
-		vm.errorMessage = null;
+		vm.errorMessages = [];
 
 		function getInventoryDistributeQuantities(inventory) {
 			var invQty = [];
@@ -39,8 +39,7 @@
 					$scope.$close();
 				})
 				.error(function(data) {
-					vm.errorMessage =
-						'There was a problem distributing the inventory: ' + data.errorMessage;
+					vm.errorMessages = angular.copy(data.errorMessages, vm.errorMessages);
 				})
 				.finally(function() {
 					vm.saving = false;

InventoryTraker.Web/js/inventory/InventoryEditDirective.js

@@ -14,25 +14,49 @@
 		}
 	}
 
-	controller.$inject = ['$scope', 'inventorySvc', 'transactionSvc'];
-	function controller($scope, inventorySvc, transactionSvc) {
+	controller.$inject = ['$scope', '$uibModal', 'inventorySvc', 'transactionSvc'];
+	function controller($scope, $uibModal, inventorySvc, transactionSvc) {
 		var vm = this;
-		vm.inventory = angular.copy($scope.inventory);
+		vm.inventory = $scope.inventory;
 		vm.transactions = [];
 
-		function loadTransactions() {
+		function refreshTransactions() {
+			vm.loadingTransactions = true;
+			vm.transactions = [];
 			transactionSvc
 				.filterByInventoryId(vm.inventory.id)
-				.success(function(data) {
-					angular.merge(vm.transactions, data.transactions);
-				});
+				.success(function (data) {
+					if (data.transactions.length === 0) {
+						$scope.$parent.$close();
+					} else {
+						angular.copy(data.transactions, vm.transactions);
+					}
+				})
+				.finally(function(){vm.loadingTransactions = false;});
 		}
-
-		loadTransactions();
+		refreshTransactions(); // initial call
 
 		vm.save = save;
+		vm.deleteTransaction = deleteTransaction;
+		vm.removeInventory = removeInventory;
 		vm.saving = false;
-		vm.errorMessage = null;
+		vm.errorMessages = [];
+		vm.confirmDeleteTransaction = false;
+		vm.loadingTransactions = false;
+
+		function deleteTransaction(transactionId) {
+			vm.confirmDeleteTransaction = false;
+			transactionSvc
+				.deleteTransaction(transactionId)
+				.success(refreshTransactions);
+		}
+
+		function removeInventory() {
+			$uibModal.open({
+				template: '<inventory-remove inventory="inventory" />',
+				scope: angular.extend($scope.$new(true), { inventory: vm.inventory })
+			}).closed.then(refreshTransactions);
+		}
 
 		function save() {
 			vm.saving = true;
@@ -42,7 +66,7 @@
 					$scope.$parent.$close();
 				})
 				.error(function(data) {
-					vm.errorMessage = 'There was a problem saving changes to the inventory: ' + data.errorMessage;
+					vm.errorMessages = angular.copy(data.errorMessages, vm.errorMessages);
 				})
 				.finally(function() {
 					vm.saving = false;

InventoryTraker.Web/js/inventory/InventoryListDirective.js

@@ -17,6 +17,7 @@
 
 		vm.inventories = $scope.inventories;
 		vm.edit = edit;
+		vm.remove = remove;
 
 		function edit(inventory) {
 			$uibModal.open({
@@ -24,5 +25,12 @@
 				scope: angular.extend($scope.$new(true), { inventory: inventory })
 			});
 		}
+
+		function remove(inventory) {
+			$uibModal.open({
+				template: '<inventory-remove inventory="inventory" />',
+				scope: angular.extend($scope.$new(true), { inventory: inventory })
+			});
+		}
 	}
 })();

InventoryTraker.Web/js/inventory/inventoryInfoDirective.js

@@ -0,0 +1,20 @@
+(function() {
+	"use strict";
+
+	window.app.directive('inventoryInfo', inventoryInfo);
+
+	function inventoryInfo() {
+		return {
+			scope: { "inventory": "=" },
+			templateUrl: '/inventory/template/inventoryInfo.tmpl.cshtml',
+			controller: controller,
+			controllerAs: 'vm'
+		}
+	}
+
+	controller.$inject = ['$scope'];
+	function controller($scope) {
+		var vm = this;
+		vm.inventory = $scope.inventory;
+	}
+})();

InventoryTraker.Web/js/inventory/inventoryRemoveDirective.js

@@ -0,0 +1,45 @@
+(function() {
+	"use strict";
+
+	window.app.directive('inventoryRemove', inventoryRemove);
+
+	function inventoryRemove() {
+		return {
+			scope: { "inventory": "=" },
+			templateUrl: '/inventory/template/inventoryRemove.tmpl.cshtml',
+			controller: controller,
+			controllerAs: 'vm'
+		}
+	}
+
+	controller.$inject = ['$scope', 'inventorySvc'];
+	function controller($scope, inventorySvc) {
+		var vm = this;
+		vm.inventory = $scope.inventory;
+
+		vm.save = save;
+		vm.saving = false;
+		vm.removeForm = {
+			inventoryId: vm.inventory.id,
+			quantity: vm.inventory.quantity,
+			transactionType: vm.inventory.isExpired ? "Expired" : null
+		};
+
+		vm.errorMessages = [];
+
+		function save() {
+			vm.saving = true;
+			inventorySvc.remove(vm.removeForm)
+				.success(function (data) {
+					//Close the modal
+					$scope.$parent.$close();
+				})
+				.error(function (data) {
+					vm.errorMessages = angular.copy(data.errorMessages, vm.errorMessages);
+				})
+				.finally(function () {
+					vm.saving = false;
+				});
+		}
+	}
+})();

InventoryTraker.Web/js/inventory/inventorySvc.js

@@ -1,8 +1,8 @@
 (function() {
 	window.app.factory('inventorySvc', inventorySvc);
 
-	inventorySvc.$inject = ['$http'];
-	function inventorySvc($http) {
+	inventorySvc.$inject = ['$http', '$filter'];
+	function inventorySvc($http, $filter) {
 		var inventories = [];
 
 		loadInventories();
@@ -11,8 +11,11 @@
 			add: add,
 			distribute: distribute,
 			update: update,
+			remove: remove,
 			inventories: inventories,
-			getInventory: getInventory
+			get: get,
+			refresh: refresh,
+			find: find
 		};
 
 		return svc;
@@ -45,7 +48,34 @@
 				});
 		}
 
-		function getInventory(id) {
+		// remove quantity from this inventory
+		function remove(removeForm) {
+			var existingInventory = get(removeForm.inventoryId);
+			return $http.post('/Inventory/Remove', removeForm)
+				.success(function(data) {
+					angular.copy(data, existingInventory);
+				});
+		}
+
+		function get(id) {
+			var results = $filter('filter')(inventories, { id: id });
+			if (results.length > 0)
+				return results[0];
+			return null;
+		}
+
+		// refresh this inventory from the server
+		function refresh(id) {
+			var existingInventory = get(id);
+			if (existingInventory) {
+				find(id)
+					.success(function(inventory) {
+						angular.copy(inventory, existingInventory);
+					});
+			}
+		}
+
+		function find(id) {
 			return $http.post('/Inventory/Find', { id: id });
 		}
 	}

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

@@ -14,12 +14,15 @@
 
 		<div class="modal-body">
 
-			<div class="alert alert-info" ng-hide="vm.errorMessage != null">
-				Enter details for the inventory arrival below.
-			</div>
-		    <div class="alert alert-danger" ng-show="vm.errorMessage != null">
-		        {{vm.errorMessage}}
-		    </div>
+            <div class="alert alert-info" ng-hide="vm.errorMessages.length">
+                Enter details for the inventory arrival below.
+            </div>
+            <div class="alert alert-danger" ng-show="vm.errorMessages.length">
+                There were problems adding the inventory.
+                <ul>
+                    <li ng-repeat="error in vm.errorMessages">{{error}}</li>
+                </ul>
+            </div>
 
             <script type="text/ng-template" id="commodityTypeahead.html">
                 <a>

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

@@ -14,11 +14,14 @@
 
         <div class="modal-body">
 
-            <div class="alert alert-info" ng-hide="vm.errorMessage != null">
-                Enter details for the inventory arrival below.
+            <div class="alert alert-info" ng-hide="vm.errorMessages.length">
+                Enter details for the inventory distribution below.
             </div>
-            <div class="alert alert-danger" ng-show="vm.errorMessage != null">
-                {{vm.errorMessage}}
+            <div class="alert alert-danger" ng-show="vm.errorMessages.length">
+                There were problems distributing the inventory.
+                <ul>
+                    <li ng-repeat="error in vm.errorMessages">{{error}}</li>
+                </ul>
             </div>
 
             @distribution.FormGroupFor(m => m.Destination)
@@ -42,7 +45,7 @@
                             {{inventory.name}}<br/>
                             {{inventory.unitsPerCase}} / {{inventory.containerType}}<br/>
                         </td>
-                        <td>{{inventory.expirationDate | date:'shortDate'}}</td>
+                        <td ng-class="{ danger: inventory.isExpired }">{{inventory.expirationDate | date:'shortDate'}}</td>
                         <td>{{inventory.quantity}}</td>
                         <td>
                             <div class="form-group col-sm-9" form-group-validation="DistributeQuantity{{inventory.name}}">
@@ -56,8 +59,6 @@
                     </tr>
                 </tbody>
             </table>
-
-
         </div>
 
         <div class="modal-footer">

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

@@ -1,62 +1,71 @@
-@using InventoryTraker.Web.Helpers
-@model InventoryTraker.Web.Models.InventoryAddForm
+@model InventoryTraker.Web.Models.InventoryAddForm
 <form novalidate
-	  name="vm.form"
-	  ng-submit="vm.form.$valid && vm.save()">
-	<fieldset ng-disabled="vm.saving">
+      name="vm.form"
+      ng-submit="vm.form.$valid && vm.save()">
+    <fieldset ng-disabled="vm.saving">
 
-		<div class="modal-header">
-			<h3 class="modal-title"><i class="fa fa-cubes"></i> Inventory Details</h3>
-		</div>
+        <div class="modal-header">
+            <h3 class="modal-title"><i class="fa fa-cubes"></i> Inventory Details</h3>
+        </div>
 
-		<div class="modal-body">
+        <div class="modal-body">
 
-			<div class="alert alert-danger" ng-show="vm.errorMessage != null">
-				{{vm.errorMessage}}
-			</div>
+            <div class="alert alert-danger" ng-show="vm.errorMessage != null">
+                {{vm.errorMessage}}
+            </div>
 
-            <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>
+            <inventory-info inventory="inventory"></inventory-info>
+            <div class="modal-footer">
+                <button ng-click="vm.removeInventory()" class="btn btn-sm pull-left"><i class="fa fa-minus-circle"></i> Remove Inventory</button>
+                <button class="btn btn-success">Save</button>
+                <button type="button" class="btn" ng-click="$parent.$dismiss()">Cancel</button>
+            </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'">
+            <hr />
+
+            <h4 class="modal-title pull-left"><i class="fa fa-fw fa-list"></i> Transactions</h4>
+
+            <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 ng-hide="vm.loadingTransactions">
+                <tr ng-repeat-start="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>
+                    <td>
+                        <a href="" ng-show="$first"
+                           ng-click="vm.confirmDeleteTransaction = !vm.confirmDeleteTransaction">
+                            <i class="fa fa-trash"></i>
+                        </a>
+                    </td>
                 </tr>
-		        </tbody>
-		    </table>
-		    <div >
-		        
-		    </div>
+                <tr ng-repeat-end ng-show="$first && vm.confirmDeleteTransaction">
+                    <td colspan="7">
+                        <span ng-show="vm.transactions.length == 1" class="text-danger">
+    Warning: Deleting the only transaction will delete the entire inventory
+</span>
+                        <button
+                            ng-click="vm.deleteTransaction(transaction.id)"
+                            class="btn btn-danger btn-sm pull-right">
+                            <i class="fa fa-trash"></i> Confirm Delete
+                        </button>
+                    </td>
+                </tr>
+                </tbody>
+            </table>
         </div>
-
-		<div class="modal-footer">
-			<button class="btn btn-success">Save</button>
-			<button type="button" class="btn" ng-click="$parent.$dismiss()">Cancel</button>
-		</div>
-
-	</fieldset>
+    </fieldset>
 </form>

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

@@ -0,0 +1,19 @@
+<dl class="dl-horizontal">
+    <dt>Name</dt>
+    <dd>{{inventory.name}}</dd>
+    <dt>Units per Case</dt>
+    <dd>{{inventory.unitsPerCase}} / {{inventory.containerType}}</dd>
+    <dt>Added Date</dt>
+    <dd>{{inventory.addedDate | date:'shortDate'}}</dd>
+    <dt>Expiration Date</dt>
+    <dd>
+        <span ng-class="{ 'bg-danger': inventory.isExpired }">
+            {{inventory.expirationDate | date:'shortDate'}}
+            <span ng-show="inventory.isExpired" class="label label-danger">Expired</span>
+        </span>
+    </dd>
+    <dt>Quantity (in Cases)</dt>
+    <dd>{{inventory.quantity}}</dd>
+    <dt ng-show="inventory.memo">Memo</dt>
+    <dd ng-show="inventory.memo">{{inventory.memo}}</dd>
+</dl>

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

@@ -19,8 +19,10 @@
     </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>
+            <a href="" ng-click="vm.edit(inventory)" title="Details"><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>

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

@@ -0,0 +1,62 @@
+@using InventoryTraker.Web.Helpers
+@model InventoryTraker.Web.Models.InventoryRemoveForm
+@{
+    var removeForm = Html.Angular().ModelFor("vm.removeForm");
+}
+<form novalidate
+	  name="form"
+	  ng-submit="form.$valid && vm.save()">
+	<fieldset ng-disabled="vm.saving">
+
+	<div class="modal-header">
+		<h3 class="modal-title"><i class="fa fa-cubes"></i> Inventory Removal</h3>
+	</div>
+
+	<div class="modal-body">
+
+        <div class="alert alert-info" ng-hide="vm.errorMessages.length">
+            Enter details for the inventory removal below.
+        </div>
+	    <div class="alert alert-danger" ng-show="vm.errorMessages.length">
+	        There were problems removing the inventory.
+	        <ul>
+	            <li ng-repeat="error in vm.errorMessages">{{error}}</li>
+	        </ul>
+	    </div>
+
+	    <div class="panel panel-default">
+	        <div class="panel-body">
+	            <inventory-info inventory="inventory"></inventory-info>
+	        </div>
+	    </div>
+
+	    <div class="form-group" form-group-validation="TransactionType">
+            <label class="radio-inline">
+                <input type="radio" name="TransactionType"
+                       ng-model="vm.removeForm.transactionType"
+                       value="Expired"
+                       required />
+                Expired
+            </label>
+            <label class="radio-inline">
+                <input type="radio" name="TransactionType"
+                       ng-model="vm.removeForm.transactionType"
+                       value="Loss"
+                       required />
+                Loss
+            </label>
+        </div>
+
+	    @removeForm.FormGroupFor(m => m.Quantity)
+	    @removeForm.FormGroupFor(m => m.RemovedDate)
+        @removeForm.FormGroupFor(m => m.Memo)
+
+    </div>
+
+	<div class="modal-footer">
+		<button class="btn btn-success">Remove</button>
+		<button type="button" class="btn" ng-click="$parent.$dismiss()">Cancel</button>
+	</div>
+
+	</fieldset>
+</form>