@webitel/ui-sdk 0.1.3-vue3 → 0.1.4-vite

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>

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

@@ -0,0 +1,97 @@
+<template>
+  <article class="audit-form-question-options">
+    <div
+      v-if="mode === 'write'"
+      class="audit-form-question-options-write"
+    >
+      <options-write-row
+        v-for="(option, key) of question.options"
+        :key="key"
+        :option="option"
+        :first="key === 0"
+        @update:option="updateQuestion({ path: `options[${key}]`, value: $event })"
+        @delete="deleteQuestionOption({ key })"
+      ></options-write-row>
+      <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="opt of question.options"
+        :key="opt.score+opt.name"
+        :label="opt.name"
+        :selected="result"
+        :value="opt"
+        @input="emit('change:result', $event)"
+      ></wt-radio>
+    </div>
+    <div v-else>Unknown mode: {{ mode }}</div>
+  </article>
+</template>
+
+<script setup>
+import OptionsWriteRow from './audit-form-question-options-write-row.vue';
+import WtButton from '../../../../../components/wt-button/wt-button.vue';
+import WtRadio from '../../../../../components/wt-radio/wt-radio.vue';
+import updateObject from '../../../../../scripts/updateObject';
+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-read {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-sm);
+}
+</style>

package/src/modules/AuditForm/components/questions/score/__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/score/audit-form-question-score.vue

@@ -0,0 +1,132 @@
+<template>
+  <article class="audit-form-question-score">
+    <div
+      v-if="mode === 'write'"
+      class="audit-form-question-score-write"
+    >
+      <wt-input
+        :value="question.min"
+        :v="v$.question.min"
+        :number-min="0"
+        :number-max="19"
+        :label="$t('reusable.from')"
+        type="number"
+        required
+        @input="updateQuestion({ path: 'min', value: $event })"
+      ></wt-input>
+      <wt-input
+        :value="question.max"
+        :v="v$.question.max"
+        :number-min="1"
+        :number-max="20"
+        :label="$t('reusable.to')"
+        type="number"
+        required
+        @input="updateQuestion({ path: 'max', value: $event })"
+      ></wt-input>
+    </div>
+    <div
+      v-else-if="mode === 'read'"
+      class="audit-form-question-score-read"
+    >
+      <wt-radio
+        v-for="(value) of scoreRange"
+        :key="value"
+        :label="`${value}`"
+        :value="value"
+        :selected="isResult ? result.score : null"
+        @input="emit('change:result', { score: value })"
+      ></wt-radio>
+    </div>
+  </article>
+</template>
+
+<script setup>
+import { useVuelidate } from '@vuelidate/core';
+import { maxValue, minValue, required, integer } from '@vuelidate/validators';
+import { computed, onMounted, toRefs } from 'vue';
+import isEmpty from '../../../../../scripts/isEmpty';
+import updateObject from '../../../../../scripts/updateObject';
+import WtRadio from '../../../../../components/wt-radio/wt-radio.vue';
+import WtInput from '../../../../../components/wt-input/wt-input.vue';
+
+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',
+]);
+
+// is needed for useVuelidate, because props.question/props.result isn't reactive
+const { question } = toRefs(props);
+
+const v$ = useVuelidate(
+  computed(() => (
+    {
+      question: {
+        min: {
+          minValue: minValue(0),
+          maxValue: maxValue(9),
+          required,
+          integer,
+        },
+        max: {
+          minValue: minValue(1),
+          maxValue: maxValue(10),
+          required,
+          integer,
+        },
+      },
+    })),
+  { question },
+  { $autoDirty: true },
+);
+
+const scoreRange = computed(() => {
+  if (props.question.min > props.question.max) return [];
+  const result = [];
+  let i = +props.question.min;
+  do {
+    result.push(i);
+    i += 1;
+  } while (i <= props.question.max);
+  return result;
+});
+
+const isResult = computed(() => !isEmpty(props.result));
+
+function updateQuestion({ path, value }) {
+  emit('change:question', updateObject({ obj: props.question, path, value }));
+}
+
+// init validation
+onMounted(() => v$.value.$touch());
+</script>
+
+<style lang="scss" scoped>
+.audit-form-question-score-write {
+  display: grid;
+  grid-template-columns: 100px 100px;
+  gap: var(--spacing-sm);
+  margin-right: calc(var(--spacing-sm) + 24px); // icon offset
+}
+
+.audit-form-question-score-read {
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--spacing-sm);
+}
+</style>

package/src/modules/AuditForm/schemas/AuditFormQuestionOptionsSchema.js

