Move cart flow to catalog add and simplify checkout list

app/components/orders/OrderStatusBadge.vue

@@ -3,14 +3,28 @@ const props = defineProps<{
   status: string;
 }>();
 
+const statusLabel = computed(() => {
+  if (props.status === 'NEW') return 'Уточнение цены';
+  if (props.status === 'MANAGER_PROCESSING') return 'В работе у менеджера';
+  if (props.status === 'WAITING_DOUBLE_CONFIRM') return 'Ожидает подтверждения';
+  if (props.status === 'CONFIRMED') return 'Подтвержден';
+  if (props.status === 'IN_PROGRESS') return 'Выполняется';
+  if (props.status === 'COMPLETED') return 'Завершен';
+  if (props.status === 'CLIENT_REJECTED') return 'Отклонен клиентом';
+  if (props.status === 'MANAGER_REJECTED') return 'Отклонен менеджером';
+  if (props.status === 'MANAGER_BLOCKED') return 'Заблокирован';
+  return props.status;
+});
+
 const className = computed(() => {
   if (props.status === 'COMPLETED') return 'badge badge-success';
   if (props.status === 'CLIENT_REJECTED' || props.status === 'MANAGER_REJECTED') return 'badge badge-error';
   if (props.status === 'MANAGER_BLOCKED') return 'badge badge-warning';
+  if (props.status === 'NEW') return 'badge badge-warning';
   return 'badge badge-info';
 });
 </script>
 
 <template>
-  <span :class="className">{{ status }}</span>
+  <span :class="className">{{ statusLabel }}</span>
 </template>

app/composables/useClientCart.ts

@@ -0,0 +1,109 @@
+export type ClientCartItem = {
+  productId: string;
+  productName: string;
+  sku: string;
+  isCustomizable: boolean;
+  quantity: number;
+  parameters: {
+    width: number;
+    thickness: number;
+    color: string;
+  };
+};
+
+function normalizeQuantity(value: number) {
+  if (!Number.isFinite(value) || value < 1) {
+    return 1;
+  }
+
+  return Math.floor(value);
+}
+
+export function useClientCart() {
+  const items = useState<ClientCartItem[]>('client-cart-items', () => []);
+
+  const totalPositions = computed(() => items.value.length);
+  const totalItems = computed(() => items.value.reduce((sum, item) => sum + item.quantity, 0));
+  const totalVolume = computed(() =>
+    items.value.reduce((sum, item) => sum + item.quantity * item.parameters.width * item.parameters.thickness, 0),
+  );
+
+  function getQuantity(productId: string) {
+    return items.value.find((item) => item.productId === productId)?.quantity ?? 0;
+  }
+
+  function addProduct(product: {
+    id: string;
+    name: string;
+    sku: string;
+    isCustomizable: boolean;
+  }) {
+    const existing = items.value.find((item) => item.productId === product.id);
+    if (existing) {
+      existing.quantity += 1;
+      return;
+    }
+
+    items.value.push({
+      productId: product.id,
+      productName: product.name,
+      sku: product.sku,
+      isCustomizable: product.isCustomizable,
+      quantity: 1,
+      parameters: {
+        width: 100,
+        thickness: 50,
+        color: 'прозрачный',
+      },
+    });
+  }
+
+  function setQuantity(productId: string, quantity: number) {
+    const existing = items.value.find((item) => item.productId === productId);
+    if (!existing) {
+      return;
+    }
+
+    existing.quantity = normalizeQuantity(quantity);
+  }
+
+  function incrementQuantity(productId: string) {
+    const existing = items.value.find((item) => item.productId === productId);
+    if (!existing) {
+      return;
+    }
+
+    existing.quantity += 1;
+  }
+
+  function decrementQuantity(productId: string) {
+    const existing = items.value.find((item) => item.productId === productId);
+    if (!existing) {
+      return;
+    }
+
+    existing.quantity = normalizeQuantity(existing.quantity - 1);
+  }
+
+  function removeProduct(productId: string) {
+    items.value = items.value.filter((item) => item.productId !== productId);
+  }
+
+  function clearCart() {
+    items.value = [];
+  }
+
+  return {
+    items,
+    totalPositions,
+    totalItems,
+    totalVolume,
+    addProduct,
+    setQuantity,
+    incrementQuantity,
+    decrementQuantity,
+    removeProduct,
+    clearCart,
+    getQuantity,
+  };
+}

app/pages/cart.vue

@@ -1,70 +1,41 @@
 <script setup lang="ts">
 import { useMutation } from '@vue/apollo-composable';
 import { SubmitCalculationOrderDocument } from '~/composables/graphql/generated';
