Skip to content

Commit eae06ee

Browse files
unicod3unicod3
committed
Complete Angular CRUD operations for Purchase Order
1 parent 88f8f85 commit eae06ee

File tree

4 files changed

+92
-58
lines changed

4 files changed

+92
-58
lines changed

‎WebApiExcercise/Content/Site.css‎

Lines changed: 5 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -1,18 +1,5 @@
1-
body {
2-
padding-top: 50px;
3-
padding-bottom: 20px;
4-
}
5-
6-
/* Set padding to keep content from hitting the edges */
7-
.body-content {
8-
padding-left: 15px;
9-
padding-right: 15px;
10-
}
11-
12-
/* Set width on the form input elements since they're 100% wide by default */
13-
input,
14-
select,
15-
textarea {
16-
max-width: 280px;
17-
}
18-
1+
legend {
2+
width:inherit; /* Or auto */
3+
padding:0 10px; /* To give a bit of padding on the left and right */
4+
border-bottom:none;
5+
}

‎WebApiExcercise/Views/Home/PurchaseOrder.cshtml‎

Lines changed: 51 additions & 33 deletions
Original file line numberDiff line numberDiff line change
@@ -20,47 +20,65 @@
2020
<td>{{supp.PurchaseOrderLine.length}}</td>
2121
<td>R$ {{supp.TotalAmount}}</td>
2222
<td>
23-
<a class="text-primary" href="#" ng-click="edit(supp.Id)"><i class="glyphicon glyphicon-edit"></i> Edit</a>
24-
<a class="text-danger" href="#" ng-click="delete(supp.Id)"><i class="glyphicon glyphicon-remove"></i> Delete</a>
23+
<a class="text-primary" href="" ng-click="edit(supp.Id)"><i class="glyphicon glyphicon-edit"></i> Edit</a>
24+
<a class="text-danger" href="" ng-click="delete(supp.Id)"><i class="glyphicon glyphicon-remove"></i> Delete</a>
2525
</td>
2626
</tr>
2727
</table>
2828

2929
<h2>{{formTitle}}</h2>
30-
<form name="supplierForm" ng-submit="submitForm(PurchaseOrder)">
31-
<div class="row">
32-
<div class="form-group col-md-4">
33-
<label for="ID">ID</label>
34-
<input type="text" id="ID" class="form-control" placeholder="Product ID" ng-model="PurchaseOrder.Id" disabled>
30+
<div class="container">
31+
<form name="supplierForm" ng-submit="submitForm(PurchaseOrder)">
32+
<div class="row">
33+
<fieldset>
34+
<legend>Purchase Order Info</legend>
35+
<div class="">
36+
<div class="form-group col-md-4">
37+
<label for="ID">ID</label>
38+
<input type="text" id="ID" class="form-control" placeholder="Product ID" ng-model="PurchaseOrder.Id" disabled>
39+
</div>
40+
<div class="form-group col-md-4">
41+
<label for="PurchaseDate">Purchase Date</label>
42+
<input class="form-control" id="PurchaseDate" type="date" placeholder="MM-dd-yyyy" min="1900-01-01" max="2060-12-31" ng-model="PurchaseOrder.PurchaseDate" required>
43+
44+
</div>
45+
<div class="form-group col-md-4">
46+
<label for="TotalAmount">Total Amount</label>
47+
<input type="text" id="TotalAmount" class="form-control" placeholder="Total Amount" ng-model="PurchaseOrder.TotalAmount" disabled>
48+
</div>
49+
</div>
50+
</fieldset>
3551
</div>
36-
</div>
37-
<div class="row">
38-
<div class="form-group col-md-4">
39-
<label for="PurchaseDate">Purchase Date</label>
40-
<input class="form-control" id="PurchaseDate" type="date" placeholder="MM-dd-yyyy" min="1900-01-01" max="2060-12-31" ng-model="PurchaseOrder.PurchaseDate">
52+
<div class="row">
53+
<fieldset>
54+
<legend>Purchase Order Line</legend>
55+
<a class="btn btn-sm btn-success" data-ng-click="cloneItem()"><i class="glyphicon glyphicon-duplicate"></i> New Line </a>
56+
<div class="row" data-ng-repeat="POLine in PurchaseOrder.PurchaseOrderLine">
57+
<div class="form-group col-md-4">
58+
<label for="ProductId">Product</label>
59+
<select id="ProductId" class="form-control" ng-model="POLine.ProductId" ng-options="s.Id as s.Name for s in products" required>
60+
<option value="">Choose Option</option>
61+
</select>
62+
</div>
63+
<div class="form-group col-md-2">
64+
<label for="QTY">Quantity</label>
65+
<input type="text" id="QTY" class="form-control" placeholder="Quantity" ng-model="POLine.Quantity" required>
66+
</div>
67+
<div class="col-md-4">
68+
<label for="">Operations</label>
69+
<br />
70+
71+
<a class="btn btn-sm btn-warning delete-field-{{$index}}" data-ng-click="removeItem(POLine)"><i class="glyphicon glyphicon-remove-circle"></i> Remove Line </a>
72+
</div>
73+
</div>
74+
</fieldset>
4175

