exxtract CreateSectionManager component

src/views/CreateView.vue

@@ -1,69 +1,42 @@
 <template>
-  <div class="max-w-prose mx-auto py-6 px-4 md:px-6">
-    <section class="content">
-      <div class="max-w-prose mx-auto py-8">
-        <!-- Секция выбора размещения -->
-        <CreateSection
-          :isActive="activeSteps.includes('placement')"
-          :isNextActiveSection="nextActiveSection === 'placement'"
-        >
-          <CreatePlacementSection v-model="placement" />
-        </CreateSection>
+  <CreateSectionManager
+    :placement="placement"
+    :selectedActions="selectedActions"
+    :messageDeliveryMethod="messageDeliveryMethod"
+  >
+    <template #placement>
+      <CreatePlacementSection v-model="placement" />
+    </template>
 
-        <!-- Секция выбора доступных действий -->
-        <CreateSection
-          :isActive="activeSteps.includes('actions')"
-          :isNextActiveSection="nextActiveSection === 'actions'"
-        >
-          <CreateActionsSection v-model="selectedActions" />
-        </CreateSection>
+    <template #actions>
+      <CreateActionsSection v-model="selectedActions" />
+    </template>
 
-        <!-- Секция выбора способа доставки -->
-        <CreateSection
-          v-if="activeSteps.includes('delivery')"
-          :isActive="true"
-          :isNextActiveSection="nextActiveSection === 'delivery'"
-        >
-          <CreateMessageDeliveryMethodSection v-model="messageDeliveryMethod" />
-        </CreateSection>
+    <template #delivery>
+      <CreateMessageDeliveryMethodSection v-model="messageDeliveryMethod" />
+    </template>
 
-        <!-- Секция сообщений для отправки -->
-        <CreateSection
-          v-if="selectedActions.includes('sendMessage')"
-          :isActive="activeSteps.includes('messages')"
-          :isNextActiveSection="nextActiveSection === 'messages'"
-        >
-          <CreatePredefinedMessagesSection :placement="placement" v-model="messages" />
-        </CreateSection>
+    <template #messages>
+      <CreatePredefinedMessagesSection :placement="placement" v-model="messages" />
+    </template>
 
-        <!-- Секция итогового резюме -->
-        <CreateSection
-          :isActive="activeSteps.includes('summary')"
-          :isNextActiveSection="nextActiveSection === 'summary'"
-        >
-          <CreateSummarySection
-            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>
-  </div>
+    <template #summary>
+      <CreateSummarySection
+        v-model:name="name"
+        buttonLabel="Создать QR‑код"
+        @nextStep="createQrCode"
+      />
+    </template>
+  </CreateSectionManager>
 </template>
 
 <script setup lang="ts">
-import { computed, ref, watch } from 'vue'
+import { ref } from 'vue'
 import { useRouter } from 'vue-router'
 import { createQrCodeDocument } from '@/api/qrCode'
 import type { QRCodeDocument } from '@/types/DBDocumentTypes'
 import { ROUTE_NAMES } from '@/constants/routes'
 
-// Состояния шагов
 const placement = ref<null | QRCodeDocument['placement']>(null)
 const selectedActions = ref<QRCodeDocument['actions']>([])
 const messageDeliveryMethod = ref<null | QRCodeDocument['messageDeliveryMethod']>(null)
@@ -73,7 +46,6 @@ const error = ref<string | null>(null)
 
 const router = useRouter()
 
-// Логика создания QR-кода
 async function createQrCode() {
   try {
     const qrCodeDocument = await createQrCodeDocument({
@@ -93,40 +65,4 @@ async function createQrCode() {
     error.value = (err as Error).message || 'Неизвестная ошибка'
   }
 }
-
-// Функция для определения доступных шагов
-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 &&
-      (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)
-    }
-  }
-  return active
-})
-
-const nextActiveSection = ref<string>('placement')
-
-watch(activeSteps, (newActiveSteps, oldActiveSteps) => {
-  nextActiveSection.value =
-    (oldActiveSteps && newActiveSteps[oldActiveSteps.length]) ?? newActiveSteps.at(-1)
-})
 </script>