@webitel/ui-sdk 3.0.4 → 3.0.5

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@webitel/ui-sdk",
-  "version": "3.0.4",
+  "version": "3.0.5",
   "private": false,
   "scripts": {
     "serve-lib": "vue-cli-service serve",
@@ -28,6 +28,8 @@
   ],
   "dependencies": {
     "@vue/compat": "^3.2.47",
+    "@vuelidate/core": "^2.0.0",
+    "@vuelidate/validators": "^2.0.0",
     "clipboard-copy": "^4.0.1",
     "core-js": "^3.6.5",
     "csv-stringify": "^5.5.3",
@@ -39,6 +41,7 @@
     "jszip-utils": "^0.1.0",
     "node-polyfill-webpack-plugin": "^1.1.4",
     "plyr": "3.6.2",
+    "sortablejs": "^1.15.0",
     "tiny-emitter": "^2.1.0",
     "vue": "^3.2.47",
     "vue-i18n": "^9.2.2",

package/src/locale/en/en.js

@@ -46,6 +46,8 @@ export default {
     downloadAll: 'Download all',
     warning: 'Warning',
     doNotSave: 'Don\'t save',
+    required: 'Required',
+    copy: 'Copy',
   },
   // yak zhe ya zaebalsya povtoriaty odni i ti sami slova!!!!
   vocabulary: {
@@ -280,5 +282,15 @@ export default {
       copy: 'Copy',
       copied: 'Copied to clipboard!',
     },
+    auditForm: {
+      question: 'Criteria',
+      option: 'Option | Options',
+      score: 'Score | Scores',
+      addQuestion: 'Add criteria',
+      type: {
+        options: 'Options',
+        score: 'Score',
+      },
+    },
   },
 };

package/src/locale/ru/ru.js

@@ -45,6 +45,8 @@ export default {
     downloadAll: 'Скачать всё',
     warning: 'Предупреждение',
     doNotSave: 'Не сохранять',
+    required: 'Обязательный',
+    copy: 'Скопировать',
   },
   vocabulary: {
     language: 'Язык',
@@ -276,5 +278,15 @@ export default {
       copy: 'Копировать',
       copied: 'Скопировано!',
     },
+    auditForm: {
+      question: 'Критерий',
+      option: 'Вариант | Варианты',
+      score: 'Бал | Балы',
+      addQuestion: 'Добавить критерий',
+      type: {
+        options: 'Критерии',
+        score: 'Бал',
+      },
+    },
   },
 };

package/src/locale/ua/ua.js

@@ -46,6 +46,8 @@ export default {
     downloadAll: 'Завантажити все',
     warning: 'Попередження',
     doNotSave: 'Не зберігати',
+    required: 'Обов\'язковий',
+    copy: 'Скопіювати',
   },
   vocabulary: {
     language: 'Мова',
@@ -276,5 +278,15 @@ export default {
       copy: 'Копіювати',
       copied: 'Скопійовано!',
     },
+    auditForm: {
+      question: 'Критерій',
+      option: 'Варіант | Варіанти',
+      score: 'Бал | Бали',
+      addQuestion: 'Додати критерій',
+      type: {
+        options: 'Критерії',
+        score: 'Бал',
+      },
+    },
   },
 };

package/src/mixins/validationMixin/validationMixin.js

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

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

@@ -0,0 +1,14 @@
+import { shallowMount } from '@vue/test-utils';
+import AuditFormQuestionReadWrapper from '../audit-form-question-read-wrapper.vue';
+
+describe('AuditFormQuestionReadWrapper', () => {
+  it('renders a component', () => {
+    const wrapper = shallowMount(AuditFormQuestionReadWrapper, {
+      props: {
+        question: {},
+        result: {},
+      },
+    });
+    expect(wrapper.isVisible()).toBe(true);
+  });
+});

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

