WIP message-delivery-method-web-push

apps/frontend/src/views/CreateView.vue

@@ -44,7 +44,7 @@
 import { ref } from 'vue'
 import { useRouter } from 'vue-router'
 import { createQrCodeDocument } from '@/api/qrCode'
-import type { QRCodeDocument } from '@/types/DBDocumentTypes'
+import type { QRCodeDocument } from '@hereconnect/types'
 import { ROUTE_NAMES } from '@/constants/routes'
 
 const placement = ref<null | QRCodeDocument['placement']>(null)

apps/frontend/src/views/ManageQRCodeReadyView.vue

@@ -1,52 +1,62 @@
 <template>
   <div class="flex flex-col min-h-full">
-    <main class="flex-grow flex items-center justify-center py-6 px-4 md:px-6">
+    <main
+      class="flex-grow flex justify-center py-6 px-4 md:px-6"
+      :class="{
+        'items-center':
+          svgQueryIsLoading || qrCodeQueryIsLoading || svgQueryIsError || qrCodeQueryIsError,
+      }"
+    >
       <section class="max-w-prose w-full flex flex-col gap-1">
-        <h2 class="text-xl font-semibold mb-4">Ваш QR‑код готов</h2>
-        <p class="text-gray-600 mb-4">Сохраните его и ознакомьтесь с инструкциями по размещению.</p>
-
-        <!-- Рендер QR‑кода -->
-        <div v-if="!svgQueryIsLoading && svgQueryData" class="border p-4 bg-white rounded-lg mb-6">
-          <img :src="svgQueryData" alt="QR‑код" />
-        </div>
+        <p v-if="svgQueryIsLoading || qrCodeQueryIsLoading" class="text-gray-500 mt-4">
+          Загрузка...
+        </p>
         <p v-else-if="svgQueryIsError" class="text-red-500 mt-4">
           Ошибка генерации QR‑кода: {{ svgQueryError?.message }}
         </p>
-
-        <!-- Сообщение об ошибке -->
-        <p v-if="qrCodeQueryIsError" class="text-red-500 mt-4">
+        <p v-else-if="qrCodeQueryIsError" class="text-red-500 mt-4">
           Ошибка загрузки данных QR‑кода: {{ qrCodeQueryError!.message }}
         </p>
-        <p v-if="svgQueryIsLoading" class="text-gray-500 mt-4">Загрузка...</p>
+        <template v-else>
+          <h2 class="text-xl font-semibold mb-4">Ваш QR‑код готов</h2>
+          <p class="text-gray-600 mb-4">
+            Сохраните его и ознакомьтесь с инструкциями по размещению.
+          </p>
 
-        <!-- Кнопки для скачивания -->
-        <div
-          v-if="!svgQueryIsLoading && !qrCodeQueryIsError && svgQueryData"
-          class="flex flex-row gap-4 justify-center"
-        >
-          <Button
-            label="Скачать SVG"
-            icon="pi pi-download"
-            class="p-button-sm"
-            :href="svgQueryData"
-            :download="`${sanitizedFileName}.svg`"
-            as="a"
+          <!-- Рендер QR‑кода -->
+          <div class="border p-4 bg-white rounded-lg mb-6">
+            <img v-if="!svgQueryIsLoading && svgQueryData" :src="svgQueryData" alt="QR‑код" />
+          </div>
+
+          <!-- Кнопки для скачивания -->
+          <div
+            v-if="!svgQueryIsLoading && !qrCodeQueryIsError && svgQueryData"
+            class="flex flex-row gap-4 justify-center"
+          >
+            <Button
+              label="Скачать SVG"
+              icon="pi pi-download"
+              class="p-button-sm"
+              :href="svgQueryData"
+              :download="`${sanitizedFileName}.svg`"
+              as="a"
+            />
+
+            <DownloadImageButton
+              :svgUrl="svgQueryData"
+              :filename="`${sanitizedFileName}.png`"
+              label="Скачать PNG"
+              type="image/png"
+              :width="width"
+            />
+          </div>
+
+          <!-- Инструкции по размещению -->
+          <ManagePlacementInstructions
+            :placement="qrCodeDoc?.placement"
+            v-if="qrCodeDoc?.placement"
           />
-
-          <DownloadImageButton
-            :svgUrl="svgQueryData"
-            :filename="`${sanitizedFileName}.png`"
-            label="Скачать PNG"
-            type="image/png"
-            :width="width"
-          />
-        </div>
-
-        <!-- Инструкции по размещению -->
-        <ManagePlacementInstructions
-          :placement="qrCodeDoc?.placement"
-          v-if="qrCodeDoc?.placement"
-        />
+        </template>
       </section>
     </main>
 
@@ -71,7 +81,7 @@ import QRCodeStyling from 'qr-code-styling'
 import { optimizeSvg } from '@/utils/images/svg/optimizeSvg'
 import { replaceFillInSvg } from '@/utils/images/svg/replaceFillInSvg'
 import { getQrCodeDocument } from '@/api/qrCode'
-import { type QRCodeDocument } from '@/types/DBDocumentTypes'
+import { type QRCodeDocument } from '@hereconnect/types'
 import { addLabelToSvg } from '@/utils/images/svg/addLabelToSvg'
 import logo from '@/assets/logo.svg?raw'
 import { sanitizeFileName } from '@/utils/sanitizeFileName'
@@ -86,11 +96,15 @@ const height = ref(width.value)
 // Хук для загрузки данных QR‑кода
 const {
   data: qrCodeDoc,
+  isLoading: qrCodeQueryIsLoading,
   isError: qrCodeQueryIsError,
   error: qrCodeQueryError,
 } = useQuery({
   queryKey: ['qrCode', computed(() => qr_code_uri)],
-  queryFn: () => getQrCodeDocument(qr_code_uri),
+  queryFn: async () => {
+    await new Promise((resolve) => setTimeout(resolve, 1000))
+    return getQrCodeDocument(qr_code_uri)
+  },
 })
 
 const sanitizedFileName = computed(() => {
@@ -110,6 +124,8 @@ const {
   enabled: computed(() => !!qrCodeDoc.value?.url),
   retry: false,
   queryFn: async () => {
+    await new Promise((resolve) => setTimeout(resolve, 1000))
+
     // Заменяем цвет `fill` в логотипе
     const updatedLogo = replaceFillInSvg(logo, logoColor.value)
 

apps/frontend/src/views/PublicChatView.vue

@@ -45,7 +45,7 @@
 </template>
 
 <script setup lang="ts">
-import type { MessageDocument } from '@/types/DBDocumentTypes'
+import type { MessageDocument } from '@hereconnect/types'
 import ChatComponent from '@/components/ChatComponent.vue'
 defineProps<{ qr_code_uri: MessageDocument['qr_code_uri']; chat: MessageDocument['chat'] }>()
 </script>

apps/frontend/src/views/ReadQRCodeView.vue

@@ -31,7 +31,7 @@
 <script setup lang="ts">
 import { useQuery } from '@tanstack/vue-query'
 import { getQrCodeDocument } from '@/api/qrCode'
-import type { QRCodeDocument } from '@/types/DBDocumentTypes'
+import type { QRCodeDocument } from '@hereconnect/types'
 import QueryRender from '@/components/QueryRender.vue'
 
 const { qr_code_uri } = defineProps<{ qr_code_uri: string }>()