include validation for rating

argilla-io · Nov 7, 2024 · fc8e541 · fc8e541
1 parent f657b31
commit fc8e541
Show file tree

Hide file tree

Showing 5 changed files with 66 additions and 21 deletions.
diff --git a/...onents/features/dataset-creation/configuration/questions/DatasetConfigurationQuestion.vue b/...onents/features/dataset-creation/configuration/questions/DatasetConfigurationQuestion.vue
@@ -29,7 +29,7 @@
       />
       <DatasetConfigurationRating
         v-else-if="question.settings.type.isRatingType"
-        v-model="question.settings.options"
+        :question="question"
         @is-focused="$emit('is-focused', $event)"
       />
       <DatasetConfigurationRanking

diff --git a/...mponents/features/dataset-creation/configuration/questions/DatasetConfigurationRating.vue b/...mponents/features/dataset-creation/configuration/questions/DatasetConfigurationRating.vue
@@ -1,46 +1,80 @@
 <template>
-  <div class="dataset-config-rating__input-container">
-    <input
-      type="number"
-      min="0"
-      max="10"
-      step="1"
-      :value="value.length ? value.length - 1 : 0"
-      @input="onInput($event.target.value)"
-      @focus="$emit('is-focused', true)"
-      @blur="$emit('is-focused', false)"
-      :placeholder="placeholder"
-      class="dataset-config-rating__input"
-    />
+  <div>
+    <div
+      :class="{ '--error': errors.length }"
+      class="dataset-config-rating__input-container"
+    >
+      <input
+        type="number"
+        min="0"
+        max="10"
+        step="1"
+        :value="
+          question.settings.options.length
+            ? question.settings.options.length - 1
+            : 0
+        "
+        @input="onInput($event.target.value)"
+        @focus.stop="onFocus"
+        @blur="onBlur"
+        :placeholder="placeholder"
+        class="dataset-config-rating__input"
+      />
+    </div>
+    <Validation v-if="errors.length" :validations="translatedValidations" />
   </div>
 </template>
 
 <script>
 export default {
+  data() {
+    return {
+      errors: [],
+      isDirty: false,
+    };
+  },
   props: {
-    value: {
-      type: Array,
+    question: {
+      type: Object,
       required: true,
     },
     placeholder: {
       type: String,
       default: "",
     },
   },
-  model: {
-    prop: "value",
-    event: "on-value-change",
+  computed: {
+    translatedValidations() {
+      return this.errors.map((validation) => {
+        return this.$t(validation);
+      });
+    },
   },
   methods: {
+    validateOptions() {
+      this.errors = this.question.validate();
+    },
+    onFocus() {
+      this.$emit("is-focused", true);
+    },
+    onBlur() {
+      this.isDirty = true;
+      this.validateOptions();
+      this.$emit("is-focused", false);
+    },
     onInput(inputValue) {
       let value = parseInt(inputValue);
-      value = Math.max(0, Math.min(value, 10));
+      value = Math.max(1, Math.min(value, 10));
 
       const valuesArray = Array.from({ length: value + 1 }, (_, i) => ({
         value: i,
       }));
 
-      this.$emit("on-value-change", valuesArray);
+      this.question.settings.options = valuesArray;
+
+      if (this.isDirty) {
+        this.validateOptions();
+      }
     },
   },
 };

diff --git a/argilla-frontend/translation/en.js b/argilla-frontend/translation/en.js
@@ -282,6 +282,9 @@ export default {
         atLeastTwoOptions: "At least two options are required",
         optionsWithoutLabel: "Empty options are not allowed",
       },
+      rating: {
+        atLeastTwoOptions: "At least two options are required",
+      },
     },
     atLeastOneQuestion: "At least one question is required.",
     atLeastOneRequired: "At least one required question is needed.",

diff --git a/argilla-frontend/translation/es.js b/argilla-frontend/translation/es.js
@@ -280,6 +280,9 @@ export default {
         atLeastTwoOptions: "Se requieren al menos dos opciones",
         optionsWithoutLabel: "No se permiten opciones vacías",
       },
+      rating: {
+        atLeastTwoOptions: "Se requieren al menos dos opciones",
+      },
     },
     atLeastOneQuestion: "Se requiere al menos una pregunta.",
     atLeastOneRequired: "Se requiere al menos una pregunta obligatoria.",

diff --git a/argilla-frontend/v1/domain/entities/hub/QuestionCreation.ts b/argilla-frontend/v1/domain/entities/hub/QuestionCreation.ts
@@ -115,6 +115,11 @@ export class QuestionCreation {
         );
       }
     }
+    if (this.isRatingType) {
+      if (this.options.length < 2) {
+        errors.push("datasetCreation.questions.rating.atLeastTwoOptions");
+      }
+    }
 
     return errors;
   }