add ui-sortble lib to be able to sort the list of the slide in the book view - it sends a post request to the server to update the slides' order
authorrougeronj
Tue, 31 Mar 2015 12:27:10 +0200
changeset 49 88cd0bb61c12
parent 48 c17f2b37b032
child 50 c641b33f910f
add ui-sortble lib to be able to sort the list of the slide in the book view - it sends a post request to the server to update the slides' order
client/app/books/book.html
client/app/books/books_controller.js
client/bower.json
client/gulpfile.js
--- a/client/app/books/book.html	Tue Mar 31 12:25:19 2015 +0200
+++ b/client/app/books/book.html	Tue Mar 31 12:27:10 2015 +0200
@@ -1,9 +1,9 @@
 <p>Books {{idBook}}&nbsp;:</p>
 
-<ul class="list-unstyled list-inline row gallery">
+<ul ui-sortable="sortableOptions" ng:model="slides" class="list-unstyled list-inline gallery">
   <li class="col-md-3 item" ng-repeat="i in slides">
     <div class="img-ctn">
-        <img class="img img-responsive image" ng-src="{{ i.details.firstImg }}" />
+        <img class="img img-responsive image" ng-src="{{ i.details.images }}" />
         <p>{{ i.details.title }}</p>
         <div class="gallery-buttons">
           <a class="btn btn-default" href="#/slide/edit/{{ i.id }}"><span class="glyphicon glyphicon-pencil"></span></a>
--- a/client/app/books/books_controller.js	Tue Mar 31 12:25:19 2015 +0200
+++ b/client/app/books/books_controller.js	Tue Mar 31 12:27:10 2015 +0200
@@ -1,7 +1,7 @@
 (function(){
 	'use strict';
 
-	angular.module('ammicoBooks',['ngRoute'])
+	angular.module('ammicoBooks',['ngRoute', 'ui.sortable'])
 	.service('booksModel', function(searchApi) {
 		this.books = searchApi.listBooks.query({format:'json'}); 
 	})
@@ -12,9 +12,19 @@
 		};
 	})
 	.controller('bookCtrl', function($scope, searchApi, $routeParams) {
-		$scope.currentBook = $routeParams.idBook;
 		$scope.slides = searchApi.booksSlides.query({idBook:$routeParams.idBook, format:'json'});
-
+		$scope.slides.sort(function (a, b) {
+		    return a.orderIndex > b.orderIndex;
+		  });
+		$scope.sortableOptions = {
+		    stop: function() {
+		    	var order = $scope.slides.map(function(i){
+		            return i.id;
+		    	});
+		    	searchApi.order.save({idBook:$routeParams.idBook}, {order: order});
+		    }
+		};
+		
 		$scope.deleteItem = function(i){
 			if(0<=i && i<$scope.slides.length){
 				if(window.confirm('Êtes-vous sûr(e) de vouloir effacer cet élément ? Cette action est irrémédiable.')){
--- a/client/bower.json	Tue Mar 31 12:25:19 2015 +0200
+++ b/client/bower.json	Tue Mar 31 12:27:10 2015 +0200
@@ -19,6 +19,7 @@
     "angular-route": "~1.3",
     "angular-resource": "~1.3",
     "angular-bootstrap": "~0.11.0",
+    "angular-ui-sortable": "~0.13.3",
     "bootstrap": "~ 3.3.4"
   }
 }
--- a/client/gulpfile.js	Tue Mar 31 12:25:19 2015 +0200
+++ b/client/gulpfile.js	Tue Mar 31 12:27:10 2015 +0200
@@ -56,6 +56,9 @@
   '!./bower_components/**/*.min.js',
   '!./bower_components/bootstrap/**/*',
   '!./bower_components/jquery/src/**/*',
+  '!./bower_components/jquery-ui/themes/**',
+  '!./bower_components/jquery-ui/ui/**',
+  '!./bower_components/jquery-ui/ui/*.js',
   '!./bower_components/**/index.js',
   './bower_components/bootstrap/dist/css/*',
   './bower_components/jquery/dist/jquery.js',