set add QR code page

2024-12-06 14:07:31 +02:00
parent 3ec74a5f9f
commit 9c69812258
14 changed files with 201 additions and 162 deletions
@@ -0,0 +1,103 @@
+<template>
+  <div class="p-6">
+    <h1 class="text-2xl font-bold mb-4 text-center lg:text-left">Управление QR-кодом</h1>
+    <QueryRender :query="qrCodeQuery" #default="{ data: qrCodeDoc }">
+      <div class="bg-white p-6 rounded-lg shadow-md mb-6">
+        <div class="flex items-center justify-between mb-4">
+          <div class="flex items-center">
+            <QRCodePlacementIcon :placement="qrCodeDoc.placement" />
+            <h2 class="text-xl font-semibold">{{ qrCodeDoc.name }}</h2>
+          </div>
+          <div class="flex gap-2">
+            <Button
+              icon="pi pi-cog"
+              label="Настроить"
+              :to="`/manage/qr/${qrCodeDoc.uri}/settings`"
+              as="router-link"
+              severity="secondary"
+              size="small"
+              outlined
+            />
+            <Button
+              icon="pi pi-qrcode"
+              label="QR-код и инструкции"
+              :to="`/manage/qr/${qrCodeDoc.uri}/ready`"
+              as="router-link"
+              severity="secondary"
+              size="small"
+              outlined
+            />
+          </div>
+        </div>
+        <div class="mb-4 flex gap-2 items-baseline">
+          <strong>Ссылка: </strong>
+          <a :href="qrCodeDoc.url" class="text-blue-500" target="_blank">{{ qrCodeDoc.url }}</a>
+          <LinkCopyButton :url="qrCodeDoc.url" />
+          <LinkShareTelegramButton
+            :shareUrl="qrCodeDoc.url"
+            shareText="Используйте эту ссылку НаСвязи!"
+          />
+        </div>
+        <div>
+          <p><strong>Создано:</strong> {{ formatDate(qrCodeDoc.created_at) }}</p>
+          <!--        <p><strong>Количество сканирований:</strong> {{ qrCodeDoc.scanCount }}</p>-->
+          <!--        <p><strong>Последнее сканирование:</strong> {{ formatDate(qrCodeDoc.lastScan) }}</p>-->
+        </div>
+      </div>
+    </QueryRender>
+
+    <!--    <div class="bg-white p-6 rounded-lg shadow-md mb-6">-->
+    <!--      <h2 class="text-xl font-bold mb-4">Чаты</h2>-->
+    <!--      <div v-if="chats.length > 0" class="grid grid-cols-1 gap-4">-->
+    <!--        <div v-for="chat in chats" :key="chat._id" class="p-4 rounded-lg bg-white shadow-md">-->
+    <!--          <div class="flex items-center justify-between">-->
+    <!--            <div>-->
+    <!--              <p class="text-lg font-semibold">Чат #{{ chat._id }}</p>-->
+    <!--              <p class="text-gray-500">-->
+    <!--                Последнее сообщение: {{ formatDate(chat.lastMessageDate) }}-->
+    <!--              </p>-->
+    <!--            </div>-->
+    <!--            <Button-->
+    <!--              label="Открыть"-->
+    <!--              :to="`/manage/qr/${qrCodeDoc.uri}/chat/${chat._id}`"-->
+    <!--              as="router-link"-->
+    <!--              class="p-button-outlined p-button-sm"-->
+    <!--            />-->
+    <!--          </div>-->
+    <!--        </div>-->
+    <!--      </div>-->
+    <!--      <div v-else class="text-center text-gray-500">-->
+    <!--        <p>Нет активных чатов для этого QR-кода.</p>-->
+    <!--      </div>-->
+    <!--    </div>-->
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue'
+import type { QRCodeDocument } from '@hereconnect/types'
+import { getQrCodeDocument } from '@/api/qrCode'
+import CopyLinkButton from '@/components/CopyLinkButton.vue'
+
+const props = defineProps<{ qr_code_uri: QRCodeDocument['uri'] }>()
+
+const qrCodeUri = computed(() => props.qr_code_uri)
+
+const qrCodeQuery = useQuery({
+  queryKey: ['qrCode', qrCodeUri],
+  queryFn: () => getQrCodeDocument(qrCodeUri.value),
+})
+
+// const { data: chatsData } = useQuery({
+//   queryKey: ['chats', qrCodeUri],
+//   queryFn: () => messagesDbRemote.find({ selector: { qr_code_uri: qrCodeUri } }),
+// })
+
+// const chats = computed(() => chatsData.value?.docs || [])
+
+const formatDate = (date: string) => {
+  if (!date) return '—'
+  const options: Intl.DateTimeFormatOptions = { year: 'numeric', month: 'long', day: 'numeric' }
+  return new Date(date).toLocaleDateString(['ru-RU'], options)
+}
+</script>