Simplify manager tab hierarchy
This commit is contained in:
@@ -22,9 +22,7 @@ type RequestItem = RegistrationRequestsQuery['registrationRequests'][number];
|
||||
const route = useRoute();
|
||||
const entityId = computed(() => String(route.params.id || ''));
|
||||
const isRequestMode = computed(() => route.query.tab === 'requests');
|
||||
const backTarget = computed(() => (
|
||||
isRequestMode.value ? '/clients?tab=requests' : '/clients'
|
||||
));
|
||||
const backTarget = computed(() => '/clients');
|
||||
|
||||
const usersQuery = useQuery(ManagerUsersDetailDocument);
|
||||
const requestsQuery = useQuery(RegistrationRequestsDocument, {
|
||||
|
||||
@@ -1,77 +1,28 @@
|
||||
<script setup lang="ts">
|
||||
import { useQuery } from '@vue/apollo-composable';
|
||||
import {
|
||||
ManagerUsersDocument,
|
||||
RegistrationRequestsDocument,
|
||||
type RegistrationRequestsQuery,
|
||||
} from '~/composables/graphql/generated';
|
||||
import { ManagerUsersDocument } from '~/composables/graphql/generated';
|
||||
import { messengerConnectionAvatarSrc } from '~/composables/useMessengerConnectionPresentation';
|
||||
|
||||
definePageMeta({
|
||||
middleware: ['manager-only'],
|
||||
});
|
||||
|
||||
type RequestItem = RegistrationRequestsQuery['registrationRequests'][number];
|
||||
|
||||
const route = useRoute();
|
||||
const search = ref('');
|
||||
|
||||
const usersQuery = useQuery(ManagerUsersDocument);
|
||||
const requestsQuery = useQuery(RegistrationRequestsDocument, {
|
||||
status: null,
|
||||
});
|
||||
|
||||
const activeTab = computed<'users' | 'requests'>(() => (
|
||||
route.query.tab === 'requests' ? 'requests' : 'users'
|
||||
));
|
||||
|
||||
const filteredUsers = computed(() => {
|
||||
const items = usersQuery.result.value?.managerUsers ?? [];
|
||||
const query = search.value.trim().toLowerCase();
|
||||
|
||||
return items.filter((item) => {
|
||||
if (!query) {
|
||||
return true;
|
||||
}
|
||||
|
||||
return item.fullName.toLowerCase().includes(query);
|
||||
});
|
||||
});
|
||||
|
||||
function requestStatusLabel(status: RequestItem['status']) {
|
||||
if (status === 'APPROVED') {
|
||||
return 'Одобрена';
|
||||
}
|
||||
if (status === 'REJECTED') {
|
||||
return 'Отклонена';
|
||||
}
|
||||
return 'На проверке';
|
||||
}
|
||||
|
||||
function requestStatusClass(status: RequestItem['status']) {
|
||||
if (status === 'APPROVED') {
|
||||
return 'badge badge-success border-0';
|
||||
}
|
||||
if (status === 'REJECTED') {
|
||||
return 'badge badge-error border-0';
|
||||
}
|
||||
return 'badge badge-warning border-0';
|
||||
}
|
||||
|
||||
const filteredRequests = computed(() => {
|
||||
const items = requestsQuery.result.value?.registrationRequests ?? [];
|
||||
const query = search.value.trim().toLowerCase();
|
||||
|
||||
return items.filter((item) => {
|
||||
if (!query) {
|
||||
return true;
|
||||
}
|
||||
|
||||
return [
|
||||
item.companyName,
|
||||
item.contactName,
|
||||
item.fullName,
|
||||
item.email,
|
||||
item.inn || '',
|
||||
item.companyName || '',
|
||||
]
|
||||
.join(' ')
|
||||
.toLowerCase()
|
||||
@@ -87,20 +38,7 @@ const {
|
||||
visibleItems: visibleUsers,
|
||||
} = useIncrementalList(filteredUsers, {
|
||||
pageSize: 24,
|
||||
enabled: computed(() => activeTab.value === 'users'),
|
||||
resetKeys: [search, activeTab],
|
||||
});
|
||||
|
||||
const {
|
||||
canLoadMore: canLoadMoreRequests,
|
||||
loadMore: loadMoreRequests,
|
||||
loadMoreSentinel: loadMoreRequestsSentinel,
|
||||
remainingCount: remainingRequestsCount,
|
||||
visibleItems: visibleRequests,
|
||||
} = useIncrementalList(filteredRequests, {
|
||||
pageSize: 24,
|
||||
enabled: computed(() => activeTab.value === 'requests'),
|
||||
resetKeys: [search, activeTab],
|
||||
resetKeys: [search],
|
||||
});
|
||||
|
||||
function userInitials(fullName: string) {
|
||||
@@ -123,7 +61,7 @@ function userInitials(fullName: string) {
|
||||
<UiSectionSearchHero
|
||||
v-model="search"
|
||||
title="Клиенты"
|
||||
:search-placeholder="activeTab === 'users' ? 'Имя пользователя' : 'Компания, контакт, email или ИНН'"
|
||||
search-placeholder="Имя, компания или email"
|
||||
>
|
||||
<template #controls>
|
||||
<NuxtLink to="/clients/invite" class="btn btn-primary border-0">
|
||||
@@ -132,95 +70,33 @@ function userInitials(fullName: string) {
|
||||
</template>
|
||||
</UiSectionSearchHero>
|
||||
|
||||
<div class="flex flex-wrap gap-2">
|
||||
<NuxtLink
|
||||
to="/clients?tab=users"
|
||||
class="inline-flex items-center rounded-full px-4 py-2 text-sm font-semibold transition"
|
||||
:class="activeTab === 'users' ? 'bg-[#123824] text-white' : 'bg-white text-[#355947] hover:bg-[#f4faf6]'"
|
||||
>
|
||||
Клиенты
|
||||
</NuxtLink>
|
||||
<NuxtLink
|
||||
to="/clients?tab=requests"
|
||||
class="inline-flex items-center rounded-full px-4 py-2 text-sm font-semibold transition"
|
||||
:class="activeTab === 'requests' ? 'bg-[#123824] text-white' : 'bg-white text-[#355947] hover:bg-[#f4faf6]'"
|
||||
>
|
||||
Заявки
|
||||
</NuxtLink>
|
||||
<div v-if="usersQuery.loading.value" class="manager-empty-state">
|
||||
Загружаем пользователей...
|
||||
</div>
|
||||
<div v-else-if="filteredUsers.length === 0" class="manager-empty-state">
|
||||
Пользователи по текущему запросу не найдены.
|
||||
</div>
|
||||
<div v-else class="space-y-4">
|
||||
<div class="grid gap-4 sm:grid-cols-2 xl:grid-cols-4 2xl:grid-cols-6">
|
||||
<UsersGridCard
|
||||
v-for="user in visibleUsers"
|
||||
:key="user.id"
|
||||
:to="`/clients/${user.id}`"
|
||||
:full-name="user.fullName"
|
||||
:avatar-src="messengerConnectionAvatarSrc(user.telegramConnection)"
|
||||
:initials="userInitials(user.fullName)"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<template v-if="activeTab === 'users'">
|
||||
<div v-if="usersQuery.loading.value" class="manager-empty-state">
|
||||
Загружаем пользователей...
|
||||
<div
|
||||
v-if="canLoadMoreUsers"
|
||||
ref="loadMoreUsersSentinel"
|
||||
class="flex justify-center"
|
||||
>
|
||||
<button class="btn btn-outline border-[#d7e9de] bg-white" @click="loadMoreUsers">
|
||||
Показать ещё {{ Math.min(remainingUsersCount, 24) }}
|
||||
</button>
|
||||
</div>
|
||||
<div v-else-if="filteredUsers.length === 0" class="manager-empty-state">
|
||||
Пользователи по текущему запросу не найдены.
|
||||
</div>
|
||||
<div v-else class="space-y-4">
|
||||
<div class="grid gap-4 sm:grid-cols-2 xl:grid-cols-4 2xl:grid-cols-6">
|
||||
<UsersGridCard
|
||||
v-for="user in visibleUsers"
|
||||
:key="user.id"
|
||||
:to="`/clients/${user.id}`"
|
||||
:full-name="user.fullName"
|
||||
:avatar-src="messengerConnectionAvatarSrc(user.telegramConnection)"
|
||||
:initials="userInitials(user.fullName)"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div
|
||||
v-if="canLoadMoreUsers"
|
||||
ref="loadMoreUsersSentinel"
|
||||
class="flex justify-center"
|
||||
>
|
||||
<button class="btn btn-outline border-[#d7e9de] bg-white" @click="loadMoreUsers">
|
||||
Показать ещё {{ Math.min(remainingUsersCount, 24) }}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<template v-else>
|
||||
<div v-if="requestsQuery.loading.value" class="manager-empty-state">
|
||||
Загружаем заявки...
|
||||
</div>
|
||||
<div v-else-if="filteredRequests.length === 0" class="manager-empty-state">
|
||||
Заявки по текущему запросу не найдены.
|
||||
</div>
|
||||
<div v-else class="space-y-4">
|
||||
<div class="grid gap-4 lg:grid-cols-2 xl:grid-cols-3">
|
||||
<NuxtLink
|
||||
v-for="request in visibleRequests"
|
||||
:key="request.id"
|
||||
:to="`/clients/${request.id}?tab=requests`"
|
||||
class="surface-card surface-card-interactive rounded-3xl p-5"
|
||||
>
|
||||
<div class="flex items-start justify-between gap-3">
|
||||
<div class="space-y-1">
|
||||
<h2 class="text-lg font-bold text-[#123824]">{{ request.companyName }}</h2>
|
||||
<p class="text-sm text-[#466653]">{{ request.contactName }}</p>
|
||||
</div>
|
||||
<span :class="requestStatusClass(request.status)">{{ requestStatusLabel(request.status) }}</span>
|
||||
</div>
|
||||
|
||||
<div class="mt-4 space-y-2 text-sm text-[#355947]">
|
||||
<p>{{ request.email }}</p>
|
||||
<p v-if="request.inn">ИНН: {{ request.inn }}</p>
|
||||
<p>{{ new Date(request.createdAt).toLocaleDateString() }}</p>
|
||||
</div>
|
||||
</NuxtLink>
|
||||
</div>
|
||||
|
||||
<div
|
||||
v-if="canLoadMoreRequests"
|
||||
ref="loadMoreRequestsSentinel"
|
||||
class="flex justify-center"
|
||||
>
|
||||
<button class="btn btn-outline border-[#d7e9de] bg-white" @click="loadMoreRequests">
|
||||
Показать ещё {{ Math.min(remainingRequestsCount, 24) }}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
</div>
|
||||
</section>
|
||||
</template>
|
||||
|
||||
Reference in New Issue
Block a user