77 lines
2.8 KiB
Vue
77 lines
2.8 KiB
Vue
<template>
|
|
<section>
|
|
<h2 class="text-xl font-semibold mb-4">Сообщения для отправки</h2>
|
|
<p class="text-gray-600 mb-4">
|
|
После считывания QR‑кода можно будет выбрать одно из этих сообщений или написать своё.
|
|
</p>
|
|
<p class="text-sm text-gray-500 mb-6">Вы сможете изменить эти сообщения позже.</p>
|
|
|
|
<!-- Список сообщений -->
|
|
<div class="flex flex-col gap-2 mb-4">
|
|
<div v-for="(message, index) in messages" :key="index" class="flex gap-2" ref="messagesRef">
|
|
<InputText v-model="messages[index]" class="flex-1" placeholder="Введите сообщение" />
|
|
<Button
|
|
icon="pi pi-trash"
|
|
class="p-button-danger p-button-text"
|
|
@click="removeMessage(index)"
|
|
title="Удалить сообщение"
|
|
/>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Кнопка добавления сообщения -->
|
|
<Button
|
|
label="Добавить сообщение"
|
|
icon="pi pi-plus"
|
|
class="p-button-sm p-button-outlined mb-4"
|
|
@click="addMessage"
|
|
/>
|
|
</section>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import { nextTick, useTemplateRef, watch } from 'vue'
|
|
import { type QRCodeDocument } from '@/types/DBDocumentTypes'
|
|
import { defaultMessages } from '@/constants/defaultMessages'
|
|
|
|
// Пропсы
|
|
const props = defineProps<{ placement: QRCodeDocument['placement'] }>()
|
|
const messagesRef = useTemplateRef<HTMLDivElement[]>('messagesRef')
|
|
|
|
// Локальное хранилище сообщений
|
|
const messages = defineModel<Exclude<QRCodeDocument['predefinedMessages'], undefined>>({
|
|
required: true,
|
|
})
|
|
|
|
// Следим за типом размещения и устанавливаем предустановленные сообщения при его смене
|
|
watch(
|
|
() => props.placement,
|
|
(newPlacement, previousPlacement) => {
|
|
let prevDefaultMessages: (typeof defaultMessages)[QRCodeDocument['placement']] = []
|
|
if (previousPlacement && previousPlacement in defaultMessages) {
|
|
prevDefaultMessages = defaultMessages[previousPlacement]
|
|
}
|
|
const isMessagesDefault =
|
|
messages.value.length === 0 ||
|
|
JSON.stringify(messages.value) === JSON.stringify(prevDefaultMessages)
|
|
if (isMessagesDefault) {
|
|
messages.value = [...(defaultMessages[newPlacement] || [])]
|
|
}
|
|
},
|
|
{ immediate: true },
|
|
)
|
|
|
|
// Функции для управления сообщениями
|
|
function addMessage() {
|
|
messages.value.push('')
|
|
nextTick(() => {
|
|
const lastMessageRef = messagesRef.value![messagesRef.value!.length - 1]
|
|
lastMessageRef?.querySelector('input')?.focus() // Фокусируемся на последнем поле
|
|
})
|
|
}
|
|
|
|
function removeMessage(index: number) {
|
|
messages.value.splice(index, 1)
|
|
}
|
|
</script>
|