Skip to content
Permalink
Browse files

added the ability to edit a record in-place as well as delete a recor…

…d, and also add a new record
  • Loading branch information...
SangeetAgarwal
SangeetAgarwal committed Apr 26, 2015
1 parent 0cd7eb4 commit a5a9b986ce971c62bea91443751d421cd952f785
@@ -183,6 +183,8 @@
</ItemGroup>
<ItemGroup>
<Content Include="app\app.js" />
<Content Include="app\simpleGrid\modalConfirmation.tpl.html" />
<Content Include="app\simpleGrid\newStudent.tpl.html" />
<Content Include="app\simpleGrid\student.js" />
<Content Include="Content\bootstrap.css" />
<Content Include="Content\bootstrap.min.css" />
@@ -0,0 +1,10 @@
<div class="modal-header">
<h3 class="modal-title">{{title}}</h3>
</div>
<div class="modal-body">
<label>{{message}}</label>
</div>
<div class="modal-footer">
<button class="btn btn-primary" ng-click="ok()">OK</button>
<button class="btn btn-warning" ng-click="cancel()" ng-show="showCancel">Cancel</button>
</div>
@@ -0,0 +1,46 @@

<h4>Create a new student profile</h4>

<div class="row">
<form name="newStudentForm" novalidate data-ng-submit="save()">
<div class="form-horizontal">

<div class="form-group">
<div class="control-label col-md-2">Last Name</div>
<div class="col-md-10">
<textarea class="form-control" cols="20" name="lastName" rows="2" data-ng-model="newStudent.lastName" required data-ng-maxlength="50" maxlength="50"></textarea>
<span class="field-validation-error" data-ng-show="newStudentForm.lastName.$error.required">Required!</span>
</div>
</div>

<div class="form-group">
<div class="control-label col-md-2">First Name</div>
<div class="col-md-10">
<textarea class="form-control" cols="20" ng-model="newStudent.firstMidName" name="firstMidName" rows="2" maxlength="50"></textarea>
</div>
</div>

<div class="form-group">
<div class="control-label col-md-2">Enrollment Date</div>
<div class="col-md-10">
<textarea class="form-control" cols="20" ng-model="newStudent.enrollmentDate" name="enrollmentDate" rows="2" required maxlength="50"></textarea>
<span class="field-validation-error" data-ng-show="newStudentForm.enrollmentDate.$error.required">Required!</span>
</div>
</div>

<div class="form-group">
<div class="col-md-offset-2 col-md-10">
<input type="submit" value="Create" class="btn btn-primary" data-ng-disabled="newStudentForm.$invalid" />
</div>
</div>
</div>

</form>
</div>

<div class="row">
<div>
<a class="btn btn-primary" href="#/">back to list</a>
</div>
</div>

@@ -5,8 +5,87 @@
templateUrl: "app/simpleGrid/students.tpl.html"
});

$routeProvider.when("/new-student", {
controller: "newStudentCtrl",
templateUrl: "app/simpleGrid/newStudent.tpl.html"
});

$routeProvider.otherwise("/");
}])
.directive("saveButton", [function () {
return {
restrict: "E",
replace: true,
scope: {
text: "@",
action: "&",
comment: "="
},
template: "<button type='button' class='btn btn-primary' style='width: 75px;height: 30px' ng-click='action()'>{{text}}</button>"
};
}])

.directive("deleteButton", [function () {
return {
restrict: "E",
replace: true,
scope: {
text: "@",
cssclass: "@",
action: "&",
comment: "="
},
template: "<button type='button' class='{{cssclass}}' style='width: 75px;height: 30px' ng-click='action()'>{{text}}</button>"
};
}])
.controller('modalConfirmationInstanceCtrl', ["$scope", "$modalInstance", "message",
"title", "id", "showCancel", function ($scope, $modalInstance, message, title, id, showCancel) {

$scope.message = message;
$scope.title = title;
$scope.showCancel = showCancel;

$scope.ok = function () {
$modalInstance.close();
};

$scope.cancel = function () {
$modalInstance.dismiss('cancel');
};

}])

