@webitel/ui-sdk 3.1.79 → 3.1.81

package/package.json

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

package/src/modules/AuditForm/components/__tests__/audit-form.spec.js

@@ -1,4 +1,5 @@
-import { shallowMount } from '@vue/test-utils';
+import { mount } from '@vue/test-utils';
+import { ref } from 'vue';
 import AuditForm from '../audit-form.vue';
 import { generateQuestionSchema } from '../../schemas/AuditFormQuestionSchema';
 
@@ -8,11 +9,11 @@ import {
 
 jest.mock('../../composables/useDestroyableSortable');
 
-useDestroyableSortable.mockImplementation(() => ({}));
+useDestroyableSortable.mockImplementation(() => ({ reloadSortable: ref(false) }));
 
 describe('AuditForm', () => {
-  it('renders a component', () => {
-    const wrapper = shallowMount(AuditForm, {
+  it('renders a component', async () => {
+    const wrapper = mount(AuditForm, {
       props: {
         mode: '',
         questions: [],
@@ -20,47 +21,51 @@ describe('AuditForm', () => {
     });
     expect(wrapper.isVisible()).toBe(true);
   });
-  it('add question button triggers update question event', () => {
-    const wrapper = shallowMount(AuditForm, {
+  it('add question button triggers update question event', async () => {
+    const wrapper = mount(AuditForm, {
       props: {
         mode: 'create',
         questions: [],
       },
     });
-    wrapper.findComponent('.audit-form__add-button').vm.$emit('click');
+    await wrapper.findComponent('.audit-form__add-button').vm.$emit('click');
+    await wrapper.vm.$nextTick();
+    await wrapper.vm.$nextTick();
+    await wrapper.vm.$nextTick();
+    console.info(wrapper.html());
     expect(wrapper.emitted()['update:questions'][0][0])
     .toEqual([generateQuestionSchema({ required: true })]);
   });
-  it('delete event from child question emits update without passed question', () => {
-    const wrapper = shallowMount(AuditForm, {
+  it('delete event from child question emits update without passed question', async () => {
+    const wrapper = mount(AuditForm, {
       props: {
         mode: 'create',
         questions: [generateQuestionSchema()],
       },
     });
-    wrapper.findComponent({ name: 'audit-form-question' }).vm.$emit('delete', { key: 0 });
+    await wrapper.findComponent({ name: 'audit-form-question' }).vm.$emit('delete', { key: 0 });
     expect(wrapper.emitted()['update:questions'][0][0])
     .toEqual([]);
   });
-  it('copy event from child question emits update with duplicated questions', () => {
+  it('copy event from child question emits update with duplicated questions', async () => {
     const question = generateQuestionSchema();
-    const wrapper = shallowMount(AuditForm, {
+    const wrapper = mount(AuditForm, {
       props: {
         mode: 'create',
         questions: [question],
       },
     });
-    wrapper.findComponent({ name: 'audit-form-question' }).vm.$emit('copy', { question, key: 0 });
+    await wrapper.findComponent({ name: 'audit-form-question' }).vm.$emit('copy', { question, key: 0 });
     expect(wrapper.emitted()['update:questions'][0][0])
     .toEqual([question, question]);
   });
-  it('initializes result depending on passed questions', () => {
-    const wrapper = shallowMount(AuditForm, {
+  it('initializes result depending on passed questions',() => {
+    const wrapper = mount(AuditForm, {
       props: {
         mode: 'fill',
         questions: [generateQuestionSchema(), generateQuestionSchema(), generateQuestionSchema()],
       },
     });
-    expect(wrapper.emitted()['update:result'][0][0]).toEqual([null, null, null]);
+    expect(wrapper.emitted()['update:result'][0][0]).toEqual([{}, {}, {}]);
   });
 });

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

@@ -2,7 +2,7 @@
   <article
     class="audit-form-question-read"
     :class="{
-      'audit-form-question-read--filled': result && result.score != null,
+      'audit-form-question-read--filled': isResult && result.score != null,
       'audit-form-question-read--readonly': readonly,
     }"
     @keyup.enter="emit('activate')"
@@ -17,7 +17,7 @@
       >{{ question.question }}</p>
       <wt-icon
         class="audit-form-question-read__drag-icon"
-        v-if="!disableDragging"
+        v-if="!disableDragging && !first"
         icon="move"
         color="secondary"
       ></wt-icon>
@@ -37,6 +37,7 @@
 <script setup>
 import { computed } from 'vue';
 import { EngineAuditQuestionType } from 'webitel-sdk';
+import isEmpty from '../../../scripts/isEmpty';
 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';
@@ -58,6 +59,10 @@ const props = defineProps({
     type: Boolean,
     default: false,
   },
+  first: {
+    type: Boolean,
+    default: false,
+  },
 });
 
 const emit = defineEmits([
@@ -70,6 +75,8 @@ const QuestionTypeComponent = computed(() => {
   if (props.question.type === EngineAuditQuestionType.Score) return AuditFormQuestionScore;
   return null;
 });
+
+const isResult = computed(() => !isEmpty(props.result));
 </script>
 
 <style lang="scss" scoped>

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

@@ -5,7 +5,7 @@
     :class="[
      `audit-form-question--mode-${mode}`,
      {
-       'audit-form-question--answered': !!result,
+       'audit-form-question--answered': isResult,
      },
     ]"
     :disable-dragging="mode === 'fill'"
@@ -27,6 +27,7 @@
 import { useVuelidate } from '@vuelidate/core';
 import { required } from '@vuelidate/validators';
 import { computed, onMounted, ref, toRefs } from 'vue';
+import isEmpty from '../../../scripts/isEmpty';
 import vClickaway from '../../../directives/clickaway/clickaway';
 import QuestionRead from './audit-form-question-read-wrapper.vue';
 import QuestionWrite from './audit-form-question-write-wrapper.vue';
@@ -90,6 +91,8 @@ const component = computed(() => {
   return QuestionRead;
 });
 
+const isResult = computed(() => !isEmpty(props.result));
+
 function saveQuestion() {
   state.value = QuestionState.SAVED;
 }
@@ -99,10 +102,11 @@ function activateQuestion() {
   state.value = QuestionState.EDIT;
 }
 
+defineExpose({ activateQuestion });
+
 // initialize validations
 onMounted(() => {
   v$.value.$touch();
-  if (props.first) activateQuestion();
 });
 </script>
 

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

@@ -7,12 +7,14 @@
     >
       <audit-form-question
         v-for="(question, key) of questions"
+        ref="auditQuestions"
         :key="key"
         :question="question"
         :result="(result && result[key]) ? result[key] : null"
         :mode="mode"
         :first="key === 0"
         :readonly="readonly"
+        :class="{'audit-form-question--sort-ignore': key === 0}"
         @copy="copyQuestion({ question, key })"
         @delete="deleteQuestion({ question, key})"
         @update:question="handleQuestionUpdate({ key, value: $event })"
@@ -33,6 +35,7 @@
 import cloneDeep from 'lodash/cloneDeep';
 import {
   watch, watchEffect, ref, computed, onMounted,
+  reactive, nextTick,
 } from 'vue';
 import { useVuelidate } from '@vuelidate/core';
 import { useDestroyableSortable } from '../composables/useDestroyableSortable';
@@ -70,13 +73,17 @@ const emit = defineEmits([
 const v$ = useVuelidate();
 
 const isInvalidForm = computed(() => !!v$.value.$errors.length);
+const auditQuestions = ref(null);
+const isQuestionAdded = reactive({ value: false, index: null });
 
-function addQuestion({ index, question } = {}) {
+async function addQuestion({ index, question } = {}) {
   const questions = [...props.questions];
   const newQuestion = question || generateQuestionSchema();
   if (index != null) questions.splice(index, 0, newQuestion);
   else questions.push(newQuestion);
-  emit('update:questions', questions);
+  await emit('update:questions', questions);
+  isQuestionAdded.value = true;
+  isQuestionAdded.index = index || 'last';
 }
 
 function handleQuestionUpdate({ key, value }) {
@@ -98,6 +105,7 @@ function deleteQuestion({ key }) {
 }
 
 function changeQuestionsOrder({ oldIndex, newIndex }) {
+  if (newIndex === 0) return;
   const questions = [...props.questions];
   const [el] = questions.splice(oldIndex, 1);
   questions.splice(newIndex, 0, el);
@@ -111,14 +119,28 @@ function handleResultUpdate({ key, value }) {
 }
 
 function initResult() {
-  const result = props.questions.map(() => null);
+  const result = props.questions.map(() => ({}));
   emit('update:result', result);
 }
 
 function initQuestions() {
   if (props.mode === 'create' && !props.questions.length) {
     addQuestion({ question: generateQuestionSchema({ required: true }) });
-  }
+  } else if (props.questions.length) auditQuestions.value.at(0).activateQuestion();
+}
+
+// https://my.webitel.com/browse/WTEL-3451, https://my.webitel.com/browse/WTEL-3436
+// at new question added, activate this question
+async function atQuestionAdded() {
+  // wait for new question to render
+  await nextTick();
+  const index = isQuestionAdded.index && isQuestionAdded.index === 'last'
+    ? -1
+    : isQuestionAdded.index;
+  auditQuestions.value.at(index).activateQuestion();
+
+  isQuestionAdded.value = false;
+  isQuestionAdded.index = null;
 }
 
 const sortableWrapper = ref(null);
@@ -126,6 +148,7 @@ const sortableWrapper = ref(null);
 const { reloadSortable } = useDestroyableSortable(sortableWrapper, {
   handle: '.audit-form-question-read__drag-icon',
   disabled: props.mode !== 'create',
+  filter: '.audit-form-question--sort-ignore',
   onEnd: ({ newIndex, oldIndex }) => {
     if (newIndex === oldIndex) return;
     changeQuestionsOrder({ oldIndex, newIndex });
@@ -134,6 +157,10 @@ const { reloadSortable } = useDestroyableSortable(sortableWrapper, {
 
 watch(v$, () => emit('update:validation', { invalid: isInvalidForm.value, v$: v$.value }));
 watchEffect(initResult);
+watch(() => props.questions, () => {
+  if (!isQuestionAdded.value) return;
+ atQuestionAdded();
+});
 
 onMounted(() => {
   initQuestions();

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

@@ -34,7 +34,7 @@
         :key="value"
         :label="`${value}`"
         :value="value"
-        :selected="result ? result.score : result"
+        :selected="isResult ? result.score : null"
         @input="emit('change:result', { score: value })"
       ></wt-radio>
     </div>
@@ -45,6 +45,7 @@
 import { useVuelidate } from '@vuelidate/core';
 import { maxValue, minValue, required } from '@vuelidate/validators';
 import { computed, onMounted, toRefs } from 'vue';
+import isEmpty from '../../../../../scripts/isEmpty';
 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';
@@ -103,6 +104,8 @@ const scoreRange = computed(() => {
   return result;
 });
 
+const isResult = computed(() => !isEmpty(props.result));
+
 function updateQuestion({ path, value }) {
   emit('change:question', updateObject({ obj: props.question, path, value }));
 }