dimanche 8 mars 2015

Modal closes and new record appears to the screen despite of problems saving in a non-blocking call to the server

Problem Statement: How to prevent model to close and caller screen to update when there is a problem in async server call? For example, say I have a screen that list books on a screen like this. It also allows to perform CRUD operations. While creating and updating a new modal opens with a new controller.


Here is the HTML:





<li ng-repeat="book in books">
<div ng-click="updateBookModelOpen('lg', book, $index)">
<p class="text-center">{{book.name}}</p>
</div>
<div class="row text-center">
<a ng-click="remove(book)" class="undecorated-link">
<button class="btn btn-danger">Delete</button>
</a>
</div>
</li>

<button ng-click="createBookModelOpen('lg')" class="btn btn-primary">Add Your Book</button>



Here is logic for opening the modal, say this is inside BooksController:





this.createBookModelOpen = function(size) {

var modalInstance = $modal.open({
templateUrl: 'create-book.html',
controller: 'CreateBookModalController',
backdrop: 'static',
keyboard: false,
size: size,
scope: $scope
});

modalInstance.result.then(function(book) {
this.books.push(book);
}, function() {
$log.info('Modal dismissed at: ' + new Date());
});
};



Here is the logic for modal controller:





.controller('CreateBookModalController', ['$scope', '$modalInstance',
function($scope, $modalInstance) {

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

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



Here is the modal HTML:





<section data-ng-controller="CreateBooksController as createBooksCtrl" ng-init="createBooksCtrl.init()">

<div class="modal-header">
<h3 class="modal-title">Enter Book Details</h3>
</div>

<div class="modal-body">

<div class="row">
<div class="col-md-12">
<form class="form-horizontal" name="createBookForm" novalidate>
<fieldset>
<div class="row">
<div class="col-md-4">
<div class="form-group">
<input type="text" data-ng-model="book.name" id="name" class="form-control" placeholder="Book Name" required>
</div>
</div>

</div>
</fieldset>
</form>
</div>
</div>

</div>

<div class="modal-footer">
<div class="row">
<div class="col-md-12">
<div class="pull-right">
<button class="btn btn-primary" ng-click="cancel()">Don't Save & Close</button>
<button class="btn btn-primary" ng-click="createBooksCtrl.create(book); ok(book)">Save & Close</button>
</div>
</div>
</div>
</div>

</section>



Here is my CreateBooksClientController:





this.create = function(book) {

book.$save(function(response) {

}, function(errorResponse) {
this.errors.push(errorResponse.data.messages);
});
};



The current behavior is that when I try to save an a book with the name that is rejected by the server. I get an error from the server but since this call is nonblocking, execution to ok() proceeds because ok() is next in sequence here.





<button class="btn btn-primary" ng-click="createBooksCtrl.create(book); ok(book)">Save & Close</button>


The book does not get saved in the database. But my modal closes and the new book is displayed to the screen because of this:





modalInstance.result.then(function(book) {
this.books.push(book);
}, function() {
$log.info('Modal dismissed at: ' + new Date());
});
};



Ideally it should not have been displayed in the list here as it has not yet been saved to the database.





<li ng-repeat="book in books">
<div ng-click="updateBookModelOpen('lg', book, $index)">
<p class="text-center">{{book.name}}</p>
</div>
</li>



Expected Result: Modal should not close, ok() call should not proceed when there is an error from the service. List should not display the new book if it is not saved to the database. How do you guys handle such scenario? Any help would be highly appreciated.


Aucun commentaire:

Enregistrer un commentaire