refactor: timeline refactors [WTEL-4465]

webitel · Apr 29, 2024 · 1b496f8 · 1b496f8
1 parent b4adbe6
commit 1b496f8
Show file tree

Hide file tree

Showing 17 changed files with 211 additions and 138 deletions.
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>
@@ -30,15 +30,19 @@ const { t } = useI18n();
 </script>
 
 <style scoped lang="scss">
+$colWidth: 80px;
+
 .day-timeline-row-counters {
   display: flex;
   align-items: flex-start;
   justify-content: flex-end;
 
   &__wrapper {
     @extend %typo-body-2;
-    display: flex;
+    display: grid;
+    grid-template-columns: repeat(2, $colWidth);
     gap: var(--spacing-xs);
+    text-align: right;
   }
 }
 </style>
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
@@ -24,8 +24,8 @@
 
     <template v-slot:content>
       <day-timeline-row-counters
-        :callsCount="props.callsCount"
-        :chatsCount="props.chatsCount"
+        :callsCount="callsCount"
+        :chatsCount="chatsCount"
       />
     </template>
 

diff --git a/...dules/contacts/modules/timeline/components/task-row/task-timeline-row-content-wrapper.vue b/...dules/contacts/modules/timeline/components/task-row/task-timeline-row-content-wrapper.vue
@@ -0,0 +1,22 @@
+<template>
+  <div class="task-timeline-row-content-wrapper">
+    <slot/>
+  </div>
+</template>
+
+<script setup>
+
+</script>
+
+<style lang="scss" scoped>
+.task-timeline-row-content-wrapper {
+  display: flex;
+  align-items: center;
+  width: 100%;
+  min-height: 40px; // wt-avatar height
+  padding: var(--spacing-xs) var(--spacing-sm);
+  border-radius: var(--border-radius);
+  box-shadow: var(--elevation-1);
+  gap: var(--spacing-sm);
+}
+</style>
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
@@ -7,9 +7,9 @@
 
 <script setup>
 import { computed } from 'vue';
-import ChatTaskTimelineRow from '../../modules/chats/components/task-row/chat-task-timeline-row.vue';
-import CallTaskTimelineRow from '../../modules/calls/components/task-row/call-task-timeline-row.vue';
 import { WebitelContactsTimelineEventType } from 'webitel-sdk';
