refactor: refactoring timelines in progress [WTEL-4465]

package.json

@@ -11,39 +11,33 @@
   },
   "type": "module",
   "dependencies": {
-    "@vue/compat": "^3.3.9",
+    "@vue/compat": "^3.4.25",
     "@vuelidate/core": "^2.0.0",
     "@vuelidate/validators": "^2.0.2",
     "@webitel/ui-sdk": "^24.4.28",
-    "axios": "^1.6.5",
-    "core-js": "^3.8.3",
+    "axios": "^1.6.8",
     "deep-equal": "^2.2.1",
     "lodash": "^4.17.21",
-    "vue": "^3.3.9",
-    "vue-i18n": "^9.2.2",
-    "vue-router": "^4.0.3",
+    "vue": "^3.4.25",
+    "vue-i18n": "^9.13.1",
+    "vue-router": "^4.3.2",
     "vuex": "^4.1.0",
-    "webitel-sdk": "^24.2.7"
+    "webitel-sdk": "^24.2.9"
   },
   "devDependencies": {
     "@vitejs/plugin-vue": "5.0.3",
     "@vitest/coverage-v8": "^1.1.3",
-    "@vue/test-utils": "^2.0.0-0",
+    "@vue/test-utils": "^2.4.5",
     "deep-copy": "^1.4.2",
     "eslint": "^8.56.0",
     "eslint-plugin-import": "^2.25.3",
     "eslint-plugin-vue": "^9.20.0",
     "happy-dom": "^13.0.0",
-    "husky": "^8.0.3",
-    "sass": "^1.32.7",
+    "sass": "^1.75.0",
     "tslib": "^2.6.2",
-    "vite": "^5.0.11",
-    "vite-plugin-node-polyfills": "^0.19.0",
+    "vite": "=5.1",
+    "vite-plugin-node-polyfills": "^0.21.0",
     "vite-plugin-svg-sprite": "^0.5.1",
-    "vitest": "^1.1.3"
-  },
-  "overrides": {
-    "url": "^0.11.0",
-    "axios": "^1.6.5"
+    "vitest": "^1.5.2"
   }
 }

src/modules/contacts/modules/timeline/components/day-row/day-timeline-row-counters.vue

@@ -1,8 +1,12 @@
 <template>
   <div class="day-timeline-row-counters">
     <div class="day-timeline-row-counters__wrapper">
-      <span>{{ `${t(`contacts.timeline.eventType.${WebitelContactsTimelineEventType.Call}`, 2)}: ${props.callsCount} ` }}</span>
-      <span>{{ `${t(`contacts.timeline.eventType.${WebitelContactsTimelineEventType.Chat}`, 2)}: ${props.chatsCount} `}}</span>
+      <span>
+        {{ `${t(`contacts.timeline.eventType.${WebitelContactsTimelineEventType.Call}`, 2)}: ${props.callsCount} ` }}
+      </span>
+      <span>
+        {{ `${t(`contacts.timeline.eventType.${WebitelContactsTimelineEventType.Chat}`, 2)}: ${props.chatsCount} `}}
+      </span>
     </div>
   </div>
 </template>

src/modules/contacts/modules/timeline/components/day-row/day-timeline-row.vue

@@ -4,29 +4,45 @@
       <timeline-row-info
         :timestamp="timestamp"
       >
-        <template #title="{ weekDay }">{{ weekDay }}</template>
-       <template #subtitle="{ month }">{{ month }}</template>
+        <template #title="{ weekDay }">
+          {{ weekDay }}
+        </template>
+       <template #subtitle="{ month }">
+         {{ month }}
+       </template>
       </timeline-row-info>
     </template>
-    <template #pin>
+
+    <template #pin="{ toggle, collapsed }">
       <timeline-pin
+        :collapsed="collapsed"
         :type="TimelinePinType.DAY"
         :text="dayNumber"
-        @click="emit('toggle')"
+        @click="toggle"
       ></timeline-pin>
     </template>
+
     <template v-slot:content>
       <day-timeline-row-counters
         :callsCount="props.callsCount"
         :chatsCount="props.chatsCount"
       />
     </template>
+
+    <template #dropdown>
+      <task-timeline-row
+        v-for="(task) of tasks"
+        :task="task"
+        :key="task.id"
+      ></task-timeline-row>
+    </template>
   </timeline-row>
 </template>
 
 <script setup>
 import { computed } from 'vue';
 import TimelinePinType from '../../enums/TimelinePinType.enum.js';
