web-frontend/app/pages/orders.vue

<script setup lang="ts">
import { useMutation, useQuery } from '@vue/apollo-composable';
import OrderStatusBadge from '~/components/orders/OrderStatusBadge.vue';
import {
  ClientReviewOrderDocument,
  MyOrdersDocument,
  type MyOrdersQuery,
} from '~/composables/graphql/generated';

type OrderItem = MyOrdersQuery['myOrders'][number];

const allOrders = useQuery(MyOrdersDocument);
const reviewOrder = useMutation(ClientReviewOrderDocument);
const actionError = ref('');
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']);

reviewOrder.onError((error) => {
  actionError.value = error.message;
});

async function approve(orderId: string) {
  actionError.value = '';
  await reviewOrder.mutate({ orderId, decision: 'APPROVE' });
  await allOrders.refetch();
}

async function reject(orderId: string) {
  actionError.value = '';
  await reviewOrder.mutate({ orderId, decision: 'REJECT' });
  await allOrders.refetch();
}

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">
    <h1 class="text-3xl font-extrabold text-[#0f2f20]">Заказы</h1>

    <div v-if="actionError" class="alert alert-error">{{ actionError }}</div>

    <div class="surface-card rounded-3xl p-4 md:p-5">
      <div class="grid gap-3 md:grid-cols-[1fr_auto]">
        <label class="form-control">
          <span class="label-text">Поиск</span>
          <input
            v-model="search"
            type="text"
            class="input input-bordered w-full"
            placeholder="Номер заказа или товар"
          >
        </label>

        <label class="form-control md:min-w-60">
          <span class="label-text">Фильтр</span>
          <select v-model="statusFilter" class="select select-bordered w-full">
            <option value="ALL">Все заказы</option>
            <option value="WAITING">Ожидают подтверждения</option>
            <option value="ACTIVE">Активные</option>
            <option value="CLOSED">Закрытые</option>
          </select>
        </label>
      </div>
    </div>

    <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">
      <article
        v-for="order in filteredOrders"
        :key="order.id"
        class="surface-card rounded-3xl p-4 md:p-5"
      >
        <div class="flex flex-wrap items-start justify-between gap-3">
          <div>
            <h2 class="text-lg font-bold text-[#123824]">{{ order.code }}</h2>
            <p class="text-xs text-[#355947]">{{ new Date(order.createdAt).toLocaleString() }}</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-xl border border-[#d6ebde] bg-white/75 px-3 py-2"
          >
            {{ item.productName }} × {{ item.quantity }}
          </li>
        </ul>

        <div class="mt-4 grid gap-3 text-sm text-[#214735] md:grid-cols-2">
          <div class="rounded-xl border border-[#d6ebde] bg-white/75 px-3 py-2">
            Условия доставки: {{ order.deliveryTerms || 'ожидает обработки менеджером' }}
          </div>
          <div class="rounded-xl border border-[#d6ebde] bg-white/75 px-3 py-2">
            Итого: {{ order.totalPrice ?? 'после обработки менеджером' }}
          </div>
        </div>

        <div class="mt-3 rounded-xl border border-[#d6ebde] bg-white/75 px-3 py-2 text-sm text-[#214735]">
          Адрес доставки: {{ order.deliveryAddress || 'адрес не был выбран' }}
        </div>

        <div v-if="order.status === 'WAITING_DOUBLE_CONFIRM'" class="mt-4 flex flex-wrap gap-2">
          <button class="btn btn-sm border-0 bg-[#139957] text-white hover:bg-[#0d854a]" @click="approve(order.id)">
            Подтвердить
          </button>
          <button class="btn btn-sm border-0 bg-[#d32422] text-white hover:bg-[#b31f1d]" @click="reject(order.id)">
            Отклонить
          </button>
        </div>
      </article>
    </div>
  </section>
</template>