@webitel/ui-sdk 0.1.2 → 0.1.3-vite

package/src/modules/AgentStatusSelect/components/_internals/wt-cc-pause-cause-popup.vue

@@ -0,0 +1,122 @@
+<template>
+  <wt-popup
+    class="wt-cc-pause-cause-popup"
+    min-width="480"
+    @close="close"
+  >
+    <template v-slot:title>
+      {{ $t('webitelUI.agentStatusSelect.pauseCausePopup.title') }}
+    </template>
+    <template v-slot:main>
+      <form @submit.prevent="setPause">
+        <ul>
+          <li
+            class="wt-cc-pause-cause-popup-option"
+            v-for="(option) of pauseCause"
+            :key="option.id"
+          >
+            <wt-radio
+              class="wt-cc-pause-cause-popup-option__radio"
+              :selected="selected.id"
+              :value="option.id"
+              :label="option.name"
+              @input="select(option)"
+            ></wt-radio>
+            <div class="wt-cc-pause-cause-popup-option__limits-wrapper">
+              <span
+                :class="{
+                    'wt-cc-pause-cause-popup-option__duration--overflow': option.isOverflow,
+                 }"
+              >
+                {{ option.duration }}
+              </span>
+              /
+              <span>{{ option.limit }}</span>
+            </div>
+          </li>
+        </ul>
+      </form>
+    </template>
+    <template v-slot:actions>
+      <wt-button
+        :disabled="!selected"
+        @click="setPause"
+      >{{ $t('reusable.ok') }}
+      </wt-button>
+      <wt-button
+        color="secondary"
+        @click="close"
+      >{{ $t('reusable.cancel') }}
+      </wt-button>
+    </template>
+  </wt-popup>
+</template>
+
+<script setup>
+import { computed, ref, toRef } from 'vue';
+import { useI18n } from 'vue-i18n';
+import { useRepresentableAgentPauseCause } from '../../../../composables/useRepresentableAgentPauseCause/useRepresentableAgentPauseCause';
+
+const props = defineProps({
+  options: {
+    type: Array,
+    default: () => [],
+  },
+});
+
+const emit = defineEmits(['change', 'close']);
+
+const options = toRef(props, 'options');
+
+const selected = ref('');
+
+const { t } = useI18n();
+
+const { representablePauseCause } = useRepresentableAgentPauseCause(options);
+
+const pauseCause = computed(() => representablePauseCause.value.map((cause) => ({
+  ...cause,
+  duration: cause.isOverflow
+    ? `-${cause.durationMin - cause.limitMin} ${t('webitelUI.agentStatusSelect.pauseCausePopup.min')}`
+    : `${cause.durationMin} ${t('webitelUI.agentStatusSelect.pauseCausePopup.min')}`,
+  limit: cause.limitMin
+    ? `${cause.limitMin} ${t('webitelUI.agentStatusSelect.pauseCausePopup.min')}`
+    : t('webitelUI.agentStatusSelect.pauseCausePopup.unlimited'),
+})));
+
+function select(option) {
+  selected.value = option;
+}
+
+function close() {
+  emit('close');
+}
+
+function setPause() {
+  emit('change', selected.value.name);
+  close();
+}
+</script>
+
+<style lang="scss" scoped>
+.wt-cc-pause-cause-popup-option {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+
+  &:not(:last-child) {
+    margin-bottom: var(--spacing-sm);
+  }
+}
+
+.wt-cc-pause-cause-popup-option__limits-wrapper {
+  & > span {
+    @extend %typo-caption;
+    padding: 6px 10px;
+  }
+
+  .wt-cc-pause-cause-popup-option__duration--overflow {
+    color: var(--false-color);
+  }
+}
+</style>

package/src/modules/AgentStatusSelect/components/_internals/wt-cc-status-select-error-popup.vue

