Intial
This commit is contained in:
@@ -0,0 +1,38 @@
|
||||
(function() {
|
||||
"use strict";
|
||||
|
||||
window.app.directive('addCustomer', addCustomer);
|
||||
|
||||
function addCustomer() {
|
||||
return {
|
||||
templateUrl: '/customer/template/addCustomer.tmpl.cshtml',
|
||||
controller: controller,
|
||||
controllerAs: 'vm'
|
||||
}
|
||||
}
|
||||
|
||||
controller.$inject = ['$scope', 'customerSvc'];
|
||||
function controller($scope, customerSvc) {
|
||||
var vm = this;
|
||||
vm.add = add;
|
||||
|
||||
vm.saving = false;
|
||||
vm.customer = {};
|
||||
vm.errorMessage = null;
|
||||
|
||||
function add() {
|
||||
vm.saving = true;
|
||||
customerSvc.add(vm.customer)
|
||||
.success(function () {
|
||||
//Close the modal
|
||||
$scope.$close();
|
||||
})
|
||||
.error(function(data) {
|
||||
vm.errorMessage = 'There was a problem adding the customer: ' + data;
|
||||
})
|
||||
.finally(function() {
|
||||
vm.saving = false;
|
||||
});
|
||||
}
|
||||
}
|
||||
})();
|
||||
@@ -0,0 +1,54 @@
|
||||
(function() {
|
||||
'use strict';
|
||||
|
||||
window.app.directive('customerDetails', customerDetails);
|
||||
function customerDetails() {
|
||||
return {
|
||||
scope: {
|
||||
customer: '='
|
||||
},
|
||||
templateUrl: '/customer/template/customerDetails.tmpl.cshtml',
|
||||
controller: controller,
|
||||
controllerAs: 'vm'
|
||||
}
|
||||
}
|
||||
|
||||
controller.$inject = ['$scope', '$uibModal'];
|
||||
function controller($scope, $uibModal) {
|
||||
var vm = this;
|
||||
|
||||
vm.customer = $scope.customer;
|
||||
vm.selectedView = 'details';
|
||||
vm.setView = setView;
|
||||
vm.edit = edit;
|
||||
vm.addOpportunity = addOpportunity;
|
||||
vm.addRisk = addRisk;
|
||||
vm.customer = $scope.customer;
|
||||
|
||||
function setView(view) {
|
||||
vm.selectedView = view;
|
||||
}
|
||||
|
||||
|
||||
function edit() {
|
||||
$uibModal.open({
|
||||
template: '<edit-customer customer="customer" />',
|
||||
scope: angular.extend($scope.$new(true), { customer: vm.customer })
|
||||
});
|
||||
}
|
||||
|
||||
function addOpportunity() {
|
||||
$uibModal.open({
|
||||
template: '<add-opportunity customer="customer" />',
|
||||
scope: angular.extend($scope.$new(true), { customer: vm.customer })
|
||||
});
|
||||
}
|
||||
|
||||
function addRisk() {
|
||||
$uibModal.open({
|
||||
template: '<add-risk customer="customer" />',
|
||||
scope: angular.extend($scope.$new(true), { customer: vm.customer })
|
||||
});
|
||||
}
|
||||
}
|
||||
})();
|
||||
@@ -0,0 +1,19 @@
|
||||
(function() {
|
||||
'use strict';
|
||||
|
||||
window.app.controller('CustomerListController', CustomerListController);
|
||||
|
||||
CustomerListController.$inject = ['$uibModal', 'customerSvc'];
|
||||
function CustomerListController($uibModal, customerSvc) {
|
||||
var vm = this;
|
||||
vm.add = add;
|
||||
vm.customers = customerSvc.customers;
|
||||
|
||||
|
||||
function add() {
|
||||
$uibModal.open({
|
||||
template: '<add-customer />'
|
||||
});
|
||||
}
|
||||
}
|
||||
})();
|
||||
@@ -0,0 +1,41 @@
|
||||
(function() {
|
||||
"use strict";
|
||||
|
||||
window.app.directive('editCustomer', editCustomer);
|
||||
|
||||
function editCustomer() {
|
||||
return {
|
||||
scope: {
|
||||
customer: "="
|
||||
},
|
||||
templateUrl: '/customer/template/editCustomer.tmpl.cshtml',
|
||||
controller: controller,
|
||||
controllerAs: 'vm'
|
||||
}
|
||||
}
|
||||
|
||||
controller.$inject = ['$scope', 'customerSvc'];
|
||||
function controller($scope, customerSvc) {
|
||||
var vm = this;
|
||||
vm.save = save;
|
||||
|
||||
vm.saving = false;
|
||||
vm.customer = angular.copy($scope.customer);
|
||||
vm.errorMessage = null;
|
||||
|
||||
function save() {
|
||||
vm.saving = true;
|
||||
customerSvc.update($scope.customer, vm.customer)
|
||||
.success(function () {
|
||||
//Close the modal
|
||||
$scope.$parent.$close();
|
||||
})
|
||||
.error(function(data) {
|
||||
vm.errorMessage = 'There was a problem saving changes to the customer: ' + data;
|
||||
})
|
||||
.finally(function() {
|
||||
vm.saving = false;
|
||||
});
|
||||
}
|
||||
}
|
||||
})();
|
||||
@@ -0,0 +1,49 @@
|
||||
(function() {
|
||||
window.app.factory('customerSvc', customerSvc);
|
||||
|
||||
customerSvc.$inject = ['$http'];
|
||||
function customerSvc($http) {
|
||||
var customers = [];
|
||||
|
||||
loadCustomers();
|
||||
|
||||
var svc = {
|
||||
add: add,
|
||||
update: update,
|
||||
customers: customers,
|
||||
getCustomer: getCustomer
|
||||
};
|
||||
|
||||
return svc;
|
||||
|
||||
function loadCustomers() {
|
||||
$http.post('/Customer/All')
|
||||
.success(function(data) {
|
||||
customers.addRange(data);
|
||||
});
|
||||
|
||||
}
|
||||
|
||||
function add(customer) {
|
||||
return $http.post('/Customer/Add', customer)
|
||||
.success(function(customer) {
|
||||
customers.unshift(customer);
|
||||
});
|
||||
}
|
||||
|
||||
function update(existingCustomer, updatedCustomer) {
|
||||
return $http.post('/Customer/Update', updatedCustomer)
|
||||
.success(function(customer) {
|
||||
angular.extend(existingCustomer, customer);
|
||||
});
|
||||
}
|
||||
|
||||
function getCustomer(id) {
|
||||
for (var i = 0; i < customers.length; i++) {
|
||||
if (customers[i].Id == id) return customers[i];
|
||||
}
|
||||
|
||||
return null;
|
||||
}
|
||||
}
|
||||
})();
|
||||
@@ -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>
|
||||
@@ -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>
|
||||
@@ -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>
|
||||
Reference in New Issue
Block a user