add edit feature

app/assets/stylesheets/plans.scss

@@ -215,7 +215,7 @@
       padding: 3px;
     }
   }
-  .add-task-field{
+  .add-task-field, .update-task{
     display: none;
     height: 100px;
     box-shadow: 0 0 5px #bbb;
@@ -223,7 +223,10 @@
     border-radius: 5px;
     margin-bottom: 10px;
   }
-  #new_task {
+  .update-task{
+    margin-top: 10px;
+  }
+  #new_task, #edit_task {
     .enter-notice{
       line-height: 30px;
       color: #888;
@@ -291,5 +294,8 @@
       animation-iteration-count: 1;
       animation-fill-mode: forwards;
     }
+    .update-task{
+      display: none;
+    }
   }
 }

app/views/plans/show.html.haml

@@ -51,11 +51,14 @@
 
           .panel-body
             .add-task-field
-              = render 'tasks/form'
+              = render 'tasks/form', type: 'new'
             %p{'v-if' => 'list.tasks.length == 0'} 暂无相关任务
 
             %template{'v-for' => '(task, index) in list.tasks'}
               .task-field
+                .update-task
+                  = hidden_field_tag :task_value, '{{task.title}}', 'v-model' => 'task.title'
+                  = render 'tasks/form', type: 'edit'
                 %span.task-item{':class' => 'task.status_class'}
                   {{task.title}}
                 .confirm-delete
@@ -65,18 +68,18 @@
                     取消
                 .task-operations
                   = hidden_field_tag :task_path, nil, 'v-model' => 'task.path'
-                  .non-group{'v-show' => 'task.status == 1'}
+                  .non-group{'v-show' => 'task.status == 1', 'v-on:click' => 'showEdit'}
                     %i.icon-pencil
                   .non-group
                     %i.icon-remove{'@click' => 'showConfirm'}
-                  %button.btn.btn-primary.btn-xs{'v-on:click' => 'updateTask', 'v-show' => 'task.status == 1'}
+                  %button.btn.btn-primary.btn-xs{'v-on:click' => "updateTask('delete')", 'v-show' => 'task.status == 1'}
                     over
     .col-md-3#new_list_area{ 'v-show' => 'newListField' }
       #new_list_field
         = render 'lists/form'
       .add-list-buttons
-        %button.btn.btn-sm.btn-default{ :type => "button", 'v-on:click' => 'cancelList()' } 取消
-        %button.btn.btn-sm.btn-primary{ :type => "button", 'v-on:click' => 'addList()' } 提交
+        %button.btn.btn-sm.btn-default{ :type => 'button', 'v-on:click' => 'cancelList()' } 取消
+        %button.btn.btn-sm.btn-primary{ :type => 'button', 'v-on:click' => 'addList()' } 提交
     .col-md-3#new-list-button{ 'v-show' => '!!!newListField' }
       %a{'v-on:click' => 'newList()'}
         .plan-list-add
@@ -171,6 +174,16 @@
         $(event.currentTarget).closest('.task-field').find('.task-operations').show()
         $(event.currentTarget).closest('.confirm-delete').hide()
       },
+      showEdit: function() {
+        task = $(event.currentTarget).closest('.task-field').find('#task_value').val()
+        $(event.currentTarget).closest('.task-field').find('.task-item, .task-operations').hide()
+        $(event.currentTarget).closest('.task-field').find('.update-task').show()
+        $(event.currentTarget).closest('.task-field').find('#task_title').val(task)
+      },
+      removeEdit: function() {
+        $(event.currentTarget).closest('.update-task').hide()
+        $(event.currentTarget).closest('.task-field').find('.task-item, .task-operations').show()
+      },
       selectColor: function (color){
         $('#new_list_field').css({'border-top-color':color})
       },
@@ -229,11 +242,13 @@
           }
         )
       },
-      updateTask: function() {
+      updateTask: function(item) {
         var xhr = new XMLHttpRequest()
         var data = this.plan.lists
-        var listPath = $(event.currentTarget).closest('.panel').find('#new_task_path').val()
-        var path = $(event.currentTarget).parent().find('#task_path').val()
+        var $currentTarget = $(event.currentTarget)
+        var listPath = $currentTarget.closest('.panel').find('#new_task_path').val()
+        var path = $currentTarget.closest('.task-field').find('#task_path').val()
+        var task_value = $currentTarget.closest('#edit_task').find('#task_title').val()
         var list = false
         var task = false
         for (var i = 0; i < data.length; i++){
@@ -258,12 +273,22 @@
                 taskPos = i
               }
             }
-            list.tasks.splice(taskPos, 1)
-            list.tasks.splice(closePos - 1, 0, result)
+            if (item == 'delete') {
+              list.tasks.splice(taskPos, 1)
+              list.tasks.splice(closePos - 1, 0, result)
+            } else {
+              list.tasks[taskPos].title = task_value
+              $currentTarget.closest('.update-task').hide()
+              $currentTarget.closest('.task-field').find('.task-item, .task-operations').show()
+            }
             notifyTop('任务更新成功 !')
           }
         }
-        xhr.send('task[status]=0')
+        if (item == 'delete') {
+          xhr.send('task[status]=0')
+        } else {
+          xhr.send('task[title]=' + task_value)
+        }
       },
       addList: function () {
         var xhr = new XMLHttpRequest()

app/views/tasks/_form.html.haml

@@ -1,4 +1,5 @@
-.form.form-horizontal.plan#new_task
+- new_form = type == 'new' ? true : false
+.form.form-horizontal.plan{id: new_form ? 'new_task' : 'edit_task'}
   .field
     = text_field_tag :task_title, nil, class: 'form-control', required: true, placeholder: '任务名称',
                      'v-on:keyup.enter' => 'addTask'
@@ -6,5 +7,6 @@
   %span.enter-notice
     可按回车(Enter)提交
   .field.add-task-buttons
-    %button.btn.btn-sm.btn-default{ :type => "button", 'v-on:click' => 'cancelTask' } 取消
-    %button.btn.btn-sm.btn-primary{ :type => "button", 'v-on:click' => 'addTask' } 提交
+    %button.btn.btn-sm.btn-default{ :type => "button", 'v-on:click' => new_form ? 'cancelTask' : 'removeEdit' } 取消
+    %button.btn.btn-sm.btn-primary{ :type => "button", 'v-on:click' => new_form ? 'addTask' : "updateTask('edit')" }
+      = new_form ? '提交' : '更新'