hereconnect/src/views/CreateView.vue

<template>
  <div class="create-page max-w-lg mx-auto py-8">
    <!-- Секция выбора размещения -->
    <CreateSection isActive>
      <CreatePlacementSection
        v-model="placement"
        @nextStep="placement && activateSections('actions')"
      />
    </CreateSection>

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

    <!-- Секция выбора способа доставки -->
    <CreateSection
      v-if="selectedActions.includes('sendMessage')"
      :isActive="activeSteps.includes('delivery')"
    >
      <CreateDeliverySection
        v-model="deliveryMethod"
        @nextStep="deliveryMethod && activateSections('messages', 'summary')"
      />
    </CreateSection>

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

    <!-- Секция итогового резюме -->
    <CreateSection :isActive="activeSteps.includes('summary')">
      <CreateSummarySection
        v-model:uri="uri"
        v-model:name="name"
        :placement="placement"
        :actions="selectedActions"
        :deliveryMethod="deliveryMethod"
        :user_uuid="user_uuid"
        :predefinedMessage="selectedActions.includes('sendMessage') ? messages : undefined"
        @nextStep="activateSections('qrReady')"
      />
    </CreateSection>

    <!-- Секция готового QR-кода -->
    <CreateSection :isActive="activeSteps.includes('qrReady')">
      <CreateReadySection :uri="uri" :name="name" />
    </CreateSection>

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

<script setup lang="ts">
import { ref } from 'vue'

// Шаги и состояния для работы с секциями
const activeSteps = ref(['placement'])

const selectedActions = ref<string[]>([])
const placement = ref('')
const deliveryMethod = ref('')
const messages = ref<string[]>([])
const name = ref('')
const uri = ref('')
const user_uuid = 'example-user-uuid' // Временно захардкожено, заменить на динамическое

// Функция активации следующих шагов
function activateSections(...sections: string[]) {
  sections.forEach((section) => {
    if (!activeSteps.value.includes(section)) {
      activeSteps.value.push(section)
    }
  })
}
</script>