validate in one place

src/views/CreateView.vue

@@ -3,41 +3,26 @@
     <section class="content">
       <div class="max-w-lg mx-auto py-8">
         <!-- Секция выбора размещения -->
-        <CreateSection isActive>
-          <CreatePlacementSection
-            v-model="placement"
-            @nextStep="placement && activateSections('actions')"
-          />
+        <CreateSection :isActive="activeSteps.includes('placement')">
+          <CreatePlacementSection v-model="placement" />
         </CreateSection>
 
         <!-- Секция выбора доступных действий -->
         <CreateSection :isActive="activeSteps.includes('actions')">
-          <CreateActionsSection
-            v-model="selectedActions"
-            @nextStep="
-              selectedActions.length &&
-                activateSections(selectedActions.includes('sendMessage') ? 'delivery' : 'summary')
-            "
-          />
+          <CreateActionsSection v-model="selectedActions" />
         </CreateSection>
 
         <!-- Секция выбора способа доставки -->
-        <CreateSection
-          v-if="selectedActions.includes('sendMessage')"
-          :isActive="activeSteps.includes('delivery')"
-        >
-          <CreateMessageDeliveryMethodSection
-            v-model="messageDeliveryMethod"
-            @nextStep="messageDeliveryMethod && activateSections('messages', 'summary')"
-          />
+        <CreateSection v-if="activeSteps.includes('delivery')" :isActive="true">
+          <CreateMessageDeliveryMethodSection v-model="messageDeliveryMethod" />
         </CreateSection>
 
         <!-- Секция сообщений для отправки -->
         <CreateSection
-          v-if="selectedActions.includes('sendMessage') && activeSteps.includes('messages')"
+          v-if="activeSteps.includes('messages')"
           :isActive="messageDeliveryMethod !== 'telegram'"
         >
-          <CreateMessagesSection :placement v-model="messages" />
+          <CreateMessagesSection :placement="placement" v-model="messages" />
         </CreateSection>
 
         <!-- Секция итогового резюме -->
@@ -46,7 +31,6 @@
             :placement="placement"
             :actions="selectedActions"
             :messageDeliveryMethod="messageDeliveryMethod"
-            :user_uuid="user_uuid"
             :predefinedMessage="selectedActions.includes('sendMessage') ? messages : undefined"
           />
         </CreateSection>
@@ -58,24 +42,42 @@
 </template>
 
 <script setup lang="ts">
-import { ref } from 'vue'
+import { computed, ref } from 'vue'
 import type { QRCodeDocument } from '@/types/DBDocumentTypes'
 
-// Шаги и состояния для работы с секциями
-const activeSteps = ref(['placement'])
-
+// Состояния шагов
+const placement = ref<string | null>(null)
 const selectedActions = ref<string[]>([])
-const placement = ref('')
 const messageDeliveryMethod = ref<'' | QRCodeDocument['messageDeliveryMethod']>('')
 const messages = ref<string[]>([])
-const user_uuid = 'example-user-uuid' // Временно захардкожено, заменить на динамическое
 
-// Функция активации следующих шагов
-function activateSections(...sections: string[]) {
-  sections.forEach((section) => {
-    if (!activeSteps.value.includes(section)) {
-      activeSteps.value.push(section)
+// Функция для определения доступных шагов
+const activeSteps = computed(() => {
+  const steps = ['placement', 'actions', 'delivery', 'messages', 'summary'] as const
+  const isStepValid = {
+    placement: !!placement.value,
+    actions: !!placement.value,
+    delivery:
+      !!placement.value &&
+      selectedActions.value.length > 0 &&
+      selectedActions.value.includes('sendMessage'),
+    messages:
+      !!messageDeliveryMethod.value && messageDeliveryMethod.value === 'webPushSubscription',
+    summary:
+      !!placement.value &&
+      selectedActions.value.length > 0 &&
+      (messageDeliveryMethod.value === 'webPushSubscription' ||
+        selectedActions.value.includes('viewContactInfo')),
+  }
+
+  const active = []
+  for (const step of steps) {
+    if (active.length === 0 || isStepValid[step]) {
+      active.push(step)
+    } else {
+      break
     }
-  })
-}
+  }
+  return active
+})
 </script>