wip

src/components/Chats/ChatListElement.vue

@@ -1,6 +1,7 @@
 <script setup lang="ts">
 import { type Chat, useChatsStore } from '@/stores/chats.ts'
 import { computed } from 'vue'
+import { useMessagesStore } from '@/stores/messages.ts'
 
 interface Props {
   chat: Chat
@@ -9,45 +10,36 @@ interface Props {
 const { chat } = defineProps<Props>()
 const chatsStore = useChatsStore()
 
-const chatName = computed(() => {
-  return chatsStore.getChatInfo(chat).name
+const chatInfo = computed(() => {
+  return chatsStore.getChatInfo(chat)
 })
 
-const lastMessage = computed(() => {
-  return chat.message?.message ?? ''
-})
-
-const avatarText = computed(() => {
-  return chatName.value.slice(0, 1).toUpperCase()
-})
-
-const lastMessageCreatedAt = computed(() => {
-  if (!chat.message) return ''
-  const date = new Date(chat.message.createdAt)
+const convertDate = (dateString: string) => {
+  const date = new Date(dateString)
   return date.toLocaleTimeString('ru-RU', { timeStyle: 'short' })
-})
+}
 </script>
 
 <template>
   <VListItem :value="chat.id">
     <template v-slot:prepend>
-      <VAvatar color="primary" :text="avatarText" />
+      <VAvatar color="primary" :text="chatInfo?.name.slice(0, 1).toUpperCase()" />
     </template>
 
     <template #title>
       <div class="flex justify-between">
         <div class="font-medium truncate">
-          {{ chatName }}
+          {{ chatInfo.name }}
         </div>
-        <div class="text-xs">
-          {{ lastMessageCreatedAt }}
+        <div v-if="chat.message" class="text-xs">
+          {{ convertDate(chat.message.createdAt) }}
         </div>
       </div>
     </template>
 
-    <template #subtitle>
+    <template v-if="chat.message" #subtitle>
       <div class="flex justify-between">
-        <div>{{ lastMessage }}</div>
+        <div>{{ chat.message.message }}</div>
         <div class="text-xs">
           <!--          <VChip v-show="true" size="small" text="0" />-->
         </div>

src/components/Messages/MessageInput.vue

@@ -6,23 +6,23 @@ import { useChatsStore } from '@/stores/chats.ts'
 const socketsStore = useSocketsStore()
 const chatsStore = useChatsStore()
 
-const text = ref('')
+const message = ref('')
 
 const sendMessage = () => {
-  if (text.value.trim()) {
+  if (message.value && chatsStore.selectedChat) {
     socketsStore.send({
       type: SocketDataReq.CREATE_MESSAGE,
       data: {
-        chat_id: chatsStore.selected,
-        text: text.value,
+        chatId: chatsStore.selectedChat.id,
+        message: message.value.trim().slice(0, 200),
       },
     })
   }
-  text.value = ''
+  message.value = ''
 }
 
 const isEmptyText = computed(() => {
-  return !text.value
+  return !message.value
 })
 </script>
 
@@ -32,7 +32,7 @@ const isEmptyText = computed(() => {
       prepend-inner-icon="mdi-emoticon-outline"
       append-inner-icon="mdi-paperclip"
       bg-color="white"
-      v-model="text"
+      v-model="message"
       placeholder="message"
       density="default"
       @keyup.enter="sendMessage"

src/components/Messages/MessageItem.vue

@@ -1,23 +1,27 @@
 <script setup lang="ts">
 import { computed } from 'vue'
 
-const props = withDefaults(
-  defineProps<{ createdAt?: string; username?: string; onRightSide?: boolean; message?: string }>(),
-  {
-    my: false,
-    message: 'foobar',
-    username: 'robot',
-  },
-)
+interface Props {
+  createdAt?: string
+  username?: string
+  onRightSide?: boolean
+  message?: string
+}
 
-const createdAt = computed(() => {
-  return props.createdAt
-    ? new Date(props.createdAt).toLocaleTimeString('ru-RU', { timeStyle: 'short' })
+const { message, username, createdAt } = withDefaults(defineProps<Props>(), {
+  my: false,
+  message: 'foobar',
+  username: 'robot',
+})
+
+const messageDate = computed(() => {
+  return createdAt
+    ? new Date(createdAt).toLocaleTimeString('ru-RU', { timeStyle: 'short' })
     : new Date().toLocaleTimeString('ru-RU', { timeStyle: 'short' })
 })
 
 const avatarLetter = computed(() => {
-  return props.username.slice(0, 1).toUpperCase()
+  return username.slice(0, 1).toUpperCase()
 })
 </script>
 
@@ -35,15 +39,15 @@ const avatarLetter = computed(() => {
   <!--    </div>-->
   <!--  </div>-->
 
-  <div class="flex gap-2" :class="{ 'flex-row-reverse': props.onRightSide }">
+  <div class="flex gap-2" :class="{ 'flex-row-reverse': onRightSide }">
     <!--    <v-avatar size="36" color="deep-purple-lighten-4">-->
     <!--      <span class="text-deep-purple-darken-2">{{ avatarLetter }}</span>-->
     <!--    </v-avatar>-->
 
     <!--    :class="props.my ? 'message-shaped-right' : 'message-shaped'"-->
-    <div class="pa-4" :class="props.onRightSide ? 'bg-blue-400' : 'bg-white'">
-      <span class="">{{ props.message }}</span>
-      <span class="">{{ createdAt }}</span>
+    <div class="flex gap-1 pa-4" :class="onRightSide ? 'bg-blue-400' : 'bg-white'">
+      <span class="">{{ message }}</span>
+      <span class="text-xs self-end">{{ messageDate }}</span>
     </div>
   </div>
 </template>

src/components/Messages/MessageToolbar.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
 interface Props {
-  name: string
+  name?: string
   image?: string
 }
 
@@ -9,7 +9,7 @@ const { name, image } = defineProps<Props>()
 
 <template>
   <VToolbar theme="dark" class="px-2">
-    <VAvatar text="A" color="primary" />
+    <VAvatar :text="name?.slice(0, 1).toUpperCase()" color="primary" />
     <VToolbarTitle :text="name" />
   </VToolbar>
 </template>

src/components/Messages/MessagesWrapper.vue

@@ -3,8 +3,10 @@ import { computed, nextTick, ref, useTemplateRef, watch } from 'vue'
 import { useScroll } from '@vueuse/core'
 import type { User } from '@/stores/users.ts'
 import { useChatsStore } from '@/stores/chats.ts'
+import { useMessagesStore } from '@/stores/messages.ts'
 
 const chatsStore = useChatsStore()
+const messagesStore = useMessagesStore()
 
 // const area = useTemplateRef('messageArea')
 // const { y, arrivedState } = useScroll(area)
@@ -16,16 +18,23 @@ const chatsStore = useChatsStore()
 //   if (area.value) y.value = area.value?.scrollHeight
 // }
 
+const chatInfo = computed(() => {
+  if (chatsStore.selectedChat) {
+    return chatsStore.getChatInfo(chatsStore.selectedChat)
+  }
+  return null
+})
+
 const messages = ref([])
 </script>
 
 <template>
   <div class="flex h-full flex-col overflow-hidden">
     <div class="grow-0" v-if="chatsStore.selectedChat">
-      <slot name="toolbar" :toolBarData="chatsStore.getChatInfo(chatsStore.selectedChat)" />
+      <slot name="toolbar" :info="chatInfo" />
     </div>
     <div class="px-8 gap-2 grow flex flex-col-reverse overflow-y-auto" ref="messageArea">
-      <slot :messages="messages" />
+      <slot :messages="messagesStore.messages" />
     </div>
     <div class="grow-0">
       <slot name="input" />

src/components/RightPane.vue

@@ -1,9 +1,9 @@
 <script setup lang="ts">
-import MessagesForm from '@/components/Messages/MessagesForm.vue'
 import MessageToolbar from '@/components/Messages/MessageToolbar.vue'
 import MessageInput from '@/components/Messages/MessageInput.vue'
-import MessagesList from '@/components/Messages/MessagesList.vue'
 import { useChatsStore } from '@/stores/chats.ts'
+import MessageItem from '@/components/Messages/MessageItem.vue'
+import MessagesWrapper from '@/components/Messages/MessagesWrapper.vue'
 
 const chatsStore = useChatsStore()
 </script>
@@ -11,17 +11,17 @@ const chatsStore = useChatsStore()
 <template>
   <div class="h-full bg-gray-100">
     <div class="flex flex-col h-full">
-      <MessagesForm v-if="chatsStore.selected.length">
-        <template #toolbar="{ toolBarData }">
-          <MessageToolbar :name="toolBarData.name" />
+      <MessagesWrapper v-if="chatsStore.selectedChat">
+        <template #toolbar="{ info }">
+          <MessageToolbar v-bind="info" />
         </template>
         <template #default="{ messages }">
-          <MessagesList :messages />
+          <MessageItem v-for="message in messages" :key="message.id" v-bind="message" />
         </template>
         <template #input>
           <MessageInput />
         </template>
-      </MessagesForm>
+      </MessagesWrapper>
     </div>
   </div>
 </template>

src/stores/chats.ts

@@ -10,6 +10,7 @@ export interface Chat {
   name: string
   users: User[]
   message?: Message
+  image?: string
 }
 
 export const useChatsStore = defineStore('chats', () => {
@@ -18,6 +19,8 @@ export const useChatsStore = defineStore('chats', () => {
   const selected = ref<string[]>([])
 
   const selectedChat = computed(() => {
+    if (!selected.value.length) return
+
     return chats.value.find((chat: Chat) => chat.id === selected.value[0])
   })
 
@@ -35,5 +38,9 @@ export const useChatsStore = defineStore('chats', () => {
     }
   }
 
+  function getChatLastMessage(chat: Chat) {
+    return chats.value.find((el) => el.id === chat.id)
+  }
+
   return { chats, selected, selectedChat, getChatInfo }
 })

src/stores/messages.ts

@@ -1,5 +1,6 @@
 import { defineStore } from 'pinia'
-import { ref } from 'vue'
+import { computed, ref } from 'vue'
+import { useChatsStore } from '@/stores/chats.ts'
 
 export interface Message {
   id: number
@@ -9,7 +10,13 @@ export interface Message {
 }
 
 export const useMessagesStore = defineStore('messages', () => {
+  const chatsStore = useChatsStore()
   const messages = ref<Message[]>([])
+  const message = ref<Message>()
 
-  return { messages }
+  const lastMessage = computed(() => {
+    return message.value ?? chatsStore.selectedChat?.message ?? null
+  })
+
+  return { messages, lastMessage }
 })

src/stores/sockets.ts

@@ -76,7 +76,6 @@ export const useSocketsStore = defineStore('sockets', () => {
             const idx = chatsStore.chats.findIndex((chat) => chat.id === data.id)
             if (idx < 0) chatsStore.chats.push(data)
 
-            console.log(data.id)
             menuStore.selected = ['chats']
             chatsStore.selected = [data.id]
           }

src/stores/users.ts

@@ -5,6 +5,7 @@ export interface User {
   id: number
   email: string
   name: string
+  image?: string
 }
 
 export const useUsersStore = defineStore('users', () => {