web-frontend/app/pages/cart.vue

<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';

const { isComplete: isCounterpartyComplete, loading: counterpartyLoading } = useCounterpartyProfile();
const submitMutation = useMutation(SubmitCalculationOrderDocument, { throws: 'never' });
const {
  items: cartItems,
  totalPositions,
  totalItems,
  totalVolume,
  incrementQuantity,
  decrementQuantity,
  removeProduct,
  clearCart,
} = useClientCart();
const sending = ref(false);
const success = ref('');
const errorMessage = ref('');

function lineVolume(productId: string) {
  const item = cartItems.value.find((entry) => entry.productId === productId);
  if (!item) {
    return 0;
  }

  return Number(item.quantity) * Number(item.parameters.width) * Number(item.parameters.thickness);
}

function increment(productId: string) {
  success.value = '';
  errorMessage.value = '';
  incrementQuantity(productId);
}

function decrement(productId: string) {
  success.value = '';
  errorMessage.value = '';
  decrementQuantity(productId);
}

function removeFromCart(productId: string) {
  success.value = '';
  errorMessage.value = '';
  removeProduct(productId);
}

async function submitCart() {
  success.value = '';
  errorMessage.value = '';

  if (!isCounterpartyComplete.value) {
    errorMessage.value = 'Сначала заполните карточку контрагента в профиле.';
    return;
  }

  if (cartItems.value.length < 1) {
    errorMessage.value = 'Добавьте хотя бы одну позицию в корзину.';
    return;
  }

  sending.value = true;
  const createdCodes: string[] = [];

  for (const item of cartItems.value) {
    const result = await submitMutation.mutate({
      input: {
        productName: item.productName,
        quantity: Number(item.quantity),
        parameters: {
          width: Number(item.parameters.width),
          thickness: Number(item.parameters.thickness),
          color: item.parameters.color,
        },
      },
    });

    const code = result?.data?.submitCalculationOrder?.code;
    if (!code) {
      errorMessage.value = submitMutation.error.value?.message || 'Не удалось отправить одну из позиций.';
      sending.value = false;
      return;
    }

    createdCodes.push(code);
  }

  sending.value = false;
  clearCart();
  success.value = `Отправлено заявок: ${createdCodes.length}. Статус: уточнение цены.`;
}
</script>

<template>
  <section class="space-y-6">
    <h1 class="text-3xl font-extrabold text-[#0f2f20]">Корзина</h1>

    <div v-if="counterpartyLoading.value" class="alert surface-card border-0">
      Проверяем карточку контрагента...
    </div>
    <div v-else-if="!isCounterpartyComplete" class="alert alert-warning">
      Для оформления заявки заполните карточку контрагента в
      <NuxtLink to="/profile" class="link link-hover font-semibold">профиле</NuxtLink>.
    </div>

    <h2 class="text-xl font-bold text-[#123824]">Позиции</h2>

    <div v-if="cartItems.length === 0" class="alert surface-card border-0">
      Корзина пока пустая. Добавьте товар из каталога.
    </div>

    <ul v-else class="space-y-3">
      <li
        v-for="item in cartItems"
        :key="item.productId"
        class="surface-card flex flex-col gap-3 rounded-3xl px-4 py-4 md:flex-row md:items-center md:justify-between md:px-5 md:py-5"
      >
        <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 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 class="divider my-1" />

    <div class="space-y-2 text-sm text-[#214735]">
      <div class="flex items-center justify-between">
        <span>Позиций</span>
        <span class="font-semibold">{{ totalPositions }}</span>
      </div>
      <div class="flex items-center justify-between">
        <span>Количество, шт.</span>
        <span class="font-semibold">{{ totalItems }}</span>
      </div>
      <div class="flex items-center justify-between">
        <span>Суммарный объем</span>
        <span class="font-semibold">{{ totalVolume }}</span>
      </div>
    </div>

    <button
      class="btn w-full border-0 bg-[#139957] text-white hover:bg-[#0d854a]"
      :disabled="sending || counterpartyLoading.value || !isCounterpartyComplete || cartItems.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>
  </section>
</template>