Merge pull request #212 from determaer/main

fix: dialogs in chat item

src/BaseAdaptiveExtendedChatApp.vue

@@ -29,6 +29,7 @@
             :chats="chatsStore.chats"
             filter-enabled
             @select="selectChat"
+            @select-dialog="selectDialog"
             @action="chatAction"
             @load-more-chats="loadMoreChats"
           >
@@ -473,6 +474,21 @@ const selectChat = (chat) => {
   }, 50)
 };
 
+const selectDialog = (args) => {
+  console.log(args.chat, args.dialog)
+  isThirdColVisible.value = true
+  isSecondColVisible.value = false
+  scrollToBottomOnSelectChat.value = true
+  inputFocus.value = true
+  selectedChat.value = args.chat;
+
+  messages.value = getFeedObjects(); // Обновляем сообщения при выборе чата
+  setTimeout(() => {
+    scrollToBottomOnSelectChat.value = false
+    inputFocus.value = false
+  }, 50)
+};
+
 const handleClickReplied = (messageId) => {
   console.log('Clicked reply id ' + messageId)
   const message = messages.value.find((m) => {

src/assets/themes/dark/components.css

@@ -87,6 +87,7 @@
 
   /* Info Container */
   --chat-item-selected-color: var(--neutral-800);
+  --dialog-item-selected-color: var(--neutral-700);
   --chat-item-last-message-color: var(--neutral-400);
 
   --chat-item-border-radius: 6px;

src/assets/themes/default/components.css

@@ -83,6 +83,7 @@
   /* Info Container */
   --chat-item-border-radius: 6px;
   --chat-item-selected-color: var(--neutral-100);
+  --dialog-item-selected-color: var(--neutral-200);
   --chat-item-last-message-color: var(--neutral-400);
   --chat-item-last-message-font-weight: 500;
   --chat-item-last-message-font-size: var(--font-midX-size);

src/assets/themes/green/components.css

@@ -84,6 +84,7 @@
   --chat-item-border: 1px solid var(--neutral-200);
 
   --chat-item-selected-color: var(--neutral-100);
+  --dialog-item-selected-color: var(--neutral-200);
   --chat-item-last-message-color: var(--neutral-400);
   --chat-item-last-message-font-size: var(--font-midX-size);
   --chat-item-name-font-size: var(--font-large-size);

src/data/chats.ts

@@ -16,6 +16,29 @@ export const chats = [
     ],
     typing: true,
     metadata: '',    // фильтр работает по name и данным в metadata
+    dialogsExpanded: true,
+    dialogs: [
+      {
+        dialogId: 'dlg_43543555',
+        icon: 'https://img.freepik.com/free-photo/smiley-man-relaxing-outdoors_23-2148739334.jpg',
+        name: 'диалог1 79135292926',
+        fullname: 'диалог1 номер 79135292926 канал whatsapp 73912000000 (основной)',   // для tooltip'а
+        countUnread: 10,
+        'lastActivity.time': 'час назад',  
+        'lastActivity.timestamp': 1727001759456,   // для сортировки
+        isSelected: false,
+      },
+      {
+        dialogId: 'dlg_89789879',
+        icon: 'https://img.freepik.com/free-photo/smiley-man-relaxing-outdoors_23-2148739334.jpg',
+        name: 'диалог2 7913529XXXX',
+        fullname: 'диалог2 номер 7913529XX27 канал whatsapp 73912000000 (основной)',
+        countUnread: 90,
+        'lastActivity.time': '2 часа назад',
+        'lastActivity.timestamp': 1727001759111,   // для сортировки
+        isSelected: false,
+      },
+    ],
   },
   {
     chatId: 25, name: "Василий ВасилийВасилийВасилий Василий",
@@ -59,6 +82,7 @@ export const chats = [
   {
     chatId: 3, name: "Анна",
     countUnread: 0, isFixedBottom: true,
+    lastMessage: 'text',
     'lastMessage.status': 'se',
     'lastActivity.timestamp': '1727027359',
     actions: [

src/library/components/ChatItem.vue

@@ -1,5 +1,6 @@
 <template>
-  <div
+  <div>
+    <div
     class="chat-item__container"
     :class="getClass()"
     @mouseenter="showMenu"
@@ -59,9 +60,10 @@
       <button
         v-if="buttonMenuVisible && chat.actions"
         class="chat-item__menu-button"
-        @click="isOpenMenu = !isOpenMenu"
+        @click="handleOpenMenu"
+        id="noSelectButton"
       >
-        <span class="pi pi-ellipsis-h" />
+        <span id="noSelectButton" class="pi pi-ellipsis-h" />
       </button>
 
       <div
@@ -87,6 +89,28 @@
       </div>
     </div>
 
+    <div
+      v-if="chat.dialogs" 
+      class="chat-item__dialog-buttons"
+    >
+      <button
+        v-if="!chat.dialogsExpanded"
+        class="chat-item__menu-button"
+        @click="chat.dialogsExpanded = !chat.dialogsExpanded"
+        id="noSelectButton"
+      >
+        <span id="noSelectButton" class="pi pi-angle-down" />
+      </button>
+      <button
+        v-if="chat.dialogsExpanded"
+        class="chat-item__menu-button"
+        @click="chat.dialogsExpanded = !chat.dialogsExpanded"
+        id="noSelectButton"
+      >
+        <span id="noSelectButton" class="pi pi-angle-up" />
+      </button>
+    </div>
+
     <transition name="menu">
       <ContextMenu
         v-if="isOpenMenu && chat.actions"
@@ -96,6 +120,40 @@
       />
     </transition>
   </div>
+
+  <div 
+    v-if="chat.dialogsExpanded"
+    class="chat-item__dialog-container"
+  >
+    <div
+      v-for="dialog in getSortedDialogs()"
+      class="chat-item__dialog-item"
+      :class="getDialogClass(dialog)"
+      @click="selectDialog(dialog)"
+    >
+      <img
+        v-if="dialog.icon"
+        :src="dialog.icon"
+        height="16"
+        width="16"
+      >
+      <span
+        v-else
+        class="pi pi-user"
+      />
+      <div>{{ dialog.name }}</div>
+      <div>{{ dialog['lastActivity.time'] }}</div>
+      <div
+        v-if="dialog.countUnread > 0"
+        class="chat-item__unread"
+        :style="{backgroundColor: dialog.colorUnread ? dialog.colorUnread : null}"
+      >
+        {{ dialog.countUnread > 99 ? '99+' : dialog.countUnread }}
+      </div>
+    </div>
+  </div>
+  </div>
+
 </template>
 
 <script setup>
@@ -113,16 +171,27 @@ const props = defineProps({
   },
 });
 
-const emit = defineEmits(['select', 'action']);
+const emit = defineEmits(['select', 'action', 'selectDialog']);
 
-const selectChat = () => { 
-  emit('select', props.chat);
+const selectChat = (event) => { 
+  if (event.target.id != 'noSelectButton' && !props.chat.dialogs)
+    emit('select', props.chat);
+  if (props.chat.dialogs)
+  props.chat.dialogsExpanded = !props.chat.dialogsExpanded
+}
+
+const selectDialog = (dialog) => {
+    emit('selectDialog', {chat: props.chat, dialog: dialog});
 }
 
 const getClass = () => {
   return props.chat.isSelected ? 'chat-item__selected' : '';
 }
 
+const getDialogClass = (dialog) => {
+  return dialog.isSelected ? 'chat-item__dialog-selected' : ''
+}
+
 const clickAction = (action) => {
   // console.log('action', props.chat.chatId, action);
   hideMenu();
@@ -132,6 +201,19 @@ const clickAction = (action) => {
 const isOpenMenu = ref(false)
 const buttonMenuVisible = ref(false);
 
+const getSortedDialogs = () => {
+  return props.chat.dialogs
+    .toSorted((a, b) => {
+      if (Number(a['lastActivity.timestamp']) > Number(b['lastActivity.timestamp'])) return -1;
+      if (Number(a['lastActivity.timestamp']) < Number(b['lastActivity.timestamp'])) return 1;
+      if (Number(a['lastActivity.timestamp']) == Number(b['lastActivity.timestamp'])) return 0;
+    })
+}
+
+const handleOpenMenu = (event) => {
+  isOpenMenu.value = !isOpenMenu.value
+}
+
 const showMenu = () => {
   buttonMenuVisible.value = true;
 };
@@ -203,6 +285,36 @@ watch(
     }
   }
 
+  &__dialog-container {
+    display: flex;
+    flex-direction: column;
+    position: relative;
+    padding: var(--chat-item-padding-container);
+    cursor: pointer;
+    gap: 5px;
+    padding-left: 80px;
+
+    &::after {
+      content: "";
+      position: absolute;
+      bottom: 0;
+      left: 0;
+      right: 0;
+      width: 100%;
+      background-color: var(--chat-item-background-color);
+    }
+  }
+
+  &__dialog-item{
+    display: flex;
+  }
+
+  &__dialog-selected {
+    cursor: pointer;
+    border-radius: var(--chat-item-border-radius);
+    background: var(--dialog-item-selected-color);
+  }
+
   &__selected {
     cursor: pointer;
     border-radius: var(--chat-item-border-radius);

src/library/components/ChatList.vue

@@ -68,6 +68,7 @@
           :chat="chat"
           @select="selectChat"
           @action="action"
+          @select-dialog="selectDialog"
         />
       </div>
 
@@ -108,7 +109,7 @@ const props = defineProps({
 });
 
 // Define emits
-const emit = defineEmits(['select', 'action', 'loadMoreChats']);
+const emit = defineEmits(['select', 'action', 'loadMoreChats', 'selectDialog']);
 
 const filter = ref('');
 const isOpenMenu = ref(false)
@@ -129,12 +130,34 @@ const scrollCheck = () => {
 
 // Define method
 const selectChat = (chat) => {
-  props.chats.forEach(c => c.isSelected = false);
+  props.chats.forEach(c => {
+    c.isSelected = false
+    if (c.dialogs) 
+      c.dialogs.forEach(d => {
+        d.isSelected = false
+      })
+  });
   const c = props.chats.find(c => c.chatId === chat.chatId);
   c.isSelected = true;
   emit('select', chat);
 };
 
+const selectDialog = (args) => {
+  emit('selectDialog', args)
+  props.chats.forEach(c => {
+    c.isSelected = false
+    if (c.dialogs) 
+      c.dialogs.forEach(d => {
+        d.isSelected = false
+        if (d.dialogId == args.dialog.dialogId)
+        d.isSelected = true
+      })
+  });
+  
+  const c = props.chats.find(c => c.chatId === args.chat.chatId);
+  c.isSelected = true;
+}
+
 const getSortedAndFilteredChats = () => {
   return props.chats
     .toSorted((a, b) => {