@webitel/ui-sdk 3.0.4 → 3.0.6

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

@@ -0,0 +1,89 @@
+<template>
+  <article class="audit-form-question-score">
+    <div
+      v-if="mode === 'write'"
+      class="audit-form-question-score-write"
+    >
+      <wt-input
+        :value="question.min"
+        type="number"
+        @input="updateQuestion({ path: 'min', value: $event })"
+      ></wt-input>
+      <wt-input
+        :value="question.max"
+        type="number"
+        @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="result ? result.score : result"
+        @input="emit('change:result', { score: value })"
+      ></wt-radio>
+    </div>
+  </article>
+</template>
+
+<script setup>
+import { computed } from 'vue';
+import updateObject from '../../../../scripts/updateObject';
+import WtRadio from '../../../../components/molecules/wt-radio/wt-radio.vue';
+import WtInput from '../../../../components/molecules/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',
+]);
+
+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;
+});
+
+function updateQuestion({ path, value }) {
+  emit('change:question', updateObject({ obj: props.question, path, value }));
+}
+</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: nowrap;
+  gap: var(--spacing-sm);
+}
+</style>

package/src/modules/AuditForm/composables/useDestroyableSortable.js

@@ -0,0 +1,66 @@
+import Sortable from 'sortablejs';
+import {
+  ref,
+  nextTick,
+  onMounted,
+  onUnmounted,
+} from 'vue';
+
+/**
+ * @param elRef
+ * @param options
+ * @returns {{reloadSortable: Ref<UnwrapRef<boolean>>}}
+ *
+ * @description initializes Sortable on passed element ref and reinitializes it after each reorder
+ *
+ * WHY TO REINITIALIZE SORTABLE AFTER EACH ARRAY REORDER?
+ * Sortable and Vue both changing DOM so that there are collisions
+ * because both Vue and Sortable try to put element to the position. So element is put incorrectly.
+ *
+ * There are 2 vue packages for sortable (vue 2 and vue 3), but I had encountered issues when tried to use them.
+ * Also, it seems to me that they aren't supported now :(
+ *
+ * So that I decided to reinitialize Sortable each time order changes to represent it correctly.
+ * Bad decision, but I haven't come up with a better one
+ */
+
+// eslint-disable-next-line import/prefer-default-export
+export function useDestroyableSortable(elRef, options) {
+  let sortable = null;
+
+  const reloadSortable = ref(false);
+
+  function destroySortable() {
+    return sortable.destroy();
+  }
+
+  function initSortable() {
+    const replaceSortable = async () => {
+      if (!sortable) return;
+      destroySortable();
+      reloadSortable.value = true;
+      await nextTick();
+      reloadSortable.value = false;
+      await nextTick();
+      initSortable();
+    };
+
+    sortable = Sortable.create(elRef.value, {
+      ...options,
+      onEnd: async (e) => {
+        if (options.onEnd) options.onEnd(e);
+        await replaceSortable();
+      },
+    });
+  }
+
+  onMounted(() => {
+    initSortable();
+  });
+
+  onUnmounted(() => {
+    destroySortable();
+  });
+
+  return { reloadSortable };
+}

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

@@ -0,0 +1,11 @@
+export const generateOption = () => ({
+  text: '',
+  score: 10,
+});
+
+export const generateQuestionOptionsSchema = () => ({
+  type: 'options',
+  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: false,
+  text: 'Title',
+  ...generateQuestionScoreSchema(),
+});

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

@@ -0,0 +1,6 @@
+// eslint-disable-next-line import/prefer-default-export
+export const generateQuestionScoreSchema = () => ({
+  type: 'score',
+  min: 1,
+  max: 5,
+});

package/src/scripts/__tests__/updateObject.spec.js

@@ -0,0 +1,19 @@
+import updateObject from '../updateObject';
+
+describe('updateObject', () => {
+  it('doesn\'t mutate original object', () => {
+    const original = { jest: 'jest' };
+    updateObject({ obj: original, path: 'jest', value: '123' });
+    expect(original.jest).toBe('jest');
+  });
+  it('changes shallow value', () => {
+    const original = { jest: 'jest' };
+    const result = { jest: 'huest' };
+    expect(updateObject({ obj: original, path: 'jest', value: 'huest' })).toEqual(result);
+  });
+  it('changes deep value', () => {
+    const original = { jest: { deep: 'jest' } };
+    const result = { jest: { deep: 'huest' } };
+    expect(updateObject({ obj: original, path: 'jest.deep', value: 'huest' })).toEqual(result);
+  });
+});

package/src/scripts/updateObject.js

@@ -0,0 +1,6 @@
+import set from 'lodash/set';
+import cloneDeep from 'lodash/cloneDeep';
+
+const updateObject = ({ obj, path, value }) => set(cloneDeep(obj), path, value);
+
+export default updateObject;