Merge pull request #8133 from aignatov-bio/ai-sci-11426-add-character-limit

Add character limit to form editor [SCI-11426]

app/javascript/vue/forms/edit_field.vue

@@ -33,14 +33,14 @@
     <hr class="my-4 w-full">
     <div>
       <label class="sci-label">{{ i18n.t('forms.show.title_label') }}</label>
-      <div class="sci-input-container-v2" :class="{ 'error': editField.attributes.name.length == 0 }"  >
+      <div class="sci-input-container-v2" :class="{ 'error': !nameValid }" :data-error="nameFieldError"  >
         <input type="text" class="sci-input" v-model="editField.attributes.name" @change="updateField" :placeholder="i18n.t('forms.show.title_placeholder')" />
       </div>
     </div>
     <div>
       <label class="sci-label">{{ i18n.t('forms.show.description_label') }}</label>
-      <div class="sci-input-container-v2" >
-        <input type="text" class="sci-input" v-model="editField.attributes.description" @change="updateField" :placeholder="i18n.t('forms.show.description_placeholder')" />
+      <div class="sci-input-container-v2 h-24" :class="{ 'error': !descriptionValid }" :data-error="descriptionFieldError"  >
+        <textarea class="sci-input " v-model="editField.attributes.description" @change="updateField" :placeholder="i18n.t('forms.show.description_placeholder')" />
       </div>
     </div>
     <component :is="this.editField.attributes.type" :field="editField" @updateField="updateField()" @syncField="syncField" />
@@ -61,6 +61,9 @@
 </template>
 
 <script>
+
+/* global GLOBAL_CONSTANTS */
+
 import GeneralDropdown from '../shared/general_dropdown.vue';
 import DatetimeField from './edit_fields/datetime.vue';
 import NumberField from './edit_fields/number.vue';
@@ -91,10 +94,38 @@ export default {
     if (!this.editField.attributes.data.validations) {
       this.editField.attributes.data.validations = {};
     }
+
+    if (!this.editField.attributes.description) {
+      this.editField.attributes.description = '';
+    }
   },
   computed: {
     validField() {
-      return this.editField.attributes.name.length > 0;
+      return this.nameValid && this.descriptionValid;
+    },
+    nameValid() {
+      return this.editField.attributes.name.length > 0 && this.editField.attributes.name.length <= GLOBAL_CONSTANTS.NAME_MAX_LENGTH;
+    },
+    descriptionValid() {
+      return this.editField.attributes.description.length <= GLOBAL_CONSTANTS.TEXT_MAX_LENGTH;
+    },
+    nameFieldError() {
+      if (this.editField.attributes.name.length === 0) {
+        return this.i18n.t('forms.show.title_empty_error');
+      }
+
+      if (this.editField.attributes.name.length > GLOBAL_CONSTANTS.NAME_MAX_LENGTH) {
+        return this.i18n.t('forms.show.title_too_long_error');
+      }
+
+      return '';
+    },
+    descriptionFieldError() {
+      if (this.editField.attributes.description.length > GLOBAL_CONSTANTS.TEXT_MAX_LENGTH) {
+        return this.i18n.t('forms.show.description_too_long_error');
+      }
+
+      return '';
     }
   },
   methods: {

app/javascript/vue/forms/edit_fields/multiple_choice.vue

@@ -3,7 +3,7 @@
     <hr class="my-4 w-full">
     <div>
       <h5 class="mb-4">{{ i18n.t('forms.show.dropdown_options_label') }}</h5>
-      <div class="sci-input-container-v2 h-40" >
+      <div class="sci-input-container-v2 h-40" :class="{'error': !validField}" :data-error="optionFieldErrors">
         <textarea
           class="sci-input"
           v-model="options"

app/javascript/vue/forms/edit_fields/number.vue

@@ -2,7 +2,7 @@
   <div class="flex flex-col gap-4">
     <div>
       <label class="sci-label">{{ i18n.t('forms.show.unit_label') }}</label>
-      <div class="sci-input-container-v2">
+      <div class="sci-input-container-v2" :class="{'error': !unitValid}" :data-error="unitFieldError">
         <input type="text"
               class="sci-input"
               v-model="editField.attributes.data.unit"
@@ -57,6 +57,7 @@
 </template>
 
 <script>
+/* global GLOBAL_CONSTANTS */
 import fieldMixin from './field_mixin';
 import SelectDropdown from '../../shared/select_dropdown.vue';
 
@@ -89,7 +90,17 @@ export default {
       return (this.responseValidation.min < this.responseValidation.max) || !this.responseValidationEnabled;
     },
     validField() {
-      return this.responseValidationIsValid;
+      return this.responseValidationIsValid && this.unitValid;
+    },
+    unitValid() {
+      return !this.editField.attributes.data.unit || this.editField.attributes.data.unit.length <= GLOBAL_CONSTANTS.NAME_MAX_LENGTH;
+    },
+    unitFieldError() {
+      if (this.editField.attributes.data.unit.length > GLOBAL_CONSTANTS.NAME_MAX_LENGTH) {
+        return this.i18n.t('forms.show.field_too_long_error');
+      }
+
+      return '';
     }
   },
   methods: {

app/javascript/vue/forms/edit_fields/options_mixin.js

@@ -1,9 +1,23 @@
+/* global GLOBAL_CONSTANTS */
+
 export default {
   data() {
     return {
       options: this.field.attributes.data.options?.join('\n')
     };
   },
+  computed: {
+    validField() {
+      return !this.editField.attributes.data.options || this.editField.attributes.data.options.length <= GLOBAL_CONSTANTS.NAME_MAX_LENGTH;
+    },
+    optionFieldErrors() {
+      if (!this.validField) {
+        return this.i18n.t('forms.show.options_too_many_error');
+      }
+
+      return '';
+    }
+  },
   watch: {
     options() {
       const newOptions = this.options.split('\n')

app/javascript/vue/forms/edit_fields/single_choice.vue

@@ -3,7 +3,7 @@
     <hr class="my-4 w-full">
     <div>
       <h5 class="mb-4">{{ i18n.t('forms.show.dropdown_options_label') }}</h5>
-      <div class="sci-input-container-v2 h-40" >
+      <div class="sci-input-container-v2 h-40"  :class="{'error': !validField}" :data-error="optionFieldErrors">
         <textarea
           class="sci-input"
           v-model="options"

config/locales/en.yml

@@ -1110,8 +1110,11 @@ en:
       add_block: 'Add a block'
       title_label: Title (required)
       title_placeholder: 'Add a title'
+      title_empty_error: 'Title cannot be empty'
+      title_too_long_error: 'Title is too long'
       description_label: Description
       description_placeholder: 'Add a description'
+      description_too_long_error: 'Description is too long'
       required_label: 'Required'
       mark_as_na: 'Mark as N/A'
       mark_as_na_explanation: 'Allow user to mark the field as Not-applicable.'
@@ -1127,6 +1130,8 @@ en:
       time_label: 'Include time'
       range_label: 'Include range'
       no_block: 'Add your first form block'
+      field_too_long_error: 'Field is too long'
+      options_too_many_error: 'Too many options'
       validations:
         response_validation:
           title: 'Response validation'