@@ -0,0 +1,13 @@
+import { EngineAuditQuestionType } from 'webitel-sdk';
+
+export const generateOption = () => ({
+  name: '',
+  score: 10,
+});
+
+export const generateQuestionOptionsSchema = () => ({
+  type: EngineAuditQuestionType.Option,
+  options: [
+    generateOption(),
+  ],
+});

package/src/modules/AuditForm/schemas/AuditFormQuestionSchema.js

@@ -0,0 +1,8 @@
+import { generateQuestionScoreSchema } from './AuditFormQuestionScoreSchema';
+
+// eslint-disable-next-line import/prefer-default-export
+export const generateQuestionSchema = ({ required = true } = {}) => ({
+  required,
+  question: '',
+  ...generateQuestionScoreSchema(),
+});

package/src/modules/AuditForm/schemas/AuditFormQuestionScoreSchema.js

@@ -0,0 +1,8 @@
+import { EngineAuditQuestionType } from 'webitel-sdk';
+
+// eslint-disable-next-line import/prefer-default-export
+export const generateQuestionScoreSchema = () => ({
+  type: EngineAuditQuestionType.Score,
+  min: 1,
+  max: 5,
+});

package/src/modules/CardStoreModule/composables/useCardStore.js

@@ -0,0 +1,55 @@
+import { computed } from 'vue';
+import { useStore } from 'vuex';
+import getNamespacedState from '../../../store/helpers/getNamespacedState';
+
+// eslint-disable-next-line import/prefer-default-export
+export const useCardStore = (namespace) => {
+  const store = useStore();
+
+  const cardNamespace = `${namespace}/card`;
+
+  const id = computed(() => getNamespacedState(store.state, cardNamespace).itemId);
+  const itemInstance = computed(() => getNamespacedState(store.state, cardNamespace).itemInstance);
+
+  function loadItem(payload) {
+    return store.dispatch(`${cardNamespace}/LOAD_ITEM`, payload);
+  }
+
+  function addItem(payload) {
+    return store.dispatch(`${cardNamespace}/ADD_ITEM`, payload);
+  }
+
+  function updateItem(payload) {
+    return store.dispatch(`${cardNamespace}/UPDATE_ITEM`, payload);
+  }
+
+  function setId(payload) {
+    return store.dispatch(`${cardNamespace}/SET_ITEM_ID`, payload);
+  }
+
+  function resetState() {
+    return store.dispatch(`${cardNamespace}/RESET_ITEM_STATE`);
+  }
+
+  function setItemProp(payload) {
+    return store.dispatch(`${cardNamespace}/SET_ITEM_PROPERTY`, payload);
+  }
+
+  function deleteItem(payload) {
+    return store.dispatch(`${cardNamespace}/DELETE_ITEM`, payload);
+  }
+
+  return {
+    namespace: cardNamespace,
+    id,
+    itemInstance,
+
+    loadItem,
+    addItem,
+    updateItem,
+    setId,
+    resetState,
+    setItemProp,
+    deleteItem,
+  };
+};

package/src/modules/CardStoreModule/store/CardStoreModule.js