+import TaskTimelineRow from '../task-row/task-timeline-row.vue';
 import TimelineRowInfo from '../utils/timeline-row-info.vue';
 import DayTimelineRowCounters from './day-timeline-row-counters.vue';
 import TimelinePin from '../utils/timeline-pin.vue';
@@ -45,13 +61,13 @@ const props = defineProps({
     type: Number,
     default: 0,
   },
+  tasks: {
+    type: Array,
+    default: () => [],
+  },
 });
 
-const emit = defineEmits([
-  'toggle',
-]);
-
-const dayNumber = computed(() => new Date(+props.timestamp).getDate());
+const dayNumber = computed(() => `${new Date(+props.timestamp).getDate()}`);
 
 </script>
 

src/modules/contacts/modules/timeline/components/the-timeline.vue

@@ -2,7 +2,6 @@
   <timeline-container>
     <template #header>
       <timeline-header
-        :namespace="timelineNamespace"
         :list="dataList"
       />
     </template>
@@ -17,11 +16,14 @@
         :src="darkMode ? dummyDark : dummyLight"
       />
 
-      <day-timeline-row-section
-        v-for="day of dataList"
-        :key="day.dateTimestamp"
-        :day="day"
-      ></day-timeline-row-section>
+      <day-timeline-row
+        v-for="({ dayTimestamp, callsCount, chatsCount, items }) of dataList"
+        :key="dayTimestamp"
+        :timestamp="dayTimestamp"
+        :calls-count="callsCount"
+        :chats-count="chatsCount"
+        :tasks="items"
+      />
     </template>
   </timeline-container>
 
@@ -31,10 +33,10 @@
 import { computed, provide } from 'vue';
 import { useStore } from 'vuex';
 import getNamespacedState from '@webitel/ui-sdk/src/store/helpers/getNamespacedState';
+import DayTimelineRow from './day-row/day-timeline-row.vue';
 import TimelineContainer from './timeline-container.vue';
 import dummyDark from '../assets/timeline-dummy-dark.svg';
 import dummyLight from '../assets/timeline-dummy-light.svg';
