fix: computed props in chat-task-time-row component[WTEL-4418]

webitel · Apr 25, 2024 · e4ab2aa · e4ab2aa
1 parent 1a36b05
commit e4ab2aa
Show file tree

Hide file tree

Showing 5 changed files with 120 additions and 90 deletions.
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
@@ -15,29 +15,31 @@
         </timeline-row-info>
       </template>
 
-      <template v-slot:pin>
+      <template #pin="{ toggle, collapsed }">
         <timeline-pin
+          :collapsed="collapsed"
           :type="taskType"
+          @click="toggle"
         ></timeline-pin>
       </template>
 
       <template v-slot:content>
-        <div class="chat-task-timeline-row__content">
-          <div class="chat-task-timeline-row__wrapper">
+        <div class="call-task-timeline-row__content">
+          <div class="call-task-timeline-row__wrapper">
             <timeline-row-initiator
               :type="taskType"
               :text="taskInitiator.name"
             ></timeline-row-initiator>
 
             <wt-chip
-              v-if="hiddenUsers.length"
-              @click="openHiddenUsers = !openHiddenUsers"
-            >{{ +hiddenUsers.lenght }}
+              v-if="hiddenParticipants.length"
+              @click="openHiddenParticipants = !openHiddenParticipants"
+            >{{ +hiddenParticipants.lenght }}
             </wt-chip>
 
-            <div v-if="openHiddenUsers">
+            <div v-if="openHiddenParticipants">
               <timeline-row-initiator
-                v-for="user of hiddenUsers"
+                v-for="user of hiddenParticipants"
                 :text="user.name"
               ></timeline-row-initiator>
             </div>
@@ -46,7 +48,7 @@
               :duration="duration"
             ></timeline-row-duration>
 
-        </div>
+          </div>
 
           <call-task-timeline-actions
             v-if="taskType !== TimelinePinTypeEnum.CHAT"
@@ -62,7 +64,6 @@
 
 <script setup>
 import { computed, toRefs, ref } from 'vue';
-import { WebitelContactsTimelineEventType } from 'webitel-sdk';
 import TimelinePinTypeEnum from '../../enums/TimelinePinType.enum.js';
 import TimelineTaskStatusEnum from '../../enums/TimelineTaskStatus.enum.js';
 import TimelinePin from '../utils/timeline-pin.vue';
