Merge pull request #69 from webitel/feature/timeline

Feature/timeline
webitel · May 13, 2024 · fd03472 · fd03472
2 parents 8f5db9e + 59c0a05
commit fd03472
Show file tree

Hide file tree

Showing 30 changed files with 2,405 additions and 400 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -14,15 +14,19 @@
     "@vue/compat": "^3.4.25",
     "@vuelidate/core": "^2.0.0",
     "@vuelidate/validators": "^2.0.2",
-    "@webitel/ui-sdk": "^24.4.28",
+    "@vueuse/core": "^10.9.0",
+    "@webitel/ui-sdk": "^24.6.0",
     "axios": "^1.6.8",
     "deep-equal": "^2.2.1",
+    "dompurify": "^3.1.2",
+    "linkify-html": "^4.1.3",
+    "linkifyjs": "^4.1.3",
     "lodash": "^4.17.21",
     "vue": "^3.4.25",
     "vue-i18n": "^9.13.1",
     "vue-router": "^4.3.2",
     "vuex": "^4.1.0",
-    "webitel-sdk": "^24.2.9"
+    "webitel-sdk": "^24.2.15"
   },
   "devDependencies": {
     "@vitejs/plugin-vue": "5.0.3",

diff --git a/src/app/locale/datetimeFormats.js b/src/app/locale/datetimeFormats.js
@@ -0,0 +1,40 @@
+const datetimeFormats = {
+  en: {
+    timelineWeekday: {
+      weekday: 'long',
+    },
+    timelineMonth: {
+      month: 'long',
+    },
+    timelineInterval: {
+      month: 'long',
+      year: 'numeric',
+    },
+  },
+  ru: {
+    timelineWeekday: {
+      weekday: 'long',
+    },
+    timelineMonth: {
+      month: 'long',
+    },
+    timelineInterval: {
+      month: 'long',
+      year: 'numeric',
+    },
+  },
+  uk: {
+    timelineWeekday: {
+      weekday: 'long',
+    },
+    timelineMonth: {
+      month: 'long',
+    },
+    timelineInterval: {
+      month: 'long',
+      year: 'numeric',
+    },
+  },
+};
+
+export default datetimeFormats;
diff --git a/src/app/locale/i18n.js b/src/app/locale/i18n.js
@@ -3,6 +3,7 @@ import en from './en/en';
 import ru from './ru/ru';
 import ua from './ua/ua';
 import kz from './kz/kz';
+import datetimeFormats from './datetimeFormats.js';
 
 const messages = {
   en,
@@ -16,4 +17,5 @@ export default createI18n({
   locale: 'en',
   fallbackLocale: 'en',
   messages,
+  datetimeFormats,
 });
diff --git a/src/app/locale/ru/ru.js b/src/app/locale/ru/ru.js
@@ -21,10 +21,10 @@ export default {
         transcription: 'Транскрипция',
       },
       status: {
-        [TimelineTaskStatusEnum.STARTED]: 'Початок',
-        [TimelineTaskStatusEnum.MISSED]: 'Пропущений',
+        [TimelineTaskStatusEnum.STARTED]: 'Начало',
+        [TimelineTaskStatusEnum.MISSED]: 'Пропущен',
         [TimelineTaskStatusEnum.TRANSFERRED]: 'Переведено',
-        [TimelineTaskStatusEnum.ENDED]: 'Кінець',
+        [TimelineTaskStatusEnum.ENDED]: 'Конец',
       },
       eventType: {
         [WebitelContactsTimelineEventType.Call]: 'Звонок | Звонки',

diff --git a/src/app/locale/ua/ua.js b/src/app/locale/ua/ua.js
@@ -21,10 +21,10 @@ export default {
         transcription: 'Транскрипція',
       },
       status: {
-        [TimelineTaskStatusEnum.STARTED]: 'Начало',
-        [TimelineTaskStatusEnum.MISSED]: 'Пропущен',
+        [TimelineTaskStatusEnum.STARTED]: 'Початок',
+        [TimelineTaskStatusEnum.MISSED]: 'Пропущений',
         [TimelineTaskStatusEnum.TRANSFERRED]: 'Переведено',
-        [TimelineTaskStatusEnum.ENDED]: 'Конец',
+        [TimelineTaskStatusEnum.ENDED]: 'Кінець',
       },
       eventType: {
         [WebitelContactsTimelineEventType.Call]: 'Дзвінок | Дзвінки',

diff --git a/src/modules/contacts/modules/timeline/api/TimelineAPI.js b/src/modules/contacts/modules/timeline/api/TimelineAPI.js
@@ -25,18 +25,26 @@ const listHandler = (items) => {
 }
 
   const getList = async (params) => {
-    const fieldsToSend = ['parentId', 'dateFrom', 'dateTo', 'type'];
+    const fieldsToSend = ['parentId', 'dateFrom', 'dateTo', 'type', 'page', 'size'];
     const {
       parentId,
       dateFrom,
       dateTo,
       type,
+      page,
+      size,
     } = applyTransform(params, [
       sanitize(fieldsToSend),
     ]);
     try {
       const response = await timeline.getTimeline(
         parentId,
+        `${page || 1}`,
+        `${size || 100}`,
+        undefined,
+        undefined,
+        undefined,
+        undefined,
         dateFrom,
         dateTo,
         type,
@@ -58,4 +66,34 @@ const listHandler = (items) => {
     }
   };
 
-  export default { getList };
+const getCounters = async (params) => {
+  const defaultObject = {
+    callsCount: 0,
+    chatsCount: 0,
+    dateFrom: Date.now(),
+    dateTo: Date.now(),
+  };
+
+  const {
+    parentId,
+  } = applyTransform(params, [
+    sanitize(['parentId']),
+  ]);
+
+  try {
+    const response = await timeline.getTimelineCounter(parentId);
+    return applyTransform(response.data, [
+      snakeToCamel(),
+      merge(defaultObject),
+    ]);
+  } catch (err) {
+    throw applyTransform(err, [
+      notify,
+    ]);
+  }
+};
+
+  export default {
+    getList,
+    getCounters,
+  };
diff --git a/src/modules/contacts/modules/timeline/components/day-row/day-timeline-row-counters.vue b/src/modules/contacts/modules/timeline/components/day-row/day-timeline-row-counters.vue
@@ -2,10 +2,10 @@
   <div class="day-timeline-row-counters">
     <div class="day-timeline-row-counters__wrapper">
       <span>
-        {{ `${t(`contacts.timeline.eventType.${WebitelContactsTimelineEventType.Call}`, 2)}: ${props.callsCount}` }}
+        {{ `${t(`contacts.timeline.eventType.${WebitelContactsTimelineEventType.Call}`, 2)}: (${props.callsCount})` }}
       </span>
       <span>
-        {{ `${t(`contacts.timeline.eventType.${WebitelContactsTimelineEventType.Chat}`, 2)}: ${props.chatsCount}`}}
+        {{ `${t(`contacts.timeline.eventType.${WebitelContactsTimelineEventType.Chat}`, 2)}: (${props.chatsCount})`}}
       </span>
     </div>
   </div>

diff --git a/src/modules/contacts/modules/timeline/components/day-row/day-timeline-row.vue b/src/modules/contacts/modules/timeline/components/day-row/day-timeline-row.vue
@@ -18,6 +18,8 @@
         :collapsed="collapsed"
         :type="TimelinePinType.DAY"
         :text="dayNumber"
+        :first="first"
+        :last="last && collapsed"
         @click="toggle"
       ></timeline-pin>
     </template>
@@ -34,6 +36,7 @@
         v-for="(task) of tasks"
         :task="task"
         :key="task.id"
+        :last="last && task === tasks[tasks.length - 1]"
       ></task-timeline-row>
     </template>
   </timeline-row>
@@ -65,6 +68,14 @@ const props = defineProps({
     type: Array,
     default: () => [],
   },
+  first: {
+    type: Boolean,
+    default: false,
+  },
+  last: {
+    type: Boolean,
+    default: false,
+  },
 });
 
 const dayNumber = computed(() => `${new Date(+props.timestamp).getDate()}`);

diff --git a/src/modules/contacts/modules/timeline/components/task-row/task-timeline-row.vue b/src/modules/contacts/modules/timeline/components/task-row/task-timeline-row.vue
@@ -2,6 +2,7 @@
   <component
     :is="component"
     :task="task"
+    :last="last"
   />
 </template>
 
@@ -16,6 +17,10 @@ const props = defineProps({
     type: Object,
     required: true,
   },
+  last: {
+    type: Boolean,
+    default: false,
+  },
 });
 
 const component = computed(() => {

diff --git a/src/modules/contacts/modules/timeline/components/the-timeline.vue b/src/modules/contacts/modules/timeline/components/the-timeline.vue
@@ -3,36 +3,52 @@
     <template #header>
       <timeline-header
         :list="dataList"
+        :contact-id="contactId"
       />
     </template>
 
     <template #content>
-      <wt-loader
+      <div
+        class="loader-wrapper"
         v-if="isLoading"
-      />
+      >
+        <wt-loader />
+      </div>
 
       <wt-dummy
         v-else-if="!dataList.length"
         :src="darkMode ? dummyDark : dummyLight"
       />
 
       <day-timeline-row
-        v-for="({ dayTimestamp, callsCount, chatsCount, items }) of dataList"
+        v-else
+        v-for="({ dayTimestamp, callsCount, chatsCount, items }, key) of dataList"
         :key="dayTimestamp"
         :timestamp="dayTimestamp"
         :calls-count="callsCount"
         :chats-count="chatsCount"
         :tasks="items"
+        :first="!key"
+        :last="!next && key === dataList.length - 1"
+      />
+    </template>
+
+    <template #after-content>
+      <timeline-intersection-observer
+        :next="next"
+        :loading="nextLoading"
+        @next="loadNext"
       />
     </template>
   </timeline-container>
 
 </template>
 
 <script setup>
-import { computed, provide } from 'vue';
+import { computed, provide, ref } from 'vue';
 import { useStore } from 'vuex';
 import getNamespacedState from '@webitel/ui-sdk/src/store/helpers/getNamespacedState';
+import TimelineIntersectionObserver from './utils/timeline-intersection-observer.vue';
 import DayTimelineRow from './day-row/day-timeline-row.vue';
 import TimelineContainer from './timeline-container.vue';
 import dummyDark from '../assets/timeline-dummy-dark.svg';
@@ -53,14 +69,24 @@ provide('namespace', timelineNamespace);
 const store = useStore();
 
 const darkMode = computed(() => store.getters['appearance/DARK_MODE']);
+const contactId = computed(() => store.getters[`${timelineNamespace}/PARENT_ID`]);
 
 const dataList = computed(() => getNamespacedState(store.state, timelineNamespace).dataList);
 const isLoading = computed(() => getNamespacedState(store.state, timelineNamespace).isLoading);
+const next = computed(() => getNamespacedState(store.state, timelineNamespace).next);
 
 function initializeList() {
   return store.dispatch(`${timelineNamespace}/INITIALIZE_LIST`);
 }
 
+const nextLoading = ref(false);
+
+async function loadNext() {
+  nextLoading.value = true;
+  await store.dispatch(`${timelineNamespace}/LOAD_NEXT`);
+  nextLoading.value = false;
+}
+
 // TODO: uncomment me after fixing filters module
 // initializeList();
 </script>
@@ -69,4 +95,11 @@ function initializeList() {
 .wt-dummy {
   height: 100%;
 }
+
+.loader-wrapper {
+  height: 100%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
 </style>
diff --git a/src/modules/contacts/modules/timeline/components/timeline-container.vue b/src/modules/contacts/modules/timeline/components/timeline-container.vue
@@ -3,11 +3,13 @@
     class="timeline-container"
   >
     <header class="timeline-header">
-      <slot name="header"></slot>
+      <slot name="header" />
     </header>
 
     <article class="timeline-content">
-      <slot name="content"></slot>
+      <slot name="content" />
+
+      <slot name="after-content" />
     </article>
   </section>
 </template>