From cd8ec80b8ae4454758215d275f94a8d221fa92d8 Mon Sep 17 00:00:00 2001
From: Anton <anton@scinote.net>
Date: Thu, 9 Jan 2025 14:45:21 +0100
Subject: [PATCH] Small form fixes [SCI-11423][SCI-11433]

---
 app/assets/stylesheets/tailwind/inputs.css    |  6 +++
 app/javascript/vue/forms/field.vue            | 10 +++-
 app/javascript/vue/forms/fields/datetime.vue  | 49 ++++++++++---------
 .../vue/forms/fields/multiple_choice.vue      |  1 +
 app/javascript/vue/forms/fields/number.vue    |  5 +-
 .../vue/forms/fields/single_choice.vue        |  1 +
 app/javascript/vue/forms/fields/text.vue      |  7 ++-
 .../vue/shared/content/modal/form_select.vue  |  7 ++-
 app/javascript/vue/shared/inline_edit.vue     |  4 +-
 config/locales/en.yml                         |  2 +
 10 files changed, 62 insertions(+), 30 deletions(-)

diff --git a/app/assets/stylesheets/tailwind/inputs.css b/app/assets/stylesheets/tailwind/inputs.css
index 6ea4e568f..a5b9104d2 100644
--- a/app/assets/stylesheets/tailwind/inputs.css
+++ b/app/assets/stylesheets/tailwind/inputs.css
@@ -91,6 +91,12 @@
     @apply border-sn-science-blue;
   }
 
+  .sci-input-container-v2 textarea:disabled {
+    background-color: var(--sn-super-light-grey);
+    color: var(--sn-grey);
+    border: 1px solid var(--sn-light-grey);
+  }
+
   .sci-input-container-v2 .history-flyout li:hover {
     @apply bg-sn-super-light-grey;
   }
diff --git a/app/javascript/vue/forms/field.vue b/app/javascript/vue/forms/field.vue
index 1284a7f77..51738e231 100644
--- a/app/javascript/vue/forms/field.vue
+++ b/app/javascript/vue/forms/field.vue
@@ -17,9 +17,15 @@
     <button class="btn btn-secondary mb-0.5"
             :disabled="disabled"
             v-if="field.attributes.allow_not_applicable"
-            :class="{'!bg-sn-super-light-blue !border-sn-blue': markAsNa}"
+            :class="{'!bg-sn-super-light-blue !border-sn-blue': markAsNa && !disabled }"
             @click="markAsNa = !markAsNa">
-      <div class="w-4 h-4 !border-sn-blue border rounded-sm flex items-center justify-center" :class="{'bg-sn-blue': markAsNa}">
+      <div class="w-4 h-4  border rounded-sm flex items-center justify-center"
+        :class="{
+          'bg-sn-blue': markAsNa && !disabled,
+          'bg-sn-grey-500': markAsNa && disabled,
+          '!border-sn-blue': !disabled,
+          'border-sn-grey-500': disabled
+        }">
         <i class="sn-icon sn-icon-check text-white" style="font-size: 16px !important;"></i>
       </div>
       {{ i18n.t('forms.fields.mark_as_na') }}
diff --git a/app/javascript/vue/forms/fields/datetime.vue b/app/javascript/vue/forms/fields/datetime.vue
index dba0dbfea..58c01b0e1 100644
--- a/app/javascript/vue/forms/fields/datetime.vue
+++ b/app/javascript/vue/forms/fields/datetime.vue
@@ -1,25 +1,30 @@
 <template>
-  <div>
-    <div v-if="range" class="flex items-center gap-4">
-      <DateTimePicker
-        @change="updateFromDate"
-        :mode="mode"
-        :defaultValue="fromValue"
-        :clearable="true"
-        :disabled="fieldDisabled"
-        :placeholder="i18n.t('forms.fields.from')"
-        :class="{'error': !validValue}"
-      />
-      <DateTimePicker
-        @change="updateToDate"
-        :defaultValue="toValue"
-        :mode="mode"
-        :disabled="fieldDisabled"
-        :clearable="true"
-        :placeholder="i18n.t('forms.fields.to')"
-        :class="{'error': !validValue}"
-      />
-    </div>
+  <div class='relative'>
+    <template v-if="range">
+      <div class="flex items-center gap-4">
+        <DateTimePicker
+          @change="updateFromDate"
+          :mode="mode"
+          :defaultValue="fromValue"
+          :clearable="true"
+          :disabled="fieldDisabled"
+          :placeholder="fieldDisabled ? '' : i18n.t('forms.fields.from')"
+          :class="{'error': !validValue}"
+        />
+        <DateTimePicker
+          @change="updateToDate"
+          :defaultValue="toValue"
+          :mode="mode"
+          :disabled="fieldDisabled"
+          :clearable="true"
+          :placeholder="fieldDisabled ? '' : i18n.t('forms.fields.to')"
+          :class="{'error': !validValue}"
+        />
+      </div>
+      <span v-if="!validValue" class="text-xs text-sn-delete-red block absolute -bottom-3.5">
+        {{ i18n.t('forms.fields.not_valid_range') }}
+      </span>
+    </template>
     <DateTimePicker
       v-else
       @change="updateDate"
@@ -27,7 +32,7 @@
       :mode="mode"
       :disabled="fieldDisabled"
       :clearable="true"
-      :placeholder="i18n.t(`forms.fields.add_${mode}`)"
+      :placeholder="fieldDisabled ? '' : i18n.t(`forms.fields.add_${mode}`)"
     />
   </div>
 </template>