@@ -83,29 +84,24 @@ const props = defineProps({
 const {
   createdAt,
   participants,
-  type,
+  isInbound,
   isMissed,
   duration,
   flowScheme,
   queue,
   id,
 } = toRefs(props.task);
 
-const openHiddenUsers = ref(false);
+const openHiddenParticipants = ref(false);
 
 const taskType = computed(() => {
-  if (type.value === WebitelContactsTimelineEventType.Chat) {
-    return TimelinePinTypeEnum.CHAT;
-  } else {
+  if(isInbound.value) {
     if (isMissed?.value) {
-      if (queue?.value) return TimelinePinTypeEnum.CALL_MISSED_ON_QUEUE;
-      return TimelinePinTypeEnum.CALL_MISSED;
+      return queue?.value ? TimelinePinTypeEnum.CALL_MISSED_ON_QUEUE : TimelinePinTypeEnum.CALL_MISSED;
     } else {
-      if (!queue?.value) return TimelinePinTypeEnum.CALL_INBOUND_ON_IVR;
-      return TimelinePinTypeEnum.CALL_INBOUND;
+      return !queue?.value ? TimelinePinTypeEnum.CALL_INBOUND_ON_IVR : TimelinePinTypeEnum.CALL_INBOUND;
     }
-    return TimelinePinTypeEnum.CALL_OUTBOUND;
-  }
+  } return TimelinePinTypeEnum.CALL_OUTBOUND;
 });
 
 const taskStatus = computed(() => taskType.value.includes(TimelinePinTypeEnum.CALL_MISSED)
@@ -123,11 +119,11 @@ const taskInitiator = computed(() => {
   }
 });
 
-const hiddenUsers = computed(() => participants.value.filter(participant => participant.id !==  taskInitiator.value.id));
+const hiddenParticipants = computed(() => participants?.value?.filter(participant => participant.id !== taskInitiator.value.id));
 </script>
 
 <style lang="scss" scoped>
-.chat-task-timeline-row {
+.call-task-timeline-row {
   &__content {
     display: flex;
     gap: var(--spacing-sm);

diff --git a/src/modules/contacts/modules/timeline/components/utils/timeline-pin.vue b/src/modules/contacts/modules/timeline/components/utils/timeline-pin.vue
@@ -13,7 +13,7 @@
 
 <script setup>
 import { computed } from 'vue';
-import TimelinePinType from '../../enums/TimelinePinType.enum.js';
+import TimelinePinTypeEnum from '../../enums/TimelinePinType.enum.js';
 import TimelineSeparator from './timeline-separator.vue';
 
 const props = defineProps({
@@ -36,51 +36,51 @@ const emit = defineEmits([
 ]);
 
 const stateMap = {
-  [TimelinePinType.DAY]: {
+  [TimelinePinTypeEnum.DAY]: {
     component: 'wt-button',
     color: 'secondary',
   },
-  [TimelinePinType.CLOSE]: {
+  [TimelinePinTypeEnum.CLOSE]: {
     component: 'wt-rounded-action',
     icon: 'close',
     rounded: true,
   },
-  [TimelinePinType.CHAT]: {
+  [TimelinePinTypeEnum.CHAT]: {
     component: 'wt-rounded-action',
     color: 'chat',
     icon: 'chat',
     filled: true,
     rounded: true,
   },
-  [TimelinePinType.CALL_INBOUND]: {
+  [TimelinePinTypeEnum.CALL_INBOUND]: {
     component: 'wt-rounded-action',
     color: 'primary',
     icon: 'call-inbound',
     filled: true,
     rounded: true,
   },
-  [TimelinePinType.CALL_OUTBOUND]: {
+  [TimelinePinTypeEnum.CALL_OUTBOUND]: {
     component: 'wt-rounded-action',
     color: 'success',
     icon: 'call-outbound',
     filled: true,
     rounded: true,
   },
-  [TimelinePinType.CALL_MISSED]: {
+  [TimelinePinTypeEnum.CALL_MISSED]: {
     component: 'wt-rounded-action',
     color: 'error',
     icon: 'call-missed',
     filled: true,
     rounded: true,
   },
-  [TimelinePinType.CALL_INBOUND_ON_IVR]: {
+  [TimelinePinTypeEnum.CALL_INBOUND_ON_IVR]: {
     component: 'wt-rounded-action',
     color: 'primary',
     icon: 'call-inbound',
     filled: true,
     rounded: true,
   },
-  [TimelinePinType.CALL_MISSED_ON_QUEUE]: {
+  [TimelinePinTypeEnum.CALL_MISSED_ON_QUEUE]: {
     component: 'wt-rounded-action',
     color: 'error',
     icon: 'call-missed',
@@ -91,8 +91,8 @@ const stateMap = {
 };
 
 const state = computed(() => {
-  if(props.type === TimelinePinType.DAY) return stateMap[TimelinePinType.DAY];
-  return props.collapsed ? stateMap[props.type] : stateMap[TimelinePinType.CLOSE];
+  if(props.type === TimelinePinTypeEnum.DAY) return stateMap[TimelinePinTypeEnum.DAY];
+  return props.collapsed ? stateMap[props.type] : stateMap[TimelinePinTypeEnum.CLOSE];
 });
 
 const handleClick = () => {

diff --git a/src/modules/contacts/modules/timeline/components/utils/timeline-row-initiator.vue b/src/modules/contacts/modules/timeline/components/utils/timeline-row-initiator.vue
@@ -1,13 +1,19 @@
 <template>
   <div class="timeline-row-initiator">
-    <div v-if="type === TimelinePinTypeEnum.CALL_INBOUND_ON_IVR">
-      <wt-icon
-        icon="bot"
-      ></wt-icon>
+    <div
+      v-if="isDisplayBotName"
+      class="timeline-row-initiator-bot"
+    >
+      <div class="timeline-row-initiator-bot__icon">
+        <wt-icon
+          icon="bot"
+        ></wt-icon>
+
+      </div>
       <p>{{ text }}</p>
     </div>
 
-    <div v-else-if="type === TimelinePinTypeEnum.CALL_MISSED_ON_QUEUE">
+    <div v-else-if="isDisplayFlowSchemeName">
       <wt-chip
         color="secondary"
       >{{text}}</wt-chip>
@@ -26,6 +32,7 @@
 
 <script setup>
 import TimelinePinTypeEnum from '../../enums/TimelinePinType.enum.js';
+import { computed } from 'vue';
 
 const props = defineProps({
   text: {
@@ -36,16 +43,35 @@ const props = defineProps({
     type: String,
   }
 });
+
+const isDisplayBotName = computed(() => props.type === TimelinePinTypeEnum.CALL_INBOUND_ON_IVR || props.type === TimelinePinTypeEnum.CHAT_GATEWAY);
+const isDisplayFlowSchemeName = computed(() => props.type === TimelinePinTypeEnum.CALL_MISSED_ON_QUEUE);
 </script>
 
 <style  lang="scss" scoped>
-.timeline-row-initiator-user {
-  display: flex;
-  align-items: center;
-  gap: var(--spacing-xs);
+.timeline-row-initiator {
+  &-user {
+    display: flex;
+    align-items: center;
+    gap: var(--spacing-xs);
 
-  &__name {
-    @extend %typo-subtitle-1;
+    &__name {
+      @extend %typo-subtitle-1;
+    }
+  }
+
+  &-bot {
+    display: flex;
+    gap: var(--spacing-xs);
+    align-items: center;
+
+    &__icon {
+      background-color: var(--secondary-color);
+      padding: var(--spacing-xs);
+      border-radius: 50%;
+      height: 40px; ///?
+    }
   }
 }
+
 </style>
diff --git a/src/modules/contacts/modules/timeline/enums/TimelinePinType.enum.js b/src/modules/contacts/modules/timeline/enums/TimelinePinType.enum.js
@@ -2,10 +2,11 @@ const TimelinePinType = Object.freeze({
   DAY: 'DAY',
   CLOSE: 'CLOSE',
   CHAT: 'CHAT',
+  CHAT_GATEWAY: 'CHAT_GATEWAY',
   CALL_INBOUND: 'CALL_INBOUND',
+  CALL_INBOUND_ON_IVR: 'CALL_INBOUND_ON_IVR',
   CALL_OUTBOUND: 'CALL_OUTBOUND',
   CALL_MISSED: 'CALL_MISSED',
-  CALL_INBOUND_ON_IVR: 'CALL_INBOUND_ON_IVR',
   CALL_MISSED_ON_QUEUE: 'CALL_MISSED_ON_QUEUE',
 
   CALL_TRANSFER: 'CALL_TRANSFER',