Fix order detail routing and loading

app/composables/graphql/generated.ts

@@ -536,6 +536,7 @@ export type Query = {
   myMessengerConnections: Array<MessengerConnection>;
   myNotificationHistory: Array<NotificationHistoryItem>;
   myOrders: Array<Order>;
+  order?: Maybe<Order>;
   referralStats: ReferralStats;
   registrationRequests: Array<RegistrationRequest>;
 };
@@ -565,6 +566,11 @@ export type QueryMyNotificationHistoryArgs = {
 };
 
 
+export type QueryOrderArgs = {
+  id: Scalars['ID']['input'];
+};
+
+
 export type QueryRegistrationRequestsArgs = {
   status?: InputMaybe<RegistrationStatus>;
 };
@@ -954,6 +960,13 @@ export type MyOrdersQueryVariables = Exact<{ [key: string]: never; }>;
 
 export type MyOrdersQuery = { __typename?: 'Query', myOrders: Array<{ __typename?: 'Order', id: string, code: string, kind: OrderKind, status: OrderStatus, deliveryAddress?: string | null, totalPrice?: number | null, deliveryTerms?: string | null, deliveryFee?: number | null, createdAt: any, items: Array<{ __typename?: 'OrderItem', id: string, productName: string, quantity: number, unitPrice?: number | null, lineTotal?: number | null }> }> };
 
+export type OrderDetailQueryVariables = Exact<{
+  id: Scalars['ID']['input'];
+}>;
+
+
+export type OrderDetailQuery = { __typename?: 'Query', order?: { __typename?: 'Order', id: string, code: string, kind: OrderKind, status: OrderStatus, customerId: string, deliveryAddress?: string | null, deliveryTerms?: string | null, deliveryFee?: number | null, totalPrice?: number | null, createdAt: any, items: Array<{ __typename?: 'OrderItem', id: string, productName: string, quantity: number, unitPrice?: number | null, lineTotal?: number | null }> } | null };
+
 export type SubmitCalculationOrderMutationVariables = Exact<{
   input: SubmitCalculationOrderInput;
 }>;
@@ -2301,6 +2314,52 @@ export function useMyOrdersLazyQuery(options: VueApolloComposable.UseQueryOption
   return VueApolloComposable.useLazyQuery<MyOrdersQuery, MyOrdersQueryVariables>(MyOrdersDocument, {}, options);
 }
 export type MyOrdersQueryCompositionFunctionResult = VueApolloComposable.UseQueryReturn<MyOrdersQuery, MyOrdersQueryVariables>;
