Merge pull request #8126 from aignatov-bio/ai-sci-11423-small-fixes-for-forms

Small form fixes [SCI-11423][SCI-11433]

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;
   }

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') }}

app/javascript/vue/forms/fields/datetime.vue

@@ -1,25 +1,30 @@
 <template>
-  <div>
+  <div class='relative'>
-    <div v-if="range" class="flex items-center gap-4">
+    <template v-if="range">
-      <DateTimePicker
+      <div class="flex items-center gap-4">
-        @change="updateFromDate"
+        <DateTimePicker
-        :mode="mode"
+          @change="updateFromDate"
-        :defaultValue="fromValue"
+          :mode="mode"
-        :clearable="true"
+          :defaultValue="fromValue"
-        :disabled="fieldDisabled"
+          :clearable="true"
-        :placeholder="i18n.t('forms.fields.from')"
+          :disabled="fieldDisabled"
-        :class="{'error': !validValue}"
+          :placeholder="fieldDisabled ? '' : i18n.t('forms.fields.from')"
-      />
+          :class="{'error': !validValue}"
-      <DateTimePicker
+        />
-        @change="updateToDate"
+        <DateTimePicker
-        :defaultValue="toValue"
+          @change="updateToDate"
-        :mode="mode"
+          :defaultValue="toValue"
-        :disabled="fieldDisabled"
+          :mode="mode"
-        :clearable="true"
+          :disabled="fieldDisabled"
-        :placeholder="i18n.t('forms.fields.to')"
+          :clearable="true"
-        :class="{'error': !validValue}"
+          :placeholder="fieldDisabled ? '' : i18n.t('forms.fields.to')"
-      />
+          :class="{'error': !validValue}"
-    </div>
+        />
+      </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>

app/javascript/vue/forms/fields/multiple_choice.vue

@@ -8,6 +8,7 @@
       :multiple="true"
       :withCheckboxes="true"
       :clearable="true"
+      :placeholder="fieldDisabled ? ' ' : null"
     />
   </div>
 </template>

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;
       }

app/javascript/vue/forms/fields/single_choice.vue

@@ -6,6 +6,7 @@
       :value="value"
       @change="saveValue"
       :clearable="true"
+      :placeholder="fieldDisabled ? ' ' : null"
     />
   </div>
 </template>

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>
 

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">

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 }" class="py-1" :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="newValue || placeholder" v-else>{{newValue || placeholder}}</span>
     </div>
 
     <div

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"