exxtract CreateSectionManager component

src/components/create/CreateSectionManager.vue

@@ -0,0 +1,118 @@
+<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
+          v-for="{ name, isActive, isNextActiveSection } in visibleSections"
+          :key="name"
+          :isActive
+          :isNextActiveSection
+        >
+          <slot :name="name" />
+        </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>
+
+<script setup lang="ts">
+import { computed, ref, watch } from 'vue'
+import type { QRCodeDocument } from '@/types/DBDocumentTypes'
+
+// Пропсы, которые будут передаваться из родительского компонента
+const props = defineProps<{
+  placement: null | QRCodeDocument['placement']
+  selectedActions: QRCodeDocument['actions']
+  messageDeliveryMethod: null | QRCodeDocument['messageDeliveryMethod']
+}>()
+
+// Локальные состояния
+const error = ref<string | null>(null)
+
+// Доступные шаги и их условия
+const steps = [
+  {
+    name: 'placement',
+    isActive: true,
+  },
+  {
+    name: 'actions',
+    get isActive() {
+      return !!props.placement
+    },
+  },
+  {
+    name: 'delivery',
+    get isHidden() {
+      return !props.placement || !props.selectedActions.includes('sendMessage')
+    },
+    get isActive() {
+      return props.selectedActions.length > 0 && props.selectedActions.includes('sendMessage')
+    },
+  },
+  {
+    name: 'messages',
+    get isHidden() {
+      return (
+        !props.placement ||
+        !props.selectedActions.includes('sendMessage') ||
+        props.messageDeliveryMethod === 'telegram'
+      )
+    },
+    get isActive() {
+      return props.messageDeliveryMethod && props.selectedActions.includes('sendMessage')
+    },
+  },
+  {
+    name: 'summary',
+    get isActive() {
+      return props.selectedActions.includes('sendMessage')
+        ? !!props.messageDeliveryMethod && props.messageDeliveryMethod !== 'telegram'
+        : props.selectedActions.length > 0
+    },
+  },
+]
+
+const activeSections = computed(() => {
+  const result = []
+  for (const step of steps) {
+    const isActive = !step.isHidden && step.isActive
+    if (isActive) {
+      result.push(step.name)
+    }
+  }
+  return result
+})
+
+const nextActiveSectionName = ref<string>('')
+
+watch(
+  activeSections,
+  (newActiveSections, oldActiveSteps) => {
+    nextActiveSectionName.value =
+      (oldActiveSteps && newActiveSections[oldActiveSteps.length]) ?? newActiveSections.at(-1)!
+  },
+  {
+    immediate: true,
+  },
+)
+
+// Выводимые секции
+const visibleSections = computed(() => {
+  const result = []
+  for (const step of steps) {
+    if (step.isHidden) continue
+    result.push({
+      name: step.name,
+      isActive: activeSections.value.includes(step.name),
+      isNextActiveSection: nextActiveSectionName.value === step.name,
+    })
+  }
+  return result
+})
+</script>