Skip to content

Commit 999787f

Browse files
craigshoemakercraigshoemaker
committed
Bugs fixes and and fully implement persistence
1 parent 8385929 commit 999787f

File tree

5 files changed

+3693
-74
lines changed

5 files changed

+3693
-74
lines changed

‎samples/grid/master-detail/app/controllers/masterDetailController.js‎

Lines changed: 40 additions & 27 deletions
Original file line numberDiff line numberDiff line change
@@ -11,49 +11,62 @@ app.controller('masterDetailController',
1111

1212
$scope.selectedHome = null;
1313

14+
$scope.save = function(){
15+
dataService.save($scope.selectedHome).then(function(){
16+
$scope.selectedHome = null;
17+
$scope.message = 'Home saved';
18+
},
19+
function(error){
20+
$scope.error = error;
21+
});
22+
};
23+
24+
$scope.cancel = function(){
25+
$scope.selectedHome = null;
26+
};
27+
28+
dataService.getAll().then(function(homes){
29+
$scope.homes = homes;
30+
}, function(error){
31+
$scope.error = error;
32+
});
33+
34+
// **** Grid-related event handlers ********
1435
$scope.homesGridRendered = function(e){
1536
$scope.message = 'Grid is rendered';
1637
};
1738

1839
$scope.homesGridColumnSorted = function(e, u){
1940
$scope.$apply(function () {
20-
$scope.message = 'column sorted';
41+
$scope.message = 'Column sorted';
2142
});
2243
};
2344

24-
$scope.homesGridRowSelectionChanged = function (e, u) {
25-
var
26-
grid = u.owner.grid,
27-
index = u.row.index;
28-
29-
grid.options.features.forEach(function (feature) {
30-
if (feature.name.toLowerCase() === 'paging') {
31-
32-
// ?? is there a more 'Angular' way to get at these
33-
// behaviors other than having to do direct DOM selection?
34-
var pageIndex = $('#' + grid.id()).igGridPaging('option', 'currentPageIndex');
35-
var pageSize = $('#' + grid.id()).igGridPaging('option', 'pageSize');
36-
if (pageIndex > 0) {
37-
index += (pageIndex * pageSize);
38-
}
39-
}
40-
});
41-
45+
$scope.homesGridPageSelectionChanged = function(e, u){
4246
$scope.$apply(function () {
43-
$scope.selectedHome = $scope.homes[index];
47+
$scope.message = 'Page index changed';
4448
});
4549
};
4650

47-
$scope.homesGridPageSelectionChanged = function(e, u){
51+
$scope.homesGridPageSizeChanged = function(e, u){
4852
$scope.$apply(function () {
49-
$scope.message = 'page index changed';
53+
$scope.message = 'Page size changed';
5054
});
5155
};
5256

53-
dataService.getAll().then(function(homes){
54-
$scope.homes = homes;
55-
}, function(error){
56-
$scope.error = error;
57-
});
57+
$scope.homesGridRowSelectionChanged = function (e, ui) {
58+
59+
var id = ui.row.id;
60+
61+
$scope.homes.forEach(function(home){
62+
if(home.id === id){
63+
$scope.$apply(function () {
64+
$scope.selectedHome = home;
65+
$scope.message = "'" + $scope.selectedHome.streetAddress + "' is selected";
66+
});
67+
}
68+
});
69+
};
70+
// *****************************************
5871

5972
}]);

‎samples/grid/master-detail/app/services/dataService.js‎

Lines changed: 11 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -14,7 +14,17 @@ app.factory('dataService',
1414
$http.get('/api/homes').success(deferred.resolve).error(deferred.reject);
1515

1616
return deferred.promise;
17-
}
17+
},
18+
19+
save: function (home) {
20+
var deferred = $q.defer();
21+
22+
$http.post('/api/homes', home).success(function (result) {
23+
deferred.resolve(result);
24+
}).error(deferred.reject);
25+
26+
return deferred.promise;
27+
},
1828
};
1929

2030
return svc;

‎samples/grid/master-detail/app/services/fakeServerService.js‎

Lines changed: 23 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -60,7 +60,17 @@ app.service('fakeServerService',
6060
"Three car garage",
6161
"Close-knit block",
6262
"Swimming pool with a diving board",
63-
"Includes furniture and appliances"
63+
"Includes furniture and appliances",
64+
"Close to local grocery store",
65+
"Active home owner's association",
66+
"Lots of kids on the block",
67+
"Amazing view",
68+
"Circle driveway",
69+
"On the top of the hill",
70+
"Around the corner from the school",
71+
"Rock-themed landscape",
72+
"Near the freeway",
73+
"Beautiful stained glass windows"
6474
];
6575

