Ability to reorder and edit tasks

bower.json

@@ -45,7 +45,8 @@
     "bootstrap-tokenfield": "^0.12.1",
     "localforage": "^1.5.2",
     "html2canvas": "^0.4.1",
-    "croppie": "^2.5.0"
+    "croppie": "^2.5.0",
+    "sortablejs": "#^1.6.0"
   },
   "resolutions": {
     "bootstrap": "v4.0.0-alpha.6"

www/todo/app-todo.less

@@ -88,6 +88,13 @@
             color: #777;
         }
 
+        .cp-app-todo-task-input {
+            margin: @spacing;
+            flex: 1;
+            min-width: 0;
+            font-weight: bold;
+            display: none;
+        }
         .cp-app-todo-task-text {
             margin: @spacing;
             flex: 1;

www/todo/inner.js

@@ -9,6 +9,7 @@ define([
     '/common/common-hash.js',
     '/todo/todo.js',
     '/customize/messages.js',
+    '/bower_components/sortablejs/Sortable.min.js',
 
     'css!/bower_components/bootstrap/dist/css/bootstrap.min.css',
     'less!/bower_components/components-font-awesome/css/font-awesome.min.css',
@@ -23,7 +24,8 @@ define([
     UI,
     Hash,
     Todo,
-    Messages
+    Messages,
+    Sortable
     )
 {
     var APP = window.APP = {};
@@ -47,6 +49,17 @@ define([
         var onReady = function () {
             var todo = Todo.init(APP.lm.proxy);
 
+            Sortable.create($list[0], {
+                store: {
+                    get: function (sortable) {
+                        return todo.getOrder();
+                    },
+                    set: function (sortable) {
+                        todo.reorder(sortable.toArray());
+                    }
+                }
+            });
+
             var deleteTask = function(id) {
                 todo.remove(id);
 
@@ -106,6 +119,7 @@ define([
                     $taskDiv.appendTo($list);
                 }
                 $taskDiv.data('id', el);
+                $taskDiv.attr('data-id', el);
 
                 makeCheckbox(el, function (/*state*/) {
                     APP.display();
@@ -121,9 +135,25 @@ define([
                     $taskDiv.addClass('cp-app-todo-task-complete');
                 }
 
-                $('<span>', { 'class': 'cp-app-todo-task-text' })
+                var $input = $('<input>', {
+                    type: 'text',
+                    'class': 'cp-app-todo-task-input'
+                }).val(entry.task).keydown(function (e) {
+                    if (e.which === 13) {
+                        todo.val(el, 'task', $input.val().trim());
+                        $input.hide();
+                        $span.text($input.val().trim());
+                        $span.show();
+                    }
+                }).appendTo($taskDiv);
+
+                var $span = $('<span>', { 'class': 'cp-app-todo-task-text' })
                     .text(entry.task)
-                    .appendTo($taskDiv);
+                    .appendTo($taskDiv)
+                    .click(function () {
+                        $input.show();
+                        $span.hide();
+                    });
               /*$('<span>', { 'class': 'cp-app-todo-task-date' })
                     .text(new Date(entry.ctime).toLocaleString())
                     .appendTo($taskDiv);*/

www/todo/todo.js

@@ -77,6 +77,17 @@ define([
         if (proxy.data[id]) { delete proxy.data[id]; }
     };
 
+    /* change the order in the proxy (with a check to make sure that nothing is missing */
+    var reorder = function (proxy, order) {
+        var existingOrder = proxy.order.slice().sort();
+        var newOrder = order.slice().sort();
+        if (JSON.stringify(existingOrder) === JSON.stringify(newOrder)) {
+            proxy.order = order.slice();
+        } else {
+            console.error("Can't reorder the tasks. Some tasks are missing or added");
+        }
+    };
+
     Todo.init = function (proxy) {
         var api = {};
         initialize(proxy);
@@ -90,6 +101,12 @@ define([
         api.remove = function (id) {
             return remove(proxy, id);
         };
+        api.getOrder = function () {
+            return proxy.order.slice();
+        };
+        api.reorder = function (order) {
+            return reorder(proxy, order);
+        };
 
         return api;
     };