@@ -0,0 +1,59 @@
+import { shallowMount } from '@vue/test-utils';
+import {
+  generateQuestionOptionsSchema
+} from '../../schemas/AuditFormQuestionOptionsSchema';
+import AuditFormQuestionWriteWrapper from '../audit-form-question-write-wrapper.vue';
+import { generateQuestionSchema } from '../../schemas/AuditFormQuestionSchema';
+import { generateQuestionScoreSchema } from '../../schemas/AuditFormQuestionScoreSchema';
+
+const v = { question: {} };
+
+describe('AuditFormQuestionWriteWrapper', () => {
+  it('renders a component', () => {
+    const wrapper = shallowMount(AuditFormQuestionWriteWrapper, {
+      props: {
+        question: {},
+        v,
+      },
+    });
+    expect(wrapper.isVisible()).toBe(true);
+  });
+  it('correctly changes question', () => {
+    const question = generateQuestionSchema();
+    const wrapper = shallowMount(AuditFormQuestionWriteWrapper, {
+      props: {
+        question,
+        v,
+      },
+    });
+    wrapper.findComponent({ name: 'wt-switcher' }).vm.$emit('change', !question.required);
+    expect(wrapper.emitted()['change:question'][0][0].required)
+    .toBe(!question.required);
+  });
+  it('correctly changes question type to Score', () => {
+    const question = {};
+    const wrapper = shallowMount(AuditFormQuestionWriteWrapper, {
+      props: {
+        question,
+        v,
+      },
+    });
+    wrapper.find('.audit-form-question-write-content-question')
+    .findComponent({ name: 'wt-select' }).vm.$emit('input', { value: 'score' });
+    expect(wrapper.emitted()['change:question'][0][0])
+    .toEqual(generateQuestionScoreSchema());
+  });
+  it('correctly changes question type to Options', () => {
+    const question = {};
+    const wrapper = shallowMount(AuditFormQuestionWriteWrapper, {
+      props: {
+        question,
+        v,
+      },
+    });
+    wrapper.find('.audit-form-question-write-content-question')
+    .findComponent({ name: 'wt-select' }).vm.$emit('input', { value: 'options' });
+    expect(wrapper.emitted()['change:question'][0][0])
+    .toEqual(generateQuestionOptionsSchema());
+  });
+});

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

@@ -0,0 +1,14 @@
+import { shallowMount } from '@vue/test-utils';
+import AuditFormQuestion from '../audit-form-question.vue';
+
+describe('AuditFormQuestion', () => {
+  it('renders a component', () => {
+    const wrapper = shallowMount(AuditFormQuestion, {
+      props: {
+        question: {},
+        result: {},
+      },
+    });
+    expect(wrapper.isVisible()).toBe(true);
+  });
+});

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

@@ -0,0 +1,66 @@
+import { shallowMount } from '@vue/test-utils';
+import AuditForm from '../audit-form.vue';
+import { generateQuestionSchema } from '../../schemas/AuditFormQuestionSchema';
+
+import {
+  useDestroyableSortable,
+} from '../../composables/useDestroyableSortable';
+
+jest.mock('../../composables/useDestroyableSortable');
+
+useDestroyableSortable.mockImplementation(() => ({}));
+
+describe('AuditForm', () => {
+  it('renders a component', () => {
+    const wrapper = shallowMount(AuditForm, {
+      props: {
+        mode: '',
+        questions: [],
+      },
+    });
+    expect(wrapper.isVisible()).toBe(true);
+  });
+  it('add question button triggers update question event', () => {
+    const wrapper = shallowMount(AuditForm, {
+      props: {
+        mode: 'create',
+        questions: [],
+      },
+    });
+    wrapper.findComponent('.audit-form__add-button').vm.$emit('click');
+    expect(wrapper.emitted()['update:questions'][0][0])
+    .toEqual([generateQuestionSchema()]);
+  });
+  it('delete event from child question emits update without passed question', () => {
+    const wrapper = shallowMount(AuditForm, {
+      props: {
+        mode: 'create',
+        questions: [generateQuestionSchema()],
+      },
+    });
+    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', () => {
+    const question = generateQuestionSchema();
+    const wrapper = shallowMount(AuditForm, {
+      props: {
+        mode: 'create',
+        questions: [question],
+      },
+    });
+    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, {
+      props: {
+        mode: 'fill',
+        questions: [generateQuestionSchema(), generateQuestionSchema(), generateQuestionSchema()],
+      },
+    });
+    expect(wrapper.emitted()['update:result'][0][0]).toEqual([null, null, null]);
+  });
+});

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