6676
var cities = [
@@ -200,6 +210,8 @@ app.config(['$provide',
200210
app.run(
201211
['$httpBackend', 'fakeServerService',
202212
function ($httpBackend, fakeServerService) {
213+
214+
var apiRegex = /\/api\/homes\//;
203215

204216
$httpBackend.whenGET('/api/homes').respond(fakeServerService.data);
205217

@@ -214,23 +226,19 @@ app.run(
214226
return [200, { success: true }];
215227
});
216228

217-
fakeServerService.data.forEach(function (home) {
218-
$httpBackend.whenDELETE('/api/homes/' + home.id).respond(function (method, uri, data) {
219-
var parts = uri.split('/');
220-
var id = parts[parts.length - 1];
221-
fakeServerService.delete(id);
222-
return [200, { success: true }];
223-
});
229+
$httpBackend.whenDELETE(apiRegex).respond(function (method, uri, data) {
230+
var parts = uri.split('/');
231+
var id = parts[parts.length - 1];
232+
fakeServerService.delete(id);
233+
return [200, { success: true }];
224234
});
225235

226-
fakeServerService.data.forEach(function (home) {
227-
$httpBackend.whenGET('/api/homes/' + home.id).respond(function (method, uri, data) {
228-
var parts = uri.split('/');
229-
var id = parts[parts.length - 1];
236+
$httpBackend.whenGET(apiRegex).respond(function (method, uri, data) {
237+
var parts = uri.split('/');
238+
var id = parts[parts.length - 1];
230239

231-
var home = fakeServerService.getById(id);
232-
return [200, home];
233-
});
240+
var home = fakeServerService.getById(id);
241+
return [200, home];
234242
});
235243

236244
}]);

‎samples/grid/master-detail/index.html‎

Lines changed: 91 additions & 31 deletions
Original file line numberDiff line numberDiff line change
@@ -1,20 +1,26 @@
1-
<!doctype html>
1+
<!doctype html>
22
<html>
33
<head>
4-
<title>Master Detail - or trying to be ;)</title>
4+
<title>Master Detail</title>
55
<meta charset="utf-8">
66
<meta name="viewport" content="width=device-width, initial-scale=1">
77
<link type="text/css" href="//cdn-na.infragistics.com/jquery/20132/latest/css/themes/infragistics/infragistics.theme.css" rel="stylesheet" />
88
<link type="text/css" href="//cdn-na.infragistics.com/jquery/20132/latest/css/structure/modules/infragistics.ui.shared.css" rel="stylesheet" />
99
<link type="text/css" href="//cdn-na.infragistics.com/jquery/20132/latest/css/structure/modules/infragistics.ui.grid.css" rel="stylesheet" />
1010
<link type="text/css" href="//cdn-na.infragistics.com/jquery/20132/latest/css/structure/modules/infragistics.ui.editors.css" rel="stylesheet" />
1111
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" type="text/css" />
12+
<link rel="stylesheet" href="infragistics.theme.css" type="text/css" />
1213
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.min.css" type="text/css" />
14+
<style>
15+
[ng\:cloak], [ng-cloak], [data-ng-cloak], [x-ng-cloak], .ng-cloak, .x-ng-cloak {
16+
display: none !important;
17+
}
18+
</style>
1319
</head>
1420
<body class="container" ng-app="app" ng-controller="masterDetailController">
15-
16-
<div class="alert alert-danger" data-ng-show="error != null">Oops! There's been a problem: {{error}}</div>
17-
21+
<h1>igGrid Master/Detail</h1>
22+
<div class="alert alert-danger" data-ng-cloak data-ng-show="error != null">Oops! There's been a problem: {{error}}</div>
23+
<div class="alert alert-info" data-ng-cloak data-ng-show="message.length > 0" data-ng-bind="message"></div>
1824
<ig-grid id="homesGrid"
1925
data-source="homes"
2026
width="100%"
@@ -35,38 +41,92 @@
3541
<feature name="Selection"
3642
event-row-selection-changed="homesGridRowSelectionChanged"></feature>
3743
<feature name="Paging"
38-
page-size="10"
44+
page-size="5"
45+
event-page-size-changed="homesGridPageSizeChanged"
3946
event-page-index-changed="homesGridPageSelectionChanged"></feature>
4047
</features>
4148
</ig-grid>
4249
<hr>
43-
<div class="row">
44-
<div class="well col-sm-6" data-ng-show="selectedHome != null">
45-
<p class="h2">{{selectedHome.streetAddress}}, {{selectedHome.city}}</p>
46-
<span class="h3">{{selectedHome.price | currency}}</span>
47-
48-
<table class="table table-striped table-hover">
49-
<tbody>
50-
<tr>
51-
<th>Bedrooms</th>
52-
<td>{{selectedHome.bedrooms}}</td>
53-
</tr>
54-
<tr>
55-
<th>Bathrooms</th>
56-
<td>{{selectedHome.bathrooms}}</td>
57-
</tr>
58-
<tr>
59-
<th>Square Feet</th>
60-
<td>{{selectedHome.squareFeet}}</td>
61-
</tr>
62-
</tbody>
63-
</table>
50+
<div class="well col-sm-8" data-ng-cloak data-ng-show="selectedHome != null">
6451

65-
<p>{{selectedHome.notes}}</p>
52+
<form class="form-horizontal" role="form">
53+
<div class="form-group">
54+
<label for="inputEmail3" class="col-sm-2 control-label">Address</label>
55+
<div class="col-sm-10">
56+
<input id="addressBox"
57+
type="text"
58+
class="form-control"
59+
placeholder="Address"
60+
data-ng-model="selectedHome.streetAddress" />
61+
</div>
62+
</div>
63+
<div class="form-group">
64+
<label for="cityBox" class="col-sm-2 control-label">City</label>
65+
<div class="col-sm-10">
66+
<input id="cityBox"
67+
type="text"
68+
class="form-control"
69+
placeholder="City"
70+
data-ng-model="selectedHome.city" />
71+
</div>
72+
</div>
73+
<div class="form-group">
74+
<label for="bedroomsBox" class="col-sm-2 control-label">Bedrooms</label>
75+
<div class="col-sm-10">
76+
<input id="bedroomsBox"
77+
type="text"
78+
class="form-control"
79+
placeholder="Bedrooms"
80+
data-ng-model="selectedHome.bedrooms" />
81+
</div>
82+
</div>
83+
<div class="form-group">
84+
<label for="bathroomsBox" class="col-sm-2 control-label">Bathrooms</label>
85+
<div class="col-sm-10">
86+
<input id="bathroomsBox"
87+
type="text"
88+
class="form-control"
89+
placeholder="Bathrooms"
90+
data-ng-model="selectedHome.bathrooms" />
91+
</div>
92+
</div>
93+
<div class="form-group">
94+
<label for="sqfeetBox" class="col-sm-2 control-label">Sq. Feet</label>
95+
<div class="col-sm-10">
96+
<input id="sqfeetBox"
97+
type="text"
98+
class="form-control"
99+
placeholder="Sq. Feet"
100+
data-ng-model="selectedHome.squareFeet" />
101+
</div>
102+
</div>
103+
<div class="form-group">
104+
<label for="priceBox" class="col-sm-2 control-label">Price</label>
105+
<div class="col-sm-10">
106+
<input id="priceBox"
107+
type="text"
108+
class="form-control"
109+
placeholder="Price"
110+
data-ng-model="selectedHome.price" />
111+
</div>
112+
</div>
113+
<div class="form-group">
114+
<label for="notesBox" class="col-sm-2 control-label">Notes</label>
115+
<div class="col-sm-10">
116+
<textarea id="notesBox"
117+
class="form-control"
118+
placeholder="Notes"
119+
data-ng-model="selectedHome.notes"></textarea>
120+
</div>
121+
</div>
122+
<div class="form-group">
123+
<div class="col-sm-offset-2 col-sm-10">
124+
<button class="btn btn-default btn-link" data-ng-click="cancel()">Cancel</button>
125+
<button class="btn btn-default btn-primary" data-ng-click="save()">Save</button>
126+
</div>
127+
</div>
128+
</form>
66129
</div>
67-
</div>
68-
69-
<div class="alert alert-info" data-ng-show="message.length > 0">{{message}}</div>
70130

71131
<script src="http://modernizr.com/downloads/modernizr-latest.js"></script>
72132

0 commit comments

Comments
 (0)