Fix checklist issues [SCI-6960] (#4222)

app/controllers/step_elements/checklist_items_controller.rb

@@ -30,7 +30,9 @@ module StepElements
     end
 
     def update
-      @checklist_item.assign_attributes(checklist_item_params)
+      @checklist_item.assign_attributes(
+        checklist_item_params.merge(last_modified_by: current_user)
+      )
 
       if @checklist_item.save!
         if @checklist_item.saved_change_to_attribute?(:checked)

app/javascript/vue/protocol/step.vue

@@ -15,7 +15,7 @@
       <div class="step-element-header">
         <div class="step-controls">
           <div v-if="reorderStepUrl" class="step-element-grip" @click="$emit('reorder')">
-            <i class="fas fa-grip-vertical"></i>
+            <i class="fas fas-rotated-90 fa-exchange-alt"></i>
           </div>
           <a class="step-collapse-link"
             :href="'#stepBody' + step.id"

app/javascript/vue/protocol/step_elements/checklist.vue

@@ -94,6 +94,10 @@
       },
       reorderElementUrl: {
         type: String
+      },
+      isNew: {
+        type: Boolean,
+        default: false
       }
     },
     data() {
@@ -109,6 +113,10 @@
       this.checklistItems = this.element.attributes.orderable.checklist_items.map((item, index) => {
         return { attributes: {...item, position: index } }
       });
+
+      if (this.isNew) {
+        this.addItem();
+      }
     },
     computed: {
       orderedChecklistItems() {
@@ -177,7 +185,8 @@
             attributes: {
               text: '',
               checked: false,
-              position: this.checklistItems.length
+              position: this.checklistItems.length,
+              isNew: true
             }
           }
         );
@@ -212,7 +221,7 @@
       },
       handleMultilinePaste(data) {
         this.linesToPaste = data.length;
-        let nextPosition = this.checklistItems.length;
+        let nextPosition = this.checklistItems.length - 1;
 
         // we need to post items to API in the right order, to avoid positions breaking
         let synchronousPost = (index) => {

app/javascript/vue/protocol/step_elements/checklistItem.vue

@@ -9,6 +9,7 @@
           <input ref="checkbox"
                  type="checkbox"
                  class="sci-checkbox"
+                 :disabled="checklistItem.attributes.isNew"
                  :checked="checklistItem.attributes.checked" @change="toggleChecked($event)" />
           <span class="sci-checkbox-label" >
           </span>
@@ -24,7 +25,7 @@
             :autofocus="editingText"
             :attributeName="`${i18n.t('ChecklistItem')} ${i18n.t('name')}`"
             :multilinePaste="true"
-            :editOnload="newItem()"
+            :editOnload="checklistItem.attributes.isNew"
             :smartAnnotation="true"
             @editingEnabled="enableTextEdit"
             @editingDisabled="disableTextEdit"
@@ -41,23 +42,21 @@
         <button v-if="!checklistItem.attributes.urls || updateUrl" class="btn icon-btn btn-light" @click="enableTextEdit" tabindex="-1">
           <i class="fas fa-pen"></i>
         </button>
-        <button v-if="!checklistItem.attributes.urls || deleteUrl" class="btn icon-btn btn-light" @click="showDeleteModal" tabindex="-1">
+        <button v-if="!checklistItem.attributes.urls || deleteUrl" class="btn icon-btn btn-light" @click="deleteElement" tabindex="-1">
           <i class="fas fa-trash"></i>
         </button>
       </div>
     </div>
-    <deleteElementModal v-if="confirmingDelete" @confirm="deleteElement" @cancel="closeDeleteModal"/>
   </div>
 </template>
 
  <script>
   import DeleteMixin from 'vue/protocol/mixins/components/delete.js'
-  import deleteElementModal from 'vue/protocol/modals/delete_element.vue'
   import InlineEdit from 'vue/shared/inline_edit.vue'
 
   export default {
     name: 'ChecklistItem',
-    components: { deleteElementModal, InlineEdit },
+    components: { InlineEdit },
     mixins: [DeleteMixin],
     props: {
       checklistItem: {
@@ -107,6 +106,10 @@
         this.$emit('editStart');
       },
       disableTextEdit() {
+        if (this.checklistItem.attributes.isNew) {
+          this.removeItem();
+          return;
+        }
         this.editingText = false;
         this.$emit('editEnd');
       },
@@ -131,9 +134,6 @@
           this.$emit('removeItem', this.checklistItem.attributes.position);
         }
       },
-      newItem(){
-        return this.checklistItem.attributes.text === ''
-      },
       update() {
         this.$emit('update', this.checklistItem);
       }

app/javascript/vue/shared/inline_edit.vue

@@ -11,6 +11,7 @@
         @keydown="handleKeypress"
         @paste="handlePaste"
         @blur="handleBlur"
+        @keyup.escape="cancelEdit"
       ></textarea>
       <div v-else @click="enableEdit($event)" class="sci-inline-edit__view" v-html="sa_value || value || placeholder" :class="{ 'blank': isBlank }"></div>
       <div v-if="editing && error" class="sci-inline-edit__error">