Step rearranging fixes [SCI-6970]

app/assets/stylesheets/steps/step.scss

@@ -92,6 +92,11 @@
       justify-content: flex-end;
       flex-basis: 20%;
 
+      .disabled {
+        color: $color-silver-chalice;
+        pointer-events: none;
+      }
+
       .dropdown-menu {
         white-space: nowrap;
       }
@@ -135,12 +140,12 @@
 
   .step-elements {
     padding-left: calc(var(--left-component-padding) * 2);
+  }
 
   .step-element-grip-placeholder {
     height: 24px;
     width: 28px;
   }
-  }
 
   .comments-counter {
     @include font-small;
@@ -242,6 +247,7 @@
     font-weight: bold;
     width: 100%;
 
+
     .step-element-number {
       display: inline-block;
       margin-right: 8px;
@@ -300,6 +306,13 @@
 
     .step-element-name {
       font-weight: normal;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+    }
+
+    .step-element-name-placeholder {
+      color: $color-silver-chalice;
     }
 
     .fas {

app/javascript/vue/protocol/container.vue

@@ -78,9 +78,12 @@
           <span class="fas fa-caret-down"></span>
           {{ i18n.t("protocols.steps.expand_label") }}
         </button>
-        <a v-if="urls.reorder_steps_url && steps.length > 1" class="btn btn-light" data-toggle="modal"
+        <a v-if="urls.reorder_steps_url"
+           class="btn btn-light"
+           data-toggle="modal"
            @click="startStepReorder"
            @keyup.enter="startStepReorder"
+           :class="{'disabled': steps.length == 1}"
            tabindex="0" >
             <i class="fas fas-rotated-90 fa-exchange-alt" aria-hidden="true"></i>
             <span>{{ i18n.t("protocols.reorder_steps.button") }}</span>
@@ -98,7 +101,7 @@
               :inRepository="inRepository"
               @step:delete="updateStepsPosition"
               @step:update="updateStep"
-              :reorderStepUrl="urls.reorder_steps_url"
+              :reorderStepUrl="steps.length > 1 ? urls.reorder_steps_url : null"
             />
           </div>
         </template>

app/javascript/vue/protocol/modals/reorderable_items_modal.vue

@@ -23,7 +23,8 @@
               <div class="step-element-name">
                 <strong v-if="includeNumbers" class="step-element-number">{{ index + 1 }}</strong>
                 <i v-if="item.attributes.icon" class="fas" :class="item.attributes.icon"></i>
-                {{ item.attributes.name }}
+                <span v-if="item.attributes.name">{{ item.attributes.name }}</span>
+                <span v-else class="step-element-name-placeholder">{{ item.attributes.placeholder }}</span>
               </div>
             </div>
           </Draggable>

app/javascript/vue/protocol/step.vue

@@ -17,6 +17,7 @@
           <div v-if="reorderStepUrl" class="step-element-grip" @click="$emit('reorder')">
             <i class="fas fas-rotated-90 fa-exchange-alt"></i>
           </div>
+          <div v-else class="step-element-grip-placeholder"></div>
           <a class="step-collapse-link"
             :href="'#stepBody' + step.id"
             data-toggle="collapse"
@@ -153,7 +154,7 @@
                          @cancel="showClipboardPasteModal = false"
     />
     <ReorderableItemsModal v-if="reordering"
-      :title="i18n.t('protocols.steps.modals.reorder_elements.title', { step_name: step.attributes.name })"
+      :title="i18n.t('protocols.steps.modals.reorder_elements.title', { step_position: step.attributes.position + 1 })"
       :items="reorderableElements"
       @reorder="updateElementOrder"
       @close="closeReorderModal"
@@ -194,7 +195,6 @@
         required: true
       },
       reorderStepUrl: {
-        type: String,
         required: true
       }
     },

app/javascript/vue/protocol/step_elements/text.vue

@@ -16,7 +16,7 @@
       v-if="element.attributes.orderable.urls.update_url"
       :value="element.attributes.orderable.text"
       :value_html="element.attributes.orderable.text_view"
-      :placeholder="i18n.t('protocols.steps.text.placeholder')"
+      :placeholder="element.attributes.orderable.placeholder"
       :updateUrl="element.attributes.orderable.urls.update_url"
       :objectType="'StepText'"
       :objectId="element.attributes.orderable.id"

app/serializers/step_text_serializer.rb

@@ -6,12 +6,16 @@ class StepTextSerializer < ActiveModel::Serializer
   include ApplicationHelper
   include ActionView::Helpers::TextHelper
 
-  attributes :id, :text, :urls, :text_view, :updated_at, :icon, :name
+  attributes :id, :text, :urls, :text_view, :updated_at, :icon, :name, :placeholder
 
   def updated_at
     object.updated_at.to_i
   end
 
+  def placeholder
+    I18n.t('protocols.steps.text.placeholder')
+  end
+
   def text_view
     @user = scope[:user]
     custom_auto_link(object.tinymce_render('text'),

config/locales/en.yml

@@ -2540,7 +2540,7 @@ en:
         uncomplete: "Unmark as done"
       options_dropdown:
         title: 'Step options'
-        rearrange: 'Rearrange step content'
+        rearrange: 'Rearrange content'
         delete: 'Delete'
       insert:
         button: 'Insert'
@@ -2574,7 +2574,7 @@ en:
           description_2: 'Are you sure you want to delete them?'
           confirm: 'Delete forever'
         reorder_elements:
-          title: 'Rearrange %{step_name} content'
+          title: 'Rearrange step %{step_position} content'
       options:
         up_arrow_title: "Move step up"
         down_arrow_title: "Move step down"