diff --git a/app/assets/stylesheets/plans.scss b/app/assets/stylesheets/plans.scss index 1a94d22..abe4df0 100644 --- a/app/assets/stylesheets/plans.scss +++ b/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; + } } } \ No newline at end of file diff --git a/app/views/plans/show.html.haml b/app/views/plans/show.html.haml index 0d591d5..df5805a 100644 --- a/app/views/plans/show.html.haml +++ b/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() diff --git a/app/views/tasks/_form.html.haml b/app/views/tasks/_form.html.haml index 75069b8..c392250 100644 --- a/app/views/tasks/_form.html.haml +++ b/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' } 提交 \ No newline at end of file + %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 ? '提交' : '更新' \ No newline at end of file