-import DayTimelineRowSection from './day-row/day-timeline-row-section.vue';
 import TimelineHeader from './timeline-header.vue';
 
 const props = defineProps({
@@ -59,7 +61,8 @@ function initializeList() {
   return store.dispatch(`${timelineNamespace}/INITIALIZE_LIST`);
 }
 
-initializeList();
+// TODO: uncomment me after fixing filters module
+// initializeList();
 </script>
 
 <style lang="scss" scoped>

src/modules/contacts/modules/timeline/components/timeline-header.vue

@@ -1,21 +1,26 @@
 <template>
   <header
-    v-if="isDisplayHeader"
-    class="timeline-header">
-    <p class="timeline-header__duration">{{ durationTimeline }}</p>
+    v-if="showHeader"
+    class="timeline-header"
+  >
+    <p class="timeline-header__duration">
+      {{ timelineInterval }}
+    </p>
     <div class="timeline-header__actions">
       <timeline-task-type-filter
         :namespace="filtersNamespace"
         :calls-count="taskCounters[WebitelContactsTimelineEventType.Call]"
         :chats-count="taskCounters[WebitelContactsTimelineEventType.Chat]"
       />
-      <button class="timeline-header__collapse">{{ t('contacts.collapseAll') }}</button>
+      <button class="timeline-header__collapse">
+        {{ t('contacts.collapseAll') }}
+      </button>
     </div>
   </header>
 
 </template>
 <script setup>
-import { computed } from 'vue';
+import { computed, inject } from 'vue';
 import { useI18n } from 'vue-i18n';
 import { WebitelContactsTimelineEventType } from 'webitel-sdk';
 import { useTableFilters } from '@webitel/ui-sdk/src/modules/Filters/composables/useTableFilters.js';
@@ -26,17 +31,16 @@ const props = defineProps({
     type: Array,
     default: () => [],
   },
-  namespace: {
-    type: String,
-    required: true,
-  },
 });
 
+const namespace = inject('namespace');
+
 const { d, t } = useI18n();
 
-const { filtersNamespace } = useTableFilters(props.namespace);
+const { filtersNamespace } = useTableFilters(namespace);
 
-const isDisplayHeader = computed(() => props.list.length || Object.values(taskCounters.value).some(num => num));
+// FIXME: what is showHeader condition?
+const showHeader = computed(() => true || props.list.length || Object.values(taskCounters.value).some(num => num));
 
 const taskCounters = computed(() => {
     return props.list.reduce((acc, { callsCount = 0, chatsCount = 0 }) => {
@@ -50,7 +54,7 @@ const taskCounters = computed(() => {
     })
 });
 
-const durationTimeline = computed(() => {
+const timelineInterval = computed(() => {
   const formatDate = (date) => {
     const fullDate = new Date(+date);
     const mouth = d(fullDate, { month: 'long' });
@@ -61,7 +65,7 @@ const durationTimeline = computed(() => {
   const from = props.list.at(-1)?.dayTimestamp || (new Date().setMonth(new Date().getMonth() - 1));
   const to = props.list.at(1)?.dayTimestamp || new Date().getTime();
 
-  return `${formatDate(from)} - ${formatDate(to)}`
+  return `${formatDate(from)} - ${formatDate(to)}`;
 })
 </script>
 

src/modules/contacts/modules/timeline/components/utils/timeline-row-info.vue

@@ -26,7 +26,7 @@ import { useI18n } from 'vue-i18n';
 
 const props = defineProps({
   timestamp: {
-    type: String,
+    type: [Number, String],
     default: 0,
   },
 });

src/modules/contacts/modules/timeline/components/utils/timeline-task-status.vue

@@ -3,31 +3,33 @@
       <wt-indicator
         size="sm"
         :color=statusColor
-      ></wt-indicator>
-      <p>{{ t(`contacts.timeline.status.${ status }`) }}</p>
+      />
+      <p>
+        {{ t(`contacts.timeline.status.${ status }`) }}
+      </p>
     </div>
 </template>
 
 <script setup>
 import { computed } from 'vue';
 import { useI18n } from 'vue-i18n';
-import TimelineTaskStatusEnum from '../../enums/TimelineTaskStatus.enum.js';
+import TimelineTaskStatus from '../../enums/TimelineTaskStatus.enum.js';
 
 const props = defineProps({
   status: {
     type: String,
-    default: TimelineTaskStatusEnum.STARTED,
-    options: [TimelineTaskStatusEnum.STARTED, TimelineTaskStatusEnum.MISSED, TimelineTaskStatusEnum.TRANSFERRED, TimelineTaskStatusEnum.ENDED],
+    default: TimelineTaskStatus.STARTED,
+    validator: (value) => Object.values(TimelineTaskStatus).includes(value),
   },
 });
 
 const { t } = useI18n();
 
 const statusColor = computed(() => {
   switch (props.status) {
-    case TimelineTaskStatusEnum.STARTED:
+    case TimelineTaskStatus.STARTED:
       return 'success';
-    case TimelineTaskStatusEnum.TRANSFERRED:
+    case TimelineTaskStatus.TRANSFERRED:
       return 'transfer';
     default:
       return 'error';

src/modules/contacts/modules/timeline/enums/TimelineTaskStatus.enum.js

@@ -1,3 +1,8 @@
+/**
+Abstract Task Statuses are used,
+because chat, task and email have different definitions of "start", "end", etc
+ */
+
 const TimelineTaskStatus = Object.freeze({
   STARTED: 'started',
   MISSED: 'missed',

src/modules/contacts/modules/timeline/modules/chats/components/task-row/chat-task-timeline-row.vue

@@ -4,6 +4,7 @@
       <timeline-row-info
         :timestamp="createdAt"
       >
+<!--        TODO use correct time computed -->
         <template #title="{ time }">
           {{ time }}
         </template>
@@ -15,6 +16,7 @@
         </template>
       </timeline-row-info>
     </template>
+
     <template #pin="{ toggle, collapsed }">
       <timeline-pin
         :collapsed="collapsed"
@@ -51,7 +53,7 @@
 
     <template #dropdown>
       <chat-points-row-section
-        :chat-id="chatId"
+        :chat-id="taskId"
       />
     </template>
   </timeline-row>
@@ -60,6 +62,7 @@
 <script setup>
 import { computed, inject, ref, toRefs } from 'vue';
 import TimelinePin from '../../../../components/utils/timeline-pin.vue';
+import TimelineTaskStatus from '../../../../components/utils/timeline-task-status.vue';
 import TimelineRowDuration from '../../../../components/utils/timeline-row-duration.vue';
 import TimelineRowInfo from '../../../../components/utils/timeline-row-info.vue';
 import TimelineRowInitiator from '../../../../components/utils/timeline-row-initiator.vue';
@@ -82,7 +85,7 @@ const {
   participants,
   duration,
   gateway,
-  id: chatId,
+  id: taskId,
 } = toRefs(props.task);
 
 const openHiddenParticipants = ref(false);