Possibilité cliente de réordonner la liste des membres

Geoffrey PREUD'HOMME
1 parent 823ab614
Showing 4 changed files with 30 additions and 18 deletions Show diff stats
bower.json
public/js/controllers/MembreCtrl.js
public/views/index.html
public/views/membres.html
 {
-    "name": "ci-site",
-    "version": "0.0.1",
-    "dependencies": {
-        "angular": "~1.3.15",
-        "angular-animate": "~1.3.15",
-        "angular-ladda": "~0.2.2",
-        "angular-route": "~1.3.15",
-        "animate.css": "~3.2.6",
-        "bootswatch-dist": "3.3.4-cerulean",
-        "jsencrypt": "~2.1.0",
-        "remarkable-bootstrap-notify": "~3.0.2"
-    }
+  "name": "ci-site",
+  "version": "0.0.1",
+  "dependencies": {
+    "angular": "~1.3.15",
+    "angular-animate": "~1.3.15",
+    "angular-ladda": "~0.2.2",
+    "angular-route": "~1.3.15",
+    "animate.css": "~3.2.6",
+    "bootswatch-dist": "3.3.4-cerulean",
+    "jsencrypt": "~2.1.0",
+    "remarkable-bootstrap-notify": "~3.0.2",
+    "ng-sortable": "~1.2.0"
+  }
 }
-angular.module('MembreCtrl', ['SessionsServ', 'ApiServ'])
+angular.module('MembreCtrl', ['SessionsServ', 'ApiServ', 'ui.sortable'])
     .controller('MembreCtrl', function ($scope, SessionServ, ApiServ) {
+        $scope.membres = [];
         $scope.formData = {};
         $scope.session = SessionServ.cur;
@@ -12,6 +13,12 @@ angular.module(&#39;MembreCtrl&#39;, [&#39;SessionsServ&#39;, &#39;ApiServ&#39;])
                 $scope.membres = membres;
         });
+        // $scope.dragControlListeners = {
+        //     orderChanged: function (e) {
+        //         console.log('Swap', e.source.index, e.dest.index);
+        //     }
+        // };
+
         $scope.createMembre = function () {
             ApiServ("création du membre", 'post', 'membres', $scope.formData, function (err, membre) {
                 if (!err) {
@@ -9,7 +9,7 @@
     <link rel="stylesheet" href="libs/bootswatch-dist/css/bootstrap.min.css">
     <link rel="stylesheet" href="css/style.css">
     <link rel="stylesheet" href="libs/animate.css/animate.min.css">
-    <link rel="stylesheet" href="libs/ladda/dist/ladda-themeless.min.css">
+    <link rel="stylesheet" href="libs/ng-sortable/dist/ng-sortable.min.css">
     <script src="libs/jquery/dist/jquery.min.js"></script>
     <script src="libs/angular/angular.min.js"></script>
     <script src="libs/angular-route/angular-route.min.js"></script>
@@ -19,6 +19,7 @@
     <script src="libs/ladda/js/spin.js"></script>
     <script src="libs/ladda/js/ladda.js"></script>
     <script src="libs/angular-ladda/dist/angular-ladda.min.js"></script>
+    <script src="libs/ng-sortable/dist/ng-sortable.min.js"></script>
     <script src="js/services/NotifyServ.js"></script>
     <script src="js/services/ApiServ.js"></script>
     <script src="js/services/EncryptServ.js"></script>
@@ -62,4 +63,4 @@
     </div>
 </body>
 -</html>
+</html>
 \ No newline at end of file
@@ -13,12 +13,15 @@
                 <th ng-if="session.canAddMembre || session.canDelMembre">Action</th>
             </tr>
         </thead>
-        <tbody ng-repeat="membre in membres">
-            <tr>
+        <tbody data-as-sortable="dragControlListeners" data-ng-model="membres">
+            <tr data-ng-repeat="membre in membres" data-as-sortable-item>
                 <td>{{ membre.nom }}</td>
                 <td>{{ membre.section }}</td>
                 <td>{{ membre.role }}</td>
                 <td ng-if="session.canDelMembre">
+                    <button type="button" class="btn btn-default" aria-label="Déplacer" data-as-sortable-item-handle>
+                        <span class="glyphicon glyphicon-resize-vertical" aria-hidden="true"></span>
+                    </button>
                     <button type="button" class="btn btn-danger" aria-label="Expulser" ng-click="deleteMembre($index)">
                         <span class="glyphicon glyphicon-remove" aria-hidden="true"></span>
                     </button>
@@ -43,4 +46,4 @@
             </tr>
         </tfoot>
     </table>
 -</div>
+</div>
 \ No newline at end of file