4276
</div>
43-
</div>
44-
<div class="row">
45-
<div class="form-group col-md-4">
46-
<label for="TotalAmount">Total Amount</label>
47-
<input type="text" id="TotalAmount" class="form-control" placeholder="Total Amount" ng-model="PurchaseOrder.TotalAmount" disabled>
48-
</div>
49-
</div>
50-
<div class="row">
51-
<div class="form-group col-md-3">
52-
<label for="Product">Product</label>
53-
<select id="Product" class="form-control" ng-model="PurchaseOrder.PurchaseOrderLine.ProductId" ng-options="s.Id as s.Name for s in products track by s.Id" required>
54-
<option value="">Choose Option</option>
55-
</select>
56-
</div>
57-
<div class="form-group col-md-1">
58-
<label for="QTY">Quantity</label>
59-
<input type="text" id="QTY" class="form-control" placeholder="Quantity" ng-model="PurchaseOrder.PurchaseOrderLine.Quantity" >
77+
<div class="row">
78+
<button type="submit" class="btn btn-default">Add/Update</button>
79+
<button type="reset" class="btn btn-default">Clear</button>
6080
</div>
61-
</div>
62-
<button type="submit" class="btn btn-default">Add/Update</button>
63-
<button type="reset" class="btn btn-default">Clear</button>
64-
</form>
81+
</form>
82+
</div>
6583
</div>
6684
</div>

‎WebApiExcercise/Views/Shared/_Layout.cshtml‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -11,9 +11,10 @@
1111

1212
<!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
1313
<link href="~/Content/ie10-viewport-bug-workaround.css" rel="stylesheet">
14-
1514
<!-- Custom styles for this template -->
16-
<link href="~/Content/navbar.css" rel="stylesheet">
15+
<link href="~/Content/navbar.css" rel="stylesheet">
16+
<!-- Custom styles for this template -->
17+
<link href="~/Content/Site.css" rel="stylesheet">
1718

1819
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
1920
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->

‎WebApiExcercise/scripts/app/PurchaseOrderClient.js‎

Lines changed: 33 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -31,11 +31,11 @@ MyModule.controller('PurchaseOrderController', ['$scope', 'PurchaseOrderService'
3131
$scope.edit = function getSingle(Id) {
3232
PurchaseOrderService.getSingle(Id)
3333
.success(function (supp) {
34-
$scope.PurchaseOrders = {};
35-
$scope.PurchaseOrders.Id = supp.Id;
36-
$scope.PurchaseOrders.PurchaseDate = supp.PurchaseDate;
37-
$scope.PurchaseOrders.TotalAmount = supp.TotalAmount;
38-
//$scope.PurchaseOrders.SupplierId = supp.Supplier;
34+
$scope.PurchaseOrder = {};
35+
$scope.PurchaseOrder.Id = supp.Id;
36+
$scope.PurchaseOrder.PurchaseDate = new Date(supp.PurchaseDate);
37+
$scope.PurchaseOrder.TotalAmount = supp.TotalAmount;
38+
$scope.PurchaseOrder.PurchaseOrderLine = supp.PurchaseOrderLine;
3939
})
4040
.error(function (error) {
4141
$scope.status = 'Unable to load data: ' + error.message;
@@ -49,6 +49,7 @@ MyModule.controller('PurchaseOrderController', ['$scope', 'PurchaseOrderService'
4949
.success(function () {
5050
alert("Deleted successfully!!");
5151
getAll();
52+
resetForm();
5253
})
5354
.error(function (error) {
5455
$scope.status = 'Unable to load data: ' + error.message;
@@ -82,11 +83,38 @@ MyModule.controller('PurchaseOrderController', ['$scope', 'PurchaseOrderService'
8283
}
8384
}
8485

86+
87+
$scope.cloneItem = function () {
88+
var itemToClone = { "ProductId": "", "Quantity": "" };
89+
$scope.PurchaseOrder.PurchaseOrderLine.push(itemToClone);
90+
}
91+
92+
$scope.removeItem = function (item) {
93+
index = $scope.PurchaseOrder.PurchaseOrderLine.indexOf(item)
94+
$scope.PurchaseOrder.PurchaseOrderLine.splice(index, 1);
95+
}
96+
97+
98+
99+
$scope.PurchaseOrder = {};
100+
$scope.PurchaseOrder.PurchaseOrderLine = [
101+
{
102+
"ProductId": "",
103+
"Quantity": ""
104+
}]
105+
106+
107+
85108
function resetForm() {
86109
$scope.PurchaseOrder = {};
87110
$scope.PurchaseOrder.Id = '';
88111
$scope.PurchaseOrder.Name = '';
89112
$scope.PurchaseOrder.TotalAmount = '';
113+
$scope.PurchaseOrder.PurchaseOrderLine = [
114+
{
115+
"ProductId": "",
116+
"Quantity": ""
117+
}]
90118

91119
}
92120
}]);

0 commit comments

Comments
 (0)