312 lines
9.3 KiB
Vue
312 lines
9.3 KiB
Vue
<script setup lang="ts">
|
||
import { useQuery } from '@vue/apollo-composable';
|
||
import FullCalendar from '@fullcalendar/vue3';
|
||
import dayGridPlugin from '@fullcalendar/daygrid';
|
||
import ruLocale from '@fullcalendar/core/locales/ru';
|
||
import {
|
||
ManagerOrdersDocument,
|
||
ManagerUsersDocument,
|
||
type ManagerOrdersQuery,
|
||
type ManagerUsersQuery,
|
||
} from '~/composables/graphql/generated';
|
||
import { messengerConnectionAvatarSrc } from '~/composables/useMessengerConnectionPresentation';
|
||
|
||
definePageMeta({
|
||
middleware: ['manager-only'],
|
||
});
|
||
|
||
type ManagerOrderItem = ManagerOrdersQuery['managerOrders'][number];
|
||
type ManagerUserItem = ManagerUsersQuery['managerUsers'][number];
|
||
type StatusFilter = 'ALL' | 'NEW' | 'PRICED' | 'IN_PROGRESS' | 'CLOSED';
|
||
|
||
const route = useRoute();
|
||
const router = useRouter();
|
||
|
||
const ordersQuery = useQuery(ManagerOrdersDocument, { status: null });
|
||
const usersQuery = useQuery(ManagerUsersDocument);
|
||
const search = ref('');
|
||
const statusFilter = ref<StatusFilter>('ALL');
|
||
|
||
const viewMode = computed<'cards' | 'calendar' | 'kanban'>(() => (
|
||
route.query.view === 'calendar'
|
||
? 'calendar'
|
||
: route.query.view === 'kanban'
|
||
? 'kanban'
|
||
: 'cards'
|
||
));
|
||
|
||
function setViewMode(view: 'cards' | 'calendar' | 'kanban') {
|
||
void router.replace({
|
||
query: {
|
||
...route.query,
|
||
view,
|
||
},
|
||
});
|
||
}
|
||
|
||
const usersById = computed<Record<string, ManagerUserItem>>(() => Object.fromEntries(
|
||
(usersQuery.result.value?.managerUsers ?? []).map((user) => [user.id, user]),
|
||
));
|
||
|
||
function customerCardMeta(customerId: string) {
|
||
const customer = usersById.value[customerId];
|
||
if (!customer) {
|
||
return {
|
||
name: customerId,
|
||
avatarSrc: '',
|
||
initials: customerId.slice(0, 2).toUpperCase(),
|
||
};
|
||
}
|
||
|
||
return {
|
||
name: customer.fullName,
|
||
avatarSrc: messengerConnectionAvatarSrc(customer.telegramConnection),
|
||
initials: customer.fullName
|
||
.split(/\s+/)
|
||
.filter(Boolean)
|
||
.slice(0, 2)
|
||
.map((part) => part.charAt(0).toUpperCase())
|
||
.join(''),
|
||
};
|
||
}
|
||
|
||
function getOrderGroup(order: ManagerOrderItem) {
|
||
if (order.status === 'NEW' || order.status === 'MANAGER_PROCESSING') {
|
||
return 'NEW';
|
||
}
|
||
if (order.status === 'WAITING_DOUBLE_CONFIRM' || order.status === 'CONFIRMED') {
|
||
return 'PRICED';
|
||
}
|
||
if (order.status === 'IN_PROGRESS') {
|
||
return 'IN_PROGRESS';
|
||
}
|
||
return 'CLOSED';
|
||
}
|
||
|
||
function matchesFilter(order: ManagerOrderItem) {
|
||
if (statusFilter.value === 'ALL') {
|
||
return true;
|
||
}
|
||
return getOrderGroup(order) === statusFilter.value;
|
||
}
|
||
|
||
const searchedOrders = computed<ManagerOrderItem[]>(() => {
|
||
const orders = ordersQuery.result.value?.managerOrders ?? [];
|
||
const query = search.value.trim().toLowerCase();
|
||
|
||
return orders.filter((order) => {
|
||
const text = [
|
||
order.code,
|
||
order.customerId,
|
||
customerCardMeta(order.customerId).name,
|
||
order.deliveryAddress || '',
|
||
...order.items.map((item) => item.productName),
|
||
]
|
||
.join(' ')
|
||
.toLowerCase();
|
||
|
||
return !query || text.includes(query);
|
||
});
|
||
});
|
||
|
||
const filteredOrders = computed<ManagerOrderItem[]>(() => searchedOrders.value.filter((order) => matchesFilter(order)));
|
||
|
||
const statusTabs = computed<Array<{ id: StatusFilter; label: string; count: number }>>(() => [
|
||
{
|
||
id: 'ALL',
|
||
label: 'Все',
|
||
count: searchedOrders.value.length,
|
||
},
|
||
{
|
||
id: 'NEW',
|
||
label: 'Заявки',
|
||
count: searchedOrders.value.filter((order) => getOrderGroup(order) === 'NEW').length,
|
||
},
|
||
{
|
||
id: 'PRICED',
|
||
label: 'Предложения',
|
||
count: searchedOrders.value.filter((order) => getOrderGroup(order) === 'PRICED').length,
|
||
},
|
||
{
|
||
id: 'IN_PROGRESS',
|
||
label: 'В работе',
|
||
count: searchedOrders.value.filter((order) => getOrderGroup(order) === 'IN_PROGRESS').length,
|
||
},
|
||
{
|
||
id: 'CLOSED',
|
||
label: 'Закрытые',
|
||
count: searchedOrders.value.filter((order) => getOrderGroup(order) === 'CLOSED').length,
|
||
},
|
||
]);
|
||
|
||
const kanbanColumns = computed(() => {
|
||
const columns = [
|
||
{
|
||
id: 'NEW' as const,
|
||
title: 'Заявки',
|
||
tone: 'from-[#f5fff8] to-[#eefaf2]',
|
||
},
|
||
{
|
||
id: 'PRICED' as const,
|
||
title: 'Предложения',
|
||
tone: 'from-[#fff9ef] to-[#fff1d9]',
|
||
},
|
||
{
|
||
id: 'IN_PROGRESS' as const,
|
||
title: 'В работе',
|
||
tone: 'from-[#eef7ff] to-[#e2f0ff]',
|
||
},
|
||
{
|
||
id: 'CLOSED' as const,
|
||
title: 'Закрытые',
|
||
tone: 'from-[#f6f7f8] to-[#eceff2]',
|
||
},
|
||
];
|
||
|
||
return columns
|
||
.filter((column) => statusFilter.value === 'ALL' || statusFilter.value === column.id)
|
||
.map((column) => ({
|
||
...column,
|
||
orders: searchedOrders.value.filter((order) => getOrderGroup(order) === column.id),
|
||
}));
|
||
});
|
||
|
||
const calendarOptions = computed(() => ({
|
||
plugins: [dayGridPlugin],
|
||
locale: ruLocale,
|
||
initialView: 'dayGridMonth',
|
||
height: 'auto',
|
||
fixedWeekCount: false,
|
||
firstDay: 1,
|
||
headerToolbar: {
|
||
left: 'prev,next today',
|
||
center: 'title',
|
||
right: '',
|
||
},
|
||
buttonText: {
|
||
today: 'Сегодня',
|
||
},
|
||
events: filteredOrders.value.map((order: ManagerOrderItem) => ({
|
||
id: order.id,
|
||
title: `${order.code} • ${order.customerId}`,
|
||
start: new Date(order.createdAt).toISOString(),
|
||
allDay: true,
|
||
})),
|
||
eventClick: ({ event }: { event: { id: string } }) => {
|
||
void router.push(`/client-orders/${event.id}`);
|
||
},
|
||
}));
|
||
</script>
|
||
|
||
<template>
|
||
<section class="space-y-6">
|
||
<UiSectionSearchHero
|
||
v-model="search"
|
||
title="Заказы"
|
||
search-placeholder="Номер заказа, клиент, адрес или товар"
|
||
>
|
||
<template #controls>
|
||
<div class="flex w-full flex-col gap-3 md:w-auto md:flex-row">
|
||
<div class="tabs tabs-boxed w-fit bg-white">
|
||
<button class="tab" :class="{ 'tab-active': viewMode === 'cards' }" @click="setViewMode('cards')">
|
||
Карточки
|
||
</button>
|
||
<button class="tab" :class="{ 'tab-active': viewMode === 'calendar' }" @click="setViewMode('calendar')">
|
||
Календарь
|
||
</button>
|
||
<button class="tab" :class="{ 'tab-active': viewMode === 'kanban' }" @click="setViewMode('kanban')">
|
||
Kanban
|
||
</button>
|
||
</div>
|
||
</div>
|
||
</template>
|
||
|
||
<div class="flex flex-wrap gap-2">
|
||
<button
|
||
v-for="tab in statusTabs"
|
||
:key="tab.id"
|
||
class="inline-flex items-center gap-2 rounded-full border px-4 py-2 text-sm font-semibold transition"
|
||
:class="statusFilter === tab.id
|
||
? 'border-[#0d854a] bg-[#0d854a] text-white shadow-[0_18px_38px_rgba(13,133,74,0.18)]'
|
||
: 'border-[#d4e8da] bg-white text-[#355947] hover:border-[#b6d7c1]'"
|
||
@click="statusFilter = tab.id"
|
||
>
|
||
<span>{{ tab.label }}</span>
|
||
<span
|
||
class="rounded-full px-2 py-0.5 text-xs"
|
||
:class="statusFilter === tab.id ? 'bg-white/20 text-white' : 'bg-[#eef7f1] text-[#0d854a]'"
|
||
>
|
||
{{ tab.count }}
|
||
</span>
|
||
</button>
|
||
</div>
|
||
</UiSectionSearchHero>
|
||
|
||
<div v-if="ordersQuery.loading.value" class="manager-empty-state">
|
||
Загружаем заказы...
|
||
</div>
|
||
<div v-else-if="filteredOrders.length === 0" class="manager-empty-state">
|
||
Заказы по текущим условиям не найдены.
|
||
</div>
|
||
|
||
<div v-else-if="viewMode === 'calendar'" class="surface-card rounded-3xl p-4 md:p-5">
|
||
<FullCalendar :options="calendarOptions" />
|
||
</div>
|
||
|
||
<div v-else-if="viewMode === 'kanban'" class="grid gap-4 xl:grid-cols-4">
|
||
<div
|
||
v-for="column in kanbanColumns"
|
||
:key="column.id"
|
||
class="surface-card rounded-[32px] p-4"
|
||
>
|
||
<div
|
||
class="rounded-[24px] border border-white/60 bg-gradient-to-br p-4"
|
||
:class="column.tone"
|
||
>
|
||
<div class="flex items-center justify-between gap-3">
|
||
<div>
|
||
<h2 class="text-lg font-bold text-[#123824]">{{ column.title }}</h2>
|
||
<p class="text-sm text-[#5c7b69]">Заказов: {{ column.orders.length }}</p>
|
||
</div>
|
||
<span class="rounded-full bg-white px-3 py-1 text-sm font-semibold text-[#123824]">
|
||
{{ column.orders.length }}
|
||
</span>
|
||
</div>
|
||
</div>
|
||
|
||
<div v-if="column.orders.length === 0" class="manager-empty-state mt-4 min-h-[180px]">
|
||
В этой колонке пока пусто.
|
||
</div>
|
||
|
||
<div v-else class="mt-4 space-y-3">
|
||
<OrdersOrderSummaryCard
|
||
v-for="order in column.orders"
|
||
:key="order.id"
|
||
:to="`/client-orders/${order.id}`"
|
||
:code="order.code"
|
||
:status="order.status"
|
||
:created-at="order.createdAt"
|
||
:total-price="order.totalPrice"
|
||
:items="order.items"
|
||
:customer="customerCardMeta(order.customerId)"
|
||
/>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div v-else class="space-y-4">
|
||
<OrdersOrderSummaryCard
|
||
v-for="order in filteredOrders"
|
||
:key="order.id"
|
||
:to="`/client-orders/${order.id}`"
|
||
:code="order.code"
|
||
:status="order.status"
|
||
:created-at="order.createdAt"
|
||
:total-price="order.totalPrice"
|
||
:items="order.items"
|
||
:customer="customerCardMeta(order.customerId)"
|
||
/>
|
||
</div>
|
||
</section>
|
||
</template>
|