@@ -0,0 +1,84 @@
+import deepCopy from 'deep-copy';
+import set from 'lodash/set';
+import BaseStoreModule from '../../../store/BaseStoreModules/BaseStoreModule';
+
+export default class CardStoreModule extends BaseStoreModule {
+  state = {
+    itemId: 0,
+    itemInstance: {},
+  };
+
+  actions = {
+    SET_PARENT_ITEM_ID: (context, id) => {
+      context.commit('SET_PARENT_ITEM_ID', id);
+    },
+    SET_ITEM_ID: (context, id) => {
+      if (id !== 'new') context.commit('SET_ITEM_ID', id);
+      else context.commit('SET_ITEM_ID', 0);
+    },
+    LOAD_ITEM: async (context) => {
+      if (context.state.itemId) {
+        const item = await context.dispatch('api/GET_ITEM', { context });
+        context.commit('SET_ITEM', item);
+      }
+    },
+    ADD_ITEM: async (context) => {
+      if (!context.state.itemId) {
+        const { id } = await context.dispatch('api/POST_ITEM', { context });
+        await context.dispatch('SET_ITEM_ID', id);
+        context.dispatch('LOAD_ITEM');
+      }
+    },
+    UPDATE_ITEM: async (context) => {
+      await context.dispatch('api/UPD_ITEM', { context });
+      context.dispatch('LOAD_ITEM');
+    },
+    SET_ITEM_PROPERTY: (context, payload) => {
+      context.commit('SET_ITEM_PROPERTY', payload);
+      context.commit('SET_ITEM_PROPERTY', { path: '_dirty', value: true });
+    },
+    RESET_ITEM_STATE: async (context) => {
+      context.commit('RESET_ITEM_STATE');
+    },
+    DELETE_ITEM: async (context, { id }) => {
+      await context.dispatch('api/DELETE_ITEM', {context, id});
+    },
+  };
+
+  mutations = {
+    SET_PARENT_ITEM_ID: (state, id) => {
+      state.parentId = id;
+    },
+    SET_ITEM_ID: (state, id) => {
+      state.itemId = id;
+    },
+    SET_ITEM_PROPERTY: (state, { prop, value, path }) => {
+      if (path) {
+        set(state.itemInstance, path, value);
+      } else {
+        // DEPRECATED, LEGACY CODE
+        state.itemInstance[prop] = value;
+      }
+    },
+    SET_ITEM: (state, item) => {
+      state.itemInstance = item;
+    },
+    RESET_ITEM_STATE: (state) => {
+      Object.assign(state, deepCopy(this.state));
+    },
+  };
+
+  getModule({
+              state = {},
+              ...rest
+            } = {}) {
+    this.state = {
+      ...this.state,
+      ...state,
+    };
+    return super.getModule({
+      ...rest,
+      state: deepCopy(this.state),
+    });
+  }
+}

package/src/modules/DeleteConfirmationPopup/components/delete-confirmation-popup.vue

@@ -0,0 +1,87 @@
+<template>
+  <wt-popup
+    class="delete-confirmation-popup"
+    min-width="480"
+    @close="close"
+  >
+    <template v-slot:title>{{ $t('webitelUI.deleteConfirmationPopup.title') }}</template>
+    <template v-slot:main>
+      <p>
+        {{ deleteMessage }}
+        {{ $t('webitelUI.deleteConfirmationPopup.undoneActionAlert') }}
+      </p>
+    </template>
+    <template v-slot:actions>
+      <wt-button
+        color="secondary"
+        :disabled="isDeleting"
+        @click="close"
+      >{{ $t('reusable.cancel') }}
+      </wt-button>
+      <wt-button
+        color="danger"
+        :loading="isDeleting"
+        @click="confirm"
+      >{{ $t('reusable.delete') }}
+      </wt-button>
+    </template>
+  </wt-popup>
+</template>
+
+<script setup>
+import { computed, ref } from 'vue';
+import { useI18n } from 'vue-i18n';
+
+const props = defineProps({
+  deleteCount: {
+    type: Number,
+    required: true,
+  },
+  callback: {
+    type: Function,
+    required: true,
+  },
+});
+
+const emit = defineEmits([
+  'close',
+]);
+
+const { t } = useI18n();
+
+const isDeleting = ref(false);
+
+const deleteMessage = computed(() => {
+  if (props.deleteCount === 0) {
+    return t(
+      'webitelUI.deleteConfirmationPopup.askingAlert',
+      2,
+      null,
+      { count: t('webitelUI.deleteConfirmationPopup.deleteAll') },
+    );
+  }
+  return t(
+    'webitelUI.deleteConfirmationPopup.askingAlert',
+    { count: props.deleteCount },
+    null,
+  );
+});
+
+function close() {
+  emit('close');
+}
+
+async function confirm() {
+  try {
+    isDeleting.value = true;
+    await props.callback();
+    close();
+  } finally {
+    isDeleting.value = false;
+  }
+}
+</script>
+
+<style scoped>
+
+</style>

package/src/modules/DeleteConfirmationPopup/composables/useDeleteConfirmationPopup.js

@@ -0,0 +1,28 @@
+import { ref } from 'vue';
+
+// eslint-disable-next-line import/prefer-default-export
+export const useDeleteConfirmationPopup = () => {
+  const isVisible = ref(false);
+  const deleteCount = ref(null);
+  const deleteCallback = ref(null);
+
+  function askDeleteConfirmation({ deleted, callback }) {
+    if (Array.isArray(deleted)) deleteCount.value = deleted.length;
+    else deleteCount.value = 1;
+    isVisible.value = true;
+    deleteCallback.value = callback;
+  }
+
+  function closeDelete() {
+    isVisible.value = false;
+  }
+
+  return {
+    isVisible,
+    deleteCount,
+    deleteCallback,
+
+    askDeleteConfirmation,
+    closeDelete,
+  };
+};