Distribution report

InventoryTraker.Web/js/inventory/InventoryAddDirective.js

@@ -17,9 +17,11 @@
 		var vm = this;
 
 		vm.add = add;
-		vm.saving = false;
 		vm.inventory = { };
 		vm.inventoryTypes = inventoryTypeSvc.inventoryTypes;
+
+		vm.saving = false;
+		vm.statusMessage = "Enter details for the inventory arrival below.";
 		vm.errorMessages = [];
 
 		vm.quantity = quantity;
@@ -43,6 +45,7 @@
 		});
 
 		function add() {
+			vm.statusMessage = null;
 			vm.saving = true;
 			inventorySvc.add(vm.inventory)
 				.success(function () {

InventoryTraker.Web/js/inventory/InventoryDistributeDirective.js

@@ -16,9 +16,11 @@
 		var vm = this;
 
 		vm.save = save;
-		vm.saving = false;
 		vm.quantities = angular.copy(inventorySvc.inventories);
 		vm.distribution = {};
+
+		vm.saving = false;
+		vm.statusMessage = "Enter details for the inventory distribution below.";
 		vm.errorMessages = [];
 
 		function getInventoryDistributeQuantities(inventory) {
@@ -31,6 +33,7 @@
 		}
 
 		function save() {
+			vm.statusMessage = null;
 			vm.saving = true;
 			vm.distribution.inventoryQuantities = getInventoryDistributeQuantities(vm.quantities);
 			inventorySvc.distribute(vm.distribution)

InventoryTraker.Web/js/inventory/inventoryRemoveDirective.js

@@ -25,9 +25,11 @@
 			transactionType: vm.inventory.isExpired ? "Expired" : null
 		};
 
+		vm.statusMessage = "Enter details for the inventory removal below.";
 		vm.errorMessages = [];
 
 		function save() {
+			vm.statusMessage = null;
 			vm.saving = true;
 			inventorySvc.remove(vm.removeForm)
 				.success(function (data) {

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

@@ -14,15 +14,8 @@
 
 		<div class="modal-body">
 
-            <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>
+            <status-message message="vm.statusMessage"></status-message>
+		    <error-list errors="vm.errorMessages"></error-list>
 
             <script type="text/ng-template" id="commodityTypeahead.html">
                 <a>

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

@@ -14,15 +14,8 @@
 
         <div class="modal-body">
 
-            <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.errorMessages.length">
-                There were problems distributing the inventory.
-                <ul>
-                    <li ng-repeat="error in vm.errorMessages">{{error}}</li>
-                </ul>
-            </div>
+            <status-message message="vm.statusMessage"></status-message>
+            <error-list errors="vm.errorMessages"></error-list>
 
             @distribution.FormGroupFor(m => m.Destination)
 

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

@@ -10,9 +10,7 @@
 
         <div class="modal-body">
 
-            <div class="alert alert-danger" ng-show="vm.errorMessage != null">
-                {{vm.errorMessage}}
-            </div>
+            <error-list errors="vm.errorMessages"></error-list>
 
             <inventory-info inventory="inventory"></inventory-info>
             <div class="modal-footer">

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

@@ -14,15 +14,8 @@
 
 	<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>
+        <status-message message="vm.statusMessage"></status-message>
+	    <error-list errors="vm.errorMessages"></error-list>
 
 	    <div class="panel panel-default">
 	        <div class="panel-body">

InventoryTraker.Web/js/inventoryType/InventoryTypeAddDirective.js

@@ -12,24 +12,25 @@
 	}
 
 	controller.$inject = ['$scope', 'inventoryTypeSvc'];
-
-	function controller($scope, inventoryTypeSvc) {
+	function controller($scope, inventoryTypeSvc){
 		var vm = this;
 
 		vm.add = add;
 		vm.saving = false;
 		vm.inventoryType = {};
 
+		vm.statusMessage =  "Add a new commodity";
 		vm.errorMessages = [];
 		
 		function add() {
+			vm.statusMessage = null;
 			vm.saving = true;
 			inventoryTypeSvc.add(vm.inventoryType)
 				.success(function () {
 					//Close the modal
 					$scope.$close();
 				})
-				.error(function(data) {
+				.error(function (data) {
 					vm.errorMessages = angular.copy(data.errorMessages, vm.errorMessages);
 				})
 				.finally(function() {

InventoryTraker.Web/js/inventoryType/InventoryTypeEditDirective.js

@@ -22,9 +22,12 @@
 
 		vm.saving = false;
 		vm.inventoryTypeSvc = inventoryTypeSvc;
+
+		vm.statusMessage = "Edit this commodity";
 		vm.errorMessages = [];
 
 		function save() {
+			vm.statusMessage = null;
 			vm.saving = true;
 			inventoryTypeSvc.update($scope.inventoryType, vm.inventoryType)
 				.success(function () {

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

@@ -1,8 +1,6 @@
 @using InventoryTraker.Web.Helpers
 @model InventoryTraker.Web.Models.InventoryTypeViewModel
-@{
-    var inventoryType = Html.Angular().ModelFor("vm.inventoryType");
-}
+
 <form novalidate
 	  name="vm.form"
 	  ng-submit="vm.form.$valid && vm.add()">
@@ -13,16 +11,8 @@
 		</div>
 
 		<div class="modal-body">
-
-            <div class="alert alert-info" ng-hide="vm.errorMessages.length">
-                Enter details for the added commodity below.
-            </div>
-            <div class="alert alert-danger" ng-show="vm.errorMessages.length">
-                There were problems adding the commodity.
-                <ul>
-                    <li ng-repeat="error in vm.errorMessages">{{error}}</li>
-                </ul>
-            </div>
+		    <status-message message="vm.statusMessage"></status-message>
+		    <error-list errors="vm.errorMessages"></error-list>
 
             @Html.Angular().FormForModel("vm.inventoryType")
              

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

@@ -11,15 +11,8 @@
 
 		<div class="modal-body">
 
-            <div class="alert alert-info" ng-hide="vm.errorMessages.length">
-                Edit details for the commodity below.
-            </div>
-            <div class="alert alert-danger" ng-show="vm.errorMessages.length">
-                There were problems saving the commodity.
-                <ul>
-                    <li ng-repeat="error in vm.errorMessages">{{error}}</li>
-                </ul>
-            </div>
+            <status-message message="vm.statusMessage"></status-message>
+            <error-list errors="vm.errorMessages"></error-list>
 
 			@Html.Angular().FormForModel("vm.inventoryType")
 

InventoryTraker.Web/js/report/DistributionReportController.js

@@ -0,0 +1,11 @@
+(function () {
+	'use strict';
+
+	window.app.controller('DistributionReportController', DistributionReportController);
+
+	DistributionReportController.$inject = ['$scope', 'reportSvc'];
+	function DistributionReportController($scope, reportSvc) {
+		var vm = this;
+		vm.distributionData = reportSvc.distributionData;
+	}
+})();

InventoryTraker.Web/js/report/DistributionReportDirective.js

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

InventoryTraker.Web/js/report/DistributionReportQueryDirective.js

@@ -0,0 +1,33 @@
+(function() {
+	'use strict';
+
+	window.app.directive('distributionReportQuery', distributionReportQuery);
+	function distributionReportQuery() {
+		return {
+			scope: true,
+			templateUrl: '/report/template/distributionReportQuery.tmpl.cshtml',
+			controller: controller,
+			controllerAs: 'vm'
+		}
+	}
+
+	controller.$inject = ['$scope', 'reportSvc'];
+	function controller($scope, reportSvc) {
+		var vm = this;
+		vm.query = {};
+		vm.submitting = false;
+		vm.errorMessages = [];
+		vm.submit = submit;
+
+		function submit() {
+			vm.submitting = true;
+			reportSvc.loadDistributionReport(vm.query)
+				.error(function (data) {
+					vm.errorMessages = angular.copy(data.errorMessages, vm.errorMessages);
+				})
+				.finally(function () {
+					vm.submitting = false;
+				});
+		}
+	}
+})();

InventoryTraker.Web/js/report/reportSvc.js

@@ -0,0 +1,23 @@
+(function () {
+	window.app.factory('reportSvc', reportSvc);
+
+	reportSvc.$inject = ['$http'];
+	function reportSvc($http) {
+		var distributionData = [];
+
+		var svc = {
+			distributionData: distributionData,
+			loadDistributionReport: loadDistributionReport
+		};
+
+		//loadDistributionReport({ startDate: '2015-06-01', endDate: '2016-01-01' });
+		return svc;
+
+		function loadDistributionReport(query) {
+			return $http.post('/Report/Distribution', query)
+				.success(function (data) {
+					angular.copy(data, distributionData);
+				});
+		}
+	}
+})();

InventoryTraker.Web/js/report/templates/distributionReport.tmpl.cshtml

@@ -0,0 +1,26 @@
+<div ng-repeat="distribution in vm.distributionData">
+    <h3>{{distribution.destination}}</h3>
+    <h4>{{distribution.date | date:'shortDate'}}</h4>
+    <table class="table">
+        <thead>
+        <tr>
+            <th class="col-md-3">Name</th>
+            <th class="col-md-3">Units per Case</th>
+            <th class="col-md-2">Exp. Date</th>
+            <th class="col-md-1">Case Qty</th>
+            <th class="col-md-1">Unit Qty</th>
+            <th class="col-md-2">Weight</th>
+        </tr>
+        </thead>
+        <tbody>
+        <tr ng-repeat="transaction in distribution.transactions | orderBy:'name'">
+            <td>{{transaction.name}}</td>
+            <td>{{transaction.unitsPerCase}} / {{transaction.containerType}}</td>
+            <td>{{transaction.expirationDate | date:'shortDate'}}</td>
+            <td>{{transaction.removedQuantity}}</td>
+            <td>{{transaction.removedQuantity * transaction.unitsPerCase}}</td>
+            <td>{{transaction.weightPerCase * transaction.unitsPerCase | number:0 }} lbs</td>
+        </tr>
+        </tbody>
+    </table>
+</div>

InventoryTraker.Web/js/report/templates/distributionReportQuery.tmpl.cshtml

@@ -0,0 +1,23 @@
+@using InventoryTraker.Web.Helpers
+@model InventoryTraker.Web.Models.DateRangeQuery
+@{
+    var query = Html.Angular().ModelFor("vm.query");
+}
+<form novalidate
+	  name="vm.form"
+	  ng-submit="vm.form.$valid && vm.submit()">
+	<fieldset ng-disabled="vm.submitting">
+        <error-list errors="vm.errorMessages"></error-list>
+
+	    <div class="row">
+	        <div class="col-md-6">
+	            @query.FormGroupFor(m => m.StartDate)
+	        </div>
+            <div class="col-md-6">
+	            @query.FormGroupFor(m => m.EndDate)
+	        </div>
+	    </div>
+
+	    <button class="btn btn-success pull-right">Submit</button>
+	</fieldset>
+</form>

InventoryTraker.Web/js/transaction/TransactionController.js

@@ -32,15 +32,17 @@
 						'\rExp Date: {{row.entity.expirationDate | date:\'shortDate\'}}' +
 						'\rAdd Date: {{row.entity.addedDate | date:\'shortDate\'}}">' +
 						'<a href="" ng-click="grid.appScope.editInventory(row.entity.inventoryId)"><i class="fa fa-edit"></i></a> ' +
-						'{{row.entity.name}}</div>'
+						'{{row.entity.name}}</div>',
+					width: "20%"
 				},
 				{ field: 'transactionType', name: 'Type', width: "10%" },
-				{ field: 'memo', cellTooltip: true },
-				{ field: 'transactionDate', name: 'Transaction Date', cellFilter: "date:'shortDate'", width: "15%" },
+				{ field: 'destination', cellTooltip: true, width: "10%" },
+				{ field: 'memo', cellTooltip: true, width: "15%" },
+				{ field: 'transactionDate', name: 'Transaction Date', cellFilter: "date:'shortDate'", width: "10%" },
 				{ field: 'previousQuantity', name: 'Prev Qty', width: "10%", enableSorting: false },
 				{ field: 'addedQuantity', name: 'Add Qty', width: "10%", enableSorting: false, cellFilter: "hideZero" },
 				{ field: 'removedQuantity', name: 'Remove Qty', width: "10%", enableSorting: false, cellFilter: "hideZero" },
-				{ field: 'currentQuantity', name: 'Current Qty', width: "15%", enableSorting: false }
+				{ field: 'currentQuantity', name: 'Current Qty', width: "10%", enableSorting: false }
 			],
 			onRegisterApi: function(gridApi) {
 				vm.gridApi = gridApi;

InventoryTraker.Web/js/utility/ErrorList.js

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

InventoryTraker.Web/js/utility/StatusMessage.js

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

InventoryTraker.Web/js/utility/templates/errorList.tmpl.cshtml

@@ -0,0 +1,6 @@
+<div class="alert alert-danger" ng-show="vm.errors.length">
+    Correct the following issues.
+    <ul>
+        <li ng-repeat="error in vm.errors">{{error}}</li>
+    </ul>
+</div>

InventoryTraker.Web/js/utility/templates/statusMessage.tmpl.cshtml

@@ -0,0 +1,3 @@
+<div class="alert alert-{{angular.isDefined(severity) ? severity : 'info'}}" ng-show="message">
+    {{message}}
+</div>