refactor: timeline chats reorganization [WTEL-4465]

src/modules/contacts/modules/timeline/components/utils/timeline-row-duration.vue

@@ -1,13 +1,14 @@
 <template>
   <div class="timeline-row-duration">
     <p class="timeline-row-duration__title">{{ t('vocabulary.duration') }}:</p>
-    <span class="timeline-row-duration__value">{{ ConvertDuration(duration) }}</span>
+    <span class="timeline-row-duration__value">{{ convertedDuration }}</span>
   </div>
 </template>
 
 <script setup>
+import { computed } from 'vue';
 import { useI18n } from 'vue-i18n';
-import ConvertDuration from '@webitel/ui-sdk/src/scripts/convertDuration.js';
+import convertDuration from '@webitel/ui-sdk/src/scripts/convertDuration.js';
 
 const props = defineProps({
   duration: {
@@ -16,6 +17,8 @@ const props = defineProps({
 });
 
 const { t } = useI18n();
+
+const convertedDuration = computed(() => convertDuration(props.duration));
 </script>
 
 <style scoped lang="scss">

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

@@ -16,6 +16,13 @@
 
       <section class="timeline-row-content">
         <slot name="content" />
+
+        <article
+          class="timeline-row-content-dropdown"
+          v-if="slots['content-dropdown'] && !collapsed"
+        >
+          <slot name="content-dropdown" v-bind="{ toggle, collapsed }" />
+        </article>
       </section>
 
     </header>

src/modules/contacts/modules/timeline/modules/chats/api/MessageHistoryAPI.js

@@ -2,33 +2,30 @@ import applyTransform, {
   notify,
   snakeToCamel,
 } from '@webitel/ui-sdk/src/api/transformers';
-import { TimelineApiFactory } from 'webitel-sdk';
+import { CatalogApiFactory } from 'webitel-sdk';
 import instance from '../../../../../../../app/api/instance';
 import configuration from '../../../../../../../app/api/openAPIConfig';
 
-const service = new TimelineApiFactory(configuration, '', instance);
+const service = new CatalogApiFactory(configuration, '', instance);
 
-const getList = async ({ contactId, chatId }) => {
-  const mergeMessageData = ({ peers, chats, messages }) => {
+const getList = async ({ taskId }) => {
+  const mergeMessageData = ({ peers, messages }) => {
     const peersMap = new Map(peers.map((peer) => [peer.id, peer]));
-    const chatsMap = new Map(chats.map((chat) => [chat.id, chat]));
-    return messages.map((message) => ({
+    return messages.map(({ peer, ...message }) => ({
       ...message,
-      peer: peersMap.get(message.peer.id),
-      chat: chatsMap.get(message.chat.id),
+      peer: peer && peersMap.get(message.peer.id),
     }));
   };
 
   try {
-    const response = await service.getDetailedMessageHistory(
-      contactId,
-      chatId,
+    const response = await service.getHistory(
+      taskId,
     );
-    const { chats, peers, messages } = applyTransform(response.data, [
+    const { peers, messages } = applyTransform(response.data, [
       snakeToCamel(),
     ]);
     return {
-      items: applyTransform({ chats, peers, messages }, [
+      items: applyTransform({ peers, messages }, [
         mergeMessageData,
       ]),
     };

src/modules/contacts/modules/timeline/modules/chats/components/point-row/chat-point-row.vue → src/modules/contacts/modules/timeline/modules/chats/components/point-row/chat-point-timeline-row.vue

@@ -10,9 +10,11 @@
       </timeline-row-info>
     </template>
 
-    <template #pin>
+    <template #pin="{ toggle, collapsed }">
       <timeline-pin
+        :collapsed="collapsed"
         :type="pinType"
+        @click="toggle"
       />
     </template>
 
@@ -21,11 +23,11 @@
         icon="expand"
       />
       <timeline-row-initiator
-        text="point initiator"
+        :text="initiator"
       />
     </template>
 
-    <template #dropdown>
+    <template #content-dropdown>
       <chat-point-row-dropdown />
     </template>
   </timeline-row>
@@ -38,7 +40,7 @@ import TimelineRow from '../../../../components/utils/timeline-row.vue';
 import TimelinePin from '../../../../components/utils/timeline-pin.vue';
 import TimelineRowInitiator from '../../../../components/utils/timeline-row-initiator.vue';
 import TimelinePinType from '../../../../enums/TimelinePinType.enum.js';
-import ChatPointRowDropdown from './chat-point-row-dropdown.vue';
+import ChatPointRowDropdown from './chat-point-timeline-row-dropdown.vue';
 
 const props = defineProps({
   point: {
@@ -52,9 +54,11 @@ const {
 } = toRefs(props);
 
 const pinType = computed(() => {
-  return TimelinePinType.CHAT_INVITE;
+  return TimelinePinType.CHAT;
 });
 
+// TODO
+const initiator = computed(() => 'initiatorrr');
 </script>
 
 <style lang="scss" scoped>

src/modules/contacts/modules/timeline/modules/chats/components/point-row/chat-points-row-section.vue → src/modules/contacts/modules/timeline/modules/chats/components/point-row/chat-points-timeline-row-section.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="chat-points-row-section">
-    <ChatPointRow
+    <chat-point-timeline-row
       v-for="(point) of points"
       :key="point.id"
       :point="point"
@@ -11,10 +11,10 @@
 <script setup>
 import { computed, inject } from 'vue';
 import { useStore } from 'vuex';
-import ChatPointRow from './chat-point-row.vue';
+import ChatPointTimelineRow from './chat-point-timeline-row.vue';
 
 const props = defineProps({
-  chatId: {
+  taskId: {
     type: String,
     required: true,
   },
@@ -27,11 +27,11 @@ const namespace = `${timelineNamespace}/chats`;
 const store = useStore();
 
 const points = computed(() => {
-  return store.getters[`${namespace}/HISTORY_BY_CHAT_ID`](props.chatId);
+  return store.getters[`${namespace}/HISTORY_BY_CHAT_ID`](props.taskId);
 });
 
 function loadHistory() {
-  store.dispatch(`${namespace}/LOAD_HISTORY`, { chatId: props.chatId });
+  store.dispatch(`${namespace}/LOAD_HISTORY`, { taskId: props.taskId });
 }
 
 if (!points.value) {

src/modules/contacts/modules/timeline/modules/chats/components/task-row/chat-task-timeline-row.vue

@@ -4,7 +4,7 @@
       <timeline-row-info
         :timestamp="createdAt"
       >
-<!--        TODO use correct time computed -->
+        <!--        TODO use correct time computed -->
         <template #title="{ time }">
           {{ time }}
         </template>
@@ -24,26 +24,30 @@
         @click="toggle"
       />
     </template>
+
     <template #content>
       <div class="chat-task-timeline-row__content">
         <timeline-row-initiator
-          :text="taskInitiator.name"
+          :text="initiator.name"
           :type="taskType"
         />
 
-        <wt-chip
+        <wt-tooltip
           v-if="hiddenParticipants.length"
-          @click="openHiddenParticipants = !openHiddenParticipants"
+          :triggers="['click']"
         >
-          {{ +hiddenParticipants.length }}
-        </wt-chip>
+          <template #activator>
+            <wt-chip>
+              +{{ hiddenParticipants.length }}
+            </wt-chip>
+          </template>
 
-        <div v-if="openHiddenParticipants">
           <timeline-row-initiator
-            v-for="user of hiddenParticipants"
-            :text="user.name"
-          ></timeline-row-initiator>
-        </div>
+            v-for="({ id, name }) of hiddenParticipants"
+            :key="id"
+            :text="name"
+          />
+        </wt-tooltip>
 
         <timeline-row-duration
           :duration="duration"
@@ -53,23 +57,23 @@
 
     <template #dropdown>
       <chat-points-row-section
-        :chat-id="taskId"
+        :task-id="taskId"
       />
     </template>
   </timeline-row>
 </template>
 
 <script setup>
-import { computed, inject, ref, toRefs } from 'vue';
+import { computed, inject, toRefs } from 'vue';
 import TimelinePin from '../../../../components/utils/timeline-pin.vue';
-import TimelineTaskStatus from '../../../../components/utils/timeline-task-status.vue';
 import TimelineRowDuration from '../../../../components/utils/timeline-row-duration.vue';
 import TimelineRowInfo from '../../../../components/utils/timeline-row-info.vue';
 import TimelineRowInitiator from '../../../../components/utils/timeline-row-initiator.vue';
 import TimelineRow from '../../../../components/utils/timeline-row.vue';
-import TimelinePinTypeEnum from '../../../../enums/TimelinePinType.enum.js';
+import TimelineTaskStatus from '../../../../components/utils/timeline-task-status.vue';
+import TimelinePinType from '../../../../enums/TimelinePinType.enum.js';
 import TimelineTaskStatusEnum from '../../../../enums/TimelineTaskStatus.enum.js';
-import ChatPointsRowSection from '../point-row/chat-points-row-section.vue';
+import ChatPointsRowSection from '../point-row/chat-points-timeline-row-section.vue';
 
 const props = defineProps({
   task: {
@@ -88,28 +92,31 @@ const {
   id: taskId,
 } = toRefs(props.task);
 
-const openHiddenParticipants = ref(false);
-
-const taskType = computed(() => gateway?.value ? TimelinePinTypeEnum.CHAT_GATEWAY : TimelinePinTypeEnum.CHAT)
+const taskType = computed(() => gateway?.value ? TimelinePinType.CHAT_GATEWAY : TimelinePinType.CHAT);
 
-const taskInitiator = computed(() => {
-  if(taskType.value === TimelinePinTypeEnum.CHAT_GATEWAY) return gateway.value;
-  return participants.value[0]
+const initiator = computed(() => {
+  if (taskType.value === TimelinePinType.CHAT_GATEWAY) return gateway.value;
+  if (participants.value.length) return participants.value.at(0);
+  throw new Error(`No initiator found: ${JSON.stringify(props.task)}`);
 });
-const hiddenParticipants = computed(() => participants?.value?.filter(participant => participant.id !== taskInitiator.value.id));
+
+const hiddenParticipants = computed(() => (
+  (participants?.value || []).filter((participant) => participant.id !== initiator.value.id)
+));
+
 </script>
 
 <style lang="scss" scoped>
 .chat-task-timeline-row {
   &__content {
     display: flex;
-    gap: var(--spacing-sm);
     align-items: center;
     width: 100%;
+    min-height: var(--spacing-2xl);
     padding: var(--spacing-xs) var(--spacing-sm);
     border-radius: var(--border-radius);
     box-shadow: var(--elevation-1);
-    min-height: var(--spacing-2xl);
+    gap: var(--spacing-sm);
   }
 }
 </style>

src/modules/contacts/modules/timeline/modules/chats/store/chats.js

@@ -7,23 +7,21 @@ const state = {
 };
 
 const getters = {
-  CONTACT_ID: (s, g, rS, rootGetters) => rootGetters['contacts/card/timeline/PARENT_ID'],
-  HISTORY_BY_CHAT_ID: (state) => (chatId) => state.historyById[chatId],
+  HISTORY_BY_CHAT_ID: (state) => (taskId) => state.historyById[taskId],
 };
 
 const actions = {
-  LOAD_HISTORY: async (context, { chatId }) => {
+  LOAD_HISTORY: async (context, { taskId }) => {
     const { items } = await MessageHistoryAPI.getList({
-      contactId: context.getters.CONTACT_ID,
-      chatId,
+      taskId,
     });
-    context.commit('SET_TO_HISTORY', { chatId, data: items });
+    context.commit('SET_TO_HISTORY', { taskId, data: items });
   },
 };
 
 const mutations = {
-  SET_TO_HISTORY: (state, { chatId, data }) => {
-    state.historyById[chatId] = data;
+  SET_TO_HISTORY: (state, { taskId, data }) => {
+    state.historyById[taskId] = data;
   },
 };