Intial

InventoryTraker.Web/js/customer/templates/addCustomer.tmpl.cshtml

@@ -0,0 +1,31 @@
+@using InventoryTraker.Web.Helpers
+@model InventoryTraker.Web.Models.AddCustomerForm
+<form novalidate
+	  name="vm.form"
+	  ng-submit="vm.form.$valid && vm.add()">
+	<fieldset ng-disabled="vm.saving">
+
+		<div class="modal-header">
+			<h3 class="modal-title">Add New Customer</h3>
+		</div>
+
+		<div class="modal-body">
+
+			<div class="alert alert-info" ng-hide="vm.errorMessage != null">
+				Enter details for the new customer below.
+			</div>
+			<div class="alert alert-danger" ng-show="vm.errorMessage != null">
+				{{vm.errorMessage}}
+			</div>
+
+			@Html.Angular().FormForModel("vm.customer")
+
+		</div>
+
+		<div class="modal-footer">
+			<button class="btn btn-success">Add</button>
+			<button type="button" class="btn btn-warning" ng-click="$dismiss()">Cancel</button>
+		</div>
+
+	</fieldset>
+</form>

InventoryTraker.Web/js/customer/templates/customerDetails.tmpl.cshtml

@@ -0,0 +1,102 @@
+@using InventoryTraker.Web.Helpers
+@model InventoryTraker.Web.Models.CustomerViewModel
+@{
+	var customer = Html.Angular().ModelFor("vm.customer");
+}
+<div class="panel panel-default">
+	<div class="panel-heading">
+		@customer.BindingFor(x => x.Name) <a href="" ng-click="vm.edit()"><i class="fa fa-edit"></i></a>
+		<div class="pull-right">
+			<a class="btn btn-default" href=""
+			   ng-class="{active: vm.selectedView == 'details'}"
+			   ng-click="vm.setView('details')">
+				<i class="fa fa-user"></i> Info
+			</a>
+			<a class="btn btn-green" href=""
+			   ng-class="{active: vm.selectedView == 'opportunities'}"
+			   ng-click="vm.setView('opportunities')">
+				<i class="fa fa-usd"></i> Opportunities
+			</a>
+			<a class="btn btn-red" href=""
+			   ng-class="{active: vm.selectedView == 'risks'}"
+			   ng-click="vm.setView('risks')">
+				<i class="fa fa-exclamation-triangle"></i>Risks
+			</a>
+		</div>
+	</div>
+	<table class="table" ng-show="vm.selectedView == 'details'">
+		<tr>
+			<td colspan="4">
+				Rate this customer: @(Html.Angular().UIRating("vm.customer.rating")
+										  .NgClick("vm.setRating()")
+										  .Max(10))
+			</td>
+		</tr><tr class="info text-center" ng-show="@customer.ExpressionFor(x => x.TerminationDate)">
+			<td colspan="4">
+				Inactive Customer
+			</td>
+		</tr>
+		<tr>
+			<th>E-mail</th>
+			<td>
+				Work: @customer.BindingFor(x => x.WorkEmail)<br />
+				Home: @customer.BindingFor(x => x.HomeEmail)
+			</td>
+			<th>Phone</th>
+			<td>
+				Office: @customer.BindingFor(x => x.WorkPhone)<br />
+				Mobile: @customer.BindingFor(x => x.HomePhone)
+			</td>
+		</tr>
+		<tr>
+			<th>Work Address</th>
+			<td style="white-space: pre">@customer.BindingFor(x => x.WorkAddress)</td>
+			<th>Home Address</th>
+			<td style="white-space: pre">@customer.BindingFor(x => x.HomeAddress)</td>
+		</tr>
+	</table>
+
+	<div class="panel-body opportunity-list" ng-show="vm.selectedView == 'opportunities'">
+		<div class="row">
+			<div class="col-md-1 half">
+				<span class="fa fa-2x fa-dollar text-success"></span>
+			</div>
+			<div class="col-md-11">
+				<p ng-show="@customer.ExpressionFor(x => x.Opportunities.Count) == 0">There are no opportunities for this customer.</p>
+				@using (var opportunity = customer.Repeat(x => x.Opportunities, "opportunity"))
+				{
+					<hr ng-hide="$index == 0" />
+					<h3>
+						@opportunity.BindingFor(x => x.Title)
+					</h3>
+					<p>@opportunity.BindingFor(x => x.Description)</p>
+				}
+				<p>
+					<a class="add-btn" href="" ng-click="vm.addOpportunity()">Add a new opportunity</a>
+				</p>
+			</div>
+		</div>
+	</div>
+	<div class="panel-body risk-list" ng-show="vm.selectedView == 'risks'">
+		<div class="row">
+			<div class="col-md-1 half">
+				<span class="fa fa-2x fa-warning text-danger"></span>
+			</div>
+			<div class="col-md-11">
+				<p ng-show="@customer.ExpressionFor(x => x.Risks.Count) == 0">There are no risks for this customer.</p>
+				@using (var risk = customer.Repeat(x => x.Risks, "risk"))
+				{
+					<hr ng-hide="$index == 0" />
+					<h3>
+						@risk.BindingFor(x => x.Title)
+					</h3>
+					<p>@risk.BindingFor(x => x.Description)</p>
+				}
+				<p>
+					<a class="add-btn" href="" ng-click="vm.addRisk()">Add a new risk</a>
+				</p>
+			</div>
+		</div>
+
+	</div>
+</div>

InventoryTraker.Web/js/customer/templates/editCustomer.tmpl.cshtml

@@ -0,0 +1,31 @@
+@using InventoryTraker.Web.Helpers
+@model InventoryTraker.Web.Models.EditCustomerForm
+<form novalidate
+	  name="vm.form"
+	  ng-submit="vm.form.$valid && vm.save()">
+	<fieldset ng-disabled="vm.saving">
+
+		<div class="modal-header">
+			<h3 class="modal-title">Edit Customer</h3>
+		</div>
+
+		<div class="modal-body">
+
+			<div class="alert alert-info" ng-hide="vm.errorMessage != null">
+				Make changes to the customer below.
+			</div>
+			<div class="alert alert-danger" ng-show="vm.errorMessage != null">
+				{{vm.errorMessage}}
+			</div>
+
+			@Html.Angular().FormForModel("vm.customer")
+
+		</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>
+		</div>
+
+	</fieldset>
+</form>