From 7f27948d7952a8164762a32006a7945723f86978 Mon Sep 17 00:00:00 2001
From: Vasilii Mikhailovskii <ti.webdev@ya.ru>
Date: Fri, 6 Dec 2024 11:47:45 +0200
Subject: [PATCH] create qr code progress

---
 .../create/CreateSummarySection.vue           | 10 +++++++--
 apps/frontend/src/views/CreateView.vue        | 22 +++++++++++--------
 2 files changed, 21 insertions(+), 11 deletions(-)

diff --git a/apps/frontend/src/components/create/CreateSummarySection.vue b/apps/frontend/src/components/create/CreateSummarySection.vue
index 44676c2..47c2750 100644
--- a/apps/frontend/src/components/create/CreateSummarySection.vue
+++ b/apps/frontend/src/components/create/CreateSummarySection.vue
@@ -8,14 +8,20 @@
       <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="buttonLabel" class="p-button-md mt-4 mb-4" :disabled="!name" />
+      <Button
+        type="submit"
+        :label="buttonLabel"
+        class="p-button-md mt-4 mb-4"
+        :loading="isPending"
+        :disabled="!name || isPending"
+      />
     </form>
   </section>
 </template>
 
 <script setup lang="ts">
 import { type QRCodeDocument } from '@hereconnect/types'
-defineProps<{ buttonLabel: string }>()
+defineProps<{ buttonLabel: string; isPending: boolean }>()
 const name = defineModel<QRCodeDocument['name']>('name')
 const emit = defineEmits(['nextStep'])
 </script>
diff --git a/apps/frontend/src/views/CreateView.vue b/apps/frontend/src/views/CreateView.vue
index ebdd377..cb75a43 100644
--- a/apps/frontend/src/views/CreateView.vue
+++ b/apps/frontend/src/views/CreateView.vue
@@ -35,12 +35,13 @@
             <CreateSummarySection
               v-model:name="name"
               buttonLabel="Создать QR‑код"
+              :isPending
               @nextStep="createQrCode"
             />
           </template>
         </CreateSectionManager>
 
-        <p v-if="error" class="text-red-500 mt-4">Ошибка создания QR‑кода: {{ error }}</p>
+        <p v-if="isError" class="text-red-500 mt-4">Ошибка создания QR‑кода: {{ error }}</p>
 
         <div class="h-[30dvh] md:h-[10dvh] overflow-hidden"></div>
       </div>
@@ -54,18 +55,24 @@ import { useRouter } from 'vue-router'
 import { createQrCodeDocument } from '@/api/qrCode'
 import type { QRCodeDocument } from '@hereconnect/types'
 import { ROUTE_NAMES } from '@/constants/routes'
+import { useMutation } from '@tanstack/vue-query'
 
 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()
 
-async function createQrCode() {
-  try {
+const {
+  isPending,
+  isError,
+  error,
+  mutate: createQrCode,
+} = useMutation({
+  mutationKey: ['createQrCode'],
+  mutationFn: async () => {
     const qrCodeDocument = await createQrCodeDocument({
       name: name.value,
       placement: placement.value!,
@@ -74,13 +81,10 @@ async function createQrCode() {
       predefinedMessages: messages.value.length > 0 ? messages.value : undefined,
     })
 
-    error.value = null
     await router.push({
       name: ROUTE_NAMES.MANAGE_QR_CODE_READY,
       params: { qr_code_uri: qrCodeDocument.uri },
     })
-  } catch (err) {
-    error.value = (err as Error).message || 'Неизвестная ошибка'
-  }
-}
+  },
+})
 </script>