diff --git a/app/javascript/vue/forms/fields/multiple_choice.vue b/app/javascript/vue/forms/fields/multiple_choice.vue
index 78d5c17be..d50737bba 100644
--- a/app/javascript/vue/forms/fields/multiple_choice.vue
+++ b/app/javascript/vue/forms/fields/multiple_choice.vue
@@ -8,6 +8,7 @@
       :multiple="true"
       :withCheckboxes="true"
       :clearable="true"
+      :placeholder="fieldDisabled ? ' ' : null"
     />
   </div>
 </template>
diff --git a/app/javascript/vue/forms/fields/number.vue b/app/javascript/vue/forms/fields/number.vue
index 2b7ce213b..f2a599901 100644
--- a/app/javascript/vue/forms/fields/number.vue
+++ b/app/javascript/vue/forms/fields/number.vue
@@ -1,6 +1,7 @@
 <template>
   <div class="sci-input-container-v2 mb-2" :class="{'error': !isValidValue}" :data-error="errorMessage">
-    <input type="number" v-model="value" class="sci-input" :disabled="fieldDisabled" @change="saveValue" :placeholder="i18n.t('forms.fields.add_number')"></input>
+    <input type="number" v-model="value" class="sci-input" :disabled="fieldDisabled" @change="saveValue"
+      :placeholder="fieldDisabled ? '' : i18n.t('forms.fields.add_number')"></input>
   </div>
 </template>
 
@@ -23,7 +24,7 @@ export default {
         return true;
       }
 
-      if (validations.response_validation.type === 'between' && validations.response_validation.enabled) {
+      if (validations.response_validation.type === 'between' && validations.response_validation.enabled && this.value) {
         return this.value >= validations.response_validation.min
          && this.value <= validations.response_validation.max;
       }
diff --git a/app/javascript/vue/forms/fields/single_choice.vue b/app/javascript/vue/forms/fields/single_choice.vue
index 8a37c67b0..39aa43a38 100644
--- a/app/javascript/vue/forms/fields/single_choice.vue
+++ b/app/javascript/vue/forms/fields/single_choice.vue
@@ -6,6 +6,7 @@
       :value="value"
       @change="saveValue"
       :clearable="true"
+      :placeholder="fieldDisabled ? ' ' : null"
     />
   </div>
 </template>
diff --git a/app/javascript/vue/forms/fields/text.vue b/app/javascript/vue/forms/fields/text.vue
index 7d7db554c..711ad5e16 100644
--- a/app/javascript/vue/forms/fields/text.vue
+++ b/app/javascript/vue/forms/fields/text.vue
@@ -1,6 +1,11 @@
 <template>
   <div class="sci-input-container-v2 h-24">
-    <textarea class="sci-input" :value="value" :disabled="fieldDisabled" @change="saveValue" :placeholder="i18n.t('forms.fields.add_text')"></textarea>
+    <textarea
+      class="sci-input"
+      :value="value"
+      :disabled="fieldDisabled"
+      @change="saveValue"
+      :placeholder="fieldDisabled ? '' : i18n.t('forms.fields.add_text')"></textarea>
   </div>
 </template>
 
diff --git a/app/javascript/vue/shared/content/modal/form_select.vue b/app/javascript/vue/shared/content/modal/form_select.vue
index 0af526781..dc067d564 100644
--- a/app/javascript/vue/shared/content/modal/form_select.vue
+++ b/app/javascript/vue/shared/content/modal/form_select.vue
@@ -5,7 +5,12 @@
         <div class="modal-header">
           <button type="button" class="close" data-dismiss="modal" aria-label="Close"><i class="sn-icon sn-icon-close"></i></button>
           <h4 class="modal-title" id="modal-move-result-element">
-            {{ i18n.t(`protocols.steps.modals.form_modal.title`) }}
+            <template v-if="anyForms">
+              {{ i18n.t(`protocols.steps.modals.form_modal.title`) }}
+            </template>
+            <template v-else>
+              {{ i18n.t(`protocols.steps.modals.form_modal.no_forms_title`) }}
+            </template>
           </h4>
         </div>
         <div class="modal-body">
diff --git a/app/javascript/vue/shared/inline_edit.vue b/app/javascript/vue/shared/inline_edit.vue
index 52f9c8291..0d2394192 100644
--- a/app/javascript/vue/shared/inline_edit.vue
+++ b/app/javascript/vue/shared/inline_edit.vue
@@ -43,8 +43,8 @@
       :data-e2e="`e2e-TX-${dataE2e}`"
       @click="enableEdit($event)"
     >
-      <span :class="{'truncate': singleLine }" :title="sa_value || placeholder" v-if="smartAnnotation" v-html="sa_value || placeholder" ></span>
-      <span :class="{'truncate': singleLine}" :title="newValue || placeholder" v-else>{{newValue || placeholder}}</span>
+      <span :class="{'truncate': singleLine }" class="py-1" :title="sa_value || placeholder" v-if="smartAnnotation" v-html="sa_value || placeholder" ></span>
+      <span :class="{'truncate': singleLine}" class="py-1" :title="newValue || placeholder" v-else>{{newValue || placeholder}}</span>
     </div>
 
     <div
diff --git a/config/locales/en.yml b/config/locales/en.yml
index f8fee1941..ac85af3cd 100644
--- a/config/locales/en.yml
+++ b/config/locales/en.yml
@@ -1088,6 +1088,7 @@ en:
       to: "To"
       add_date: "Add date"
       add_datetime: "Add date & time"
+      not_valid_range: "Range is not valid"
     index:
       head_title: "Forms"
       toolbar:
@@ -3887,6 +3888,7 @@ en:
           confirm: 'Delete forever'
         form_modal:
           title: "Insert form"
+          no_forms_title: "No available forms found"
           description: "Select a form you want to add to your protocol"
           label: "Form"
           placeholder: "Select a form"