Refine cabinet layout, profile blocks, and list filters

This commit is contained in:
Ruslan Bakiev
2026-04-02 17:17:16 +07:00
parent d99e9345f2
commit caa9b9fba5
7 changed files with 372 additions and 277 deletions

View File

@@ -4,7 +4,6 @@ import {
MeDocument,
MyCounterpartyProfileDocument,
MyMessengerConnectionsDocument,
RegisterSelfDocument,
UpsertMyCounterpartyProfileDocument,
} from '~/composables/graphql/generated';
import { buildMessengerBotStartUrl } from '~/composables/useMessengerBotLink';
@@ -42,13 +41,6 @@ type BankSuggestion = {
const config = useRuntimeConfig();
const registerForm = reactive({
companyName: '',
inn: '',
contactName: '',
email: '',
});
const counterpartyForm = reactive({
companyName: '',
companyFullName: '',
@@ -65,8 +57,6 @@ const counterpartyForm = reactive({
signerBasis: '',
});
const registerFeedback = ref('');
const registerFeedbackTone = ref<'success' | 'error'>('success');
const profileFeedback = ref('');
const profileFeedbackTone = ref<'success' | 'error'>('success');
@@ -74,7 +64,6 @@ const meQuery = useQuery(MeDocument);
const profileQuery = useQuery(MyCounterpartyProfileDocument);
const connectionsQuery = useQuery(MyMessengerConnectionsDocument);
const registerMutation = useMutation(RegisterSelfDocument, { throws: 'never' });
const saveCounterpartyMutation = useMutation(UpsertMyCounterpartyProfileDocument, { throws: 'never' });
const companySearch = ref('');
@@ -258,28 +247,6 @@ function closeDropdownsFromOutside(event: MouseEvent) {
}
}
async function registerSelf() {
registerFeedback.value = '';
const result = await registerMutation.mutate({
input: {
companyName: registerForm.companyName,
inn: registerForm.inn.trim() ? registerForm.inn.trim() : null,
contactName: registerForm.contactName,
email: registerForm.email,
},
});
const payload = result?.data?.registerSelf;
if (!payload) {
registerFeedbackTone.value = 'error';
registerFeedback.value = registerMutation.error.value?.message || 'Не удалось отправить заявку.';
return;
}
registerFeedbackTone.value = 'success';
registerFeedback.value = 'Заявка на регистрацию отправлена менеджеру.';
}
async function saveCounterpartyProfile() {
profileFeedback.value = '';
const result = await saveCounterpartyMutation.mutate({
@@ -325,84 +292,10 @@ onBeforeUnmount(() => {
<template>
<section class="space-y-6">
<div>
<h1 class="text-3xl font-extrabold text-[#0f2f20]">Профиль</h1>
<p class="mt-1 text-sm text-[#28543f]/80">Заполните карточку контрагента, чтобы можно было оформлять заявки из корзины.</p>
</div>
<h1 class="text-3xl font-extrabold text-[#0f2f20]">Профиль</h1>
<div class="grid gap-4 lg:grid-cols-2">
<div class="grid gap-4 lg:grid-cols-[1.8fr_1fr]">
<div class="surface-card rounded-3xl p-5">
<h2 class="text-xl font-bold text-[#123824]">Самостоятельная регистрация</h2>
<div class="mt-4 space-y-3">
<fieldset class="fieldset">
<legend class="fieldset-legend">Компания</legend>
<input v-model="registerForm.companyName" type="text" class="input input-bordered w-full" placeholder="ООО Пример" >
</fieldset>
<fieldset class="fieldset">
<legend class="fieldset-legend">ИНН</legend>
<input v-model="registerForm.inn" type="text" class="input input-bordered w-full" placeholder="7701234567" >
</fieldset>
<fieldset class="fieldset">
<legend class="fieldset-legend">Контактное лицо</legend>
<input v-model="registerForm.contactName" type="text" class="input input-bordered w-full" placeholder="Иванов Иван" >
</fieldset>
<fieldset class="fieldset">
<legend class="fieldset-legend">E-mail</legend>
<input v-model="registerForm.email" type="email" class="input input-bordered w-full" placeholder="name@company.com" >
</fieldset>
<button class="btn btn-primary w-full" :disabled="registerMutation.loading.value" @click="registerSelf">
{{ registerMutation.loading.value ? 'Отправляем' : 'Отправить заявку' }}
</button>
<div v-if="registerFeedback" class="alert" :class="registerFeedbackTone === 'success' ? 'alert-success' : 'alert-error'">
{{ registerFeedback }}
</div>
</div>
</div>
<div class="surface-card rounded-3xl p-5">
<h2 class="text-xl font-bold text-[#123824]">Каналы уведомлений</h2>
<div class="mt-4 space-y-3">
<div class="rounded-2xl border border-[#d6ebde] bg-white/75 p-4">
<p class="font-semibold">Telegram</p>
<p class="text-sm opacity-80">
{{ telegramConnection ? `Подключен: ${telegramConnection.channelId}` : 'Не подключен' }}
</p>
<a
:href="telegramConnectUrl || undefined"
target="_blank"
rel="noopener noreferrer"
class="btn btn-secondary mt-3 w-full"
:class="{ 'btn-disabled pointer-events-none': !telegramConnectUrl }"
>
{{ telegramConnection ? 'Переподключить Telegram' : 'Подключить Telegram' }}
</a>
</div>
<div class="rounded-2xl border border-[#d6ebde] bg-white/75 p-4">
<p class="font-semibold">Max</p>
<p class="text-sm opacity-80">
{{ maxConnection ? `Подключен: ${maxConnection.channelId}` : 'Не подключен' }}
</p>
<a
:href="maxConnectUrl || undefined"
target="_blank"
rel="noopener noreferrer"
class="btn btn-accent mt-3 w-full"
:class="{ 'btn-disabled pointer-events-none': !maxConnectUrl }"
>
{{ maxConnection ? 'Переподключить Max' : 'Подключить Max' }}
</a>
</div>
</div>
</div>
</div>
<div class="surface-card rounded-3xl p-5">
<div class="flex flex-wrap items-center justify-between gap-2">
<h2 class="text-xl font-bold text-[#123824]">Карточка контрагента</h2>
<span class="badge" :class="profileIsComplete ? 'badge-success' : 'badge-warning'">
@@ -556,7 +449,11 @@ onBeforeUnmount(() => {
<fieldset class="fieldset">
<legend class="fieldset-legend">Основание полномочий</legend>
<textarea v-model="counterpartyForm.signerBasis" class="textarea textarea-bordered min-h-24 w-full" placeholder="Действует на основании Устава" />
<textarea
v-model="counterpartyForm.signerBasis"
class="textarea textarea-bordered min-h-24 w-full"
placeholder="Действует на основании Устава"
/>
</fieldset>
<button class="btn btn-primary mt-4 w-full" :disabled="saveCounterpartyMutation.loading.value || !profileIsComplete" @click="saveCounterpartyProfile">
@@ -578,6 +475,44 @@ onBeforeUnmount(() => {
: 'Пока карточка не заполнена полностью, оформление заявки в корзине будет заблокировано.'
}}
</div>
</div>
<aside class="surface-card rounded-3xl p-5">
<h2 class="text-xl font-bold text-[#123824]">Уведомления</h2>
<div class="mt-4 space-y-3">
<div class="rounded-2xl border border-[#d6ebde] bg-white/75 p-4">
<p class="font-semibold">Telegram</p>
<p class="text-sm opacity-80">
{{ telegramConnection ? `Подключен: ${telegramConnection.channelId}` : 'Не подключен' }}
</p>
<a
:href="telegramConnectUrl || undefined"
target="_blank"
rel="noopener noreferrer"
class="btn btn-secondary mt-3 w-full"
:class="{ 'btn-disabled pointer-events-none': !telegramConnectUrl }"
>
{{ telegramConnection ? 'Переподключить Telegram' : 'Подключить Telegram' }}
</a>
</div>
<div class="rounded-2xl border border-[#d6ebde] bg-white/75 p-4">
<p class="font-semibold">Max</p>
<p class="text-sm opacity-80">
{{ maxConnection ? `Подключен: ${maxConnection.channelId}` : 'Не подключен' }}
</p>
<a
:href="maxConnectUrl || undefined"
target="_blank"
rel="noopener noreferrer"
class="btn btn-accent mt-3 w-full"
:class="{ 'btn-disabled pointer-events-none': !maxConnectUrl }"
>
{{ maxConnection ? 'Переподключить Max' : 'Подключить Max' }}
</a>
</div>
</div>
</aside>
</div>
</section>
</template>