From fc7afb2d123aa271b82ad252d24a7c5719d1e196 Mon Sep 17 00:00:00 2001
From: Vasilii Mikhailovskii <ti.webdev@ya.ru>
Date: Tue, 19 Nov 2024 15:50:15 +0200
Subject: [PATCH] move create into CreateView.vue

---
 components.d.ts                               |  3 +-
 src/api/qrCode.ts                             |  2 +-
 ...ue => CreatePredefinedMessagesSection.vue} |  8 +-
 .../create/CreateSummarySection.vue           | 48 ++----------
 src/types/DBDocumentTypes/QRCodeDocument.ts   |  2 +-
 src/views/CreateView.vue                      | 43 ++++++++---
 src/views/ManageQRCodeReadyView.vue           | 74 +++++++++++--------
 7 files changed, 92 insertions(+), 88 deletions(-)
 rename src/components/create/{CreateMessagesSection.vue => CreatePredefinedMessagesSection.vue} (93%)

diff --git a/components.d.ts b/components.d.ts
index 074ebb5..594c4ba 100644
--- a/components.d.ts
+++ b/components.d.ts
@@ -13,9 +13,10 @@ declare module 'vue' {
     CreateActionsSection: typeof import('./src/components/create/CreateActionsSection.vue')['default']
     CreateDeliverySection: typeof import('./src/components/create/CreateMessageDeliveryMethodSection.vue')['default']
     CreateMessageDeliveryMethodSection: typeof import('./src/components/create/CreateMessageDeliveryMethodSection.vue')['default']
-    CreateMessagesSection: typeof import('./src/components/create/CreateMessagesSection.vue')['default']
+    CreateMessagesSection: typeof import('./src/components/create/CreatePredefinedMessagesSection.vue')['default']
     CreateNameSection: typeof import('./src/components/create/CreateNameSection.vue')['default']
     CreatePlacementSection: typeof import('./src/components/create/CreatePlacementSection.vue')['default']
+    CreatePredefinedMessagesSection: typeof import('./src/components/create/CreatePredefinedMessagesSection.vue')['default']
     CreateReadySection: typeof import('./src/components/create/CreateReadySection.vue')['default']
     CreateSection: typeof import('./src/components/create/CreateSection.vue')['default']
     CreateSummarySection: typeof import('./src/components/create/CreateSummarySection.vue')['default']
diff --git a/src/api/qrCode.ts b/src/api/qrCode.ts
index 0f715e4..ef4ecd8 100644
--- a/src/api/qrCode.ts
+++ b/src/api/qrCode.ts
@@ -10,7 +10,7 @@ export const createQrCodeDocument = async (
     | 'placement'
     | 'actions'
     //| 'user_uuid'
-    | 'predefinedMessage'
+    | 'predefinedMessages'
     | 'messageDeliveryMethod'
   >,
 ) => {
diff --git a/src/components/create/CreateMessagesSection.vue b/src/components/create/CreatePredefinedMessagesSection.vue
similarity index 93%
rename from src/components/create/CreateMessagesSection.vue
rename to src/components/create/CreatePredefinedMessagesSection.vue
index 8c17e85..11fceeb 100644
--- a/src/components/create/CreateMessagesSection.vue
+++ b/src/components/create/CreatePredefinedMessagesSection.vue
@@ -59,7 +59,7 @@ const defaultMessages = {
 }
 
 // Локальное хранилище сообщений
-const messages = defineModel<Exclude<QRCodeDocument['predefinedMessage'], undefined>>({
+const messages = defineModel<Exclude<QRCodeDocument['predefinedMessages'], undefined>>({
   required: true,
 })
 
@@ -67,11 +67,13 @@ const messages = defineModel<Exclude<QRCodeDocument['predefinedMessage'], undefi
 watch(
   () => props.placement,
   (newPlacement, previousPlacement) => {
-    let prevDefaultMessages: QRCodeDocument['predefinedMessage'] = []
+    let prevDefaultMessages: QRCodeDocument['predefinedMessages'] = []
     if (previousPlacement && previousPlacement in defaultMessages) {
       prevDefaultMessages = defaultMessages[previousPlacement]
     }
-    const isMessagesDefault = JSON.stringify(messages.value) === JSON.stringify(prevDefaultMessages)
+    const isMessagesDefault =
+      messages.value.length === 0 ||
+      JSON.stringify(messages.value) === JSON.stringify(prevDefaultMessages)
     if (isMessagesDefault) {
       messages.value = [...(defaultMessages[newPlacement] || [])]
     }
diff --git a/src/components/create/CreateSummarySection.vue b/src/components/create/CreateSummarySection.vue
index 5f6a20f..e290750 100644
--- a/src/components/create/CreateSummarySection.vue
+++ b/src/components/create/CreateSummarySection.vue
@@ -3,57 +3,19 @@
     <h2 class="text-xl font-semibold mb-4">Введите название для вашего QR‑кода</h2>
     <p class="text-gray-600 mb-4">Название поможет вам организовать ваши QR‑коды.</p>
 
-    <form @submit.prevent="saveQRCode">
+    <form @submit.prevent="emit('nextStep')">
       <label for="name" class="block text-gray-700 font-semibold mb-2">Название</label>
       <InputText id="name" v-model="name" class="w-full" placeholder="Введите название" />
       <p v-if="!name" class="text-red-500 text-sm mt-1">Название обязательно.</p>
 
-      <Button
-        type="submit"
-        label="Создать QR‑код"
-        class="p-button-md mt-4 mb-4"
-        :disabled="!name"
-      />
+      <Button type="submit" :label="buttonLabel" class="p-button-md mt-4 mb-4" :disabled="!name" />
     </form>
-    <p v-if="error" class="text-red-500 mt-4">Ошибка создания QR‑кода: {{ error }}</p>
   </section>
 </template>
 
 <script setup lang="ts">
-import { ref } from 'vue'
-import { useRouter } from 'vue-router'
 import { type QRCodeDocument } from '@/types/DBDocumentTypes'
-import { createQrCodeDocument } from '@/api/qrCode'
-
-const router = useRouter()
-
-const { placement, actions, messageDeliveryMethod, predefinedMessage } = defineProps<{
-  placement: QRCodeDocument['placement']
-  actions: QRCodeDocument['actions']
-  messageDeliveryMethod: QRCodeDocument['messageDeliveryMethod']
-  // user_uuid: QRCodeDocument['user_uuid']
-  predefinedMessage: QRCodeDocument['predefinedMessage'] | undefined
-}>()
-
-const name = ref<QRCodeDocument['name']>('name')
-const error = ref<string | null>(null)
-
-async function saveQRCode() {
-  try {
-    const qrCodeDocument = await createQrCodeDocument({
-      name: name.value,
-      placement,
-      actions,
-      // user_uuid,
-      messageDeliveryMethod,
-      predefinedMessage,
-    })
-
-    error.value = null
-    // Перенаправление на страницу /manage/:qr/ready
-    await router.push({ name: 'ManageQRCodeReady', params: { qr_code_uri: qrCodeDocument.uri } })
-  } catch (err) {
-    error.value = (err as Error).message || 'Неизвестная ошибка'
-  }
-}
+defineProps<{ buttonLabel: string }>()
+const name = defineModel<QRCodeDocument['name']>('name')
+const emit = defineEmits(['nextStep'])
 </script>
diff --git a/src/types/DBDocumentTypes/QRCodeDocument.ts b/src/types/DBDocumentTypes/QRCodeDocument.ts
index 5654080..26a4bc7 100644
--- a/src/types/DBDocumentTypes/QRCodeDocument.ts
+++ b/src/types/DBDocumentTypes/QRCodeDocument.ts
@@ -29,5 +29,5 @@ export interface QRCodeDocument extends BaseDocument {
   actions: string[]
 
   /** Предустановленное сообщение для гостей */
-  predefinedMessage?: string[]
+  predefinedMessages?: string[]
 }
diff --git a/src/views/CreateView.vue b/src/views/CreateView.vue
index ae80fa2..2beac40 100644
--- a/src/views/CreateView.vue
+++ b/src/views/CreateView.vue
@@ -22,19 +22,20 @@
           v-if="activeSteps.includes('messages')"
           :isActive="messageDeliveryMethod !== 'telegram'"
         >
-          <CreateMessagesSection :placement="placement" v-model="messages" />
+          <CreatePredefinedMessagesSection :placement="placement" v-model="messages" />
         </CreateSection>
 
         <!-- Секция итогового резюме -->
         <CreateSection :isActive="activeSteps.includes('summary')">
           <CreateSummarySection
-            :placement="placement"
-            :actions="selectedActions"
-            :messageDeliveryMethod="messageDeliveryMethod"
-            :predefinedMessage="selectedActions.includes('sendMessage') ? messages : undefined"
+            v-model:name="name"
+            buttonLabel="Создать QR‑код"
+            @nextStep="createQrCode"
           />
         </CreateSection>
 
+        <p v-if="error" class="text-red-500 mt-4">Ошибка создания QR‑кода: {{ error }}</p>
+
         <div class="h-[30dvh] md:h-[10dvh] overflow-hidden"></div>
       </div>
     </section>
@@ -43,13 +44,37 @@
 
 <script setup lang="ts">
 import { computed, ref } from 'vue'
+import { useRouter } from 'vue-router'
+import { createQrCodeDocument } from '@/api/qrCode'
 import type { QRCodeDocument } from '@/types/DBDocumentTypes'
 
 // Состояния шагов
-const placement = ref<string | null>(null)
-const selectedActions = ref<string[]>([])
-const messageDeliveryMethod = ref<'' | QRCodeDocument['messageDeliveryMethod']>('')
-const messages = ref<string[]>([])
+const placement = ref<null | QRCodeDocument['placement']>(null)
+const selectedActions = ref<QRCodeDocument['actions']>([])
+const messageDeliveryMethod = ref<null | QRCodeDocument['messageDeliveryMethod']>(null)
+const messages = ref<Exclude<QRCodeDocument['predefinedMessages'], undefined>>([])
+const name = ref<QRCodeDocument['name']>('')
+const error = ref<string | null>(null)
+
+const router = useRouter()
+
+// Логика создания QR-кода
+async function createQrCode() {
+  try {
+    const qrCodeDocument = await createQrCodeDocument({
+      name: name.value,
+      placement: placement.value!,
+      actions: selectedActions.value,
+      messageDeliveryMethod: messageDeliveryMethod.value!,
+      predefinedMessages: messages.value.length > 0 ? messages.value : undefined,
+    })
+
+    error.value = null
+    await router.push({ name: 'ManageQRCodeReady', params: { qr_code_uri: qrCodeDocument.uri } })
+  } catch (err) {
+    error.value = (err as Error).message || 'Неизвестная ошибка'
+  }
+}
 
 // Функция для определения доступных шагов
 const activeSteps = computed(() => {
diff --git a/src/views/ManageQRCodeReadyView.vue b/src/views/ManageQRCodeReadyView.vue
index 7a7d52c..86d57cd 100644
--- a/src/views/ManageQRCodeReadyView.vue
+++ b/src/views/ManageQRCodeReadyView.vue
@@ -1,37 +1,51 @@
 <template>
-  <div class="max-w-lg mx-auto py-6 px-4 md:px-6">
-    <section class="content text-center">
-      <h2 class="text-xl font-semibold mb-4">Ваш QR‑код готов</h2>
-      <p class="text-gray-600 mb-4">Сохраните его и ознакомьтесь с инструкциями по размещению.</p>
+  <div class="flex flex-col min-h-screen">
+    <main class="flex-grow flex items-center justify-center py-6 px-4 md:px-6">
+      <section class="max-w-lg 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="!loading && svgUrl" class="border p-4 bg-white rounded-lg mb-6">
-        <img :src="svgUrl" alt="QR‑код" />
-      </div>
+        <!-- Рендер QR‑кода -->
+        <div v-if="!loading && svgUrl" class="border p-4 bg-white rounded-lg mb-6">
+          <img :src="svgUrl" alt="QR‑код" />
+        </div>
 
-      <!-- Сообщение об ошибке -->
-      <p v-if="error" class="text-red-500 mt-4">{{ error }}</p>
-      <p v-if="loading" class="text-gray-500 mt-4">Загрузка...</p>
+        <!-- Сообщение об ошибке -->
+        <p v-if="error" class="text-red-500 mt-4">{{ error }}</p>
+        <p v-if="loading" class="text-gray-500 mt-4">Загрузка...</p>
 
-      <!-- Кнопки для скачивания -->
-      <div v-if="!loading && !error" class="flex flex-row gap-4 justify-center">
-        <Button
-          v-if="svgUrl"
-          label="Скачать SVG"
-          icon="pi pi-download"
-          class="p-button-sm"
-          :href="svgUrl"
-          :download="`${sanitizedFileName}.svg`"
-          as="a"
-        />
-        <Button
-          label="Скачать PNG"
-          icon="pi pi-download"
-          class="p-button-sm p-button-outlined"
-          @click="downloadPng"
-        />
-      </div>
-    </section>
+        <!-- Кнопки для скачивания -->
+        <div v-if="!loading && !error" class="flex flex-row gap-4 justify-center">
+          <Button
+            v-if="svgUrl"
+            label="Скачать SVG"
+            icon="pi pi-download"
+            class="p-button-sm"
+            :href="svgUrl"
+            :download="`${sanitizedFileName}.svg`"
+            as="a"
+          />
+          <Button
+            label="Скачать PNG"
+            icon="pi pi-download"
+            class="p-button-sm p-button-outlined"
+            @click="downloadPng"
+          />
+        </div>
+      </section>
+    </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>