hereconnect/src/views/CreateView.vue

<template>
  <div class="max-w-lg mx-auto py-6 px-4 md:px-6">
    <section class="content">
      <div class="max-w-lg mx-auto py-8">
        <!-- Секция выбора размещения -->
        <CreateSection :isActive="activeSteps.includes('placement')">
          <CreatePlacementSection v-model="placement" />
        </CreateSection>

        <!-- Секция выбора доступных действий -->
        <CreateSection :isActive="activeSteps.includes('actions')">
          <CreateActionsSection v-model="selectedActions" />
        </CreateSection>

        <!-- Секция выбора способа доставки -->
        <CreateSection v-if="activeSteps.includes('delivery')" :isActive="true">
          <CreateMessageDeliveryMethodSection v-model="messageDeliveryMethod" />
        </CreateSection>

        <!-- Секция сообщений для отправки -->
        <CreateSection
          v-if="activeSteps.includes('messages')"
          :isActive="messageDeliveryMethod !== 'telegram'"
        >
          <CreateMessagesSection :placement="placement" v-model="messages" />
        </CreateSection>

        <!-- Секция итогового резюме -->
        <CreateSection :isActive="activeSteps.includes('summary')">
          <CreateSummarySection
            :placement="placement"
            :actions="selectedActions"
            :messageDeliveryMethod="messageDeliveryMethod"
            :predefinedMessage="selectedActions.includes('sendMessage') ? messages : undefined"
          />
        </CreateSection>

        <div class="h-[30dvh] md:h-[10dvh] overflow-hidden"></div>
      </div>
    </section>
  </div>
</template>

<script setup lang="ts">
import { computed, ref } from 'vue'
import type { QRCodeDocument } from '@/types/DBDocumentTypes'

// Состояния шагов
const placement = ref<string | null>(null)
const selectedActions = ref<string[]>([])
const messageDeliveryMethod = ref<'' | QRCodeDocument['messageDeliveryMethod']>('')
const messages = ref<string[]>([])

// Функция для определения доступных шагов
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>