Remove kanban view from manager orders
This commit is contained in:
@@ -27,15 +27,13 @@ const usersQuery = useQuery(ManagerUsersDocument);
|
|||||||
const search = ref('');
|
const search = ref('');
|
||||||
const statusFilter = ref<StatusFilter>('ALL');
|
const statusFilter = ref<StatusFilter>('ALL');
|
||||||
|
|
||||||
const viewMode = computed<'cards' | 'calendar' | 'kanban'>(() => (
|
const viewMode = computed<'list' | 'calendar'>(() => (
|
||||||
route.query.view === 'calendar'
|
route.query.view === 'calendar'
|
||||||
? 'calendar'
|
? 'calendar'
|
||||||
: route.query.view === 'kanban'
|
: 'list'
|
||||||
? 'kanban'
|
|
||||||
: 'cards'
|
|
||||||
));
|
));
|
||||||
|
|
||||||
function setViewMode(view: 'cards' | 'calendar' | 'kanban') {
|
function setViewMode(view: 'list' | 'calendar') {
|
||||||
void router.replace({
|
void router.replace({
|
||||||
query: {
|
query: {
|
||||||
...route.query,
|
...route.query,
|
||||||
@@ -139,38 +137,6 @@ const statusTabs = computed<Array<{ id: StatusFilter; label: string; count: numb
|
|||||||
},
|
},
|
||||||
]);
|
]);
|
||||||
|
|
||||||
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(() => ({
|
const calendarOptions = computed(() => ({
|
||||||
plugins: [dayGridPlugin],
|
plugins: [dayGridPlugin],
|
||||||
locale: ruLocale,
|
locale: ruLocale,
|
||||||
@@ -210,10 +176,10 @@ const calendarOptions = computed(() => ({
|
|||||||
<div class="inline-flex w-fit rounded-full border border-[#d7e9de] bg-white p-1">
|
<div class="inline-flex w-fit rounded-full border border-[#d7e9de] bg-white p-1">
|
||||||
<button
|
<button
|
||||||
class="rounded-full px-4 py-2 text-sm font-semibold text-[#355947] transition"
|
class="rounded-full px-4 py-2 text-sm font-semibold text-[#355947] transition"
|
||||||
:class="viewMode === 'cards' ? 'bg-[#123824] text-white' : 'hover:bg-[#f4faf6]'"
|
:class="viewMode === 'list' ? 'bg-[#123824] text-white' : 'hover:bg-[#f4faf6]'"
|
||||||
@click="setViewMode('cards')"
|
@click="setViewMode('list')"
|
||||||
>
|
>
|
||||||
Карточки
|
Список
|
||||||
</button>
|
</button>
|
||||||
<button
|
<button
|
||||||
class="rounded-full px-4 py-2 text-sm font-semibold text-[#355947] transition"
|
class="rounded-full px-4 py-2 text-sm font-semibold text-[#355947] transition"
|
||||||
@@ -222,13 +188,6 @@ const calendarOptions = computed(() => ({
|
|||||||
>
|
>
|
||||||
Календарь
|
Календарь
|
||||||
</button>
|
</button>
|
||||||
<button
|
|
||||||
class="rounded-full px-4 py-2 text-sm font-semibold text-[#355947] transition"
|
|
||||||
:class="viewMode === 'kanban' ? 'bg-[#123824] text-white' : 'hover:bg-[#f4faf6]'"
|
|
||||||
@click="setViewMode('kanban')"
|
|
||||||
>
|
|
||||||
Kanban
|
|
||||||
</button>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
@@ -265,46 +224,6 @@ const calendarOptions = computed(() => ({
|
|||||||
<FullCalendar :options="calendarOptions" />
|
<FullCalendar :options="calendarOptions" />
|
||||||
</div>
|
</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"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div v-else class="space-y-4">
|
<div v-else class="space-y-4">
|
||||||
<OrdersOrderSummaryCard
|
<OrdersOrderSummaryCard
|
||||||
v-for="order in filteredOrders"
|
v-for="order in filteredOrders"
|
||||||
|
|||||||
Reference in New Issue
Block a user