From 88e5c248f4fd532c57a2c608b3aff74635b9c1d4 Mon Sep 17 00:00:00 2001
From: Ruslan Bakiev <572431+veikab@users.noreply.github.com>
Date: Thu, 2 Apr 2026 18:28:57 +0700
Subject: [PATCH] Move cart flow to catalog add and simplify checkout list

---
 app/components/orders/OrderStatusBadge.vue |  16 +-
 app/composables/useClientCart.ts           | 109 +++++++++
 app/pages/cart.vue                         | 247 ++++++++-------------
 app/pages/products.vue                     |  45 +++-
 4 files changed, 261 insertions(+), 156 deletions(-)
 create mode 100644 app/composables/useClientCart.ts

diff --git a/app/components/orders/OrderStatusBadge.vue b/app/components/orders/OrderStatusBadge.vue
index 6f74a29..317d385 100644
--- a/app/components/orders/OrderStatusBadge.vue
+++ b/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>
diff --git a/app/composables/useClientCart.ts b/app/composables/useClientCart.ts
new file mode 100644
index 0000000..702b459
--- /dev/null
+++ b/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,
+  };
+}
diff --git a/app/pages/cart.vue b/app/pages/cart.vue
index 7384116..c0b3692 100644
--- a/app/pages/cart.vue
+++ b/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 draft = reactive({
-  productName: '',
-  quantity: 1,
-  width: 100,
-  thickness: 50,
-  color: 'прозрачный',
-});
-
-const cartItems = ref<CartLine[]>([]);
-const nextLineId = ref(1);
+const cart = useClientCart();
 const sending = ref(false);
 const success = ref('');
 const errorMessage = ref('');
 
-function lineVolume(item: CartLine) {
-  return Number(item.quantity) * Number(item.width) * Number(item.thickness);
+function lineVolume(productId: string) {
+  const item = cart.items.value.find((entry) => entry.productId === productId);
+  if (!item) {
+    return 0;
+  }
+
+  return Number(item.quantity) * Number(item.parameters.width) * Number(item.parameters.thickness);
 }
 
-const totalItems = computed(() => cartItems.value.reduce((acc, item) => acc + Number(item.quantity), 0));
-const totalVolume = computed(() => cartItems.value.reduce((acc, item) => acc + lineVolume(item), 0));
-
-function addToCart() {
+function increment(productId: string) {
   success.value = '';
   errorMessage.value = '';
-
-  if (!draft.productName.trim()) {
-    errorMessage.value = 'Укажите название позиции.';
-    return;
-  }
-
-  if (Number(draft.quantity) <= 0) {
-    errorMessage.value = 'Количество должно быть больше нуля.';
-    return;
-  }
-
-  cartItems.value.push({
-    id: nextLineId.value,
-    productName: draft.productName.trim(),
-    quantity: Number(draft.quantity),
-    width: Number(draft.width),
-    thickness: Number(draft.thickness),
-    color: draft.color.trim() || 'прозрачный',
-  });
-
-  nextLineId.value += 1;
-  draft.productName = '';
+  cart.incrementQuantity(productId);
 }
 
-function removeFromCart(id: number) {
-  cartItems.value = cartItems.value.filter((item) => item.id !== id);
+function decrement(productId: string) {
+  success.value = '';
+  errorMessage.value = '';
+  cart.decrementQuantity(productId);
+}
+
+function removeFromCart(productId: string) {
+  success.value = '';
+  errorMessage.value = '';
+  cart.removeProduct(productId);
 }
 
 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),
-          thickness: Number(item.thickness),
-          color: item.color,
+          width: Number(item.parameters.width),
+          thickness: Number(item.parameters.thickness),
+          color: item.parameters.color,
         },
       },
     });
@@ -108,8 +79,8 @@ async function submitCart() {
   }
 
   sending.value = false;
-  cartItems.value = [];
-  success.value = `Отправлено заявок: ${createdCodes.length}.`;
+  cart.clearCart();
+  success.value = `Отправлено заявок: ${createdCodes.length}. Статус: уточнение цены.`;
 }
 </script>
 