+export const OrderDetailDocument = gql`
+    query OrderDetail($id: ID!) {
+  order(id: $id) {
+    id
+    code
+    kind
+    status
+    customerId
+    deliveryAddress
+    deliveryTerms
+    deliveryFee
+    totalPrice
+    createdAt
+    items {
+      id
+      productName
+      quantity
+      unitPrice
+      lineTotal
+    }
+  }
+}
+    `;
+
+/**
+ * __useOrderDetailQuery__
+ *
+ * To run a query within a Vue component, call `useOrderDetailQuery` and pass it any options that fit your needs.
+ * When your component renders, `useOrderDetailQuery` returns an object from Apollo Client that contains result, loading and error properties
+ * you can use to render your UI.
+ *
+ * @param variables that will be passed into the query
+ * @param options that will be passed into the query, supported options are listed on: https://v4.apollo.vuejs.org/guide-composable/query.html#options;
+ *
+ * @example
+ * const { result, loading, error } = useOrderDetailQuery({
+ *   id: // value for 'id'
+ * });
+ */
+export function useOrderDetailQuery(variables: OrderDetailQueryVariables | VueCompositionApi.Ref<OrderDetailQueryVariables> | ReactiveFunction<OrderDetailQueryVariables>, options: VueApolloComposable.UseQueryOptions<OrderDetailQuery, OrderDetailQueryVariables> | VueCompositionApi.Ref<VueApolloComposable.UseQueryOptions<OrderDetailQuery, OrderDetailQueryVariables>> | ReactiveFunction<VueApolloComposable.UseQueryOptions<OrderDetailQuery, OrderDetailQueryVariables>> = {}) {
+  return VueApolloComposable.useQuery<OrderDetailQuery, OrderDetailQueryVariables>(OrderDetailDocument, variables, options);
+}
+export function useOrderDetailLazyQuery(variables?: OrderDetailQueryVariables | VueCompositionApi.Ref<OrderDetailQueryVariables> | ReactiveFunction<OrderDetailQueryVariables>, options: VueApolloComposable.UseQueryOptions<OrderDetailQuery, OrderDetailQueryVariables> | VueCompositionApi.Ref<VueApolloComposable.UseQueryOptions<OrderDetailQuery, OrderDetailQueryVariables>> | ReactiveFunction<VueApolloComposable.UseQueryOptions<OrderDetailQuery, OrderDetailQueryVariables>> = {}) {
+  return VueApolloComposable.useLazyQuery<OrderDetailQuery, OrderDetailQueryVariables>(OrderDetailDocument, variables, options);
+}
+export type OrderDetailQueryCompositionFunctionResult = VueApolloComposable.UseQueryReturn<OrderDetailQuery, OrderDetailQueryVariables>;
 export const SubmitCalculationOrderDocument = gql`
     mutation SubmitCalculationOrder($input: SubmitCalculationOrderInput!) {
   submitCalculationOrder(input: $input) {

app/pages/client-orders/[id].vue

@@ -4,10 +4,10 @@ import {
   BlockOrderDocument,
   CompleteOrderDocument,
   ManagerFinalizeOrderDocument,
-  ManagerOrdersDocument,
   ManagerSetOrderOfferDocument,
+  OrderDetailDocument,
   StartOrderWorkDocument,
-  type ManagerOrdersQuery,
+  type OrderDetailQuery,
 } from '~/composables/graphql/generated';
 import {
   formatPrice,
@@ -23,9 +23,11 @@ definePageMeta({
 const route = useRoute();
 const orderId = computed(() => String(route.params.id || ''));
 
-type ManagerOrderItem = ManagerOrdersQuery['managerOrders'][number];
+type ManagerOrderItem = NonNullable<OrderDetailQuery['order']>;
 
-const ordersQuery = useQuery(ManagerOrdersDocument, { status: null });
+const orderQuery = useQuery(OrderDetailDocument, () => ({
+  id: orderId.value,
+}));
 
 const finalizeMutation = useMutation(ManagerFinalizeOrderDocument);
 const blockMutation = useMutation(BlockOrderDocument);
@@ -38,7 +40,7 @@ const deliveryTermsDraft = ref('');
 const deliveryFeeDraft = ref('');
 
 const currentOrder = computed<ManagerOrderItem | null>(() =>
-  (ordersQuery.result.value?.managerOrders ?? []).find((item: ManagerOrderItem) => item.id === orderId.value) ?? null,
+  orderQuery.result.value?.order ?? null,
 );
 
 watch(
@@ -120,7 +122,7 @@ const offerTotal = computed(() => {
 });
 
 async function refetchOrder() {
-  await ordersQuery.refetch({ status: null });
+  await orderQuery.refetch({ id: orderId.value });
 }
 
 async function saveOffer() {
@@ -197,7 +199,7 @@ async function completeOrder() {
   <section class="space-y-6">
     <NuxtLink to="/client-orders" class="text-sm font-semibold text-[#0d854a]">← Назад к заказам клиентов</NuxtLink>
 
-    <div v-if="ordersQuery.loading.value" class="manager-empty-state">
+    <div v-if="orderQuery.loading.value" class="manager-empty-state">
       Загружаем заказ...
     </div>
 

app/pages/orders/[id].vue

@@ -1,8 +1,8 @@
 <script setup lang="ts">
 import { useQuery } from '@vue/apollo-composable';
 import {
-  MyOrdersDocument,
+  OrderDetailDocument,
-  type MyOrdersQuery,
+  type OrderDetailQuery,
 } from '~/composables/graphql/generated';
 import {
   orderLogisticsStateText,
@@ -10,14 +10,16 @@ import {
   orderLineStateText,
 } from '~/composables/useOrderDetailPresentation';
 
-type OrderItem = MyOrdersQuery['myOrders'][number];
+type OrderItem = NonNullable<OrderDetailQuery['order']>;
 
 const route = useRoute();
 const orderId = computed(() => String(route.params.id || ''));
-const ordersQuery = useQuery(MyOrdersDocument);
+const orderQuery = useQuery(OrderDetailDocument, () => ({
+  id: orderId.value,
+}));
 
 const currentOrder = computed<OrderItem | null>(() =>
-  (ordersQuery.result.value?.myOrders ?? []).find((item: OrderItem) => item.id === orderId.value) ?? null,
+  orderQuery.result.value?.order ?? null,
 );
 </script>
 
@@ -25,7 +27,7 @@ const currentOrder = computed<OrderItem | null>(() =>
   <section class="space-y-6">
     <NuxtLink to="/orders" class="text-sm font-semibold text-[#0d854a]">← Назад к моим заказам</NuxtLink>
 
-    <div v-if="ordersQuery.loading.value" class="manager-empty-state">
+    <div v-if="orderQuery.loading.value" class="manager-empty-state">
       Загружаем заказ...
     </div>
 

graphql/operations/orders/order-detail.graphql

@@ -0,0 +1,21 @@
+query OrderDetail($id: ID!) {
+  order(id: $id) {
+    id
+    code
+    kind
+    status
+    customerId
+    deliveryAddress
+    deliveryTerms
+    deliveryFee
+    totalPrice
+    createdAt
+    items {
+      id
+      productName
+      quantity
+      unitPrice
+      lineTotal
+    }
+  }
+}

graphql/schema.graphql

@@ -334,6 +334,7 @@ type Query {
   myNotificationHistory(channel: MessengerType!, limit: Int = 50): [NotificationHistoryItem!]!
   managerNotificationHistory(userId: ID!, channel: MessengerType!, limit: Int = 50): [NotificationHistoryItem!]!
   clientProducts: [Product!]!
+  order(id: ID!): Order
   myOrders: [Order!]!
   myCurrentOrders: [Order!]!
   managerUsers: [ManagerUser!]!