@@ -0,0 +1,55 @@
+<template>
+  <wt-popup
+    class="wt-cc-status-select-error-popup"
+    min-width="480"
+    @close="close"
+  >
+    <template v-slot:header>
+      {{ $t('webitelUI.agentStatusSelect.statusSelectErrorPopup.title') }}
+    </template>
+    <template v-slot:main>
+      <article class="wt-cc-status-select-error-popup__main-wrapper">
+        <wt-icon
+          icon="attention"
+          color="danger"
+        ></wt-icon>
+        <p class="wt-cc-status-select-error-popup__message">
+          {{ $t('webitelUI.agentStatusSelect.statusSelectErrorPopup.message') }}
+        </p>
+      </article>
+    </template>
+    <template v-slot:actions>
+      <wt-button
+        color="secondary"
+        @click="close"
+      >{{ $t('reusable.ok') }}
+      </wt-button>
+    </template>
+  </wt-popup>
+</template>
+
+<script setup>
+const props = defineProps({
+  error: {
+    type: Object,
+    required: true,
+  },
+});
+
+const emit = defineEmits(['close']);
+
+function close() {
+  emit('close');
+}
+
+</script>
+
+<style lang="scss" scoped>
+.wt-cc-status-select-error-popup__main-wrapper {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  gap: var(--spacing-sm);
+}
+</style>

package/src/modules/AgentStatusSelect/components/wt-cc-agent-status-select.vue

@@ -0,0 +1,107 @@
+<template>
+  <article class="wt-cc-agent-status-select">
+    <wt-status-select
+      :status="status"
+      :status-duration="statusDuration"
+      @change="handleStatusSelectInput"
+    ></wt-status-select>
+    <pause-cause-popup
+      v-if="isPauseCausePopup"
+      :options="pauseCauses"
+      @change="handlePauseCauseInput"
+      @close="closePauseCausePopup"
+    ></pause-cause-popup>
+    <status-select-error-popup
+      v-if="error"
+      :error="error"
+      @close="error = null"
+    ></status-select-error-popup>
+  </article>
+</template>
+
+<script setup>
+import { ref } from 'vue';
+import { useStore } from 'vuex';
+import { PauseNotAllowedError } from 'webitel-sdk';
+import AgentStatus from '../../../enums/AgentStatus/AgentStatus.enum';
+import AgentStatusAPIFactory from '../api/agent-status';
+import PauseCauseAPIFactory from '../api/pause-cause';
+import PauseCausePopup from './_internals/wt-cc-pause-cause-popup.vue';
+import StatusSelectErrorPopup from './_internals/wt-cc-status-select-error-popup.vue';
+
+const props = defineProps({
+  agentId: {
+    type: [String, Number],
+    required: true,
+  },
+  status: {
+    // can be undefined, is agent wasn't loaded yet
+    default: AgentStatus.OFFLINE,
+  },
+  statusDuration: {
+    type: [Number, String],
+    default: 0,
+  },
+});
+
+const emit = defineEmits(['changed']);
+
+const { api } = useStore().state;
+const AgentStatusAPI = AgentStatusAPIFactory(api);
+const PauseCauseAPI = PauseCauseAPIFactory(api);
+
+const isPauseCausePopup = ref(false);
+const pauseCauses = ref([]);
+const error = ref(null);
+
+function openPauseCausePopup() {
+  isPauseCausePopup.value = true;
+}
+
+function closePauseCausePopup() {
+  isPauseCausePopup.value = false;
+}
+
+async function loadPauseCauses() {
+  const response = await PauseCauseAPI.getList({ agentId: props.agentId });
+  pauseCauses.value = response.items;
+}
+
+async function updateStatus({ agentId, status, pauseCause }) {
+  return AgentStatusAPI.patch({ agentId, status, pauseCause });
+}
+
+async function changeStatus({ status, pauseCause }) {
+  try {
+    const statusPayload = { agentId: props.agentId, status, pauseCause };
+    await updateStatus(statusPayload);
+    emit('changed', statusPayload);
+  } catch (err) {
+    if (err.response.data.id === PauseNotAllowedError.id) error.value = err;
+    throw err;
+  }
+}
+
+async function handleStatusSelectInput(status) {
+  if (status === AgentStatus.PAUSE) {
+    await loadPauseCauses();
+    if (pauseCauses.value.length) {
+      openPauseCausePopup();
+      return;
+    }
+  }
+  if (status === props.status) return;
+  await changeStatus({ status });
+}
+
+function handlePauseCauseInput(pauseCause) {
+  const status = AgentStatus.PAUSE;
+  return changeStatus({ status, pauseCause });
+}
+</script>
+
+<style lang="scss" scoped>
+.wt-cc-agent-status-select .wt-status-select {
+  width: 150px;
+}
+</style>

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,60 @@
+import { shallowMount } from '@vue/test-utils';
+import { EngineAuditQuestionType } from 'webitel-sdk';
+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: EngineAuditQuestionType.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: EngineAuditQuestionType.Option });
+    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,70 @@
+import { mount } from '@vue/test-utils';
+import { ref } from 'vue';
+import AuditForm from '../audit-form.vue';
+import { generateQuestionSchema } from '../../schemas/AuditFormQuestionSchema';
+import {
+  useDestroyableSortable,
+} from '../../../../composables/useDestroyableSortable/useDestroyableSortable';
+
+jest.mock('../../../../composables/useDestroyableSortable/useDestroyableSortable');
+
+useDestroyableSortable.mockImplementation(() => ({ reloadSortable: ref(false) }));
+
+describe('AuditForm', () => {
+  it('renders a component', async () => {
+    const wrapper = mount(AuditForm, {
+      props: {
+        mode: '',
+        questions: [],
+      },
+    });
+    expect(wrapper.isVisible()).toBe(true);
+  });
+  it('add question button triggers update question event', async () => {
+    const wrapper = mount(AuditForm, {
+      props: {
+        mode: 'create',
+        questions: [],
+      },
+    });
+    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', async () => {
+    const wrapper = mount(AuditForm, {
+      props: {
+        mode: 'create',
+        questions: [generateQuestionSchema()],
+      },
+    });
+    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', async () => {
+    const question = generateQuestionSchema();
+    const wrapper = mount(AuditForm, {
+      props: {
+        mode: 'create',
+        questions: [question],
+      },
+    });
+    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 = mount(AuditForm, {
+      props: {
+        mode: 'fill',
+        questions: [generateQuestionSchema(), generateQuestionSchema(), generateQuestionSchema()],
+      },
+    });
+    expect(wrapper.emitted()['update:result'][0][0]).toEqual([{}, {}, {}]);
+  });
+});

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

