From 14e7dec5b4bb0ed328f44072793b27e4fd96e5e9 Mon Sep 17 00:00:00 2001
From: Vasilii Mikhailovskii <ti.webdev@ya.ru>
Date: Sat, 7 Dec 2024 00:43:13 +0200
Subject: [PATCH] fix

---
 apps/frontend/components.d.ts                 |  1 +
 apps/frontend/src/components/ChatCard.vue     | 11 +--
 .../frontend/src/components/ChatComponent.vue | 84 ++-----------------
 .../frontend/src/components/chat/ChatForm.vue | 61 ++++++++++++++
 apps/frontend/src/views/CreateView.vue        |  1 -
 apps/frontend/src/views/PublicChatView.vue    | 45 ++++------
 .../src/views/manage/ManageChatsView.vue      | 32 +++++--
 7 files changed, 110 insertions(+), 125 deletions(-)
 create mode 100644 apps/frontend/src/components/chat/ChatForm.vue

diff --git a/apps/frontend/components.d.ts b/apps/frontend/components.d.ts
index fe106f9..f08608f 100644
--- a/apps/frontend/components.d.ts
+++ b/apps/frontend/components.d.ts
@@ -11,6 +11,7 @@ declare module 'vue' {
     Card: typeof import('primevue/card')['default']
     ChatCard: typeof import('./src/components/ChatCard.vue')['default']
     ChatComponent: typeof import('./src/components/ChatComponent.vue')['default']
+    ChatForm: typeof import('./src/components/chat/ChatForm.vue')['default']
     ChatSubscribeWebPush: typeof import('./src/components/ChatSubscribeWebPush.vue')['default']
     Checkbox: typeof import('primevue/checkbox')['default']
     CopyLinkButton: typeof import('@/components/link/LinkCopyButton.vue')['default']
diff --git a/apps/frontend/src/components/ChatCard.vue b/apps/frontend/src/components/ChatCard.vue
index c030b3f..cbeeea6 100644
--- a/apps/frontend/src/components/ChatCard.vue
+++ b/apps/frontend/src/components/ChatCard.vue
@@ -1,9 +1,9 @@
 <template>
-  <!-- TODO: figure out how to get rid of v-if. Incorrect works on switch tabs -->
-  <RouterLink :to="route" class="p-4 rounded-lg bg-white shadow-md" v-if="chatDoc.qr_code_uri">
-    <div class="flex items-center justify-between mb-2">
+  <RouterLink :to="route" class="p-4 rounded-lg bg-white shadow-md">
+    <div class="flex items-center justify-between mb-2" v-if="qrCodeDoc">
       <div class="flex items-center">
-        <h2 class="text-lg font-semibold">{{ chatDoc.name }}</h2>
+        <QRCodePlacementIcon :placement="qrCodeDoc.placement" />
+        <h2 class="text-lg font-semibold">{{ qrCodeDoc.name }}</h2>
       </div>
     </div>
     <div class="text-gray-500">
@@ -14,11 +14,12 @@
 
 <script setup lang="ts">
 import { computed } from 'vue'
-import type { ChatDocument } from '@hereconnect/types'
+import type { ChatDocument, QRCodeDocument } from '@hereconnect/types'
 import { ROUTE_NAMES } from '@/constants/routes'
 
 const props = defineProps<{
   chatDoc: ChatDocument
+  qrCodeDoc?: QRCodeDocument
 }>()
 
 const formatDate = (date: string) => {
diff --git a/apps/frontend/src/components/ChatComponent.vue b/apps/frontend/src/components/ChatComponent.vue
index f9faa27..907ba91 100644
--- a/apps/frontend/src/components/ChatComponent.vue
+++ b/apps/frontend/src/components/ChatComponent.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="flex flex-col flex-grow">
+  <div class="flex flex-col flex-grow place-self-stretch">
     <!-- Список сообщений -->
     <div class="flex-grow overflow-y-auto p-4" ref="messagesContainer">
       <div
@@ -28,41 +28,15 @@
       ></slot>
     </div>
 
-    <div class="flex gap-3 px-4 pt-0 flex-col-reverse pb-safe-or-4">
-      <!-- Форма отправки сообщений -->
-      <form @submit.prevent="sendMessage" class="flex gap-2 items-center" ref="form">
-        <InputText
-          id="newMessage"
-          v-model="newMessage"
-          class="flex-1"
-          placeholder="Напишите сообщение"
-        />
-        <Button
-          type="submit"
-          icon="pi pi-send"
-          class="p-button-md"
-          :disabled="!newMessage.trim()"
-        />
-      </form>
-
-      <ChatSubscribeWebPush :qr_code_uri :chat :user_chat_role="userRole" />
-    </div>
+    <ChatForm :qr_code_uri :chat :userRole />
   </div>
 </template>
 
 <script setup lang="ts">
 import { ref, onMounted, onUnmounted, useTemplateRef, watch, nextTick } from 'vue'
-import {
-  chatsDbLocal,
-  chatsDbRemote,
-  messagesDbLocal as db,
-  messagesDbRemote as remoteDb,
-} from '@/api/dbs'
-import { type ChatDocument, type MessageDocument } from '@hereconnect/types'
-import { getBrowserUuid } from '@/utils/getBrowserUuid'
-import { getUserUuid } from '@/utils/getUserUuid'
+import { messagesDbLocal as db, messagesDbRemote as remoteDb } from '@/api/dbs'
+import { type MessageDocument } from '@hereconnect/types'
 
-const formRef = useTemplateRef('form')
 const messagesContainerRef = useTemplateRef('messagesContainer')
 
 const { qr_code_uri, chat, userRole } = defineProps<{
@@ -73,10 +47,9 @@ const { qr_code_uri, chat, userRole } = defineProps<{
 
 // Локальные состояния
 const messages = ref<MessageDocument[]>([])
-const newMessage = ref('')
+
 let changesSubscription: PouchDB.Core.Changes<MessageDocument> | null = null
 let syncMessages: PouchDB.Replication.Sync<MessageDocument> | null = null
-// let syncChats: PouchDB.Replication.Sync<ChatDocument> | null = null
 
 // Селектор для фильтрации сообщений
 const messageSelector = {
@@ -98,39 +71,6 @@ async function loadMessages() {
   }
 }
 
-// Отправка нового сообщения
-async function sendMessage() {
-  const created_at = new Date().toISOString()
-  const user_uuid = getUserUuid()
-  const message: MessageDocument = {
-    _id: `message:${qr_code_uri}:${chat}:${created_at}`,
-    type: 'message',
-    qr_code_uri,
-    chat,
-    from: userRole,
-    body: newMessage.value.trim(),
-    browser_uuid: getBrowserUuid(),
-    user_uuid,
-    created_at,
-  }
-
-  try {
-    await db.put(message)
-    newMessage.value = ''
-
-    // await chatsDbLocal.upsert(`chat:${user_uuid}:${userRole}:${qr_code_uri}:${chat}`, (chatDoc) => {
-    //   if (chatDoc.last_message_at && chatDoc.last_message_at < created_at) {
-    //     chatDoc.last_message_at = created_at
-    //     return chatDoc
-    //   } else {
-    //     return false
-    //   }
-    // })
-  } catch (error) {
-    console.error('Ошибка отправки сообщения:', error)
-  }
-}
-
 // Отслеживание изменений
 function watchChanges() {
   changesSubscription = db
@@ -169,15 +109,6 @@ function setupSync() {
   syncMessages.on('error', (err) => {
     console.error('Ошибка синхронизации:', err)
   })
-  // syncChats = chatsDbLocal.sync(chatsDbRemote, {
-  //   live: true,
-  //   retry: true,
-  //   selector: {
-  //     type: 'chat',
-  //     qr_code_uri,
-  //     chat,
-  //   },
-  // })
 }
 
 // Остановка синхронизации
@@ -186,10 +117,6 @@ function stopSync() {
     syncMessages.cancel()
     syncMessages = null
   }
-  // if (syncChats) {
-  //   syncChats.cancel()
-  //   syncChats = null
-  // }
 }
 
 // Отписка от изменений
@@ -205,7 +132,6 @@ onMounted(async () => {
   watchChanges()
   setupSync()
   await loadMessages()
-  formRef.value?.querySelector('input')?.focus()
 })
 
 watch(
diff --git a/apps/frontend/src/components/chat/ChatForm.vue b/apps/frontend/src/components/chat/ChatForm.vue
new file mode 100644
index 0000000..8cb831f
--- /dev/null
+++ b/apps/frontend/src/components/chat/ChatForm.vue
@@ -0,0 +1,61 @@
+<template>
+  <div class="flex gap-3 px-4 pt-0 flex-col-reverse pb-safe-or-4">
+    <!-- Форма отправки сообщений -->
+    <form @submit.prevent="sendMessage" class="flex gap-2 items-center" ref="form">
+      <InputText
+        id="newMessage"
+        v-model="newMessage"
+        class="flex-1"
+        placeholder="Напишите сообщение"
+      />
+      <Button type="submit" icon="pi pi-send" class="p-button-md" :disabled="!newMessage.trim()" />
+    </form>
+
+    <ChatSubscribeWebPush :qr_code_uri :chat :user_chat_role="userRole" />
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, useTemplateRef } from 'vue'
+const newMessage = ref('')
+const formRef = useTemplateRef('form')
+import { getBrowserUuid } from '@/utils/getBrowserUuid'
+import { getUserUuid } from '@/utils/getUserUuid'
+import { type MessageDocument } from '@hereconnect/types'
+import { messagesDbLocal as db } from '@/api/dbs'
+
+const { qr_code_uri, chat, userRole } = defineProps<{
+  qr_code_uri: MessageDocument['qr_code_uri']
+  chat: MessageDocument['chat']
+  userRole: MessageDocument['from']
+}>()
+
+onMounted(() => {
+  formRef.value?.querySelector('input')?.focus()
+})
+
+// Отправка нового сообщения
+async function sendMessage() {
+  const created_at = new Date().toISOString()
+  const user_uuid = getUserUuid()
+  const message: MessageDocument = {
+    _id: `message:${qr_code_uri}:${chat}:${created_at}`,
+    type: 'message',
+    qr_code_uri,
+    chat,
+    from: userRole,
+    body: newMessage.value.trim(),
+    browser_uuid: getBrowserUuid(),
+    user_uuid,
+    created_at,
+  }
+
+  try {
+    await db.put(message)
+    newMessage.value = ''
+    formRef.value?.querySelector('input')?.focus()
+  } catch (error) {
+    console.error('Ошибка отправки сообщения:', error)
+  }
+}
+</script>
diff --git a/apps/frontend/src/views/CreateView.vue b/apps/frontend/src/views/CreateView.vue
index f8267cc..91fc235 100644
--- a/apps/frontend/src/views/CreateView.vue
+++ b/apps/frontend/src/views/CreateView.vue
@@ -69,7 +69,6 @@ const {
 } = useMutation({
   mutationKey: ['createQrCode'],
   mutationFn: async () => {
-    throw new Error('wtf')
     const qrCodeDocument = await createQrCodeDocument({
       name: name.value,
       placement: placement.value!,
diff --git a/apps/frontend/src/views/PublicChatView.vue b/apps/frontend/src/views/PublicChatView.vue
index e6ce64d..2a80ee5 100644
--- a/apps/frontend/src/views/PublicChatView.vue
+++ b/apps/frontend/src/views/PublicChatView.vue
@@ -8,37 +8,20 @@
       />
     </MetaHead>
 
-    <div class="flex flex-col min-h-full">
-      <!-- Основной контент -->
-      <main class="flex-grow flex flex-col">
-        <section class="flex flex-col flex-grow max-w-prose w-full mx-auto">
-          <ChatComponent userRole="guest" :qr_code_uri="qr_code_uri" :chat="chat">
-            <template #endOfMessages="{ count, lastMessage }">
-              <!-- Уведомление, если гость отправил только одно сообщение -->
-              <div
-                v-if="count === 1 && lastMessage && lastMessage.from === 'guest'"
-                class="flex flex-col items-center justify-center text-center bg-gray-50 border border-gray-200 rounded-lg shadow-md p-6 mt-6"
-              >
-                <p class="text-gray-700 font-medium text-lg">Ваше сообщение отправлено.</p>
-                <p class="text-gray-600 mt-2">
-                  Вы можете написать ещё одно сообщение или подождать ответа.
-                </p>
-              </div>
-            </template>
-          </ChatComponent>
-        </section>
-      </main>
-
-      <!-- Футер -->
-      <!--    <footer class="bg-gray-100 text-center py-4 border-t text-sm text-gray-700">-->
-      <!--      <p><a href="/create" class="underline underline-offset-2">Создайте свой QR‑код</a>.</p>-->
-      <!--      <p class="mt-1">-->
-      <!--        Сделайте НаСвязи удобнее. Будем рады вашей&nbsp;<a href="/donate" class="underline underline-offset-2"-->
-      <!--          >поддержке</a-->
-      <!--        >.-->
-      <!--      </p>-->
-      <!--    </footer>-->
-    </div>
+    <ChatComponent userRole="guest" :qr_code_uri="qr_code_uri" :chat="chat">
+      <template #endOfMessages="{ count, lastMessage }">
+        <!-- Уведомление, если гость отправил только одно сообщение -->
+        <div
+          v-if="count === 1 && lastMessage && lastMessage.from === 'guest'"
+          class="flex flex-col items-center justify-center text-center bg-gray-50 border border-gray-200 rounded-lg shadow-md p-6 mt-6"
+        >
+          <p class="text-gray-700 font-medium text-lg">Ваше сообщение отправлено.</p>
+          <p class="text-gray-600 mt-2">
+            Вы можете написать ещё одно сообщение или подождать ответа.
+          </p>
+        </div>
+      </template>
+    </ChatComponent>
   </LayoutWithTabs>
 </template>
 
diff --git a/apps/frontend/src/views/manage/ManageChatsView.vue b/apps/frontend/src/views/manage/ManageChatsView.vue
index fbab5f8..b1c7631 100644
--- a/apps/frontend/src/views/manage/ManageChatsView.vue
+++ b/apps/frontend/src/views/manage/ManageChatsView.vue
@@ -11,13 +11,14 @@
     <QueryRender :query="query">
       <template #default="{ data }">
         <div
-          v-if="data.rows.length > 0"
+          v-if="data.length > 0"
           class="justify-self-start align-baseline-start flex flex-col gap-4"
         >
           <ChatCard
-            v-for="{ doc: chatDoc } in data.rows.filter((row) => !!row.doc)"
-            :key="`${chatDoc!._id}`"
-            :chatDoc="chatDoc!"
+            v-for="row in data"
+            :key="row.id"
+            :chatDoc="row.doc!"
+            :qrCodeDoc="row.qrCodeDoc"
           />
         </div>
 
@@ -44,19 +45,32 @@
 
 <script setup lang="ts">
 import { useQuery } from '@tanstack/vue-query'
-import { chatsDbRemote } from '@/api/dbs'
+import { chatsDbRemote, qrCodeDbLocal } from '@/api/dbs'
 import { getUserUuid } from '@/utils/getUserUuid'
+import { type QRCodeDocument } from '@hereconnect/types'
 
+const user_uuid = getUserUuid()
 const query = useQuery({
-  queryKey: ['qrCodes'],
-  queryFn: () => {
-    const user_uuid = getUserUuid()
-    return chatsDbRemote.allDocs({
+  queryKey: ['chats', user_uuid],
+  queryFn: async () => {
+    const { rows } = await chatsDbRemote.allDocs({
       startkey: `chat:${user_uuid}:`,
       endkey: `chat:${user_uuid}:\uffff`,
       limit: Number.MAX_SAFE_INTEGER,
       include_docs: true,
     })
+    const qrCodes = await qrCodeDbLocal.allDocs({
+      keys: rows.map((row) => `qr_code:${row.doc!.qr_code_uri}`),
+      include_docs: true,
+    })
+    const result: ((typeof rows)[number] & { qrCodeDoc?: QRCodeDocument })[] = []
+    qrCodes.rows.forEach((row, index) => {
+      result[index] = rows[index]
+      if ('doc' in row) {
+        result[index].qrCodeDoc = row.doc!
+      }
+    })
+    return result
   },
 })
 </script>