fix:components layout and some computeds[WTEL-4418]

webitel · Apr 24, 2024 · 1a36b05 · 1a36b05
1 parent 66fa2f1
commit 1a36b05
Show file tree

Hide file tree

Showing 8 changed files with 97 additions and 83 deletions.
diff --git a/...les/contacts/modules/timeline/components/call-task-actions/call-task-timeline-actions.vue b/...les/contacts/modules/timeline/components/call-task-actions/call-task-timeline-actions.vue
@@ -1,23 +1,26 @@
 <template>
-  <wt-context-menu
-    :options="options"
-    @click="$event.option.handler()"
-  >
-    <template #activator>
-      <wt-tooltip>
-        <template #activator>
-          <wt-icon-btn
-            icon="options"
-          />
-        </template>
-        {{ t('vocabulary.options', 2) }}
-      </wt-tooltip>
-    </template>
+  <div class="call-task-timeline-actions">
+    <wt-context-menu
+      :options="options"
+      @click="$event.option.handler()"
+    >
+      <template #activator>
+        <wt-tooltip>
+          <template #activator>
+            <wt-icon-btn
+              icon="options"
+            />
+          </template>
+          {{ t('vocabulary.options', 2) }}
+        </wt-tooltip>
+      </template>
+
+      <template #option="option">
+        <p>{{ option.text }}</p>
+      </template>
+    </wt-context-menu>
+  </div>
 
-    <template #option="option">
-      <p>{{ option.text }}</p>
-    </template>
-  </wt-context-menu>
 </template>
 <script setup>
 import { computed } from 'vue';
@@ -26,8 +29,8 @@ import { useI18n } from 'vue-i18n';
 const props = defineProps({
   id: {
     type: String,
-  }
-})
+  },
+});
 
 const { t } = useI18n();
 const historyLink = `${import.meta.env.VITE_HISTORY_URL}/${props.id}`;
@@ -42,3 +45,10 @@ const options = computed(() => {
   ];
 });
 </script>
+
+<style lang="scss" scoped>
+.call-task-timeline-actions {
+  display: flex;
+  align-items: center;
+}
+</style>
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
@@ -10,7 +10,7 @@
     <div v-if="opened">
       <task-timeline-row
         v-for="(item) of props.day.items"
-        :item="item"
+        :task="item"
         :key="item.id"
       ></task-timeline-row>
     </div>

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
@@ -23,36 +23,39 @@
 
       <template v-slot:content>
         <div class="chat-task-timeline-row__content">
-          <timeline-row-initiator
-            :type="taskType"
-            :text="taskInitiator"
-          ></timeline-row-initiator>
-
-          <wt-chip
-            v-if="hiddenUsers.length"
-            @click="openHiddenUsers = !openHiddenUsers"
-          >{{ +hiddenUsers.lenght }}
-          </wt-chip>
-
-          <div v-if="openHiddenUsers">
+          <div class="chat-task-timeline-row__wrapper">
             <timeline-row-initiator
-              v-for="user of hiddenUsers"
-              :text="user.name"
+              :type="taskType"
+              :text="taskInitiator.name"
             ></timeline-row-initiator>
-          </div>
 
-          <timeline-row-duration
-            :duration="duration"
-          ></timeline-row-duration>
+            <wt-chip
+              v-if="hiddenUsers.length"
+              @click="openHiddenUsers = !openHiddenUsers"
+            >{{ +hiddenUsers.lenght }}
+            </wt-chip>
+
+            <div v-if="openHiddenUsers">
+              <timeline-row-initiator
+                v-for="user of hiddenUsers"
+                :text="user.name"
+              ></timeline-row-initiator>
+            </div>
+
+            <timeline-row-duration
+              :duration="duration"
+            ></timeline-row-duration>
+
         </div>
-      </template>
 
-        <template v-slot:after-content>
           <call-task-timeline-actions
             v-if="taskType !== TimelinePinTypeEnum.CHAT"
             :id="id"
           ></call-task-timeline-actions>
-        </template>
+
+        </div>
+      </template>
+
     </timeline-row>
   </div>
 </template>
