fregat/web-frontend
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Add sync dashboard and date filters

Browse Source
This commit is contained in:
Ruslan Bakiev
2026-04-07 10:25:28 +07:00
parent 5eafdd4e8f
commit 722dbb89cb
7 changed files with 385 additions and 17 deletions
Download Patch File Download Diff File Expand all files Collapse all files

84
app/pages/orders/index.vue
View File

@@ -11,6 +11,8 @@ type OrderItem = MyOrdersQuery['myOrders'][number];
const allOrders = useQuery(MyOrdersDocument);
const search = ref('');
const statusFilter = ref<'ALL' | 'WAITING' | 'ACTIVE' | 'CLOSED'>('ALL');
const dateFrom = ref('');
const dateTo = ref('');
const ACTIVE_STATUSES = new Set(['NEW', 'MANAGER_PROCESSING', 'WAITING_DOUBLE_CONFIRM', 'CONFIRMED', 'IN_PROGRESS']);
const CLOSED_STATUSES = new Set(['COMPLETED', 'CLIENT_REJECTED', 'MANAGER_REJECTED', 'MANAGER_BLOCKED']);
@@ -28,6 +30,29 @@ function matchesFilter(order: OrderItem) {
return CLOSED_STATUSES.has(order.status);
}
function matchesDate(order: OrderItem) {
const orderTimestamp = new Date(order.createdAt).getTime();
if (!Number.isFinite(orderTimestamp)) {
return false;
}
if (dateFrom.value) {
const fromTimestamp = new Date(`${dateFrom.value}T00:00:00`).getTime();
if (Number.isFinite(fromTimestamp) && orderTimestamp < fromTimestamp) {
return false;
}
}
if (dateTo.value) {
const toTimestamp = new Date(`${dateTo.value}T23:59:59.999`).getTime();
if (Number.isFinite(toTimestamp) && orderTimestamp > toTimestamp) {
return false;
}
}
return true;
}
const filteredOrders = computed(() => {
const orders = allOrders.result.value?.myOrders ?? [];
const normalizedSearch = search.value.trim().toLowerCase();
@@ -42,7 +67,7 @@ const filteredOrders = computed(() => {
.toLowerCase();
const matchSearch = !normalizedSearch || text.includes(normalizedSearch);
return matchSearch && matchesFilter(order);
return matchSearch && matchesFilter(order) && matchesDate(order);
});
});
@@ -54,7 +79,7 @@ const {
visibleItems: visibleOrders,
} = useIncrementalList(filteredOrders, {
pageSize: 24,
resetKeys: [search, statusFilter],
resetKeys: [search, statusFilter, dateFrom, dateTo],
});
</script>
@@ -66,15 +91,52 @@ const {
search-placeholder="Номер заказа или товар"
>
<template #controls>
<select
v-model="statusFilter"
class="w-full rounded-full border border-[#d7e9de] bg-white px-4 py-3 text-sm font-semibold text-[#123824] outline-none transition focus:border-[#139957] focus:shadow-[0_0_0_3px_rgba(19,153,87,0.12)] md:w-64"
>
<option value="ALL">Все заказы</option>
<option value="WAITING">Ожидают подтверждения</option>
<option value="ACTIVE">Активные</option>
<option value="CLOSED">Закрытые</option>
</select>
<div class="flex w-full flex-col gap-3 md:w-auto md:flex-row md:flex-wrap md:justify-end">
<label class="flex items-center gap-2 rounded-full border border-[#d7e9de] bg-white px-4 py-3 text-sm font-semibold text-[#123824]">
<svg class="h-4 w-4 text-[#6b8576]" viewBox="0 0 20 20" fill="none">
<path d="M3.33334 5H16.6667" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" />
<path d="M6.66666 10H13.3333" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" />
<path d="M8.33334 15H11.6667" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" />
</svg>
<select
v-model="statusFilter"
class="min-w-0 bg-transparent outline-none"
>
<option value="ALL">Все заказы</option>
<option value="WAITING">Ожидают подтверждения</option>
<option value="ACTIVE">Активные</option>
<option value="CLOSED">Закрытые</option>
</select>
</label>
<label class="flex items-center gap-2 rounded-full border border-[#d7e9de] bg-white px-4 py-3 text-sm font-semibold text-[#123824]">
<svg class="h-4 w-4 text-[#6b8576]" viewBox="0 0 20 20" fill="none">
<rect x="3" y="4.5" width="14" height="12" rx="2.5" stroke="currentColor" stroke-width="1.6" />
<path d="M6 2.5V6" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" />
<path d="M14 2.5V6" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" />
<path d="M3 8.5H17" stroke="currentColor" stroke-width="1.6" />
</svg>
<input
v-model="dateFrom"
type="date"
class="min-w-0 bg-transparent outline-none"
>
</label>
<label class="flex items-center gap-2 rounded-full border border-[#d7e9de] bg-white px-4 py-3 text-sm font-semibold text-[#123824]">
<svg class="h-4 w-4 text-[#6b8576]" viewBox="0 0 20 20" fill="none">
<rect x="3" y="4.5" width="14" height="12" rx="2.5" stroke="currentColor" stroke-width="1.6" />
<path d="M6 2.5V6" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" />
<path d="M14 2.5V6" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" />
<path d="M3 8.5H17" stroke="currentColor" stroke-width="1.6" />
</svg>
<input
v-model="dateTo"
type="date"
class="min-w-0 bg-transparent outline-none"
>
</label>
</div>
</template>
</UiSectionSearchHero>