fix: limited audit form score inputs [WTEL-4505]

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@webitel/ui-sdk",
-  "version": "24.4.36",
+  "version": "24.4.37",
   "private": false,
   "scripts": {
     "dev": "vite",

src/locale/en/en.js

@@ -344,6 +344,7 @@ export default {
         score: 'Score',
       },
       clearSelection: 'Clear selection',
+      scoreInputTooltip: 'Value should be more than {min} and less than {max}',
     },
     deleteConfirmationPopup: {
       title: 'Confirm deletion',

src/locale/ru/ru.js

@@ -342,6 +342,7 @@ export default {
         score: 'Бал',
       },
       clearSelection: 'Очистить выбор',
+      scoreInputTooltip: 'Значение должно быть не меньше {min} и не больше {max}',
     },
     deleteConfirmationPopup: {
       title: 'Подтвердите удаление',

src/locale/ua/ua.js

@@ -342,6 +342,7 @@ export default {
         score: 'Бал',
       },
       clearSelection: 'Очистити вибір',
+      scoreInputTooltip: 'Значення повинно бути не менше {min} та не більше {max}',
     },
     deleteConfirmationPopup: {
       title: 'Підтвердіть видалення',

src/modules/AuditForm/components/questions/options/__tests__/audit-form-question-options-write-row.spec.js

@@ -16,7 +16,7 @@ describe('AuditFormQuestionOptionsWriteRow', () => {
         option: {},
       },
     });
-    const deleteBtn = wrapper.findComponent({ name: 'wt-icon-btn' });
+    const deleteBtn = wrapper.findComponent('.audit-form-question-options-write-row__tooltip').findComponent({ name: 'wt-icon-btn' });
     expect(deleteBtn.attributes().icon).toBe('bucket');
     deleteBtn.vm.$emit('click');
     expect(wrapper.emitted().delete).toBeTruthy();

src/modules/AuditForm/components/questions/options/audit-form-question-options-write-row.vue

@@ -9,10 +9,13 @@
     />
     <wt-input
       :label="$t('webitelUI.auditForm.score', 1)"
+      :label-props="{ hint: $t('scorecards.scoreInputTooltip', { min: '0', max: '10'}), hintPosition: 'right' }"
       :value="option.score"
       :v="v$.option.score"
+      :number-min="0"
+      :number-max="10"
       type="number"
-      @input="emit('update:option', { name: option.name, score: $event })"
+      @input="changeScore"
     />
     <wt-tooltip class="audit-form-question-options-write-row__tooltip">
       <template #activator>
@@ -72,6 +75,11 @@ const v$ = useVuelidate(
   { $autoDirty: true },
 );
 
+function changeScore (value) {
+  const score = value > 10 ? 10 : Number(Math.abs(value)); // to prevent -1, 000 or string value
+  emit('update:option', { name: props.option.name, score });
+}
+
 // init validation
 onMounted(() => v$.value.$touch());
 </script>

src/modules/AuditForm/components/questions/score/audit-form-question-score.vue

@@ -8,8 +8,9 @@
         :value="question.min"
         :v="v$.question.min"
         :number-min="0"
-        :number-max="19"
+        :number-max="9"
         :label="$t('reusable.from')"
+        :label-props="{ hint: $t('scorecards.scoreInputTooltip', { min: '0', max: '9'}), hintPosition: 'right' }"
         type="number"
         required
         @input="updateQuestion({ path: 'min', value: $event })"
@@ -18,8 +19,9 @@
         :value="question.max"
         :v="v$.question.max"
         :number-min="1"
-        :number-max="20"
+        :number-max="10"
         :label="$t('reusable.to')"
+        :label-props="{ hint: $t('scorecards.scoreInputTooltip', { min: '1', max: '10'}), hintPosition: 'right' }"
         type="number"
         required
         @input="updateQuestion({ path: 'max', value: $event })"
@@ -109,7 +111,8 @@ const scoreRange = computed(() => {
 const isResult = computed(() => !isEmpty(props.result));
 
 function updateQuestion({ path, value }) {
-  emit('change:question', updateObject({ obj: props.question, path, value }));
+  const number = value > 10 ? 10 : Number(Math.abs(value)); // to prevent -1, 000 or string value
+  emit('change:question', updateObject({ obj: props.question, path, value: number }));
 }
 
 // init validation