+import { useClientCart } from '~/composables/useClientCart';
 import { useCounterpartyProfile } from '~/composables/useCounterpartyProfile';
 
-type CartLine = {
-  id: number;
-  productName: string;
-  quantity: number;
-  width: number;
-  thickness: number;
-  color: string;
-};
-
 const { isComplete: isCounterpartyComplete, loading: counterpartyLoading } = useCounterpartyProfile();
 const submitMutation = useMutation(SubmitCalculationOrderDocument, { throws: 'never' });
-
+const cart = useClientCart();
-const draft = reactive({
-  productName: '',
-  quantity: 1,
-  width: 100,
-  thickness: 50,
-  color: 'прозрачный',
-});
-
-const cartItems = ref<CartLine[]>([]);
-const nextLineId = ref(1);
 const sending = ref(false);
 const success = ref('');
 const errorMessage = ref('');
 
-function lineVolume(item: CartLine) {
+function lineVolume(productId: string) {
-  return Number(item.quantity) * Number(item.width) * Number(item.thickness);
+  const item = cart.items.value.find((entry) => entry.productId === productId);
+  if (!item) {
+    return 0;
   }
 
-const totalItems = computed(() => cartItems.value.reduce((acc, item) => acc + Number(item.quantity), 0));
+  return Number(item.quantity) * Number(item.parameters.width) * Number(item.parameters.thickness);
-const totalVolume = computed(() => cartItems.value.reduce((acc, item) => acc + lineVolume(item), 0));
+}
 
-function addToCart() {
+function increment(productId: string) {
   success.value = '';
   errorMessage.value = '';
-
+  cart.incrementQuantity(productId);
-  if (!draft.productName.trim()) {
-    errorMessage.value = 'Укажите название позиции.';
-    return;
 }
 
-  if (Number(draft.quantity) <= 0) {
+function decrement(productId: string) {
-    errorMessage.value = 'Количество должно быть больше нуля.';
+  success.value = '';
-    return;
+  errorMessage.value = '';
+  cart.decrementQuantity(productId);
 }
 
-  cartItems.value.push({
+function removeFromCart(productId: string) {
-    id: nextLineId.value,
+  success.value = '';
-    productName: draft.productName.trim(),
+  errorMessage.value = '';
-    quantity: Number(draft.quantity),
+  cart.removeProduct(productId);
-    width: Number(draft.width),
-    thickness: Number(draft.thickness),
-    color: draft.color.trim() || 'прозрачный',
-  });
-
-  nextLineId.value += 1;
-  draft.productName = '';
-}
-
-function removeFromCart(id: number) {
-  cartItems.value = cartItems.value.filter((item) => item.id !== id);
 }
 
 async function submitCart() {
@@ -76,7 +47,7 @@ async function submitCart() {
     return;
   }
 
-  if (cartItems.value.length < 1) {
+  if (cart.items.value.length < 1) {
     errorMessage.value = 'Добавьте хотя бы одну позицию в корзину.';
     return;
   }
@@ -84,15 +55,15 @@ async function submitCart() {
   sending.value = true;
   const createdCodes: string[] = [];
 
-  for (const item of cartItems.value) {
+  for (const item of cart.items.value) {
     const result = await submitMutation.mutate({
       input: {
         productName: item.productName,
         quantity: Number(item.quantity),
         parameters: {
-          width: Number(item.width),
+          width: Number(item.parameters.width),
-          thickness: Number(item.thickness),
+          thickness: Number(item.parameters.thickness),
-          color: item.color,
+          color: item.parameters.color,
         },
       },
     });
@@ -108,8 +79,8 @@ async function submitCart() {
   }
 
   sending.value = false;
-  cartItems.value = [];
+  cart.clearCart();
-  success.value = `Отправлено заявок: ${createdCodes.length}.`;
+  success.value = `Отправлено заявок: ${createdCodes.length}. Статус: уточнение цены.`;
 }
 </script>
 
@@ -117,9 +88,7 @@ async function submitCart() {
   <section class="space-y-6">
     <h1 class="text-3xl font-extrabold text-[#0f2f20]">Корзина</h1>
 
-    <div class="surface-card rounded-3xl p-5 md:p-6">
+    <div class="surface-card space-y-4 rounded-3xl p-5 md:p-6">
-      <div class="grid gap-6 xl:grid-cols-[1.6fr_1fr]">
-        <div class="space-y-4">
       <div v-if="counterpartyLoading.value" class="alert">
         Проверяем карточку контрагента...
       </div>
@@ -128,97 +97,67 @@ async function submitCart() {
         <NuxtLink to="/profile" class="link link-hover font-semibold">профиле</NuxtLink>.
       </div>
 
-          <div class="rounded-2xl border border-base-300 bg-base-100 p-4">
-            <h2 class="text-lg font-bold text-[#123824]">Добавить позицию</h2>
-            <div class="mt-3 grid gap-3 md:grid-cols-2 xl:grid-cols-3">
-              <label class="form-control xl:col-span-3">
-                <span class="label-text">Название позиции</span>
-                <input v-model="draft.productName" type="text" class="input input-bordered w-full" placeholder="Лист ПЭТ" >
-              </label>
-
-              <label class="form-control">
-                <span class="label-text">Количество</span>
-                <input v-model="draft.quantity" type="number" min="1" class="input input-bordered w-full" >
-              </label>
-
-              <label class="form-control">
-                <span class="label-text">Ширина</span>
-                <input v-model="draft.width" type="number" min="1" class="input input-bordered w-full" >
-              </label>
-
-              <label class="form-control">
-                <span class="label-text">Толщина</span>
-                <input v-model="draft.thickness" type="number" min="1" class="input input-bordered w-full" >
-              </label>
-
-              <label class="form-control md:col-span-2 xl:col-span-3">
-                <span class="label-text">Цвет</span>
-                <input v-model="draft.color" type="text" class="input input-bordered w-full" >
-              </label>
-            </div>
-
-            <button class="btn btn-primary mt-4" @click="addToCart">Добавить в корзину</button>
-          </div>
-
       <div class="rounded-2xl border border-base-300 bg-base-100 p-4">
         <h2 class="text-lg font-bold text-[#123824]">Список позиций</h2>
 
-            <div v-if="cartItems.length === 0" class="alert mt-3">
+        <div v-if="cart.items.length === 0" class="alert mt-3">
-              Корзина пока пустая.
+          Корзина пока пустая. Добавьте товар из каталога.
         </div>
 
         <ul v-else class="mt-3 space-y-2">
           <li
-                v-for="item in cartItems"
+            v-for="item in cart.items"
-                :key="item.id"
+            :key="item.productId"
-                class="flex flex-col gap-2 rounded-xl border border-[#d6ebde] bg-white/75 px-3 py-3 md:flex-row md:items-center md:justify-between"
+            class="flex flex-col gap-3 rounded-xl border border-[#d6ebde] bg-white/75 px-3 py-3 md:flex-row md:items-center md:justify-between"
           >
             <div>
               <p class="font-semibold text-[#123824]">{{ item.productName }}</p>
+              <p class="text-xs opacity-70">SKU: {{ item.sku }}</p>
               <p class="text-sm opacity-80">
-                    {{ item.quantity }} шт. • {{ item.width }} × {{ item.thickness }} • {{ item.color }}
+                Объем: {{ lineVolume(item.productId) }}
               </p>
             </div>
 
-                <div class="flex items-center gap-3">
+            <div class="flex items-center gap-2">
-                  <span class="text-sm font-semibold text-[#123824]">Объем: {{ lineVolume(item) }}</span>
+              <button class="btn btn-square btn-sm" @click="decrement(item.productId)">-</button>
-                  <button class="btn btn-ghost btn-sm text-error" @click="removeFromCart(item.id)">Удалить</button>
+              <span class="min-w-8 text-center font-semibold">{{ item.quantity }}</span>
+              <button class="btn btn-square btn-sm" @click="increment(item.productId)">+</button>
+              <button class="btn btn-ghost btn-sm text-error" @click="removeFromCart(item.productId)">
+                Удалить
+              </button>
             </div>
           </li>
         </ul>
       </div>
-        </div>
 
-        <aside class="rounded-2xl border border-base-300 bg-base-100 p-4">
+      <div class="rounded-2xl border border-base-300 bg-base-100 p-4">
         <h2 class="text-lg font-bold text-[#123824]">Итого</h2>
-
         <ul class="mt-3 space-y-2 text-sm text-[#214735]">
           <li class="flex items-center justify-between">
             <span>Позиций</span>
-              <span class="font-semibold">{{ cartItems.length }}</span>
+            <span class="font-semibold">{{ cart.totalPositions }}</span>
           </li>
           <li class="flex items-center justify-between">
             <span>Количество, шт.</span>
-              <span class="font-semibold">{{ totalItems }}</span>
+            <span class="font-semibold">{{ cart.totalItems }}</span>
           </li>
           <li class="flex items-center justify-between">
             <span>Суммарный объем</span>
-              <span class="font-semibold">{{ totalVolume }}</span>
+            <span class="font-semibold">{{ cart.totalVolume }}</span>
           </li>
         </ul>
+      </div>
 
       <button
-            class="btn mt-4 w-full border-0 bg-[#139957] text-white hover:bg-[#0d854a]"
+        class="btn w-full border-0 bg-[#139957] text-white hover:bg-[#0d854a]"
-            :disabled="sending || counterpartyLoading.value || !isCounterpartyComplete || cartItems.length === 0"
+        :disabled="sending || counterpartyLoading.value || !isCounterpartyComplete || cart.items.length === 0"
         @click="submitCart"
       >
         {{ sending ? 'Отправляем…' : 'Оформить заявку' }}
       </button>
-        </aside>
-      </div>
-    </div>
 
       <div v-if="success" class="alert alert-success">{{ success }}</div>
       <div v-if="errorMessage" class="alert alert-error">{{ errorMessage }}</div>
+    </div>
   </section>
 </template>

app/pages/products.vue

@@ -1,10 +1,12 @@
 <script setup lang="ts">
 import { useQuery } from '@vue/apollo-composable';
-import { ClientProductsDocument } from '~/composables/graphql/generated';
+import { ClientProductsDocument, type ClientProductsQuery } from '~/composables/graphql/generated';
+import { useClientCart } from '~/composables/useClientCart';
 
 const { result, loading, error } = useQuery(ClientProductsDocument);
 const search = ref('');
 const stockFilter = ref<'ALL' | 'CUSTOM' | 'STANDARD'>('ALL');
+const cart = useClientCart();
 
 const coverPresets = [
   ['#e9fbe5', '#acfcd5', '#7be9aa'],
@@ -54,12 +56,30 @@ const filteredProducts = computed(() => {
     return matchSearch && matchType;
   });
 });
+
+function addProductToCart(product: ClientProductsQuery['clientProducts'][number]) {
+  cart.addProduct({
+    id: product.id,
+    name: product.name,
+    sku: product.sku,
+    isCustomizable: product.isCustomizable,
+  });
+}
 </script>
 
 <template>
   <section class="space-y-5">
     <h1 class="text-3xl font-extrabold text-[#0f2f20]">Каталог</h1>
 
+    <div class="surface-card rounded-3xl p-4 md:p-5">
+      <div class="flex flex-wrap items-center justify-between gap-3">
+        <p class="text-sm text-base-content/75">Добавляй позиции и оформляй заявку в корзине.</p>
+        <NuxtLink to="/cart" class="btn btn-outline btn-sm">
+          Корзина: {{ cart.totalItems }}
+        </NuxtLink>
+      </div>
+    </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">
@@ -87,6 +107,19 @@ const filteredProducts = computed(() => {
     <div v-else-if="error" class="alert alert-error">{{ error.message }}</div>
 
     <div v-else-if="filteredProducts.length > 0" class="grid gap-4 sm:grid-cols-2 xl:grid-cols-3">
+      <article class="surface-card overflow-hidden rounded-3xl border border-dashed border-base-300 p-4">
+        <div class="flex h-full flex-col justify-between gap-4">
+          <div>
+            <div class="badge badge-outline">Кастом</div>
+            <h2 class="mt-3 text-lg font-bold text-[#133826]">Конструктор скотча</h2>
+            <p class="mt-1 text-sm text-base-content/75">
+              Отдельная карточка под индивидуальную конфигурацию. Параметры добавим следующим шагом.
+            </p>
+          </div>
+          <button class="btn btn-disabled w-full">Скоро</button>
+        </div>
+      </article>
+
       <article
         v-for="(product, index) in filteredProducts"
         :key="product.id"
@@ -103,6 +136,16 @@ const filteredProducts = computed(() => {
         </figure>
         <div class="px-1 pb-2 pt-3">
           <h2 class="text-lg font-bold text-[#133826]">{{ product.name }}</h2>
+          <p class="text-xs text-base-content/65">SKU: {{ product.sku }}</p>
+          <div class="mt-3 flex items-center justify-between">
+            <span class="badge badge-outline">В корзине: {{ cart.getQuantity(product.id) }}</span>
+            <button
+              class="btn btn-circle btn-sm border-0 bg-[#139957] text-white hover:bg-[#0d854a]"
+              @click="addProductToCart(product)"
+            >
+              +
+            </button>
+          </div>
         </div>
       </article>
     </div>