From c8dddce27697940259a444e1526e392d057b68a5 Mon Sep 17 00:00:00 2001
From: Lera24 <bedulinavalera21@gmail.com>
Date: Mon, 22 Apr 2024 18:29:32 +0300
Subject: [PATCH] fix: refactor day components, API and some styles[WTEL-4418]

---
 package-lock.json                             |  1 +
 package.json                                  |  1 +
 .../modules/timeline/api/TimelineAPI.js       | 75 +++++++++++--------
 .../day-row/day-timeline-row-counters.vue     |  1 +
 .../day-row/day-timeline-row-section.vue      |  7 +-
 .../components/day-row/day-timeline-row.vue   | 13 +---
 .../task-row/call-task-timeline-row.vue       |  7 +-
 .../components/task-row/task-timeline-row.vue |  7 +-
 .../timeline/components/the-timeline.vue      |  3 +-
 .../timeline/components/timeline-header.vue   | 12 +--
 .../components/utils/timeline-pin.vue         | 11 +--
 .../components/utils/timeline-row-info.vue    | 12 ++-
 .../components/utils/timeline-separator.vue   | 39 ++++++++++
 .../timeline-task-status.vue}                 | 22 +-----
 14 files changed, 117 insertions(+), 94 deletions(-)
 create mode 100644 src/modules/contacts/modules/timeline/components/utils/timeline-separator.vue
 rename src/modules/contacts/modules/timeline/components/{event-status-detail.vue => utils/timeline-task-status.vue} (61%)

diff --git a/package-lock.json b/package-lock.json
index 60eca7bb..27e0a4ec 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -26,6 +26,7 @@
         "@vitejs/plugin-vue": "5.0.3",
         "@vitest/coverage-v8": "^1.1.3",
         "@vue/test-utils": "^2.0.0-0",
+        "deep-copy": "^1.4.2",
         "eslint": "^8.56.0",
         "eslint-plugin-import": "^2.25.3",
         "eslint-plugin-vue": "^9.20.0",
diff --git a/package.json b/package.json
index cff65bb3..6f28829d 100644
--- a/package.json
+++ b/package.json
@@ -29,6 +29,7 @@
     "@vitejs/plugin-vue": "5.0.3",
     "@vitest/coverage-v8": "^1.1.3",
     "@vue/test-utils": "^2.0.0-0",
+    "deep-copy": "^1.4.2",
     "eslint": "^8.56.0",
     "eslint-plugin-import": "^2.25.3",
     "eslint-plugin-vue": "^9.20.0",
diff --git a/src/modules/contacts/modules/timeline/api/TimelineAPI.js b/src/modules/contacts/modules/timeline/api/TimelineAPI.js
index 6d08f080..041acdb1 100644
--- a/src/modules/contacts/modules/timeline/api/TimelineAPI.js
+++ b/src/modules/contacts/modules/timeline/api/TimelineAPI.js
@@ -4,6 +4,7 @@ import applyTransform, {
   merge, notify,
   sanitize, snakeToCamel, starToSearch, mergeEach,
 } from '@webitel/ui-sdk/src/api/transformers';
+import deepCopy from 'deep-copy';
 import { TimelineApiFactory } from 'webitel-sdk';
 import getDefaultGetListResponse
   from '../../../../../app/api/defaults/getDefaultGetListResponse';
@@ -12,40 +13,52 @@ import instance from '../../../../../app/api/instance';
 
 const timeline = new TimelineApiFactory(configuration, '', instance);
 
