Simplify profile sections and clean catalog header
This commit is contained in:
Ruslan Bakiev
@@ -77,15 +77,11 @@ function decrementProduct(productId: string) {
|
|||||||
|
|
||||||
<template>
|
<template>
|
||||||
<section class="space-y-5">
|
<section class="space-y-5">
|
||||||
<h1 class="text-3xl font-extrabold text-[#0f2f20]">Каталог</h1>
|
<div class="flex flex-wrap items-center justify-between gap-3">
|
||||||
|
<h1 class="text-3xl font-extrabold text-[#0f2f20]">Каталог</h1>
|
||||||
<div class="surface-card rounded-3xl p-4 md:p-5">
|
<NuxtLink to="/cart" class="btn btn-outline btn-sm">
|
||||||
<div class="flex flex-wrap items-center justify-between gap-3">
|
Корзина: {{ totalItems }}
|
||||||
<p class="text-sm text-base-content/75">Добавляй позиции и оформляй заявку в корзине.</p>
|
</NuxtLink>
|
||||||
<NuxtLink to="/cart" class="btn btn-outline btn-sm">
|
|
||||||
Корзина: {{ totalItems }}
|
|
||||||
</NuxtLink>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="surface-card rounded-3xl p-4 md:p-5">
|
<div class="surface-card rounded-3xl p-4 md:p-5">
|
||||||
|
|||||||
@@ -296,187 +296,183 @@ onBeforeUnmount(() => {
|
|||||||
|
|
||||||
<div class="grid gap-4 lg:grid-cols-[1.8fr_1fr]">
|
<div class="grid gap-4 lg:grid-cols-[1.8fr_1fr]">
|
||||||
<div class="surface-card rounded-3xl p-5">
|
<div class="surface-card rounded-3xl p-5">
|
||||||
<div class="flex flex-wrap items-center justify-between gap-2">
|
<div class="flex flex-wrap items-center justify-between gap-2">
|
||||||
<h2 class="text-xl font-bold text-[#123824]">Карточка контрагента</h2>
|
<h2 class="text-xl font-bold text-[#123824]">Карточка контрагента</h2>
|
||||||
<span class="badge" :class="profileIsComplete ? 'badge-success' : 'badge-warning'">
|
<p class="text-sm font-semibold text-[#355947]">
|
||||||
{{ profileIsComplete ? 'Заполнена' : 'Не заполнена' }}
|
{{ profileIsComplete ? 'Заполнено' : 'Заполнить' }}
|
||||||
</span>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="mt-4 grid gap-4 xl:grid-cols-3">
|
<div class="mt-4 space-y-4">
|
||||||
<div class="rounded-2xl border border-base-300 bg-base-100 p-4">
|
<section>
|
||||||
<h3 class="mb-3 text-base font-bold">1. Контрагент (Dadata)</h3>
|
<h3 class="mb-3 text-base font-bold">1. Контрагент (Dadata)</h3>
|
||||||
|
|
||||||
<div ref="partyDropdownRef" class="relative">
|
<div ref="partyDropdownRef" class="relative">
|
||||||
<fieldset class="fieldset">
|
<fieldset class="fieldset">
|
||||||
<legend class="fieldset-legend">Поиск компании</legend>
|
<legend class="fieldset-legend">Поиск компании</legend>
|
||||||
<input
|
<input
|
||||||
v-model="companySearch"
|
v-model="companySearch"
|
||||||
type="text"
|
type="text"
|
||||||
class="input input-bordered w-full"
|
class="input input-bordered w-full"
|
||||||
placeholder="Введите название или ИНН"
|
placeholder="Введите название или ИНН"
|
||||||
@input="schedulePartySuggest"
|
@input="schedulePartySuggest"
|
||||||
@focus="partyOpen = partySuggestions.length > 0"
|
@focus="partyOpen = partySuggestions.length > 0"
|
||||||
|
>
|
||||||
|
</fieldset>
|
||||||
|
|
||||||
|
<span v-if="partyLoading" class="loading loading-spinner loading-sm absolute right-3 top-1/2 -translate-y-1/2" />
|
||||||
|
|
||||||
|
<div
|
||||||
|
v-if="partyOpen && partySuggestions.length > 0"
|
||||||
|
class="absolute z-30 mt-2 max-h-72 w-full overflow-auto rounded-box border border-base-300 bg-base-100 p-2 shadow-xl"
|
||||||
>
|
>
|
||||||
</fieldset>
|
<button
|
||||||
|
v-for="item in partySuggestions"
|
||||||
<span v-if="partyLoading" class="loading loading-spinner loading-sm absolute right-3 top-1/2 -translate-y-1/2" />
|
:key="`${item.value}-${item.data?.inn || ''}`"
|
||||||
|
type="button"
|
||||||
<div
|
class="btn btn-ghost mb-1 h-auto min-h-0 w-full justify-start whitespace-normal px-3 py-2 text-left"
|
||||||
v-if="partyOpen && partySuggestions.length > 0"
|
@click="applyPartySuggestion(item)"
|
||||||
class="absolute z-30 mt-2 max-h-72 w-full overflow-auto rounded-box border border-base-300 bg-base-100 p-2 shadow-xl"
|
>
|
||||||
>
|
<span>
|
||||||
<button
|
<span class="block text-sm font-semibold">{{ item.value }}</span>
|
||||||
v-for="item in partySuggestions"
|
<span class="block text-xs opacity-70">ИНН: {{ item.data?.inn || '—' }} <span v-if="item.data?.kpp">• КПП: {{ item.data.kpp }}</span></span>
|
||||||
:key="`${item.value}-${item.data?.inn || ''}`"
|
</span>
|
||||||
type="button"
|
</button>
|
||||||
class="btn btn-ghost mb-1 h-auto min-h-0 w-full justify-start whitespace-normal px-3 py-2 text-left"
|
</div>
|
||||||
@click="applyPartySuggestion(item)"
|
|
||||||
>
|
|
||||||
<span>
|
|
||||||
<span class="block text-sm font-semibold">{{ item.value }}</span>
|
|
||||||
<span class="block text-xs opacity-70">ИНН: {{ item.data?.inn || '—' }} <span v-if="item.data?.kpp">• КПП: {{ item.data.kpp }}</span></span>
|
|
||||||
</span>
|
|
||||||
</button>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
|
||||||
|
|
||||||
<fieldset class="fieldset">
|
|
||||||
<legend class="fieldset-legend">Краткое наименование</legend>
|
|
||||||
<input v-model="counterpartyForm.companyName" type="text" class="input input-bordered w-full" >
|
|
||||||
</fieldset>
|
|
||||||
|
|
||||||
<fieldset class="fieldset">
|
|
||||||
<legend class="fieldset-legend">Полное наименование</legend>
|
|
||||||
<input v-model="counterpartyForm.companyFullName" type="text" class="input input-bordered w-full" >
|
|
||||||
</fieldset>
|
|
||||||
|
|
||||||
<div class="grid gap-3 sm:grid-cols-3">
|
|
||||||
<fieldset class="fieldset">
|
<fieldset class="fieldset">
|
||||||
<legend class="fieldset-legend">ИНН</legend>
|
<legend class="fieldset-legend">Краткое наименование</legend>
|
||||||
<input v-model="counterpartyForm.inn" type="text" class="input input-bordered w-full" >
|
<input v-model="counterpartyForm.companyName" type="text" class="input input-bordered w-full" >
|
||||||
</fieldset>
|
</fieldset>
|
||||||
|
|
||||||
<fieldset class="fieldset">
|
<fieldset class="fieldset">
|
||||||
<legend class="fieldset-legend">КПП</legend>
|
<legend class="fieldset-legend">Полное наименование</legend>
|
||||||
<input v-model="counterpartyForm.kpp" type="text" class="input input-bordered w-full" >
|
<input v-model="counterpartyForm.companyFullName" type="text" class="input input-bordered w-full" >
|
||||||
</fieldset>
|
</fieldset>
|
||||||
|
|
||||||
<fieldset class="fieldset">
|
<div class="grid gap-3 sm:grid-cols-3">
|
||||||
<legend class="fieldset-legend">ОГРН</legend>
|
<fieldset class="fieldset">
|
||||||
<input v-model="counterpartyForm.ogrn" type="text" class="input input-bordered w-full" >
|
<legend class="fieldset-legend">ИНН</legend>
|
||||||
</fieldset>
|
<input v-model="counterpartyForm.inn" type="text" class="input input-bordered w-full" >
|
||||||
</div>
|
</fieldset>
|
||||||
|
|
||||||
<fieldset class="fieldset">
|
<fieldset class="fieldset">
|
||||||
<legend class="fieldset-legend">Юридический адрес</legend>
|
<legend class="fieldset-legend">КПП</legend>
|
||||||
<textarea v-model="counterpartyForm.legalAddress" class="textarea textarea-bordered min-h-24 w-full" />
|
<input v-model="counterpartyForm.kpp" type="text" class="input input-bordered w-full" >
|
||||||
</fieldset>
|
</fieldset>
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="rounded-2xl border border-base-300 bg-base-100 p-4">
|
<fieldset class="fieldset">
|
||||||
<h3 class="mb-3 text-base font-bold">2. Банк (Dadata)</h3>
|
<legend class="fieldset-legend">ОГРН</legend>
|
||||||
|
<input v-model="counterpartyForm.ogrn" type="text" class="input input-bordered w-full" >
|
||||||
<div ref="bankDropdownRef" class="relative">
|
</fieldset>
|
||||||
<fieldset class="fieldset">
|
|
||||||
<legend class="fieldset-legend">Поиск банка</legend>
|
|
||||||
<input
|
|
||||||
v-model="bankSearch"
|
|
||||||
type="text"
|
|
||||||
class="input input-bordered w-full"
|
|
||||||
placeholder="Введите название банка"
|
|
||||||
@input="scheduleBankSuggest"
|
|
||||||
@focus="bankOpen = bankSuggestions.length > 0"
|
|
||||||
>
|
|
||||||
</fieldset>
|
|
||||||
|
|
||||||
<span v-if="bankLoading" class="loading loading-spinner loading-sm absolute right-3 top-1/2 -translate-y-1/2" />
|
|
||||||
|
|
||||||
<div
|
|
||||||
v-if="bankOpen && bankSuggestions.length > 0"
|
|
||||||
class="absolute z-30 mt-2 max-h-72 w-full overflow-auto rounded-box border border-base-300 bg-base-100 p-2 shadow-xl"
|
|
||||||
>
|
|
||||||
<button
|
|
||||||
v-for="item in bankSuggestions"
|
|
||||||
:key="`${item.value}-${item.data?.bic || ''}`"
|
|
||||||
type="button"
|
|
||||||
class="btn btn-ghost mb-1 h-auto min-h-0 w-full justify-start whitespace-normal px-3 py-2 text-left"
|
|
||||||
@click="applyBankSuggestion(item)"
|
|
||||||
>
|
|
||||||
<span>
|
|
||||||
<span class="block text-sm font-semibold">{{ item.value }}</span>
|
|
||||||
<span class="block text-xs opacity-70">БИК: {{ item.data?.bic || '—' }}</span>
|
|
||||||
</span>
|
|
||||||
</button>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
|
||||||
|
|
||||||
<fieldset class="fieldset">
|
|
||||||
<legend class="fieldset-legend">Банк</legend>
|
|
||||||
<input v-model="counterpartyForm.bankName" type="text" class="input input-bordered w-full" >
|
|
||||||
</fieldset>
|
|
||||||
|
|
||||||
<div class="grid gap-3 sm:grid-cols-2">
|
|
||||||
<fieldset class="fieldset">
|
<fieldset class="fieldset">
|
||||||
<legend class="fieldset-legend">БИК</legend>
|
<legend class="fieldset-legend">Юридический адрес</legend>
|
||||||
<input v-model="counterpartyForm.bik" type="text" class="input input-bordered w-full" >
|
<textarea v-model="counterpartyForm.legalAddress" class="textarea textarea-bordered min-h-24 w-full" />
|
||||||
|
</fieldset>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<div class="divider my-0" />
|
||||||
|
|
||||||
|
<section>
|
||||||
|
<h3 class="mb-3 text-base font-bold">2. Банк (Dadata)</h3>
|
||||||
|
|
||||||
|
<div ref="bankDropdownRef" class="relative">
|
||||||
|
<fieldset class="fieldset">
|
||||||
|
<legend class="fieldset-legend">Поиск банка</legend>
|
||||||
|
<input
|
||||||
|
v-model="bankSearch"
|
||||||
|
type="text"
|
||||||
|
class="input input-bordered w-full"
|
||||||
|
placeholder="Введите название банка"
|
||||||
|
@input="scheduleBankSuggest"
|
||||||
|
@focus="bankOpen = bankSuggestions.length > 0"
|
||||||
|
>
|
||||||
|
</fieldset>
|
||||||
|
|
||||||
|
<span v-if="bankLoading" class="loading loading-spinner loading-sm absolute right-3 top-1/2 -translate-y-1/2" />
|
||||||
|
|
||||||
|
<div
|
||||||
|
v-if="bankOpen && bankSuggestions.length > 0"
|
||||||
|
class="absolute z-30 mt-2 max-h-72 w-full overflow-auto rounded-box border border-base-300 bg-base-100 p-2 shadow-xl"
|
||||||
|
>
|
||||||
|
<button
|
||||||
|
v-for="item in bankSuggestions"
|
||||||
|
:key="`${item.value}-${item.data?.bic || ''}`"
|
||||||
|
type="button"
|
||||||
|
class="btn btn-ghost mb-1 h-auto min-h-0 w-full justify-start whitespace-normal px-3 py-2 text-left"
|
||||||
|
@click="applyBankSuggestion(item)"
|
||||||
|
>
|
||||||
|
<span>
|
||||||
|
<span class="block text-sm font-semibold">{{ item.value }}</span>
|
||||||
|
<span class="block text-xs opacity-70">БИК: {{ item.data?.bic || '—' }}</span>
|
||||||
|
</span>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<fieldset class="fieldset">
|
||||||
|
<legend class="fieldset-legend">Банк</legend>
|
||||||
|
<input v-model="counterpartyForm.bankName" type="text" class="input input-bordered w-full" >
|
||||||
|
</fieldset>
|
||||||
|
|
||||||
|
<div class="grid gap-3 sm:grid-cols-2">
|
||||||
|
<fieldset class="fieldset">
|
||||||
|
<legend class="fieldset-legend">БИК</legend>
|
||||||
|
<input v-model="counterpartyForm.bik" type="text" class="input input-bordered w-full" >
|
||||||
|
</fieldset>
|
||||||
|
|
||||||
|
<fieldset class="fieldset">
|
||||||
|
<legend class="fieldset-legend">Корр. счет</legend>
|
||||||
|
<input v-model="counterpartyForm.correspondentAccount" type="text" class="input input-bordered w-full" >
|
||||||
|
</fieldset>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<fieldset class="fieldset">
|
||||||
|
<legend class="fieldset-legend">Расчетный счет</legend>
|
||||||
|
<input v-model="counterpartyForm.checkingAccount" type="text" class="input input-bordered w-full" >
|
||||||
|
</fieldset>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<div class="divider my-0" />
|
||||||
|
|
||||||
|
<section>
|
||||||
|
<h3 class="mb-3 text-base font-bold">3. Подписант и основание</h3>
|
||||||
|
|
||||||
|
<fieldset class="fieldset">
|
||||||
|
<legend class="fieldset-legend">ФИО подписанта</legend>
|
||||||
|
<input v-model="counterpartyForm.signerFullName" type="text" class="input input-bordered w-full" placeholder="Иванов Иван Иванович" >
|
||||||
</fieldset>
|
</fieldset>
|
||||||
|
|
||||||
<fieldset class="fieldset">
|
<fieldset class="fieldset">
|
||||||
<legend class="fieldset-legend">Корр. счет</legend>
|
<legend class="fieldset-legend">Должность</legend>
|
||||||
<input v-model="counterpartyForm.correspondentAccount" type="text" class="input input-bordered w-full" >
|
<input v-model="counterpartyForm.signerPosition" type="text" class="input input-bordered w-full" placeholder="Генеральный директор" >
|
||||||
</fieldset>
|
</fieldset>
|
||||||
</div>
|
|
||||||
|
|
||||||
<fieldset class="fieldset">
|
<fieldset class="fieldset">
|
||||||
<legend class="fieldset-legend">Расчетный счет</legend>
|
<legend class="fieldset-legend">Основание полномочий</legend>
|
||||||
<input v-model="counterpartyForm.checkingAccount" type="text" class="input input-bordered w-full" >
|
<textarea
|
||||||
</fieldset>
|
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">
|
||||||
|
{{ saveCounterpartyMutation.loading.value ? 'Сохраняем…' : 'Сохранить' }}
|
||||||
|
</button>
|
||||||
|
|
||||||
|
<p v-if="profileUpdatedAt" class="mt-2 text-xs opacity-70">Обновлено: {{ new Date(profileUpdatedAt).toLocaleString() }}</p>
|
||||||
|
</section>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="rounded-2xl border border-base-300 bg-base-100 p-4">
|
<div v-if="profileFeedback" class="alert mt-4" :class="profileFeedbackTone === 'success' ? 'alert-success' : 'alert-error'">
|
||||||
<h3 class="mb-3 text-base font-bold">3. Подписант и основание</h3>
|
{{ profileFeedback }}
|
||||||
|
|
||||||
<fieldset class="fieldset">
|
|
||||||
<legend class="fieldset-legend">ФИО подписанта</legend>
|
|
||||||
<input v-model="counterpartyForm.signerFullName" type="text" class="input input-bordered w-full" placeholder="Иванов Иван Иванович" >
|
|
||||||
</fieldset>
|
|
||||||
|
|
||||||
<fieldset class="fieldset">
|
|
||||||
<legend class="fieldset-legend">Должность</legend>
|
|
||||||
<input v-model="counterpartyForm.signerPosition" type="text" class="input input-bordered w-full" placeholder="Генеральный директор" >
|
|
||||||
</fieldset>
|
|
||||||
|
|
||||||
<fieldset class="fieldset">
|
|
||||||
<legend class="fieldset-legend">Основание полномочий</legend>
|
|
||||||
<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">
|
|
||||||
{{ saveCounterpartyMutation.loading.value ? 'Сохраняем…' : 'Сохранить карточку' }}
|
|
||||||
</button>
|
|
||||||
|
|
||||||
<p v-if="profileUpdatedAt" class="mt-2 text-xs opacity-70">Обновлено: {{ new Date(profileUpdatedAt).toLocaleString() }}</p>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div v-if="profileFeedback" class="alert mt-4" :class="profileFeedbackTone === 'success' ? 'alert-success' : 'alert-error'">
|
|
||||||
{{ profileFeedback }}
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="alert mt-4" :class="profileIsComplete ? 'alert-success' : 'alert-warning'">
|
|
||||||
{{
|
|
||||||
profileIsComplete
|
|
||||||
? 'Карточка контрагента заполнена. Оформление заявки в корзине доступно.'
|
|
||||||
: 'Пока карточка не заполнена полностью, оформление заявки в корзине будет заблокировано.'
|
|
||||||
}}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<aside class="surface-card rounded-3xl p-5">
|
<aside class="surface-card rounded-3xl p-5">
|
||||||
<h2 class="text-xl font-bold text-[#123824]">Уведомления</h2>
|
<h2 class="text-xl font-bold text-[#123824]">Уведомления</h2>
|
||||||
<div class="mt-4 space-y-3">
|
<div class="mt-4 space-y-3">
|
||||||
|
|||||||
Reference in New Issue
Block a user