From 100fdde5ca141732f6a92ec0dbbe5ea927dbff51 Mon Sep 17 00:00:00 2001
From: Giga Chubinidze <giga@scinote.net>
Date: Fri, 1 Sep 2023 11:49:43 +0400
Subject: [PATCH] Placeholder text in the "Move to different result" modal
 dropdown

---
 app/assets/stylesheets/shared/select.scss        |  4 ++++
 app/javascript/vue/shared/content/modal/move.vue | 12 +++++++++++-
 app/javascript/vue/shared/select.vue             |  8 +++++---
 config/locales/en.yml                            |  1 +
 4 files changed, 21 insertions(+), 4 deletions(-)

diff --git a/app/assets/stylesheets/shared/select.scss b/app/assets/stylesheets/shared/select.scss
index c1ec9456e..86cc3d429 100644
--- a/app/assets/stylesheets/shared/select.scss
+++ b/app/assets/stylesheets/shared/select.scss
@@ -90,6 +90,10 @@
       width: calc(100%);
     }
 
+    .select__option-placeholder {
+      color: var(--sn-grey);
+    }
+
     .sn-select__no-options {
       color: var(--sn-grey);
       padding: .5em;
diff --git a/app/javascript/vue/shared/content/modal/move.vue b/app/javascript/vue/shared/content/modal/move.vue
index fa79d39fb..fdbebb819 100644
--- a/app/javascript/vue/shared/content/modal/move.vue
+++ b/app/javascript/vue/shared/content/modal/move.vue
@@ -15,7 +15,7 @@
           <div class="w-full">
             <Select
               :value="target"
-              :options="targets"
+              :options="getOptions(targets)"
               v-bind:disabled="false"
               @change="setTarget"
             ></Select>
@@ -77,6 +77,16 @@
       },
       cancel() {
         $(this.$refs.modal).modal('hide');
+      },
+      getOptions(targets) {
+        const updatedTargets = targets.map(target => {
+          if (target[1] === null) {
+            target[2] = this.i18n.t('protocols.steps.modals.move_element.result.untitled_result');
+          }
+          return target;
+        });
+
+        return updatedTargets;
       }
     }
   }
diff --git a/app/javascript/vue/shared/select.vue b/app/javascript/vue/shared/select.vue
index eb3ba9759..5ebaa70f3 100644
--- a/app/javascript/vue/shared/select.vue
+++ b/app/javascript/vue/shared/select.vue
@@ -14,10 +14,12 @@
       <template v-if="options.length">
         <div
           v-for="option in options"
-          :key="option[0]" @mousedown.prevent.stop="setValue(option[0])"
+          :key="option[0]"
+          @mousedown.prevent.stop="setValue(option[0])"
           class="sn-select__option"
+          :class="{ 'select__option-placeholder': option[1] === null }"
         >
-          {{ option[1] }}
+          {{ option[1] || option[2] }}
         </div>
       </template>
       <template v-else>
@@ -54,7 +56,7 @@
     computed: {
       valueLabel() {
         let option = this.options.find((o) => o[0] === this.value);
-        return option && option[1];
+        return option && (option[1] || option[2]);
       },
       focusElement() {
         return this.$refs.focusElement || this.$scopedSlots.default()[0].context.$refs.focusElement;
diff --git a/config/locales/en.yml b/config/locales/en.yml
index 5c4e89195..983f6edc5 100644
--- a/config/locales/en.yml
+++ b/config/locales/en.yml
@@ -3135,6 +3135,7 @@ en:
           result:
             title: Move to different result
             targets_label: Select result
+            untitled_result: Untitled result
         delete_step:
           title: 'Delete step'
           description_1: 'You’re about to delete a whole step from your protocol. It might contain data you don’t want to lose. You won’t be able to get it back.'