@webitel/ui-sdk 3.1.80 → 3.1.81

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@webitel/ui-sdk",
-  "version": "3.1.80",
+  "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,42 +21,46 @@ 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()],

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

@@ -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>
@@ -59,6 +59,10 @@ const props = defineProps({
     type: Boolean,
     default: false,
   },
+  first: {
+    type: Boolean,
+    default: false,
+  },
 });
 
 const emit = defineEmits([

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

@@ -102,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);
@@ -118,7 +126,21 @@ function initResult() {
 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();