From 2a1ab52235ee448e13ef1841d06293978c2daddb Mon Sep 17 00:00:00 2001
From: Vasilii Mikhailovskii <ti.webdev@ya.ru>
Date: Fri, 6 Dec 2024 14:42:03 +0200
Subject: [PATCH] improve

---
 apps/frontend/components.d.ts                 |   3 +
 apps/frontend/src/components/QueryRender.vue  |   4 +-
 .../src/components/link/LinkQRCode.vue        |  12 ++
 .../link/LinkShareTelegramButton.vue          |   2 +-
 apps/frontend/src/constants/routes.ts         |   1 +
 apps/frontend/src/router/index.ts             |   6 +
 .../src/views/ManageDashboardView.vue         | 111 +++++++-----
 .../src/views/ManageQRCodeReadyView.vue       |  20 +-
 apps/frontend/src/views/ManageQRCodeView.vue  | 171 ++++++++++--------
 9 files changed, 202 insertions(+), 128 deletions(-)
 create mode 100644 apps/frontend/src/components/link/LinkQRCode.vue

diff --git a/apps/frontend/components.d.ts b/apps/frontend/components.d.ts
index c1c1e2e..da26ecc 100644
--- a/apps/frontend/components.d.ts
+++ b/apps/frontend/components.d.ts
@@ -28,6 +28,9 @@ declare module 'vue' {
     ExamplesSection: typeof import('./src/components/TheWelcome/ExamplesSection.vue')['default']
     InputText: typeof import('primevue/inputtext')['default']
     LinkCopyButton: typeof import('./src/components/link/LinkCopyButton.vue')['default']
+    LinkMono: typeof import('./src/components/link/LinkMono.vue')['default']
+    LinkQrCode: typeof import('./src/components/link/LinkQrCode.vue')['default']
+    LinkQRCode: typeof import('./src/components/link/LinkQRCode.vue')['default']
     LinkShareButton: typeof import('./src/components/link/LinkShareButton.vue')['default']
     LinkShareTelegramButton: typeof import('./src/components/link/LinkShareTelegramButton.vue')['default']
     ManagePlacementInstructions: typeof import('./src/components/manage/ManagePlacementInstructions.vue')['default']
diff --git a/apps/frontend/src/components/QueryRender.vue b/apps/frontend/src/components/QueryRender.vue
index ba72954..e6a5c9c 100644
--- a/apps/frontend/src/components/QueryRender.vue
+++ b/apps/frontend/src/components/QueryRender.vue
@@ -19,7 +19,9 @@ const { data, error, refetch, isSuccess, isError, isLoading } = query
 <template>
   <slot v-if="isSuccess" name="default" :data="data!" />
   <slot v-else-if="isLoading" name="loading">
-    <p class="text-gray-500" v-if="!slots.loading">Загрузка данных...</p>
+    <div class="text-center text-gray-500" v-if="!slots.loading">
+      <ProgressSpinner styleClass="mt-4" />
+    </div>
   </slot>
   <slot v-else-if="isError" name="error" :error="error!" :reload="refetch">
     <template v-if="!slots.error">
diff --git a/apps/frontend/src/components/link/LinkQRCode.vue b/apps/frontend/src/components/link/LinkQRCode.vue
new file mode 100644
index 0000000..66d25bd
--- /dev/null
+++ b/apps/frontend/src/components/link/LinkQRCode.vue
@@ -0,0 +1,12 @@
+<template>
+  <a
+    :href="url"
+    class="font-mono text-nowrap text-sm text-gray-600 underline underline-offset-4 hover:text-gray-800 hover:no-underline"
+    target="_blank"
+    >{{ url }}</a
+  >
+</template>
+
+<script setup lang="ts">
+defineProps<{ url: string }>()
+</script>
diff --git a/apps/frontend/src/components/link/LinkShareTelegramButton.vue b/apps/frontend/src/components/link/LinkShareTelegramButton.vue
index 8c113f2..405d682 100644
--- a/apps/frontend/src/components/link/LinkShareTelegramButton.vue
+++ b/apps/frontend/src/components/link/LinkShareTelegramButton.vue
@@ -10,7 +10,7 @@
     rel="noopener noreferrer"
     icon="pi pi-telegram"
     title="Поделиться ссылкой в Telegram"
-    label="отправить ссылку в Telegram"
+    label="Отправить ссылку в Telegram"
   />
 </template>
 
diff --git a/apps/frontend/src/constants/routes.ts b/apps/frontend/src/constants/routes.ts
index 641049e..1b51993 100644
--- a/apps/frontend/src/constants/routes.ts
+++ b/apps/frontend/src/constants/routes.ts
@@ -5,6 +5,7 @@ export const ROUTE_NAMES = {
   MANAGE_QR_CODE_READY: 'manage-qr-code-ready',
   MANAGE_QR_CODE_CHAT: 'manage-qr-code-chat',
   MANAGE_DASHBOARD: 'manage-dashboard',
+  MANAGE_DASHBOARD_QR: 'manage-dashboard-qr',
   READ_QR_CODE: 'read-qr-code',
   DONATE: 'donate',
   PUBLIC_CHAT: 'public-chat',
diff --git a/apps/frontend/src/router/index.ts b/apps/frontend/src/router/index.ts
index 80d0247..e60a8ae 100644
--- a/apps/frontend/src/router/index.ts
+++ b/apps/frontend/src/router/index.ts
@@ -25,6 +25,12 @@ const routes = [
     component: () => import('@/views/ManageDashboardView.vue'),
     props: true,
   },
+  {
+    path: '/manage/qr',
+    name: ROUTE_NAMES.MANAGE_DASHBOARD_QR,
+    component: () => import('@/views/ManageDashboardView.vue'),
+    props: true,
+  },
   {
     path: '/manage/qr/:qr_code_uri',
     name: ROUTE_NAMES.MANAGE_QR_CODE,
diff --git a/apps/frontend/src/views/ManageDashboardView.vue b/apps/frontend/src/views/ManageDashboardView.vue
index 009f8db..e4509e0 100644
--- a/apps/frontend/src/views/ManageDashboardView.vue
+++ b/apps/frontend/src/views/ManageDashboardView.vue
@@ -1,48 +1,75 @@
 <template>
-  <div class="p-6">
-    <h1 class="text-2xl font-bold mb-4 text-center">Управление QR-кодами</h1>
-    <QueryRender :query="query">
-      <template #default="{ data }">
-        <div v-if="data.rows.length > 0" class="flex flex-col gap-5">
-          <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
-            <QRCodeCard v-for="{ doc: qrCode } in data.rows" :key="qrCode!.uri" :qrCode="qrCode!" />
-          </div>
-          <div class="text-center">
-            <Button
-              icon="pi pi-qrcode"
-              label="Создать QR‑код"
-              to="/create"
-              as="router-link"
-              class="p-button-outlined p-button-sm"
-            />
-          </div>
-        </div>
-        <div v-else class="text-center text-gray-500">
-          <p class="mb-6">Нет созданных QR-кодов. Вы можете создать их прямо сейчас!</p>
-          <Button
-            icon="pi pi-qrcode"
-            label="Создать QR‑код"
-            to="/create"
-            as="router-link"
-            class="p-button-lg"
-          />
-        </div>
-      </template>
+  <MetaHead>
+    <title>Ваши QR-коды — НаСвязи</title>
+    <meta
+      name="description"
+      content="Просматривайте и управляйте сообщениями, отправленными через ваш QR-код. Полная конфиденциальность и удобный интерфейс чата"
+    />
+  </MetaHead>
 
-      <template #error="{ reload }">
-        <div class="text-center text-red-500">
-          <p>Произошла ошибка при загрузке данных. Пожалуйста, попробуйте позже.</p>
-          <Button label="Повторить попытку" class="p-button mt-4" @click="reload()" />
-        </div>
-      </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="query">
+          <template #default="{ data }">
+            <div v-if="data.rows.length > 0" class="flex flex-col gap-5">
+              <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
+                <QRCodeCard
+                  v-for="{ doc: qrCode } in data.rows"
+                  :key="qrCode!.uri"
+                  :qrCode="qrCode!"
+                />
+              </div>
+              <div class="text-center">
+                <Button
+                  icon="pi pi-qrcode"
+                  label="Создать QR‑код"
+                  to="/create"
+                  as="router-link"
+                  class="p-button-outlined p-button-sm"
+                />
+              </div>
+            </div>
+            <div v-else class="text-center text-gray-500">
+              <p class="mb-6">Нет созданных QR-кодов. Вы можете создать их прямо сейчас!</p>
+              <Button
+                icon="pi pi-qrcode"
+                label="Создать QR‑код"
+                to="/create"
+                as="router-link"
+                class="p-button-lg"
+              />
+            </div>
+          </template>
 
-      <template #loading>
-        <div class="text-center text-gray-500">
-          <p>Загрузка QR-кодов...</p>
-          <ProgressSpinner styleClass="mt-4" />
-        </div>
-      </template>
-    </QueryRender>
+          <template #error="{ reload }">
+            <div class="text-center text-red-500">
+              <p>Произошла ошибка при загрузке данных. Пожалуйста, попробуйте позже.</p>
+              <Button label="Повторить попытку" class="p-button mt-4" @click="reload()" />
+            </div>
+          </template>
+
+          <template #loading>
+            <div class="text-center text-gray-500">
+              <p>Загрузка QR-кодов...</p>
+              <ProgressSpinner styleClass="mt-4" />
+            </div>
+          </template>
+        </QueryRender>
+      </div>
+    </main>
+    <footer class="bg-gray-100 text-center py-4 border-t text-sm text-gray-700">
+      <p>
+        Нужен еще один?
+        <a href="/create" class="underline">Создайте QR‑код</a>.
+      </p>
+      <p class="mt-1">
+        Сделайте НаСвязи удобнее. Будем рады вашей&nbsp;<a href="/donate" class="underline"
+          >поддержке</a
+        >.
+      </p>
+    </footer>
   </div>
 </template>
 
diff --git a/apps/frontend/src/views/ManageQRCodeReadyView.vue b/apps/frontend/src/views/ManageQRCodeReadyView.vue
index bb00088..ec162cd 100644
--- a/apps/frontend/src/views/ManageQRCodeReadyView.vue
+++ b/apps/frontend/src/views/ManageQRCodeReadyView.vue
@@ -16,9 +16,12 @@
       }"
     >
       <section class="max-w-prose w-full flex flex-col gap-1">
-        <p v-if="svgQueryIsLoading || qrCodeQueryIsLoading" class="text-gray-500 mt-4">
-          Загрузка...
-        </p>
+        <div
+          v-if="svgQueryIsLoading || qrCodeQueryIsLoading"
+          class="text-gray-500 mt-4 text-center"
+        >
+          <ProgressSpinner styleClass="mt-4" />
+        </div>
         <p v-else-if="svgQueryIsError" class="text-red-500 mt-4">
           Ошибка генерации QR‑кода: {{ svgQueryError?.message }}
         </p>
@@ -62,16 +65,7 @@
           <div v-if="qrCodeDoc && qrCodeDoc.url" class="text-center mt-6 text-sm">
             <div>
               Ссылка в QR-коде:
-              <span class="text-nowrap">
-                <a
-                  class="font-mono text-sm text-gray-600 underline underline-offset-4 hover:text-gray-800 hover:no-underline"
-                  :href="qrCodeDoc.url"
-                  target="_blank"
-                  rel="noopener noreferrer"
-                >
-                  {{ qrCodeDoc.url }}
-                </a>
-              </span>
+              <LinkQRCode :url="qrCodeDoc.url" />
             </div>
             <div class="flex gap-2 justify-center mt-2">
               <LinkCopyButton :url="qrCodeDoc.url" />
diff --git a/apps/frontend/src/views/ManageQRCodeView.vue b/apps/frontend/src/views/ManageQRCodeView.vue
index dc0fa9d..3f1617d 100644
--- a/apps/frontend/src/views/ManageQRCodeView.vue
+++ b/apps/frontend/src/views/ManageQRCodeView.vue
@@ -1,75 +1,105 @@
 <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="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 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">Создайте QR‑код</a>.
+      </p>
+      <p class="mt-1">
+        Сделайте НаСвязи удобнее. Будем рады вашей&nbsp;<a href="/donate" class="underline"
+          >поддержке</a
+        >.
+      </p>
+    </footer>
   </div>
 </template>
 
@@ -77,7 +107,6 @@
 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'] }>()