@@ -0,0 +1,132 @@
+<template>
+  <article
+    class="audit-form-question-read"
+    :class="{
+      'audit-form-question-read--filled': isResult && result.score != null,
+      'audit-form-question-read--readonly': readonly,
+    }"
+    @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.question }}</p>
+      <wt-icon
+        class="audit-form-question-read__drag-icon"
+        v-if="!disableDragging && !first"
+        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="!readonly && emit('change:result', $event)"
+      ></component>
+      <div
+        v-show="isResult"
+        class="audit-form-question--clear"
+        @click="emit('change:result', {})"
+      >{{ $t('webitelUI.auditForm.clearSelection') }}</div>
+    </section>
+  </article>
+</template>
+
+<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/wt-icon/wt-icon.vue';
+
+const props = defineProps({
+  question: {
+    type: Object,
+    required: true,
+  },
+  result: {
+    type: [Object, null],
+    required: true,
+  },
+  disableDragging: {
+    type: Boolean,
+    default: false,
+  },
+  readonly: {
+    type: Boolean,
+    default: false,
+  },
+  first: {
+    type: Boolean,
+    default: false,
+  },
+});
+
+const emit = defineEmits([
+  'change:result',
+  'activate',
+]);
+
+const QuestionTypeComponent = computed(() => {
+  if (props.question.type === EngineAuditQuestionType.Option) return AuditFormQuestionOptions;
+  if (props.question.type === EngineAuditQuestionType.Score) return AuditFormQuestionScore;
+  return null;
+});
+
+const isResult = computed(() => !isEmpty(props.result));
+</script>
+
+<style lang="scss" scoped>
+.audit-form-question-read {
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-sm);
+  border: 1px solid transparent;
+  transition: var(--transition);
+
+  &:not(.audit-form-question-read--readonly) {
+    &:hover,
+    &:focus-within {
+      border: 1px solid var(--primary-color);
+    }
+  }
+
+  &--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);
+    }
+  }
+}
+.audit-form-question--clear {
+  margin-top: var(--spacing-sm);;
+  cursor: pointer;
+  color: var(--link-color);
+}
+</style>