Fix order detail routing and loading

2026-04-04 13:45:39 +07:00
parent 4fe3f72579
commit 2a5e38f488
6 changed files with 98 additions and 13 deletions
--- a/app/pages/orders/index.vue
+++ b/app/pages/orders/index.vue
@@ -0,0 +1,102 @@
+<script setup lang="ts">
+import { useQuery } from '@vue/apollo-composable';
+import OrderStatusBadge from '~/components/orders/OrderStatusBadge.vue';
+import {
+  MyOrdersDocument,
+  type MyOrdersQuery,
+} from '~/composables/graphql/generated';
+
+type OrderItem = MyOrdersQuery['myOrders'][number];
+
+const allOrders = useQuery(MyOrdersDocument);
+const search = ref('');
+const statusFilter = ref<'ALL' | 'WAITING' | 'ACTIVE' | 'CLOSED'>('ALL');
+
+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']);
+
+function matchesFilter(order: OrderItem) {
+  if (statusFilter.value === 'ALL') {
+    return true;
+  }
+  if (statusFilter.value === 'WAITING') {
+    return order.status === 'WAITING_DOUBLE_CONFIRM';
+  }
+  if (statusFilter.value === 'ACTIVE') {
+    return ACTIVE_STATUSES.has(order.status);
+  }
+  return CLOSED_STATUSES.has(order.status);
+}
+
+const filteredOrders = computed(() => {
+  const orders = allOrders.result.value?.myOrders ?? [];
+  const normalizedSearch = search.value.trim().toLowerCase();
+
+  return orders.filter((order) => {
+    const text = [
+      order.code,
+      ...order.items.map((item) => item.productName),
+    ]
+      .join(' ')
+      .toLowerCase();
+
+    const matchSearch = !normalizedSearch || text.includes(normalizedSearch);
+    return matchSearch && matchesFilter(order);
+  });
+});
+</script>
+
+<template>
+  <section class="space-y-6">
+    <UiSectionSearchHero
+      v-model="search"
+      title="Мои заказы"
+      search-placeholder="Номер заказа или товар"
+    >
+      <template #controls>
+        <select v-model="statusFilter" class="select select-bordered w-full rounded-full bg-white md:w-64">
+          <option value="ALL">Все заказы</option>
+          <option value="WAITING">Ожидают подтверждения</option>
+          <option value="ACTIVE">Активные</option>
+          <option value="CLOSED">Закрытые</option>
+        </select>
+      </template>
+    </UiSectionSearchHero>
+
+    <div v-if="allOrders.loading.value" class="alert surface-card border-0">Загрузка заказов...</div>
+    <div v-else-if="filteredOrders.length === 0" class="alert surface-card border-0">
+      Заказы по текущим условиям не найдены.
+    </div>
+
+    <div v-else class="space-y-3">
+      <NuxtLink
+        v-for="order in filteredOrders"
+        :key="order.id"
+        :to="`/orders/${order.id}`"
+        class="surface-card block rounded-3xl p-4 md: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-[#355947]">Создан: {{ new Date(order.createdAt).toLocaleString() }}</p>
+            <p v-if="order.deliveryAddress" class="text-sm text-[#355947]">Адрес: {{ order.deliveryAddress }}</p>
+            <p v-if="order.deliveryTerms" class="text-sm text-[#355947]">Доставка: {{ order.deliveryTerms }}</p>
+          </div>
+          <div class="flex flex-col items-end gap-2">
+            <OrderStatusBadge :status="order.status" />
+          </div>
+        </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>