@webitel/ui-sdk 3.1.60 → 3.1.62

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@webitel/ui-sdk",
-  "version": "3.1.60",
+  "version": "3.1.62",
   "private": false,
   "scripts": {
     "serve-lib": "vue-cli-service serve",

package/src/components/molecules/wt-input/wt-input.vue

@@ -170,7 +170,7 @@ export default {
       default: false,
     },
   },
-  emits: ['update:modelValue', 'input'],
+  emits: ['update:modelValue', 'input', 'keyup'],
   data: () => ({
     inputType: '',
     isPasswordVisible: false,

package/src/mixins/validationMixin/validationMixin.js

@@ -19,21 +19,21 @@ export default {
     validationText() {
       let validationText = '';
       if (this.isValidation && this.invalid) {
-        if (this.v.required.$invalid) validationText = this.$t('validation.required');
-        else if (this.v.numeric.$invalid) validationText = this.$t('validation.numeric');
-        else if (this.v.email.$invalid) validationText = this.$t('validation.email');
-        else if (this.v.gatewayHostValidator.$invalid) validationText = this.$t('validation.gatewayHostValidator');
-        else if (this.v.ipValidator.$invalid) validationText = this.$t('validation.ipValidator');
-        else if (this.v.macValidator.$invalid) validationText = this.$t('validation.macValidator');
-        else if (this.v.minValue.$invalid) validationText = `${this.$t('validation.minValue')} ${this.v.$params.minValue.min}`;
-        else if (this.v.maxValue.$invalid) validationText = `${this.$t('validation.maxValue')} ${this.v.$params.maxValue.max}`;
-        else if (this.v.sipAccountValidator.$invalid) validationText = this.$t('validation.sipAccountValidator');
-        else if (this.v.minLength.$invalid) validationText = `${this.$t('validation.minLength')} ${this.v.$params.minLength.min}`;
-        else if (this.v.url.$invalid) validationText = `${this.$t('validation.url')}`;
+        if (this.v.required?.$invalid) validationText = this.$t('validation.required');
+        else if (this.v.numeric?.$invalid) validationText = this.$t('validation.numeric');
+        else if (this.v.email?.$invalid) validationText = this.$t('validation.email');
+        else if (this.v.gatewayHostValidator?.$invalid) validationText = this.$t('validation.gatewayHostValidator');
+        else if (this.v.ipValidator?.$invalid) validationText = this.$t('validation.ipValidator');
+        else if (this.v.macValidator?.$invalid) validationText = this.$t('validation.macValidator');
+        else if (this.v.minValue?.$invalid) validationText = `${this.$t('validation.minValue')} ${this.v.minValue.$params.min}`;
+        else if (this.v.maxValue?.$invalid) validationText = `${this.$t('validation.maxValue')} ${this.v.maxValue.$params.max}`;
+        else if (this.v.sipAccountValidator?.$invalid) validationText = this.$t('validation.sipAccountValidator');
+        else if (this.v.minLength?.$invalid) validationText = `${this.$t('validation.minLength')} ${this.v.minLength.$params.min}`;
+        else if (this.v.url?.$invalid) validationText = `${this.$t('validation.url')}`;
       }
       // eslint-disable-next-line no-restricted-syntax
       for (const { name, text } of this.customValidators) {
-        if (this.v[name].$invalid) validationText = text;
+        if (this.v[name]?.$invalid) validationText = text;
       }
       return validationText;
     },

package/src/modules/AuditForm/components/audit-form-question-read-wrapper.vue

@@ -37,8 +37,8 @@
 <script setup>
 import { computed } from 'vue';
 import { EngineAuditQuestionType } from 'webitel-sdk';
-import AuditFormQuestionOptions from './questions/audit-form-question-options.vue';
-import AuditFormQuestionScore from './questions/audit-form-question-score.vue';
+import AuditFormQuestionOptions from './questions/options/audit-form-question-options.vue';
+import AuditFormQuestionScore from './questions/score/audit-form-question-score.vue';
 import WtIcon from '../../../components/atoms/wt-icon/wt-icon.vue';
 
 const props = defineProps({
@@ -47,7 +47,7 @@ const props = defineProps({
     required: true,
   },
   result: {
-    type: Object,
+    type: [Object, null],
     required: true,
   },
   disableDragging: {

package/src/modules/AuditForm/components/audit-form-question-write-wrapper.vue

@@ -69,8 +69,8 @@ import WtIconBtn from '../../../components/molecules/wt-icon-btn/wt-icon-btn.vue
 import WtInput from '../../../components/molecules/wt-input/wt-input.vue';
 import WtSelect from '../../../components/molecules/wt-select/wt-select.vue';
 
-import AuditFormQuestionOptions from './questions/audit-form-question-options.vue';
-import AuditFormQuestionScore from './questions/audit-form-question-score.vue';
+import AuditFormQuestionOptions from './questions/options/audit-form-question-options.vue';
+import AuditFormQuestionScore from './questions/score/audit-form-question-score.vue';
 
 import { generateQuestionScoreSchema } from '../schemas/AuditFormQuestionScoreSchema';
 import { generateQuestionOptionsSchema } from '../schemas/AuditFormQuestionOptionsSchema';

package/src/modules/AuditForm/components/audit-form-question.vue

@@ -1,20 +1,20 @@
 <template>
   <component
-    class="audit-form-question"
+    :is="component"
+    v-clickaway="saveQuestion"
     :class="[
      `audit-form-question--mode-${mode}`
     ]"
-    v-clickaway="saveQuestion"
-    :is="component"
+    :disable-dragging="mode === 'fill'"
+    :first="first"
     :question="question"
+    :readonly="readonly"
     :result="result"
     :v="v$"
-    :disable-dragging="mode === 'fill'"
-    :disable-delete="disableDelete"
-    :readonly="readonly"
+    class="audit-form-question"
+    @activate="activateQuestion"
     @copy="emits('copy')"
     @delete="emits('delete')"
-    @activate="activateQuestion"
     @change:question="emits('update:question', $event)"
     @change:result="emits('update:result', $event)"
   ></component>
@@ -23,10 +23,10 @@
 <script setup>
 import { useVuelidate } from '@vuelidate/core';
 import { required } from '@vuelidate/validators';
-import { computed, ref, toRefs } from 'vue';
+import { computed, onMounted, ref, toRefs } from 'vue';
 import vClickaway from '../../../directives/clickaway/clickaway';
-import QuestionWrite from './audit-form-question-write-wrapper.vue';
 import QuestionRead from './audit-form-question-read-wrapper.vue';
+import QuestionWrite from './audit-form-question-write-wrapper.vue';
 
 const props = defineProps({
   question: {
@@ -39,9 +39,9 @@ const props = defineProps({
   mode: {
     type: String,
   },
-  disableDelete: {
+  first: {
     type: Boolean,
-    default: true,
+    default: false,
   },
   readonly: {
     type: Boolean,
@@ -63,17 +63,20 @@ const QuestionState = {
 
 const state = ref(QuestionState.SAVED);
 
-const { question } = toRefs(props);
+// is needed for useVuelidate, because props.question/props.result isn't reactive
+const { question, result } = toRefs(props);
 
-// validate only "create" mode
 const v$ = useVuelidate(computed(() => (
   (props.mode === 'create')
     ? {
       question: {
         question: { required },
       },
-      $autoDirty: true,
-    } : {})), { question });
+    } : {
+      result: {
+        required: (value) => (question.value.required ? !!value : true),
+      },
+    })), { question, result }, { $autoDirty: true });
 
 const component = computed(() => {
   if (props.readonly) return QuestionRead;
@@ -92,13 +95,19 @@ function activateQuestion() {
   if (props.mode !== 'create') return;
   state.value = QuestionState.EDIT;
 }
+
+// initialize validations
+onMounted(() => {
+  v$.value.$touch();
+  activateQuestion();
+});
 </script>
 
 <style lang="scss" scoped>
 .audit-form-question {
   padding: var(--spacing-sm);
-  background: var(--main-color);
   border-radius: var(--border-radius);
+  background: var(--main-color);
   box-shadow: var(--elevation-1);
 
   &--mode-create.audit-form-question-read {

package/src/modules/AuditForm/components/audit-form.vue

@@ -117,7 +117,7 @@ function initResult() {
 
 function initQuestions() {
   if (props.mode === 'create' && !props.questions.length) {
-    addQuestion(generateQuestionSchema({ required: true }));
+    addQuestion({ question: generateQuestionSchema({ required: true }) });
   }
 }
 
@@ -132,7 +132,7 @@ const { reloadSortable } = useDestroyableSortable(sortableWrapper, {
   },
 });
 
-watch(v$, () => emit('update:validation', v$));
+watch(v$, () => emit('update:validation', { invalid: isInvalidForm, v$ }));
 watchEffect(initResult);
 
 onMounted(() => {

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

@@ -0,0 +1,24 @@
+import { shallowMount, mount } from '@vue/test-utils';
+import AuditFormQuestionOptionsWriteRow from '../audit-form-question-options-write-row.vue';
+
+describe('AuditFormQuestionOptionsWriteRow', () => {
+  it('renders a component', () => {
+    const wrapper = shallowMount(AuditFormQuestionOptionsWriteRow, {
+      props: {
+        option: {},
+      },
+    });
+    expect(wrapper.isVisible()).toBe(true);
+  });
+  it('emits "delete" event at "delete" icon-btn click', () => {
+    const wrapper = mount(AuditFormQuestionOptionsWriteRow, {
+      props: {
+        option: {},
+      },
+    });
+    const deleteBtn = wrapper.findComponent({ name: 'wt-icon-btn' });
+    expect(deleteBtn.props().icon).toBe('bucket');
+    deleteBtn.vm.$emit('click');
+    expect(wrapper.emitted().delete).toBeTruthy();
+  });
+});

package/src/modules/AuditForm/components/questions/{__tests__ → options/__tests__}/audit-form-question-options.spec.js

@@ -27,9 +27,8 @@ describe('AuditFormQuestionOptions', () => {
         mode: 'write',
       },
     });
-    const deleteBtn = wrapper.findComponent({ name: 'wt-icon-btn' });
-    expect(deleteBtn.props().icon).toBe('bucket');
-    deleteBtn.vm.$emit('click');
+    const writeRow = wrapper.findComponent({ name: 'audit-form-question-options-write-row' });
+    writeRow.vm.$emit('delete');
     expect(wrapper.emitted()['change:question'][0][0].options.length).toBe(0);
   });
   it('emits result change with selected radio option score', () => {

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

@@ -0,0 +1,83 @@
+<template>
+  <div class="audit-form-question-options-write-row">
+    <wt-input
+      :label="$t('webitelUI.auditForm.option', 1)"
+      :value="option.name"
+      :v="v$.option.name"
+      @input="emit('update:option', { name: $event, score: option.score })"
+    ></wt-input>
+    <wt-input
+      :label="$t('webitelUI.auditForm.score', 1)"
+      :value="option.score"
+      :v="v$.option.score"
+      type="number"
+      @input="emit('update:option', { name: option.name, score: $event })"
+    ></wt-input>
+    <wt-tooltip>
+      <template v-slot:activator>
+        <wt-icon-btn
+          :disabled="first"
+          icon="bucket"
+          @click="emit('delete')"
+        ></wt-icon-btn>
+      </template>
+      {{ $t('reusable.delete') }}
+    </wt-tooltip>
+  </div>
+</template>
+
+<script setup>
+import { useVuelidate } from '@vuelidate/core';
+import { required, minValue, maxValue } from '@vuelidate/validators';
+import { computed, onMounted, toRefs } from 'vue';
+import WtTooltip from '../../../../../components/atoms/wt-tooltip/wt-tooltip.vue';
+import WtIconBtn from '../../../../../components/molecules/wt-icon-btn/wt-icon-btn.vue';
+import WtInput from '../../../../../components/molecules/wt-input/wt-input.vue';
+
+const props = defineProps({
+  option: {
+    type: Object,
+    required: true,
+  },
+  first: {
+    type: Boolean,
+    default: false,
+  },
+});
+
+const emit = defineEmits([
+  'change:option',
+  'delete',
+]);
+
+// is needed for useVuelidate, because props.question/props.result isn't reactive
+const { option } = toRefs(props);
+
+const v$ = useVuelidate(
+  computed(() => (
+    {
+      option: {
+        name: { required },
+        score: {
+          required,
+          minValue: minValue(0),
+          maxValue: maxValue(10),
+        },
+      },
+    })),
+  { option },
+  { $autoDirty: true },
+);
+
+// init validation
+onMounted(() => v$.value.$touch());
+</script>
+
+<style lang="scss" scoped>
+.audit-form-question-options-write-row {
+  display: grid;
+  align-items: center;
+  grid-template-columns: 3fr 1fr 24px;
+  gap: var(--spacing-sm);
+}
+</style>

package/src/modules/AuditForm/components/questions/{audit-form-question-options.vue → options/audit-form-question-options.vue}

@@ -4,32 +4,14 @@
       v-if="mode === 'write'"
       class="audit-form-question-options-write"
     >
-      <div
-        v-for="({ name, score }, key) of question.options"
+      <options-write-row
+        v-for="(option, key) of question.options"
         :key="key"
-        class="audit-form-question-options-write-row"
-      >
-        <wt-input
-          :value="name"
-          :label="$t('webitelUI.auditForm.option', 1)"
-          @input="updateQuestion({ path: `options[${key}].name`, value: $event })"
-        ></wt-input>
-        <wt-input
-          :value="score"
-          :label="$t('webitelUI.auditForm.score', 1)"
-          type="number"
-          @input="updateQuestion({ path: `options[${key}].score`, value: $event })"
-        ></wt-input>
-        <wt-tooltip>
-          <template v-slot:activator>
-            <wt-icon-btn
-              icon="bucket"
-              @click="deleteQuestionOption({ key })"
-            ></wt-icon-btn>
-          </template>
-          {{ $t('reusable.delete') }}
-        </wt-tooltip>
-      </div>
+        :option="option"
+        :first="key === 0"
+        @update:option="updateQuestion({ path: `options[${key}]`, value: $event })"
+        @delete="deleteQuestionOption({ key })"
+      ></options-write-row>
       <wt-button
         class="audit-form-question-options-write__add-button"
         @click="addQuestionOption"
@@ -44,8 +26,8 @@
         v-for="({ name, score }) of question.options"
         :key="score"
         :label="name"
-        :value="score"
         :selected="result ? result.score : result"
+        :value="score"
         @input="emit('change:result', { score })"
       ></wt-radio>
     </div>
@@ -54,13 +36,11 @@
 </template>
 
 <script setup>
-import updateObject from '../../../../scripts/updateObject';
-import WtTooltip from '../../../../components/atoms/wt-tooltip/wt-tooltip.vue';
-import WtIconBtn from '../../../../components/molecules/wt-icon-btn/wt-icon-btn.vue';
-import WtInput from '../../../../components/molecules/wt-input/wt-input.vue';
-import WtButton from '../../../../components/atoms/wt-button/wt-button.vue';
-import WtRadio from '../../../../components/molecules/wt-radio/wt-radio.vue';
-import { generateOption } from '../../schemas/AuditFormQuestionOptionsSchema';
+import OptionsWriteRow from './audit-form-question-options-write-row.vue';
+import WtButton from '../../../../../components/atoms/wt-button/wt-button.vue';
+import WtRadio from '../../../../../components/molecules/wt-radio/wt-radio.vue';
+import updateObject from '../../../../../scripts/updateObject';
+import { generateOption } from '../../../schemas/AuditFormQuestionOptionsSchema';
 
 const props = defineProps({
   question: {
@@ -109,13 +89,6 @@ function deleteQuestionOption({ key }) {
   }
 }
 
-.audit-form-question-options-write-row {
-  display: grid;
-  grid-template-columns: 3fr 1fr 24px;
-  gap: var(--spacing-sm);
-  align-items: center;
-}
-
 .audit-form-question-options-read {
   display: flex;
   flex-direction: column;

package/src/modules/AuditForm/components/questions/{audit-form-question-score.vue → score/audit-form-question-score.vue}

@@ -6,12 +6,20 @@
     >
       <wt-input
         :value="question.min"
+        :v="v$.question.min"
+        :number-min="0"
+        :number-max="19"
         type="number"
+        required
         @input="updateQuestion({ path: 'min', value: $event })"
       ></wt-input>
       <wt-input
         :value="question.max"
+        :v="v$.question.max"
+        :number-min="1"
+        :number-max="20"
         type="number"
+        required
         @input="updateQuestion({ path: 'max', value: $event })"
       ></wt-input>
     </div>
@@ -32,10 +40,12 @@
 </template>
 
 <script setup>
-import { computed } from 'vue';
-import updateObject from '../../../../scripts/updateObject';
-import WtRadio from '../../../../components/molecules/wt-radio/wt-radio.vue';
-import WtInput from '../../../../components/molecules/wt-input/wt-input.vue';
+import { useVuelidate } from '@vuelidate/core';
+import { maxValue, minValue, required } from '@vuelidate/validators';
+import { computed, onMounted, toRefs } from 'vue';
+import updateObject from '../../../../../scripts/updateObject';
+import WtRadio from '../../../../../components/molecules/wt-radio/wt-radio.vue';
+import WtInput from '../../../../../components/molecules/wt-input/wt-input.vue';
 
 const props = defineProps({
   question: {
@@ -57,6 +67,29 @@ const emit = defineEmits([
   'change:result',
 ]);
 
+// is needed for useVuelidate, because props.question/props.result isn't reactive
+const { question } = toRefs(props);
+
+const v$ = useVuelidate(
+  computed(() => (
+    {
+      question: {
+        min: {
+          minValue: minValue(0),
+          maxValue: maxValue(9),
+          required,
+        },
+        max: {
+          minValue: minValue(1),
+          maxValue: maxValue(10),
+          required,
+        },
+      },
+    })),
+  { question },
+  { $autoDirty: true },
+);
+
 const scoreRange = computed(() => {
   if (props.question.min > props.question.max) return [];
   const result = [];
@@ -71,6 +104,9 @@ const scoreRange = computed(() => {
 function updateQuestion({ path, value }) {
   emit('change:question', updateObject({ obj: props.question, path, value }));
 }
+
+// init validation
+onMounted(() => v$.value.$touch());
 </script>
 
 <style lang="scss" scoped>
@@ -83,7 +119,7 @@ function updateQuestion({ path, value }) {
 
 .audit-form-question-score-read {
   display: flex;
-  flex-wrap: nowrap;
+  flex-wrap: wrap;
   gap: var(--spacing-sm);
 }
 </style>