hereconnect/apps/frontend/src/views/ManageQRCodeView.vue

<template>
  <div class="flex flex-col min-h-full">
    <main class="flex-grow flex justify-center py-6 px-4 md:px-6">
      <div>
        <h1 class="text-2xl font-bold mb-4 text-center lg:text-left">Управление QR-кодом</h1>
        <QueryRender :query="qrCodeQuery">
          <template #default="{ data: qrCodeDoc }">
            <MetaHead>
              <title>{{ qrCodeDoc.name }}: управление QR-кодом — НаСвязи</title>
              <meta
                name="description"
                content="Просматривайте и управляйте сообщениями, отправленными через ваш QR-код. Полная конфиденциальность и удобный интерфейс чата"
              />
            </MetaHead>
            <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 flex-wrap">
                <strong>Ссылка: </strong>
                <LinkQRCode :url="qrCodeDoc.url" />
                <div class="flex gap-2 items-baseline flex-wrap">
                  <LinkCopyButton :url="qrCodeDoc.url" />
                  <LinkShareTelegramButton
                    :shareUrl="qrCodeDoc.url"
                    shareText="Используйте эту ссылку НаСвязи!"
                  />
                </div>
              </div>
              <div>
                <p>
                  <strong>Создано: </strong>
                  <span class="text-nowrap">{{ formatDate(qrCodeDoc.created_at) }}</span>
                </p>
                <!--        <p><strong>Количество сканирований:</strong> {{ qrCodeDoc.scanCount }}</p>-->
                <!--        <p><strong>Последнее сканирование:</strong> {{ formatDate(qrCodeDoc.lastScan) }}</p>-->
              </div>
            </div>
          </template>
        </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>
    </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>
</template>

<script setup lang="ts">
import { computed } from 'vue'
import type { QRCodeDocument } from '@hereconnect/types'
import { getQrCodeDocument } from '@/api/qrCode'

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>