rename deliveryMethod to messageDeliveryMethod, telegram in development

components.d.ts

@@ -11,7 +11,8 @@ declare module 'vue' {
     Checkbox: typeof import('primevue/checkbox')['default']
     ContactInfo: typeof import('./src/components/read/ReadContactInfo.vue')['default']
     CreateActionsSection: typeof import('./src/components/create/CreateActionsSection.vue')['default']
-    CreateDeliverySection: typeof import('./src/components/create/CreateDeliverySection.vue')['default']
+    CreateDeliverySection: typeof import('./src/components/create/CreateMessageDeliveryMethodSection.vue')['default']
+    CreateMessageDeliveryMethodSection: typeof import('./src/components/create/CreateMessageDeliveryMethodSection.vue')['default']
     CreateMessagesSection: typeof import('./src/components/create/CreateMessagesSection.vue')['default']
     CreateNameSection: typeof import('./src/components/create/CreateNameSection.vue')['default']
     CreatePlacementSection: typeof import('./src/components/create/CreatePlacementSection.vue')['default']

src/api/qrCode.ts

@@ -6,7 +6,7 @@ const EPOHE = 1731661630981
 export const createQrCodeDocument = async (
   qrCodeDocPartial: Pick<
     QRCodeDocument,
-    'name' | 'deliveryMethod' | 'placement' | 'actions' | 'user_uuid' | 'predefinedMessage'
+    'name' | 'placement' | 'actions' | 'user_uuid' | 'predefinedMessage' | 'messageDeliveryMethod'
   >,
 ) => {
   const uri = Math.abs(Date.now() - EPOHE).toString(36)

src/components/create/CreateDeliverySection.vue

@@ -1,32 +0,0 @@
-<template>
-  <section>
-    <h2 class="text-xl font-semibold mb-4">Куда отправлять сообщения?</h2>
-    <p class="text-gray-600 mb-4">Выберите, как вы хотите получать сообщения.</p>
-    <div class="flex flex-col gap-3 mb-4">
-      <div class="flex items-center gap-2" v-for="(label, method) in deliveryOptions" :key="method">
-        <RadioButton
-          v-model="model"
-          :inputId="method"
-          name="delivery"
-          :value="method"
-          @change="next"
-        />
-        <label :for="method">{{ label }}</label>
-      </div>
-    </div>
-  </section>
-</template>
-
-<script setup lang="ts">
-const emit = defineEmits(['nextStep'])
-const model = defineModel<string>()
-
-const deliveryOptions = {
-  telegram: 'Telegram',
-  webPushSubscription: 'В браузере (push-уведомления)',
-}
-
-function next() {
-  emit('nextStep')
-}
-</script>

src/components/create/CreateMessageDeliveryMethodSection.vue

@@ -0,0 +1,59 @@
+<template>
+  <section>
+    <h2 class="text-xl font-semibold mb-4">Куда отправлять сообщения?</h2>
+    <p class="text-gray-600 mb-4">Выберите, как вы хотите получать сообщения.</p>
+    <div class="flex flex-col gap-3 mb-4">
+      <div class="flex items-center gap-2" v-for="option in deliveryOptions" :key="option.method">
+        <RadioButton
+          v-model="model"
+          :inputId="option.method"
+          name="delivery"
+          :value="option.method"
+          @change="handleSelection(option.method)"
+        />
+        <label :for="option.method">{{ option.label }}</label>
+      </div>
+    </div>
+
+    <!-- Сообщение о недоступности -->
+    <p v-if="telegramNotice" class="text-red-500 mb-2">
+      Отправка в Telegram пока в разработке.<br />
+      Этот способ отправки сообщений можно будет выбрать позже.
+    </p>
+  </section>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue'
+import { type QRCodeDocument } from '@/types/DBDocumentTypes'
+
+const emit = defineEmits(['nextStep'])
+const model = defineModel<QRCodeDocument['messageDeliveryMethod']>()
+
+type DeliveryOption = {
+  label: string
+  method: QRCodeDocument['messageDeliveryMethod']
+}
+
+// Локальное состояние для уведомления
+const telegramNotice = ref(false)
+
+// Массив вариантов доставки
+const deliveryOptions: DeliveryOption[] = [
+  {
+    label: 'В браузере (push-уведомления)',
+    method: 'webPushSubscription',
+  },
+  { label: 'Telegram', method: 'telegram' },
+]
+
+// Обработчик выбора
+function handleSelection(method: QRCodeDocument['messageDeliveryMethod']) {
+  if (method === 'telegram') {
+    telegramNotice.value = true
+  } else {
+    telegramNotice.value = false
+    emit('nextStep')
+  }
+}
+</script>

src/components/create/CreateSummarySection.vue

@@ -27,10 +27,10 @@ import { createQrCodeDocument } from '@/api/qrCode'
 
 const router = useRouter()
 
-const { placement, actions, deliveryMethod, user_uuid, predefinedMessage } = defineProps<{
+const { placement, actions, messageDeliveryMethod, user_uuid, predefinedMessage } = defineProps<{
   placement: QRCodeDocument['placement']
   actions: QRCodeDocument['actions']
-  deliveryMethod: QRCodeDocument['deliveryMethod']
+  messageDeliveryMethod: QRCodeDocument['messageDeliveryMethod'] | undefined
   user_uuid: QRCodeDocument['user_uuid']
   predefinedMessage: QRCodeDocument['predefinedMessage'] | undefined
 }>()
@@ -42,10 +42,10 @@ async function saveQRCode() {
   try {
     const qrCodeDocument = await createQrCodeDocument({
       name: name.value,
-      deliveryMethod,
       placement,
       actions,
       user_uuid,
+      messageDeliveryMethod,
       predefinedMessage,
     })
 

src/types/DBDocumentTypes/QRCodeDocument.ts

@@ -20,7 +20,7 @@ export interface QRCodeDocument extends BaseDocument {
   /** Название объекта, для которого создан QR‑код, например "Мой автомобиль" */
   name: string
 
-  deliveryMethod: 'telegram' | 'webPushSubscription'
+  messageDeliveryMethod: 'telegram' | 'webPushSubscription'
 
   /** Тип объекта, для которого создан QR‑код, например "car" */
   placement: 'car' | 'pet' | 'door' | 'store' | 'restaurant_table' | 'other'

src/views/CreateView.vue

@@ -26,16 +26,16 @@
           v-if="selectedActions.includes('sendMessage')"
           :isActive="activeSteps.includes('delivery')"
         >
-          <CreateDeliverySection
+          <CreateMessageDeliveryMethodSection
-            v-model="deliveryMethod"
+            v-model="messageDeliveryMethod"
-            @nextStep="deliveryMethod && activateSections('messages', 'summary')"
+            @nextStep="messageDeliveryMethod && activateSections('messages', 'summary')"
           />
         </CreateSection>
 
         <!-- Секция сообщений для отправки -->
         <CreateSection
           v-if="selectedActions.includes('sendMessage') && activeSteps.includes('messages')"
-          :isActive="true"
+          :isActive="messageDeliveryMethod !== 'telegram'"
         >
           <CreateMessagesSection :placement v-model="messages" />
         </CreateSection>
@@ -45,7 +45,7 @@
           <CreateSummarySection
             :placement="placement"
             :actions="selectedActions"
-            :deliveryMethod="deliveryMethod"
+            :messageDeliveryMethod="messageDeliveryMethod"
             :user_uuid="user_uuid"
             :predefinedMessage="selectedActions.includes('sendMessage') ? messages : undefined"
           />
@@ -59,13 +59,14 @@
 
 <script setup lang="ts">
 import { ref } from 'vue'
+import type { QRCodeDocument } from '@/types/DBDocumentTypes'
 
 // Шаги и состояния для работы с секциями
 const activeSteps = ref(['placement'])
 
 const selectedActions = ref<string[]>([])
 const placement = ref('')
-const deliveryMethod = ref('')
+const messageDeliveryMethod = ref<'' | QRCodeDocument['messageDeliveryMethod']>('')
 const messages = ref<string[]>([])
 const user_uuid = 'example-user-uuid' // Временно захардкожено, заменить на динамическое