@@ -0,0 +1,100 @@
+<template>
+  <article
+    class="audit-form-question-read"
+    :class="{
+      'audit-form-question-read--filled': result && result.score != null,
+    }"
+    @keyup.enter="emit('activate')"
+    @click="emit('activate')"
+  >
+    <header class="audit-form-question-read-header">
+      <p
+        class="audit-form-question-read-text"
+        :class="{
+          'audit-form-question-read-text--required': question.required,
+        }"
+      >{{ question.text }}</p>
+      <wt-icon
+        class="audit-form-question-read__drag-icon"
+        v-if="!disableDragging"
+        icon="move"
+        color="secondary"
+      ></wt-icon>
+    </header>
+    <section class="audit-form-question-read-content">
+      <component
+        :is="QuestionTypeComponent"
+        :question="question"
+        :result="result"
+        mode="read"
+        @change:result="emit('change:result', $event)"
+      ></component>
+    </section>
+  </article>
+</template>
+
+<script setup>
+import { computed } from 'vue';
+import AuditFormQuestionOptions from './questions/audit-form-question-options.vue';
+import AuditFormQuestionScore from './questions/audit-form-question-score.vue';
+import WtIcon from '../../../components/atoms/wt-icon/wt-icon.vue';
+
+const props = defineProps({
+  question: {
+    type: Object,
+    required: true,
+  },
+  result: {
+    type: Object,
+    required: true,
+  },
+  disableDragging: {
+    type: Boolean,
+    default: false,
+  },
+});
+
+const emit = defineEmits([
+  'change:result',
+  'activate',
+]);
+
+const QuestionTypeComponent = computed(() => {
+  if (props.question.type === 'options') return AuditFormQuestionOptions;
+  if (props.question.type === 'score') return AuditFormQuestionScore;
+  return null;
+});
+</script>
+
+<style lang="scss" scoped>
+.audit-form-question-read {
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-sm);
+
+  &--filled {
+    background: var(--secondary-color-50);
+  }
+}
+
+.audit-form-question-read__drag-icon {
+  position: absolute;
+  top: 0;
+  left: 50%;
+  transform: translateX(-50%);
+}
+
+.audit-form-question-read-header {
+  margin-bottom: var(--spacing-xs);
+}
+
+.audit-form-question-read-text {
+  &--required {
+    &:after {
+      content: '*';
+      color: var(--false-color);
+    }
+  }
+}
+</style>

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

@@ -0,0 +1,151 @@
+<template>
+  <article class="audit-form-question-write">
+    <header class="audit-form-question-write-header">
+      <wt-switcher
+        :value="question.required"
+        :label="$t('reusable.required')"
+        @change="updateQuestion({ path: 'required', value: $event })"
+      ></wt-switcher>
+      <div class="audit-form-question-write-header__actions">
+        <wt-tooltip>
+          <template v-slot:activator>
+            <wt-icon-btn
+              icon="copy"
+              @click="emit('copy')"
+            ></wt-icon-btn>
+          </template>
+          {{ $t('reusable.copy') }}
+        </wt-tooltip>
+        <wt-tooltip>
+          <template v-slot:activator>
+            <wt-icon-btn
+              icon="bucket"
+              :disabled="disableDelete"
+              @click="emit('delete')"
+            ></wt-icon-btn>
+          </template>
+          {{ $t('reusable.delete') }}
+        </wt-tooltip>
+      </div>
+    </header>
+    <section class="audit-form-question-write-content">
+      <div class="audit-form-question-write-content-question">
+        <wt-input
+          :value="question.text"
+          :label="$t('webitelUI.auditForm.question')"
+          :v="v.question.text"
+          required
+          @input="updateQuestion({ path: 'text', value: $event })"
+        ></wt-input>
+        <wt-select
+          :value="prettifiedQuestionType"
+          :options="QuestionType"
+          track-by="value"
+          :clearable="false"
+          :label="$t('vocabulary.type')"
+          @input="handleQuestionTypeChange($event.value)"
+        ></wt-select>
+      </div>
+      <component
+        :is="QuestionTypeComponent"
+        :question="question"
+        mode="write"
+        @change:question="emit('change:question', $event)"
+      ></component>
+    </section>
+  </article>
+</template>
+
+<script setup>
+import set from 'lodash/set';
+import cloneDeep from 'lodash/cloneDeep';
+import { computed } from 'vue';
+import WtTooltip from '../../../components/atoms/wt-tooltip/wt-tooltip.vue';
+import WtSwitcher from '../../../components/molecules/wt-switcher/wt-switcher.vue';
+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 { generateQuestionScoreSchema } from '../schemas/AuditFormQuestionScoreSchema';
+import { generateQuestionOptionsSchema } from '../schemas/AuditFormQuestionOptionsSchema';
+
+const props = defineProps({
+  question: {
+    type: Object,
+    required: true,
+  },
+  disableDelete: {
+    type: Boolean,
+    default: true,
+  },
+  v: {
+    type: Object,
+  },
+});
+
+const emit = defineEmits([
+  'change:question',
+  'copy',
+  'delete',
+]);
+
+const QuestionType = [
+  { value: 'options', locale: 'webitelUI.auditForm.type.options' },
+  { value: 'score', locale: 'webitelUI.auditForm.type.score' },
+];
+
+const prettifiedQuestionType = computed(() => QuestionType.find(({ value }) => value === props.question.type));
+
+const QuestionTypeComponent = computed(() => {
+  if (props.question.type === 'options') return AuditFormQuestionOptions;
+  if (props.question.type === 'score') return AuditFormQuestionScore;
+  return null;
+});
+
+function updateQuestion({ path, value }) {
+  const question = set(cloneDeep(props.question), path, value);
+  emit('change:question', question);
+}
+
+function handleQuestionTypeChange(type) {
+  const question = cloneDeep(props.question);
+  if (type === 'options') {
+    Object.assign(question, generateQuestionOptionsSchema());
+  } else if (type === 'score') {
+    Object.assign(question, generateQuestionScoreSchema());
+  }
+  emit('change:question', question);
+}
+
+</script>
+
+<style lang="scss" scoped>
+.audit-form-question.audit-form-question-write {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-sm);
+  box-shadow: var(--elevation-3);
+}
+
+.audit-form-question-write-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+
+  &__actions {
+    display: flex;
+    gap: var(--spacing-sm);
+  }
+}
+
+.audit-form-question-write-content-question {
+  display: grid;
+  grid-template-columns: 3fr 1fr;
+  gap: var(--spacing-sm);
+  margin-right: calc(24px + var(--spacing-sm)); // delete icon action for type "options"
+  margin-bottom: var(--spacing-sm);
+}
+</style>

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

