From fc66b779aee12a9592502d720fe1b52463a6233e Mon Sep 17 00:00:00 2001
From: Vasilii Mikhailovskii <ti.webdev@ya.ru>
Date: Wed, 20 Nov 2024 09:48:18 +0200
Subject: [PATCH] fix sections

---
 src/components/create/CreateSection.vue | 10 +++---
 src/views/CreateView.vue                | 42 ++++++++++++++++++-------
 2 files changed, 36 insertions(+), 16 deletions(-)

diff --git a/src/components/create/CreateSection.vue b/src/components/create/CreateSection.vue
index 9efc580..2ccfd96 100644
--- a/src/components/create/CreateSection.vue
+++ b/src/components/create/CreateSection.vue
@@ -7,16 +7,16 @@
 <script setup lang="ts">
 import { watch, useTemplateRef } from 'vue'
 
-const props = defineProps<{ isActive: boolean }>()
+const props = defineProps<{ isActive: boolean; isNextActiveSection: boolean }>()
 
 const sectionRef = useTemplateRef('section')
 
 // плавная прокрутка при активации секции
 watch(
-  () => props.isActive,
-  (isActive) => {
-    if (isActive) {
-      sectionRef.value?.querySelector('input')?.focus()
+  () => props.isNextActiveSection,
+  (isNextActiveSection) => {
+    if (isNextActiveSection) {
+      sectionRef.value?.querySelector('input[type="text"]')?.focus()
       sectionRef.value?.scrollIntoView({ behavior: 'smooth' })
     }
   },
diff --git a/src/views/CreateView.vue b/src/views/CreateView.vue
index 8f6aa48..46ef59b 100644
--- a/src/views/CreateView.vue
+++ b/src/views/CreateView.vue
@@ -3,30 +3,44 @@
     <section class="content">
       <div class="max-w-prose mx-auto py-8">
         <!-- Секция выбора размещения -->
-        <CreateSection :isActive="activeSteps.includes('placement')">
+        <CreateSection
+          :isActive="activeSteps.includes('placement')"
+          :isNextActiveSection="nextActiveSection === 'placement'"
+        >
           <CreatePlacementSection v-model="placement" />
         </CreateSection>
 
         <!-- Секция выбора доступных действий -->
-        <CreateSection :isActive="activeSteps.includes('actions')">
+        <CreateSection
+          :isActive="activeSteps.includes('actions')"
+          :isNextActiveSection="nextActiveSection === 'actions'"
+        >
           <CreateActionsSection v-model="selectedActions" />
         </CreateSection>
 
         <!-- Секция выбора способа доставки -->
-        <CreateSection v-if="activeSteps.includes('delivery')" :isActive="true">
+        <CreateSection
+          v-if="activeSteps.includes('delivery')"
+          :isActive="true"
+          :isNextActiveSection="nextActiveSection === 'delivery'"
+        >
           <CreateMessageDeliveryMethodSection v-model="messageDeliveryMethod" />
         </CreateSection>
 
         <!-- Секция сообщений для отправки -->
         <CreateSection
-          v-if="activeSteps.includes('messages')"
-          :isActive="messageDeliveryMethod !== 'telegram'"
+          v-if="selectedActions.includes('sendMessage')"
+          :isActive="activeSteps.includes('messages')"
+          :isNextActiveSection="nextActiveSection === 'messages'"
         >
           <CreatePredefinedMessagesSection :placement="placement" v-model="messages" />
         </CreateSection>
 
         <!-- Секция итогового резюме -->
-        <CreateSection :isActive="activeSteps.includes('summary')">
+        <CreateSection
+          :isActive="activeSteps.includes('summary')"
+          :isNextActiveSection="nextActiveSection === 'summary'"
+        >
           <CreateSummarySection
             v-model:name="name"
             buttonLabel="Создать QR‑код"
@@ -43,7 +57,7 @@
 </template>
 
 <script setup lang="ts">
-import { computed, ref } from 'vue'
+import { computed, ref, watch } from 'vue'
 import { useRouter } from 'vue-router'
 import { createQrCodeDocument } from '@/api/qrCode'
 import type { QRCodeDocument } from '@/types/DBDocumentTypes'
@@ -95,18 +109,24 @@ const activeSteps = computed(() => {
     summary:
       !!placement.value &&
       selectedActions.value.length > 0 &&
-      (messageDeliveryMethod.value === 'webPushSubscription' ||
-        selectedActions.value.includes('viewContactInfo')),
+      (selectedActions.value.includes('sendMessage')
+        ? messageDeliveryMethod.value === 'webPushSubscription'
+        : !!selectedActions.value.length),
   }
 
   const active = []
   for (const step of steps) {
     if (active.length === 0 || isStepValid[step]) {
       active.push(step)
-    } else {
-      break
     }
   }
   return active
 })
+
+const nextActiveSection = ref<string>('placement')
+
+watch(activeSteps, (newActiveSteps, oldActiveSteps) => {
+  nextActiveSection.value =
+    (oldActiveSteps && newActiveSteps[oldActiveSteps.length]) ?? newActiveSteps.at(-1)
+})
 </script>