+import CallTaskTimelineRow from '../../modules/calls/components/task-row/call-task-timeline-row.vue';
+import ChatTaskTimelineRow from '../../modules/chats/components/task-row/chat-task-timeline-row.vue';
 
 const props = defineProps({
   task: {
@@ -20,9 +20,12 @@ const props = defineProps({
 
 const component = computed(() => {
   switch (props.task.type) {
-    case WebitelContactsTimelineEventType.Chat: return ChatTaskTimelineRow;
-    case WebitelContactsTimelineEventType.Call: return CallTaskTimelineRow;
-    default: throw new Error(`Unknown item type, ${props.task.type}!`);
+    case WebitelContactsTimelineEventType.Chat:
+      return ChatTaskTimelineRow;
+    case WebitelContactsTimelineEventType.Call:
+      return CallTaskTimelineRow;
+    default:
+      throw new Error(`Unknown item type, ${props.task.type}!`);
   }
 });
 </script>

diff --git a/src/modules/contacts/modules/timeline/components/the-timeline.vue b/src/modules/contacts/modules/timeline/components/the-timeline.vue
@@ -1,5 +1,5 @@
 <template>
-  <timeline-container class="timeline">
+  <timeline-container class="the-timeline">
     <template #header>
       <timeline-header
         :list="dataList"
@@ -14,7 +14,6 @@
       <wt-dummy
         v-else-if="!dataList.length"
         :src="darkMode ? dummyDark : dummyLight"
-        class="timeline-dummy"
       />
 
       <day-timeline-row
@@ -67,7 +66,7 @@ function initializeList() {
 </script>
 
 <style lang="scss" scoped>
-.timeline-dummy {
+.wt-dummy {
   height: 100%;
 }
 </style>
diff --git a/src/modules/contacts/modules/timeline/components/timeline-container.vue b/src/modules/contacts/modules/timeline/components/timeline-container.vue
@@ -25,7 +25,7 @@
 
 .timeline-content {
   @extend %wt-scrollbar;
-  overflow-y: auto;
+  overflow-y: scroll;
   height: 100%;
   padding: var(--spacing-sm);
 }

diff --git a/src/modules/contacts/modules/timeline/components/timeline-header.vue b/src/modules/contacts/modules/timeline/components/timeline-header.vue
@@ -3,18 +3,18 @@
     v-if="showHeader"
     class="timeline-header"
   >
-    <p class="timeline-header__duration">
+    <p class="timeline-header-duration">
       {{ timelineInterval }}
     </p>
-    <div class="timeline-header__actions">
+    <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"
-        @click="closeOpenRows"
+        class="timeline-header-collapse"
+        @click="collapseAll"
       >
         {{ t('contacts.collapseAll') }}
       </button>
@@ -28,7 +28,6 @@ import { useI18n } from 'vue-i18n';
 import { WebitelContactsTimelineEventType } from 'webitel-sdk';
 import { useTableFilters } from '@webitel/ui-sdk/src/modules/Filters/composables/useTableFilters.js';
 import TimelineTaskTypeFilter from '../modules/filters/components/timeline-task-type-filter.vue';
-import eventBus from '@webitel/ui-sdk/src/scripts/eventBus';
 
 const props = defineProps({
   list: {
@@ -38,14 +37,13 @@ const props = defineProps({
 });
 
 const namespace = inject('namespace');
-const eventBusObj = inject('eventBusObj', eventBus);
+const eventBus = inject('$eventBus');
 
 const { d, t } = useI18n();
 
 const { filtersNamespace } = useTableFilters(namespace);
 
-// FIXME: what is showHeader condition?
-const showHeader = computed(() => true || props.list.length || Object.values(taskCounters.value).some(num => num));
+const showHeader = computed(() => true);
 
 const taskCounters = computed(() => {
     return props.list.reduce((acc, { callsCount = 0, chatsCount = 0 }) => {
@@ -73,8 +71,8 @@ const timelineInterval = computed(() => {
   return `${formatDate(from)} - ${formatDate(to)}`;
 })
 
-function closeOpenRows () {
-  return eventBusObj.$emit('collapse-all')
+function collapseAll () {
+  return eventBus.$emit('timeline/rows/collapse-all');
 }
 
 </script>
@@ -85,22 +83,21 @@ function closeOpenRows () {
   justify-content: space-between;
   align-items: center;
   padding: var(--spacing-xs) var(--spacing-sm);
-  border: 1px solid var(--grey-lighten-1);
+  border: 1px solid var(--wt-table-head-border-color);
   border-radius: var(--border-radius);
+}
 
-  &__duration {
-    @extend %typo-subtitle-2;
-  }
+.timeline-header-duration {
+  @extend %typo-subtitle-2;
+}
 
-  &__actions {
-    display: flex;
-    gap: var(--spacing-md);
-  }
+.timeline-header-actions {
+  display: flex;
+  gap: var(--spacing-md);
+}
 
-  &__collapse {
-    @extend %typo-body-2;
-    margin: auto;
-    cursor: pointer;
-  }
+.timeline-header-collapse {
+  @extend %typo-body-2;
+  cursor: pointer;
 }
 </style>
diff --git a/src/modules/contacts/modules/timeline/components/utils/timeline-flow-line.vue b/src/modules/contacts/modules/timeline/components/utils/timeline-flow-line.vue
@@ -10,21 +10,38 @@
 const props = defineProps({
   color: {
     type: String,
-    default: 'default',
+    validator: (v) => [
+      'default', // icon color
+      'success',
+      'primary',
+      'error',
+      'secondary',
+      'chat',
+      'transfer',
+    ].includes(v),
   },
 });
 </script>
 
 <style lang="scss" scoped>
 .timeline-flow-line {
-  height: var(--spacing-sm);
   width: 1px;
-  position: relative;
-  display: block;
-  background-color: var(--btn-secondary-color);
-  bottom: 0;
- //// left: 50%;
-  transform: translate(50%, 0);
+
+  &--default {
+    background-color: var(--icon-color);
+  }
+
+  &--secondary {
+    background-color: var(--secondary-color);
+  }
+
+  &--chat {
+    background-color: var(--chat-color);
+  }
+
+  &--transfer {
+    background-color: var(--transfer-color);
+  }
 
   &--success {
     background-color: var(--success-color);

diff --git a/src/modules/contacts/modules/timeline/components/utils/timeline-pin.vue b/src/modules/contacts/modules/timeline/components/utils/timeline-pin.vue
@@ -1,15 +1,17 @@
 <template>
-  <component
-    :is="state.component"
-    :color="state.color"
-    :icon="state.icon"
-    @click="state.handler && state.handler()"
-  >
-    {{ text }}
-  </component>
-  <timeline-flow-line
-    :color="state.color"
-  />
+  <div class="timeline-pin">
+    <component
+      :is="state.component"
+      :color="state.color"
+      :icon="state.icon"
+      @click="state.handler && state.handler()"
+    >
+      {{ text }}
+    </component>
+    <timeline-flow-line
+      :color="state.color"
+    />
+  </div>
 </template>
 
 <script setup>
@@ -46,6 +48,7 @@ const stateMap = {
   [TimelinePinType.CLOSE]: {
     component: TimelineRoundedAction,
     icon: 'close',
+    color: 'secondary',
     handler: handleClick,
   },
 
@@ -111,10 +114,20 @@ const stateMap = {
 };
 
 const state = computed(() => {
-  if(props.type === TimelinePinType.DAY) return stateMap[TimelinePinType.DAY];
+  if (props.type === TimelinePinType.DAY) return stateMap[TimelinePinType.DAY];
   return props.collapsed ? stateMap[props.type] : stateMap[TimelinePinType.CLOSE];
 });
 </script>
 
-<style scoped lang="scss">
+<style lang="scss" scoped>
+.timeline-pin {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  height: 100%;
+
+  .timeline-flow-line {
+    flex: 1;
+  }
+}
 </style>
diff --git a/src/modules/contacts/modules/timeline/components/utils/timeline-rounded-action.vue b/src/modules/contacts/modules/timeline/components/utils/timeline-rounded-action.vue
@@ -5,6 +5,7 @@
     class="timeline-rounded-action"
     :class="[`timeline-rounded-action--${color}`]"
     rounded
+    @click="emit('click')"
   />
 </template>
 
@@ -23,6 +24,10 @@ const props = defineProps({
   },
 });
 
+const emit = defineEmits([
+  'click',
+]);
+
 const iColor = computed(() => (props.color === 'secondary') ? 'default' : 'on-dark');
 </script>
 

diff --git a/src/modules/contacts/modules/timeline/components/utils/timeline-row-dropdown-transition.vue b/src/modules/contacts/modules/timeline/components/utils/timeline-row-dropdown-transition.vue
@@ -0,0 +1,22 @@
+<template>
+  <transition name="timeline-row-dropdown-transition">
+    <slot />
+  </transition>
+</template>
+
+<script setup>
+
+</script>
+
+<style lang="scss">
+.timeline-row-dropdown-transition-enter-active,
+.timeline-row-dropdown-transition-leave-active {
+  transition: all 0.2s ease;
+}
+
+.timeline-row-dropdown-transition-enter-from,
+.timeline-row-dropdown-transition-leave-to {
+  opacity: 0;
+  transform: translateY(-50px);
+}
+</style>