@webitel/ui-sdk 0.1.2 → 0.1.3-vite

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

@@ -0,0 +1,154 @@
+<template>
+  <article class="audit-form-question-write">
+    <header class="audit-form-question-write-header">
+      <wt-switcher
+        :value="question.required"
+        :label="$t('reusable.required')"
+        :disabled="first"
+        @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="first"
+              @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.question"
+          :label="$t('webitelUI.auditForm.question')"
+          :v="v.question.question"
+          required
+          prevent-trim
+          @input="updateQuestion({ path: 'question', value: $event })"
+        ></wt-input>
+        <wt-select
+          :value="prettifiedQuestionType"
+          :options="QuestionType"
+          track-by="value"
+          :clearable="false"
+          :label="$t('webitelUI.auditForm.answerType')"
+          @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 { EngineAuditQuestionType } from 'webitel-sdk';
+import WtTooltip from '../../../components/wt-tooltip/wt-tooltip.vue';
+import WtSwitcher from '../../../components/wt-switcher/wt-switcher.vue';
+import WtIconBtn from '../../../components/wt-icon-btn/wt-icon-btn.vue';
+import WtInput from '../../../components/wt-input/wt-input.vue';
+import WtSelect from '../../../components/wt-select/wt-select.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';
+
+const props = defineProps({
+  question: {
+    type: Object,
+    required: true,
+  },
+  first: {
+    type: Boolean,
+    default: false,
+  },
+  v: {
+    type: Object,
+  },
+});
+
+const emit = defineEmits([
+  'change:question',
+  'copy',
+  'delete',
+]);
+
+const QuestionType = [
+  { value: EngineAuditQuestionType.Option, locale: 'webitelUI.auditForm.type.options' },
+  { value: EngineAuditQuestionType.Score, locale: 'webitelUI.auditForm.type.score' },
+];
+
+const prettifiedQuestionType = computed(() => QuestionType.find(({ value }) => value === props.question.type));
+
+const QuestionTypeComponent = computed(() => {
+  if (props.question.type === EngineAuditQuestionType.Option) return AuditFormQuestionOptions;
+  if (props.question.type === EngineAuditQuestionType.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 === EngineAuditQuestionType.Option) {
+    Object.assign(question, generateQuestionOptionsSchema());
+  } else if (type === EngineAuditQuestionType.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,136 @@
+<template>
+  <component
+    :is="component"
+    v-clickaway="saveQuestion"
+    :class="[
+     `audit-form-question--mode-${mode}`,
+     {
+       'audit-form-question--answered': isResult,
+     },
+     {
+       'audit-form-question--sort-ignore': first && mode === 'fill'
+     }
+    ]"
+    :disable-dragging="mode === 'fill'"
+    :first="first"
+    :question="question"
+    :readonly="readonly"
+    :result="result"
+    :v="v$"
+    class="audit-form-question"
+    @activate="activateQuestion"
+    @copy="emits('copy')"
+    @delete="emits('delete')"
+    @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, 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';
+
+const props = defineProps({
+  question: {
+    type: Object,
+    required: true,
+  },
+  result: {
+    type: Object,
+  },
+  mode: {
+    type: String,
+  },
+  first: {
+    type: Boolean,
+    default: false,
+  },
+  readonly: {
+    type: Boolean,
+    default: false,
+  },
+});
+
+const emits = defineEmits([
+  'copy',
+  'delete',
+  'update:question',
+  'update:result',
+]);
+
+const QuestionState = {
+  SAVED: 'saved',
+  EDIT: 'edit',
+};
+
+const state = ref(QuestionState.SAVED);
+
+// is needed for useVuelidate, because props.question/props.result isn't reactive
+const { question, result } = toRefs(props);
+
+const v$ = useVuelidate(computed(() => (
+  (props.mode === 'create')
+    ? {
+      question: {
+        question: { required },
+      },
+    } : {
+      result: {
+        required: (value) => (question.value.required ? !isEmpty(value) : true),
+      },
+    })), { question, result }, { $autoDirty: true });
+
+const component = computed(() => {
+  if (props.readonly) return QuestionRead;
+  if (props.mode === 'create') {
+    if (state.value === QuestionState.SAVED) return QuestionRead;
+    return QuestionWrite;
+  }
+  return QuestionRead;
+});
+
+const isResult = computed(() => !isEmpty(props.result));
+
+function saveQuestion() {
+  state.value = QuestionState.SAVED;
+}
+
+function activateQuestion() {
+  if (props.mode !== 'create') return;
+  state.value = QuestionState.EDIT;
+}
+
+defineExpose({ activateQuestion });
+
+// initialize validations
+onMounted(() => {
+  v$.value.$touch();
+});
+</script>
+
+<style lang="scss" scoped>
+.audit-form-question {
+  padding: var(--spacing-sm);
+  border-radius: var(--border-radius);
+  background: var(--main-color);
+  box-shadow: var(--elevation-1);
+
+  // override audit-form-question-read-wrapper specificity for hover
+  &.audit-form-question--answered {
+    background: var(--secondary-color-50);
+    &:hover,
+    &:focus-within {
+      border-color: transparent;
+    }
+  }
+
+  &--mode-create.audit-form-question-read {
+    cursor: pointer;
+  }
+}
+</style>

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

@@ -0,0 +1,183 @@
+<template>
+  <section class="audit-form">
+    <div
+      class="audit-form__sortable-wrapper"
+      ref="sortableWrapper"
+      v-if="!reloadSortable"
+    >
+      <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"
+        @copy="copyQuestion({ question, key })"
+        @delete="deleteQuestion({ question, key})"
+        @update:question="handleQuestionUpdate({ key, value: $event })"
+        @update:result="handleResultUpdate({ key, value: $event })"
+      ></audit-form-question>
+    </div>
+    <wt-button
+      class="audit-form__add-button"
+      v-if="mode === 'create' && !readonly"
+      :disabled="isInvalidForm"
+      @click="addQuestion"
+    >{{ $t('webitelUI.auditForm.addQuestion') }}
+    </wt-button>
+  </section>
+</template>
+
+<script setup>
+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/useDestroyableSortable';
+import AuditFormQuestion from './audit-form-question.vue';
+import WtButton from '../../../components/wt-button/wt-button.vue';
+import { generateQuestionSchema } from '../schemas/AuditFormQuestionSchema';
+
+const props = defineProps({
+  mode: {
+    type: String,
+    required: true,
+    /*
+    * Available options: ['create', 'fill']
+    *  */
+  },
+  questions: {
+    type: Array,
+    required: true,
+  },
+  result: {
+    type: Array,
+  },
+  readonly: {
+    type: Boolean,
+    default: false,
+  },
+});
+
+const emit = defineEmits([
+  'update:questions',
+  'update:result',
+  'update:validation',
+]);
+
+const v$ = useVuelidate();
+
+const isInvalidForm = computed(() => !!v$.value.$errors.length);
+const auditQuestions = ref(null);
+const isQuestionAdded = reactive({ value: false, index: null });
+
+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);
+  isQuestionAdded.value = true;
+  isQuestionAdded.index = index || 'last';
+  await emit('update:questions', questions);
+}
+
+function handleQuestionUpdate({ key, value }) {
+  const questions = [...props.questions];
+  questions[key] = value;
+  emit('update:questions', questions);
+}
+
+function copyQuestion({ question, key }) {
+  const questions = [...props.questions];
+  questions.splice(key + 1, 0, cloneDeep(question));
+  emit('update:questions', questions);
+}
+
+function deleteQuestion({ key }) {
+  const questions = [...props.questions];
+  questions.splice(key, 1);
+  emit('update:questions', questions);
+}
+
+function changeQuestionsOrder({ oldIndex, newIndex }) {
+  if (newIndex === 0) return;
+  const questions = [...props.questions];
+  const [el] = questions.splice(oldIndex, 1);
+  questions.splice(newIndex, 0, el);
+  emit('update:questions', questions);
+}
+
+function handleResultUpdate({ key, value }) {
+  const result = [...props.result];
+  result[key] = value;
+  emit('update:result', result);
+}
+
+function initResult() {
+  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);
+
+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 });
+  },
+});
+
+watch(v$, () => emit('update:validation', { invalid: isInvalidForm.value, v$: v$.value }));
+watchEffect(initResult);
+watch(() => props.questions, () => {
+  if (!isQuestionAdded.value) return;
+  atQuestionAdded();
+});
+
+onMounted(() => {
+  initQuestions();
+});
+</script>
+
+<style lang="scss" scoped>
+.audit-form {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-sm);
+
+  &__sortable-wrapper {
+    display: contents;
+  }
+}
+
+.audit-form__add-button {
+  align-self: flex-end;
+}
+</style>

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.attributes().icon).toBe('bucket');
+    deleteBtn.vm.$emit('click');
+    expect(wrapper.emitted().delete).toBeTruthy();
+  });
+});

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

