316 lines
10 KiB
Vue
316 lines
10 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 OrderStatusBadge from '~/components/orders/OrderStatusBadge.vue';
|
||
import {
|
||
ManagerOrdersDocument,
|
||
type ManagerOrdersQuery,
|
||
} from '~/composables/graphql/generated';
|
||
|
||
definePageMeta({
|
||
middleware: ['manager-only'],
|
||
});
|
||
|
||
type ManagerOrderItem = ManagerOrdersQuery['managerOrders'][number];
|
||
type StatusFilter = 'ALL' | 'NEW' | 'PRICED' | 'IN_PROGRESS' | 'CLOSED';
|
||
|
||
const route = useRoute();
|
||
const router = useRouter();
|
||
|
||
const ordersQuery = useQuery(ManagerOrdersDocument, { status: null });
|
||
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,
|
||
},
|
||
});
|
||
}
|
||
|
||
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,
|
||
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">
|
||
<NuxtLink
|
||
v-for="order in column.orders"
|
||
:key="order.id"
|
||
:to="`/client-orders/${order.id}`"
|
||
class="block rounded-[28px] border border-[#dbece2] bg-white p-4 shadow-[0_18px_40px_rgba(18,56,36,0.08)] transition hover:-translate-y-0.5"
|
||
>
|
||
<div class="flex items-start justify-between gap-3">
|
||
<div class="space-y-1">
|
||
<h3 class="text-base font-bold text-[#123824]">{{ order.code }}</h3>
|
||
<p class="text-sm text-[#5c7b69]">Клиент: {{ order.customerId }}</p>
|
||
</div>
|
||
<OrderStatusBadge :status="order.status" />
|
||
</div>
|
||
|
||
<p class="mt-3 text-sm text-[#5c7b69]">Создан: {{ new Date(order.createdAt).toLocaleString() }}</p>
|
||
<p v-if="order.deliveryAddress" class="mt-1 text-sm text-[#5c7b69]">{{ order.deliveryAddress }}</p>
|
||
|
||
<ul class="mt-3 space-y-2 text-sm text-[#214735]">
|
||
<li
|
||
v-for="item in order.items.slice(0, 3)"
|
||
:key="item.id"
|
||
class="rounded-2xl border border-[#e2efe7] bg-[#f8fcf9] px-3 py-2"
|
||
>
|
||
{{ item.productName }} × {{ item.quantity }}
|
||
</li>
|
||
</ul>
|
||
|
||
<p v-if="order.items.length > 3" class="mt-2 text-xs font-semibold uppercase tracking-[0.18em] text-[#6a8a76]">
|
||
ещё {{ order.items.length - 3 }} поз.
|
||
</p>
|
||
</NuxtLink>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div v-else class="space-y-4">
|
||
<NuxtLink
|
||
v-for="order in filteredOrders"
|
||
:key="order.id"
|
||
:to="`/client-orders/${order.id}`"
|
||
class="surface-card block rounded-3xl p-5"
|
||
>
|
||
<div class="flex flex-wrap items-start justify-between gap-3">
|
||
<div class="space-y-1">
|
||
<h2 class="text-lg font-bold text-[#123824]">{{ order.code }}</h2>
|
||
<p class="text-sm text-[#5c7b69]">Клиент: {{ order.customerId }}</p>
|
||
<p class="text-sm text-[#5c7b69]">Создан: {{ new Date(order.createdAt).toLocaleString() }}</p>
|
||
<p v-if="order.deliveryAddress" class="text-sm text-[#5c7b69]">Адрес: {{ order.deliveryAddress }}</p>
|
||
</div>
|
||
<OrderStatusBadge :status="order.status" />
|
||
</div>
|
||
|
||
<ul class="mt-4 grid gap-2 text-sm text-[#214735]">
|
||
<li
|
||
v-for="item in order.items"
|
||
:key="item.id"
|
||
class="rounded-2xl border border-[#d6ebde] bg-white px-4 py-3"
|
||
>
|
||
{{ item.productName }} × {{ item.quantity }}
|
||
</li>
|
||
</ul>
|
||
</NuxtLink>
|
||
</div>
|
||
</section>
|
||
</template>
|