@webitel/ui-sdk 3.0.4 → 3.0.6

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>

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

@@ -0,0 +1,142 @@
+<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"
+        :key="key"
+        :question="question"
+        :result="(result && result[key]) ? result[key] : null"
+        :mode="mode"
+        :disable-delete="questions.length <= 1"
+        @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'"
+      :disabled="isInvalidForm"
+      @click="addQuestion"
+    >{{ $t('webitelUI.auditForm.addQuestion') }}
+    </wt-button>
+  </section>
+</template>
+
+<script setup>
+import cloneDeep from 'lodash/cloneDeep';
+import {
+  watch, watchEffect, ref, computed,
+} from 'vue';
+import { useVuelidate } from '@vuelidate/core';
+import { useDestroyableSortable } from '../composables/useDestroyableSortable';
+import AuditFormQuestion from './audit-form-question.vue';
+import WtButton from '../../../components/atoms/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,
+  },
+});
+
+const emit = defineEmits([
+  'update:questions',
+  'update:result',
+  'update:validation',
+]);
+
+const v$ = useVuelidate();
+
+const isInvalidForm = computed(() => !!v$.value.$errors.length);
+
+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);
+}
+
+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 }) {
+  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(() => null);
+  emit('update:result', result);
+}
+
+const sortableWrapper = ref(null);
+
+const { reloadSortable } = useDestroyableSortable(sortableWrapper, {
+  handle: '.audit-form-question-read__drag-icon',
+  disabled: props.mode !== 'create',
+  onEnd: ({ newIndex, oldIndex }) => {
+    if (newIndex === oldIndex) return;
+    changeQuestionsOrder({ oldIndex, newIndex });
+  },
+});
+
+watch(v$, () => emit('update:validation', v$));
+watchEffect(initResult);
+</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/__tests__/audit-form-question-options.spec.js

@@ -0,0 +1,46 @@
+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 deleteBtn = wrapper.findComponent({ name: 'wt-icon-btn' });
+    expect(deleteBtn.props().icon).toBe('bucket');
+    deleteBtn.vm.$emit('click');
+    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/__tests__/audit-form-question-score.spec.js

@@ -0,0 +1,30 @@
+import { shallowMount } from '@vue/test-utils';
+import AuditFormQuestionScore from '../audit-form-question-score.vue';
+
+describe('AuditFormQuestionScore', () => {
+  it('renders a component', () => {
+    const wrapper = shallowMount(AuditFormQuestionScore, {
+      props: {
+        question: {
+          min: 0,
+          max: 10,
+        },
+      },
+    });
+    expect(wrapper.isVisible()).toBe(true);
+  });
+  it('emits result change with selected radio score', () => {
+    const min = 8;
+    const wrapper = shallowMount(AuditFormQuestionScore, {
+      props: {
+        question: {
+          min,
+          max: 10,
+        },
+        mode: 'read',
+      },
+    });
+    wrapper.findComponent({ name: 'wt-radio' }).vm.$emit('input');
+    expect(wrapper.emitted()['change:result'][0][0]).toEqual({ score: min });
+  });
+});

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

@@ -0,0 +1,124 @@
+<template>
+  <article class="audit-form-question-options">
+    <div
+      v-if="mode === 'write'"
+      class="audit-form-question-options-write"
+    >
+      <div
+        v-for="({ text, score }, key) of question.options"
+        :key="key"
+        class="audit-form-question-options-write-row"
+      >
+        <wt-input
+          :value="text"
+          :label="$tc('webitelUI.auditForm.option', 1)"
+          @input="updateQuestion({ path: `options[${key}].text`, value: $event })"
+        ></wt-input>
+        <wt-input
+          :value="score"
+          :label="$tc('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>
+      <wt-button
+        class="audit-form-question-options-write__add-button"
+        @click="addQuestionOption"
+      >{{ $t('reusable.add') }}
+      </wt-button>
+    </div>
+    <div
+      v-else-if="mode === 'read'"
+      class="audit-form-question-options-read"
+    >
+      <wt-radio
+        v-for="({ text, score }) of question.options"
+        :key="score"
+        :label="text"
+        :value="score"
+        :selected="result ? result.score : result"
+        @input="emit('change:result', { score })"
+      ></wt-radio>
+    </div>
+    <div v-else>Unknown mode: {{ mode }}</div>
+  </article>
+</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';
+
+const props = defineProps({
+  question: {
+    type: Object,
+    required: true,
+  },
+  result: {
+    type: Object,
+  },
+  mode: {
+    // options: ['read', 'write']
+    type: String,
+    default: 'read',
+  },
+});
+
+const emit = defineEmits([
+  'change:question',
+  'change:result',
+]);
+
+function updateQuestion({ path, value }) {
+  emit('change:question', updateObject({ obj: props.question, path, value }));
+}
+
+function addQuestionOption() {
+  const options = [...props.question.options, generateOption()];
+  return updateQuestion({ path: 'options', value: options });
+}
+
+function deleteQuestionOption({ key }) {
+  const options = [...props.question.options];
+  options.splice(key, 1);
+  return updateQuestion({ path: 'options', value: options });
+}
+</script>
+
+<style lang="scss" scoped>
+.audit-form-question-options-write {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-sm);
+
+  &__add-button {
+    align-self: flex-start;
+  }
+}
+
+.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;
+  gap: var(--spacing-sm);
+}
+</style>