-const getList = async (params) => {
-  const fieldsToSend = ['parentId', 'dateFrom', 'dateTo', 'type'];
-  const {
-    parentId,
-    dateFrom,
-    dateTo,
-    type,
-  } = applyTransform(params, [
-    sanitize(fieldsToSend),
-    merge(getDefaultGetParams()),
-  ]);
-  try {
-    const response = await timeline.getTimeline(
+const listHandler = (items) => {
+  let copy = deepCopy(items);
+  if(copy) {
+    return copy.map(day => ({
+      ...day,
+      items: day.items.map(item => ({
+        ...item,
+        type:!item.type ? 'chat' : item.type,
+      }))
+    }));
+  } return copy;
+}
+
+  const getList = async (params) => {
+    const fieldsToSend = ['parentId', 'dateFrom', 'dateTo', 'type'];
+    const {
       parentId,
       dateFrom,
       dateTo,
       type,
-    );
-    const { days, next } = applyTransform(response.data, [
-      snakeToCamel(),
-      merge(getDefaultGetListResponse()),
-    ]);
-    return {
-      items: applyTransform(days, [
-      ]),
-      next,
-    };
-  } catch (err) {
-    throw applyTransform(err, [
-      notify,
+    } = applyTransform(params, [
+      sanitize(fieldsToSend),
+      merge(getDefaultGetParams()),
     ]);
-  }
-};
+    try {
+      const response = await timeline.getTimeline(
+        parentId,
+        dateFrom,
+        dateTo,
+        type,
+      );
+      const { days, next } = applyTransform(response.data, [
+        snakeToCamel(),
+        merge(getDefaultGetListResponse()),
+      ]);
+      return {
+        items: applyTransform(days, [
+          listHandler,
+        ]),
+        next,
+      };
+    } catch (err) {
+      throw applyTransform(err, [
+        notify,
+      ]);
+    }
+  };
 
-export default {
-  getList,
-};
+  export default { getList };;
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
index 3e1eb246..e4993058 100644
--- 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
@@ -31,6 +31,7 @@ const { t } = useI18n();
   justify-content: flex-end;
 
   &__wrapper {
+    @extend %typo-body-2;
     display: flex;
     gap: var(--spacing-xs);
   }
diff --git a/src/modules/contacts/modules/timeline/components/day-row/day-timeline-row-section.vue b/src/modules/contacts/modules/timeline/components/day-row/day-timeline-row-section.vue
index d8816d0b..f0a72cf1 100644
--- a/src/modules/contacts/modules/timeline/components/day-row/day-timeline-row-section.vue
+++ b/src/modules/contacts/modules/timeline/components/day-row/day-timeline-row-section.vue
@@ -4,13 +4,12 @@
       :timestamp="day.dayTimestamp"
       :calls-count="day.callsCount"
       :chats-count="day.chatsCount"
-      :last-day="lastDay"
       @toggle="opened = !opened"
     />
 
     <div v-if="opened">
       <task-timeline-row
-        v-for="(item) of day.items"
+        v-for="(item) of props.day.items"
         :item="item"
         :key="item.id"
       ></task-timeline-row>
@@ -27,10 +26,6 @@ const props = defineProps({
   day: {
     type: Object,
   },
-  lastDay: {
-    type: Boolean,
-    default: false,
-  },
 });
 
 const opened = ref(false);
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
index 155fa386..76be6130 100644
--- 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
@@ -4,10 +4,9 @@
       <timeline-row-info
         :timestamp="timestamp"
       >
-        <template #title="timesScope">{{ timesScope.weekDay }}</template>
-        <template #subtitle="timesScope">{{ timesScope.month }}</template>
+        <template #title="{ weekDay }">{{ weekDay }}</template>
+       <template #subtitle="{ month }">{{ month }}</template>
       </timeline-row-info>
-      {{ props.timestamp }}
     </template>
     <template #pin>
       <timeline-pin
@@ -23,13 +22,6 @@
       />
     </template>
   </timeline-row>
-
-
-  <!--    // TODO -> day-task-line -->
-  <!--      <template v-slot:before-content>-->
-  <!--        <p class="timeline-day__title">{{ t(`contacts.timeline.dayWeek.${dayWeek}`) }}</p>-->
-  <!--        <p class="timeline-day__title">{{ t(`contacts.timeline.mouth.${mouth}`) }}</p>-->
-  <!--      </template>-->
 </template>
 
 <script setup>
@@ -59,7 +51,6 @@ const emit = defineEmits([
   'toggle',
 ]);
 
-// TODO -> day-task-line
 const dayNumber = computed(() => new Date(+props.timestamp).getDate());
 
 </script>
diff --git a/src/modules/contacts/modules/timeline/components/task-row/call-task-timeline-row.vue b/src/modules/contacts/modules/timeline/components/task-row/call-task-timeline-row.vue
index 2d55d8ab..f36a5fde 100644
--- a/src/modules/contacts/modules/timeline/components/task-row/call-task-timeline-row.vue
+++ b/src/modules/contacts/modules/timeline/components/task-row/call-task-timeline-row.vue
@@ -1,7 +1,7 @@
 <template>
   <div class="chat-task-timeline-row">
     <timeline-row>
-      <template v-slot:before-content>
+      <template #before-content>
         <timeline-row-info
           :timestamp="createdAt"
         >
@@ -9,8 +9,8 @@
             {{ time }}
           </template>
 
-          <template #subtitle="{ weekDay }">
-            {{ weekDay }}
+          <template #subtitle>
+            <timeline-task-status />
           </template>
         </timeline-row-info>
       </template>
@@ -99,6 +99,7 @@ import TimelineRowDuration from '../utils/timeline-row-duration.vue';
 import TimelineRowInfo from '../utils/timeline-row-info.vue';
 import TimelineRowInitiator from '../utils/timeline-row-initiator.vue';
 import TimelineRow from '../utils/timeline-row.vue';
+import TimelineTaskStatus from '../utils/timeline-task-status.vue';
 
 const props = defineProps({
   item: {
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
index b48fddbb..615d5f90 100644
--- 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
@@ -9,6 +9,7 @@
 import { computed } from 'vue';
 import ChatTaskTimelineRow from './chat-task-timeline-row.vue';
 import CallTaskTimelineRow from './call-task-timeline-row.vue';
+import { WebitelContactsTimelineEventType } from 'webitel-sdk';
 
 const props = defineProps({
   item: {
@@ -19,10 +20,8 @@ const props = defineProps({
 
 const component = computed(() => {
   switch (props.item.type) {
-    case 'chat': // TODO Yehor enum
-      return ChatTaskTimelineRow;
-    case 'call':  // TODO Yehor enum
-      return CallTaskTimelineRow;
+    case WebitelContactsTimelineEventType.Chat: return ChatTaskTimelineRow;
+    case WebitelContactsTimelineEventType.Call: return CallTaskTimelineRow;
    // default:
     //  return throw new Error(`Unknown item type, ${props.item.type}!`);
   }
diff --git a/src/modules/contacts/modules/timeline/components/the-timeline.vue b/src/modules/contacts/modules/timeline/components/the-timeline.vue
index 3e6be806..d1d38399 100644
--- a/src/modules/contacts/modules/timeline/components/the-timeline.vue
+++ b/src/modules/contacts/modules/timeline/components/the-timeline.vue
@@ -18,10 +18,9 @@
       />
 
       <day-timeline-row-section
-        v-for="(day, idx) of dataList"
+        v-for="day of dataList"
         :key="day.dateTimestamp"
         :day="day"
-        :last-day="dataList.length - 1 === idx"
       ></day-timeline-row-section>
     </template>
   </timeline-container>
diff --git a/src/modules/contacts/modules/timeline/components/timeline-header.vue b/src/modules/contacts/modules/timeline/components/timeline-header.vue
index 9552e2db..0d7e375d 100644
--- a/src/modules/contacts/modules/timeline/components/timeline-header.vue
+++ b/src/modules/contacts/modules/timeline/components/timeline-header.vue
@@ -32,7 +32,7 @@ const props = defineProps({
   },
 });
 
-const { t } = useI18n();
+const { d, t } = useI18n();
 const store = useStore();
 
 const activeFilters = computed(() => getNamespacedState(store.state, props.filtersNamespace).type.value);
@@ -41,16 +41,16 @@ const isDisplayHeader = computed(() => props.list.length || (!props.list.length
 const dateFrom = computed(() => props.list[props.list.length - 1]?.dayTimestamp);
 const dateTo = computed(() => props.list[0]?.dayTimestamp);
 
-const displayedDateFrom = computed(() => dateFrom.value || (new Date().setMonth(new Date().getMonth() - 1)));////Math.floor
+const displayedDateFrom = computed(() => dateFrom.value || (new Date().setMonth(new Date().getMonth() - 1)));
 const displayedDateTo = computed(() => dateTo.value || (new Date().getTime()));
 
 const durationTimeline = computed(() => `${formatDate(displayedDateFrom.value)} - ${formatDate(displayedDateTo.value)}`);
 
-function formatDate(date) { ///i18n
+function formatDate(date) {
   const fullDate = new Date(+date);
-  const mouth = fullDate.toLocaleString('en', { month: 'short' }).toLowerCase();
-  const year = fullDate.toLocaleString('en', { year: 'numeric' });
-  return t(`contacts.timeline.mouth.${mouth}`) + ' ' + year;
+  const mouth = d(fullDate, { month: 'long' });
+  const year = d(fullDate, { year: 'numeric' });
+  return `${mouth} ${year}`;
 }
 </script>
 
diff --git a/src/modules/contacts/modules/timeline/components/utils/timeline-pin.vue b/src/modules/contacts/modules/timeline/components/utils/timeline-pin.vue
index ae937c27..8673231a 100644
--- a/src/modules/contacts/modules/timeline/components/utils/timeline-pin.vue
+++ b/src/modules/contacts/modules/timeline/components/utils/timeline-pin.vue
@@ -1,11 +1,12 @@
 <template>
   <component
     :is="state.component"
+    :color="state.color"
     @click="emit('click')"
   >
     {{ text }}
   </component>
-  <wt-divider
+  <timeline-separator
     :color="state.color"
   />
 </template>
@@ -13,6 +14,7 @@
 <script setup>
 import { computed } from 'vue';
 import TimelinePinType from '../../enums/TimelinePinType.enum.js';
+import TimelineSeparator from './timeline-separator.vue';
 
 const props = defineProps({
   type: {
@@ -80,10 +82,6 @@ const stateMap = {
 
 };
 
-const text = computed(() => {
-  return props.text && '123'; // day number
-});
-
 const state = computed(() => {
   if (props.collapsed) {
     return stateMap[TimelinePinType.CLOSE];
@@ -93,7 +91,4 @@ const state = computed(() => {
 </script>
 
 <style scoped lang="scss">
-.wt-divider {
-  //transform: ;
-}
 </style>
diff --git a/src/modules/contacts/modules/timeline/components/utils/timeline-row-info.vue b/src/modules/contacts/modules/timeline/components/utils/timeline-row-info.vue
index 2bfcef28..a75a3e18 100644
--- a/src/modules/contacts/modules/timeline/components/utils/timeline-row-info.vue
+++ b/src/modules/contacts/modules/timeline/components/utils/timeline-row-info.vue
@@ -22,6 +22,7 @@
 
 <script setup>
 import { computed } from 'vue';
+import { useI18n } from 'vue-i18n';
 
 const props = defineProps({
   timestamp: {
@@ -30,6 +31,8 @@ const props = defineProps({
   },
 });
 
+const { d } = useI18n();
+
 const timestampTime = computed(() => {
   const date = new Date(+props.timestamp);
   return date.toLocaleTimeString();
@@ -37,12 +40,12 @@ const timestampTime = computed(() => {
 
 const timestampWeekDay = computed(() => {
   const date = new Date(+props.timestamp);
-  return date.toLocaleString('en', { weekday: 'short' }).toLowerCase();
+  return d(date, { weekday: 'long' });
 });
 
 const timestampMonth = computed(() => {
   const date = new Date(+props.timestamp);
-  return date.toLocaleString('en', { month: 'short' }).toLowerCase();
+  return d(date, { month: 'short' });
 });
 
 const timesScope = computed(() => {
@@ -56,5 +59,8 @@ const timesScope = computed(() => {
 </script>
 
 <style lang="scss" scoped>
-// TODO
+.timeline-row-info-title,
+.timeline-row-info-subtitle {
+  @extend %typo-subtitle-2;
+}
 </style>
diff --git a/src/modules/contacts/modules/timeline/components/utils/timeline-separator.vue b/src/modules/contacts/modules/timeline/components/utils/timeline-separator.vue
new file mode 100644
index 00000000..63ce5638
--- /dev/null
+++ b/src/modules/contacts/modules/timeline/components/utils/timeline-separator.vue
@@ -0,0 +1,39 @@
+<template>
+  <div
+    :class="`timeline-separator--${color}`"
+    class="timeline-separator"></div>
+</template>
+
+<script setup>
+const props = defineProps({
+  color: {
+    type: String,
+    default: 'default',
+  },
+});
+</script>
+
+<style lang="scss" scoped>
+.timeline-separator {
+  height: var(--spacing-sm);
+  width: 1px;
+  position: relative;
+  display: block;
+  background-color: var(--btn-secondary-color);
+  bottom: 0;
+  left: 50%;
+  transform: translate(50%, 0);
+
+  &--success {
+    background-color: var(--success-color);
+  }
+
+  &--primary {
+    background-color: var(--primary-color);
+  }
+
+  &--error {
+    background-color: var(--error-color);
+  }
+}
+</style>
diff --git a/src/modules/contacts/modules/timeline/components/event-status-detail.vue b/src/modules/contacts/modules/timeline/components/utils/timeline-task-status.vue
similarity index 61%
rename from src/modules/contacts/modules/timeline/components/event-status-detail.vue
rename to src/modules/contacts/modules/timeline/components/utils/timeline-task-status.vue
index 8308437e..df247825 100644
--- a/src/modules/contacts/modules/timeline/components/event-status-detail.vue
+++ b/src/modules/contacts/modules/timeline/components/utils/timeline-task-status.vue
@@ -1,14 +1,11 @@
 <template>
-  <div class="event-status-detail">
-    <span class="event-status-detail__time">{{ eventTime }}</span>
-    <div class="event-status-detail__inner">
+    <div class="timeline-task-status">
       <wt-indicator
         size="sm"
         :color=statusColor
       ></wt-indicator>
       <p>{{ t(`contacts.timeline.status.${ status }`) }}</p>
     </div>
-  </div>
 </template>
 
 <script setup>
@@ -16,9 +13,6 @@ import { computed } from 'vue';
 import { useI18n } from 'vue-i18n';
 
 const props = defineProps({
-  time: {
-    type: Number,
-  },
   status: {
     type: String,
     default: 'started',
@@ -28,7 +22,6 @@ const props = defineProps({
 
 const { t } = useI18n();
 
-const eventTime = computed(() => new Date(+props.time).toLocaleTimeString());
 const statusColor = computed(() => {
   switch (props.status) {
     case 'started':
@@ -42,19 +35,8 @@ const statusColor = computed(() => {
 </script>
 
 <style lang="scss" scoped>
-.event-status-detail {
+.timeline-task-status {
   display: flex;
-  flex-direction: column;
   gap: var(--spacing-xs);
-
-  &__time {
-    @extend %typo-subtitle-2;
-  }
-
-  &__inner {
-    @extend %typo-body-2;
-    display: flex;
-    align-items: baseline;
-  }
 }
 </style>