@@ -117,108 +88,76 @@ 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="grid gap-6 xl:grid-cols-[1.6fr_1fr]">
-        <div class="space-y-4">
-          <div v-if="counterpartyLoading.value" class="alert">
-            Проверяем карточку контрагента...
-          </div>
-          <div v-else-if="!isCounterpartyComplete" class="alert alert-warning">
-            Для оформления заявки заполните карточку контрагента в
-            <NuxtLink to="/profile" class="link link-hover font-semibold">профиле</NuxtLink>.
-          </div>
+    <div class="surface-card space-y-4 rounded-3xl p-5 md:p-6">
+      <div v-if="counterpartyLoading.value" class="alert">
+        Проверяем карточку контрагента...
+      </div>
+      <div v-else-if="!isCounterpartyComplete" class="alert alert-warning">
+        Для оформления заявки заполните карточку контрагента в
+        <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>
+      <div class="rounded-2xl border border-base-300 bg-base-100 p-4">
+        <h2 class="text-lg font-bold text-[#123824]">Список позиций</h2>
 
-              <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>
-
-            <ul v-else class="mt-3 space-y-2">
-              <li
-                v-for="item in cartItems"
-                :key="item.id"
-                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"
-              >
-                <div>
-                  <p class="font-semibold text-[#123824]">{{ item.productName }}</p>
-                  <p class="text-sm opacity-80">
-                    {{ item.quantity }} шт. • {{ item.width }} × {{ item.thickness }} • {{ item.color }}
-                  </p>
-                </div>
-
-                <div class="flex items-center gap-3">
-                  <span class="text-sm font-semibold text-[#123824]">Объем: {{ lineVolume(item) }}</span>
-                  <button class="btn btn-ghost btn-sm text-error" @click="removeFromCart(item.id)">Удалить</button>
-                </div>
-              </li>
-            </ul>
-          </div>
+        <div v-if="cart.items.length === 0" class="alert mt-3">
+          Корзина пока пустая. Добавьте товар из каталога.
         </div>
 
-        <aside 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>
-            </li>
-            <li class="flex items-center justify-between">
-              <span>Количество, шт.</span>
-              <span class="font-semibold">{{ totalItems }}</span>
-            </li>
-            <li class="flex items-center justify-between">
-              <span>Суммарный объем</span>
-              <span class="font-semibold">{{ totalVolume }}</span>
-            </li>
-          </ul>
-
-          <button
-            class="btn mt-4 w-full border-0 bg-[#139957] text-white hover:bg-[#0d854a]"
-            :disabled="sending || counterpartyLoading.value || !isCounterpartyComplete || cartItems.length === 0"
-            @click="submitCart"
+        <ul v-else class="mt-3 space-y-2">
+          <li
+            v-for="item in cart.items"
+            :key="item.productId"
+            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"
           >
-            {{ sending ? 'Отправляем…' : 'Оформить заявку' }}
-          </button>
-        </aside>
-      </div>
-    </div>
+            <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">
+                Объем: {{ lineVolume(item.productId) }}
+              </p>
+            </div>
 
-    <div v-if="success" class="alert alert-success">{{ success }}</div>
-    <div v-if="errorMessage" class="alert alert-error">{{ errorMessage }}</div>
+            <div class="flex items-center gap-2">
+              <button class="btn btn-square btn-sm" @click="decrement(item.productId)">-</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 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">{{ cart.totalPositions }}</span>
+          </li>
+          <li class="flex items-center justify-between">
+            <span>Количество, шт.</span>
+            <span class="font-semibold">{{ cart.totalItems }}</span>
+          </li>
+          <li class="flex items-center justify-between">
+            <span>Суммарный объем</span>
+            <span class="font-semibold">{{ cart.totalVolume }}</span>
+          </li>
+        </ul>
+      </div>
+
+      <button
+        class="btn w-full border-0 bg-[#139957] text-white hover:bg-[#0d854a]"
+        :disabled="sending || counterpartyLoading.value || !isCounterpartyComplete || cart.items.length === 0"
+        @click="submitCart"
+      >
+        {{ sending ? 'Отправляем…' : 'Оформить заявку' }}
+      </button>
+
+      <div v-if="success" class="alert alert-success">{{ success }}</div>
+      <div v-if="errorMessage" class="alert alert-error">{{ errorMessage }}</div>
+    </div>
   </section>
 </template>
diff --git a/app/pages/products.vue b/app/pages/products.vue
index 36a527b..847debb 100644
--- a/app/pages/products.vue
+++ b/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>