.factory("modalConfirmationService", ["$log", "$modal", function ($log, $modal) {

var _getModalInstance = function (title, message, id, showCancel) {

return $modal.open({
templateUrl: 'app/simpleGrid/modalConfirmation.tpl.html',
controller: 'modalConfirmationInstanceCtrl',
size: 'sm',
resolve: {
title: function () {
return title;
},
message: function () {
return message;
},
id: function () {
return id;
},
showCancel: function () {
return showCancel;
},
}
});

};

return {
getModalInstance: _getModalInstance
};
}])

.factory("dataService", ["$http", "$q", function ($http, $q) {

var _students = [];
@@ -18,24 +97,91 @@
$http.get("api/StudentsApi?currentPage=" + options.currentPage + "&" +
"recordsPerPage=" + options.recordsPerPage + "&" +
"sortKey=" + options.sortKeyOrder.key + "&" + "sortOrder=" + options.sortKeyOrder.order + "&searchfor=" + options.searchfor)
.then(function (result) {
.then(

function (result) {
angular.copy(result.data.students, _students);
deferred.resolve(result.data.recordCount);
},
function () {
deferred.reject();
});

function () {
deferred.reject();
});

return deferred.promise;
};

var _postStudent = function (record) {

var deferred = $q.defer();

$http.post("api/StudentsApi", record).then(

function (result) {
deferred.resolve(result.data);
},

function () {
deferred.reject();
}
);

return deferred.promise;
};

var _deleteStudent = function (id) {

var deferred = $q.defer();

$http.delete("api/StudentsApi/" + id).then(

function (result) {
deferred.resolve(result.data);
},

function () {
deferred.reject();
}

);

return deferred.promise;

}

return {
students: _students,
getStudents: _getStudents,
postStudent: _postStudent,
deleteStudent: _deleteStudent,
};
}])
.controller("studentCtrl", ["$scope", "dataService", "localStorageService",
function ($scope, dataService, localStorageService) {
.controller("newStudentCtrl", ["$scope", "$http", "$window", "dataService", "modalConfirmationService",
function ($scope, $http, $window, dataService, modalConfirmationService) {

$scope.newStudent = {

};

$scope.save = function () {

dataService.postStudent($scope.newStudent)
.then(
function (newStudent) {
modalConfirmationService.getModalInstance("record saved", "added student with last name =" + newStudent.lastName);

},
function () {
modalConfirmationService.getModalInstance("record saved", "could not save the new student, please try again");

})
.then(function () {
$window.location = "#";
});
};
}])
.controller("studentCtrl", ["$scope", "dataService", "localStorageService", "modalConfirmationService",
function ($scope, dataService, localStorageService, modalConfirmationService) {

var sortKeyOrder = {
key: '',
@@ -98,6 +244,41 @@
}


$scope.save = function (id) {

var record = $scope.data.filter(function (v) { return v["id"] == id; });

dataService.postStudent(record[0])
.then(function (updatedStudentRecord) {
modalConfirmationService.getModalInstance("the following record has been updated", "updated student record with last name = " + updatedStudentRecord.lastName);
},
function () {
modalConfirmationService.getModalInstance("failed to save the changes, please try again");
});
};


$scope.delete = function (id) {

var record = $scope.data.filter(function (v) { return v["id"] == id; });

modalConfirmationService.getModalInstance("delete record", "are you sure you would like to delete the student record with last name = " + record[0].lastName, id, true).result.
then(function () {
dataService.deleteStudent(id)
.then(function (deletedRecord) {
modalConfirmationService.getModalInstance("deleted record", "record with last name = " + deletedRecord.lastName + " has been deleted!");
getData($scope, $http, dataService, localStorageService, modalConfirmationService);
}, function () {
modalConfirmationService.getModalInstance("error occured", " an error occured while attempting to delete record, please try again");
});

}, function () {
//called when modal confirmation dialog is dismissed
});

};


}]);


0 comments on commit a5a9b98

Please sign in to comment.
You can’t perform that action at this time.