@@ -0,0 +1,102 @@
+<template>
+  <component
+    class="audit-form-question"
+    :class="[
+     `audit-form-question--mode-${mode}`
+    ]"
+    v-clickaway="saveQuestion"
+    :is="component"
+    :question="question"
+    :result="result"
+    :v="v$"
+    :disable-dragging="mode === 'fill'"
+    :disable-delete="disableDelete"
+    @copy="emits('copy')"
+    @delete="emits('delete')"
+    @activate="activateQuestion"
+    @change:question="emits('update:question', $event)"
+    @change:result="emits('update:result', $event)"
+  ></component>
+</template>
+
+<script setup>
+import { useVuelidate } from '@vuelidate/core';
+import { required } from '@vuelidate/validators';
+import { computed, 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';
+
+const props = defineProps({
+  question: {
+    type: Object,
+    required: true,
+  },
+  result: {
+    type: Object,
+  },
+  mode: {
+    type: String,
+  },
+  disableDelete: {
+    type: Boolean,
+    default: true,
+  },
+});
+
+const emits = defineEmits([
+  'copy',
+  'delete',
+  'update:question',
+  'update:result',
+]);
+
+const QuestionState = {
+  SAVED: 'saved',
+  EDIT: 'edit',
+};
+
+const state = ref(QuestionState.SAVED);
+
+const { question } = toRefs(props);
+
+// validate only "create" mode
+const v$ = useVuelidate(computed(() => (
+  (props.mode === 'create')
+    ? {
+      question: {
+        text: { required },
+      },
+      $autoDirty: true,
+    } : {})), { question });
+
+const component = computed(() => {
+  if (props.mode === 'create') {
+    if (state.value === QuestionState.SAVED) return QuestionRead;
+    return QuestionWrite;
+  }
+  return QuestionRead;
+});
+
+function saveQuestion() {
+  state.value = QuestionState.SAVED;
+}
+
+function activateQuestion() {
+  if (props.mode !== 'create') return;
+  state.value = QuestionState.EDIT;
+}
+</script>
+
+<style lang="scss" scoped>
+.audit-form-question {
+  padding: var(--spacing-sm);
+  background: var(--main-color);
+  border-radius: var(--border-radius);
+  box-shadow: var(--elevation-1);
+
+  &--mode-create.audit-form-question-read {
+    cursor: pointer;
+  }
+}
+</style>