Merge branch 'feature/timeline' of https://github.com/webitel/crm int…

…o feature/timeline

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",

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,
+      type,
+    } = 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 };;

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);
   }

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);

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>

src/modules/contacts/modules/timeline/components/task-row/call-task-timeline-row.vue

@@ -1,16 +1,16 @@
 <template>
   <div class="chat-task-timeline-row">
     <timeline-row>
-      <template v-slot:before-content>
+      <template #before-content>
         <timeline-row-info
           :timestamp="createdAt"
         >
           <template #title="{ time }">
             {{ 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: {

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}!`);
   }

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>

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 { filtersNamespace } = useTableFilters(props.namespace);
@@ -54,16 +54,16 @@ const taskCounters = computed(() => {
 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>
 

src/modules/contacts/modules/timeline/components/utils/timeline-pin.vue

@@ -1,18 +1,20 @@
 <template>
   <component
     :is="state.component"
+    :color="state.color"
     @click="emit('click')"
   >
     {{ text }}
   </component>
-  <wt-divider
+  <timeline-separator
     :color="state.color"
   />
 </template>
 
 <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>

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,19 +31,21 @@ const props = defineProps({
   },
 });
 
+const { d } = useI18n();
+
 const timestampTime = computed(() => {
   const date = new Date(+props.timestamp);
   return date.toLocaleTimeString();
 });
 
 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>

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>