@@ -71,7 +74,7 @@ import TimelineTaskStatus from '../utils/timeline-task-status.vue';
 import CallTaskTimelineActions from '../call-task-actions/call-task-timeline-actions.vue';
 
 const props = defineProps({
-  item: {
+  task: {
     type: Object,
     required: true,
   },
@@ -86,10 +89,9 @@ const {
   flowScheme,
   queue,
   id,
-} = toRefs(props.item);
+} = toRefs(props.task);
 
 const openHiddenUsers = ref(false);
-const hiddenUsers = computed(() => participants.value.filter((participant, idx) => idx));
 
 const taskType = computed(() => {
   if (type.value === WebitelContactsTimelineEventType.Chat) {
@@ -113,23 +115,35 @@ const taskStatus = computed(() => taskType.value.includes(TimelinePinTypeEnum.CA
 const taskInitiator = computed(() => {
   switch (taskType.value) {
     case TimelinePinTypeEnum.CALL_INBOUND_ON_IVR:
-      return flowScheme.value.name;
+      return flowScheme.value;
     case TimelinePinTypeEnum.CALL_MISSED_ON_QUEUE:
-      return queue.value.name;
+      return queue.value;
     default:
-      return participants.value[0].name;
+      return participants.value[0];
   }
 });
+
+const hiddenUsers = computed(() => participants.value.filter(participant => participant.id !==  taskInitiator.value.id));
 </script>
 
 <style lang="scss" scoped>
-.chat-task-timeline-row__content {
-  display: flex;
-  gap: var(--spacing-sm);
-  align-items: center;
-  padding: var(--spacing-xs) var(--spacing-sm);
-  border-radius: var(--border-radius);
-  box-shadow: var(--elevation-1);
+.chat-task-timeline-row {
+  &__content {
+    display: flex;
+    gap: var(--spacing-sm);
+    align-items: center;
+    justify-content: space-between;
+    width: 100%;
+    padding: var(--spacing-xs) var(--spacing-sm);
+    border-radius: var(--border-radius);
+    box-shadow: var(--elevation-1);
+    min-height: var(--spacing-2xl);
+  }
+
+  &__wrapper {
+    display: flex;
+    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
@@ -1,7 +1,7 @@
 <template>
   <component
     :is="component"
-    :item="item"
+    :task="task"
   />
 </template>
 
@@ -12,17 +12,17 @@ import CallTaskTimelineRow from './call-task-timeline-row.vue';
 import { WebitelContactsTimelineEventType } from 'webitel-sdk';
 
 const props = defineProps({
-  item: {
+  task: {
     type: Object,
     required: true,
   },
 });
 
 const component = computed(() => {
-  switch (props.item.type) {
+  switch (props.task.type) {
     case WebitelContactsTimelineEventType.Chat: return ChatTaskTimelineRow;
     case WebitelContactsTimelineEventType.Call: return CallTaskTimelineRow;
-    default: throw new Error(`Unknown item type, ${props.item.type}!`);
+    default: throw new Error(`Unknown item type, ${props.task.type}!`);
   }
 });
 </script>

diff --git a/src/modules/contacts/modules/timeline/components/timeline-header.vue b/src/modules/contacts/modules/timeline/components/timeline-header.vue
@@ -50,20 +50,19 @@ 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)));
-const displayedDateTo = computed(() => dateTo.value || (new Date().getTime()));
+const durationTimeline = computed(() => {
+  const formatDate = (date) => {
+    const fullDate = new Date(+date);
+    const mouth = d(fullDate, { month: 'long' });
+    const year = d(fullDate, { year: 'numeric' });
+    return `${mouth} ${year}`;
+  }
 
-const durationTimeline = computed(() => `${formatDate(displayedDateFrom.value)} - ${formatDate(displayedDateTo.value)}`);
+  const from = props.list.at(-1)?.dayTimestamp || (new Date().setMonth(new Date().getMonth() - 1));
+  const to = props.list.at(1)?.dayTimestamp || new Date().getTime();
 
-function formatDate(date) {
-  const fullDate = new Date(+date);
-  const mouth = d(fullDate, { month: 'long' });
-  const year = d(fullDate, { year: 'numeric' });
-  return `${mouth} ${year}`;
-}
+  return `${formatDate(from)} - ${formatDate(to)}`
+})
 </script>
 
 <style lang="scss" scoped>

diff --git a/src/modules/contacts/modules/timeline/components/utils/timeline-row-duration.vue b/src/modules/contacts/modules/timeline/components/utils/timeline-row-duration.vue
@@ -22,6 +22,7 @@ const { t } = useI18n();
 .timeline-row-duration {
   display: flex;
   gap: var(--spacing-sm);
+  margin: auto 0;
 
   &__title {
     @extend %typo-subtitle-1;

diff --git a/src/modules/contacts/modules/timeline/components/utils/timeline-row.vue b/src/modules/contacts/modules/timeline/components/utils/timeline-row.vue
@@ -18,12 +18,6 @@
         <slot name="content" />
       </section>
 
-      <section
-        v-if="slots['after-content']"
-        class="timeline-row-after-content"
-      >
-        <slot name="after-content" />
-      </section>
     </header>
     <section
       class="timeline-row-dropdown"
@@ -82,10 +76,6 @@ const toggle = () => {
   flex: 1;
 }
 
-.timeline-row-after-content {
-  flex: 0 0 24px;
-}
-
 .timeline-row--width-fit-content {
   .timeline-row-content {
     flex: 0 0 auto;

diff --git a/...es/contacts/modules/timeline/modules/chats/components/task-row/chat-task-timeline-row.vue b/...es/contacts/modules/timeline/modules/chats/components/task-row/chat-task-timeline-row.vue
@@ -60,7 +60,7 @@ import TimelineTaskStatus from '../../../../enums/TimelineTaskStatus.enum.js';
 import ChatPointsRowSection from '../point-row/chat-points-row-section.vue';
 
 const props = defineProps({
-  item: {
+  task: {
     type: Object,
     required: true,
   },
@@ -76,7 +76,7 @@ const {
   flowScheme,
   queue,
   id: chatId,
-} = toRefs(props.item);
+} = toRefs(props.task);
 
 const store = useStore();