109 lines
3.3 KiB
Vue
109 lines
3.3 KiB
Vue
<script setup lang="ts">
|
|
import { useQuery } from '@vue/apollo-composable';
|
|
import {
|
|
NotificationTemplatesDocument,
|
|
type NotificationTemplatesQuery,
|
|
} from '~/composables/graphql/generated';
|
|
|
|
definePageMeta({
|
|
middleware: ['manager-only'],
|
|
path: '/admin/settings/messages',
|
|
alias: ['/messages'],
|
|
});
|
|
|
|
type TemplateItem = NotificationTemplatesQuery['notificationTemplates'][number];
|
|
type TemplateChannel = TemplateItem['channels'][number];
|
|
|
|
const templatesQuery = useQuery(NotificationTemplatesDocument);
|
|
|
|
const templates = computed<TemplateItem[]>(() => templatesQuery.result.value?.notificationTemplates ?? []);
|
|
|
|
function channelLabel(channel: TemplateChannel['channel']) {
|
|
if (channel === 'EMAIL') {
|
|
return 'Email';
|
|
}
|
|
if (channel === 'TELEGRAM') {
|
|
return 'Telegram';
|
|
}
|
|
return 'Max';
|
|
}
|
|
</script>
|
|
|
|
<template>
|
|
<section class="space-y-6">
|
|
<h1 class="text-3xl font-extrabold text-[#0f2f20]">Сообщения</h1>
|
|
|
|
<div v-if="templatesQuery.loading.value" class="manager-empty-state">
|
|
Загружаем шаблоны...
|
|
</div>
|
|
|
|
<div v-else-if="templates.length === 0" class="manager-empty-state">
|
|
Шаблонов пока нет.
|
|
</div>
|
|
|
|
<div v-else class="space-y-6">
|
|
<section
|
|
v-for="template in templates"
|
|
:key="template.id"
|
|
>
|
|
<h2 class="text-xl font-bold text-[#123824]">
|
|
{{ template.title }}
|
|
</h2>
|
|
|
|
<div class="mt-4 grid gap-4 xl:grid-cols-3">
|
|
<section
|
|
v-for="channel in template.channels"
|
|
:key="`${template.id}-${channel.channel}`"
|
|
class="surface-card rounded-[24px] bg-white p-4"
|
|
>
|
|
<h3 class="text-sm font-extrabold uppercase tracking-[0.14em] text-[#355947]">
|
|
{{ channelLabel(channel.channel) }}
|
|
</h3>
|
|
|
|
<div class="mt-3 rounded-[20px] bg-[#f8fbf9] p-4">
|
|
<div
|
|
v-if="channel.subject"
|
|
class="mb-4"
|
|
>
|
|
<p class="text-xs font-semibold uppercase tracking-[0.12em] text-[#5c7b69]">
|
|
Тема:
|
|
</p>
|
|
<p class="mt-2 text-sm font-semibold text-[#123824]">
|
|
{{ channel.subject }}
|
|
</p>
|
|
|
|
<div class="mt-4 h-px bg-[#d7e4dc]" />
|
|
</div>
|
|
|
|
<div class="space-y-3 text-sm leading-6 text-[#123824]">
|
|
<p
|
|
v-for="line in channel.body"
|
|
:key="line"
|
|
>
|
|
{{ line }}
|
|
</p>
|
|
</div>
|
|
|
|
<div v-if="channel.buttonText" class="mt-4">
|
|
<a
|
|
v-if="channel.buttonUrl"
|
|
:href="channel.buttonUrl"
|
|
class="btn h-11 rounded-full border-0 bg-[#123824] px-5 text-white hover:bg-[#0f2f20]"
|
|
>
|
|
{{ channel.buttonText }}
|
|
</a>
|
|
<span
|
|
v-else
|
|
class="inline-flex h-11 items-center rounded-full bg-[#123824] px-5 text-sm font-semibold text-white"
|
|
>
|
|
{{ channel.buttonText }}
|
|
</span>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
</div>
|
|
</section>
|
|
</div>
|
|
</section>
|
|
</template>
|