@@ -0,0 +1,45 @@
+import { shallowMount, mount } from '@vue/test-utils';
+import AuditFormQuestionOptions from '../audit-form-question-options.vue';
+
+describe('AuditFormQuestionOptions', () => {
+  it('renders a component', () => {
+    const wrapper = shallowMount(AuditFormQuestionOptions, {
+      props: {
+        question: {},
+      },
+    });
+    expect(wrapper.isVisible()).toBe(true);
+  });
+  it('adds new question option at "add" button click', () => {
+    const wrapper = shallowMount(AuditFormQuestionOptions, {
+      props: {
+        question: { options: [{}] },
+        mode: 'write',
+      },
+    });
+    wrapper.findComponent('.audit-form-question-options-write__add-button').vm.$emit('click');
+    expect(wrapper.emitted()['change:question'][0][0].options.length).toBe(2);
+  });
+  it('deletes existing question option at "delete" icon-btn click', () => {
+    const wrapper = mount(AuditFormQuestionOptions, {
+      props: {
+        question: { options: [{}] },
+        mode: 'write',
+      },
+    });
+    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', () => {
+    const score = 11;
+    const wrapper = shallowMount(AuditFormQuestionOptions, {
+      props: {
+        question: { options: [{ score }] },
+        mode: 'read',
+      },
+    });
+    wrapper.findComponent({ name: 'wt-radio' }).vm.$emit('input', { score });
+    expect(wrapper.emitted()['change:result'][0][0]).toEqual({ score });
+  });
+});

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

@@ -0,0 +1,89 @@
+<template>
+  <div class="audit-form-question-options-write-row">
+    <wt-input
+      :label="$t('webitelUI.auditForm.option', 1)"
+      :value="option.name"
+      :v="v$.option.name"
+      prevent-trim
+      @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 class="audit-form-question-options-write-row__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/wt-tooltip/wt-tooltip.vue';
+import WtIconBtn from '../../../../../components/wt-icon-btn/wt-icon-btn.vue';
+import WtInput from '../../../../../components/wt-input/wt-input.vue';
+import decimalValidator from '../../../../../validators/decimalValidator';
+
+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),
+          decimalValidator: decimalValidator(2),
+        },
+      },
+    })),
+  { option },
+  { $autoDirty: true },
+);
+
+// init validation
+onMounted(() => v$.value.$touch());
+</script>
+
+<style lang="scss" scoped>
+.audit-form-question-options-write-row {
+  display: grid;
+  grid-template-columns: 3fr 1fr 24px;
+  gap: var(--spacing-sm);
+
+  &__tooltip {
+    padding-top: var(--spacing-md);
+  }
+}
+</style>