wip: shopping cart, product options

spa/src/views/Cart.vue

@@ -1,46 +1,48 @@
 <template>
-  <div class="max-w-3xl mx-auto p-4 space-y-6">
+  <div class="max-w-3xl mx-auto p-4 space-y-6 pb-30">
     <h2 class="text-2xl">
       Корзина
       <span v-if="cart.isLoading" class="loading loading-spinner loading-md"></span>
     </h2>
 
-    <div>
-      <button class="btn" @click="cart.checkout()" :disabled="cart.isLoading">
-        Checkout
-      </button>
-    </div>
-
-    <div v-if="cart.items.length > 0">
+    <div v-if="cart.products.length > 0">
       <div
-          v-for="item in cart.items"
-          :key="item.rowId"
-          class="card w-96 bg-base-100 card-sm shadow-sm"
+          v-for="item in cart.products"
+          :key="item.cart_id"
+          class="card card-border bg-base-100 card-sm mb-3"
+          :class="item.stock === false ? 'border-error' : ''"
       >
         <div class="card-body">
-          <h2 class="card-title">{{ item.productName }}</h2>
-          <p class="text-sm mt-1">{{ item.price }}</p>
-          <div v-if="item.options.length">
-            <p v-for="option in item.options.filter(i => ['checkbox', 'radio', 'select', 'text', 'textarea'].indexOf(i.type) !== -1)">
-              <span v-if="option.type === 'radio'" class="text-xs font-medium">
-                {{ option.value.name }}<span v-if="option.value.price"> ({{ option.value.price_prefix }}{{ option.value.price }})</span>
-              </span>
-              <span v-else-if="option.type === 'checkbox'" class="text-xs font-medium">
-                <span v-for="check in option.value" class="text-xs font-medium">
-                  {{ check.name }}<span v-if="check.price"> ({{ check.price_prefix }}{{ check.price }})</span>
-                </span>
-              </span>
-              <span v-else-if="option.type === 'select'" class="text-xs font-medium">
-                {{ option.value.name }}<span v-if="option.value.price"> ({{ option.value.price_prefix }}{{ option.value.price }})</span>
-              </span>
-              <span v-else-if="option.type === 'text' || option.type === 'textarea'" class="text-xs font-medium">
-                {{ option.value }}
-              </span>
-            </p>
+          <div class="avatar">
+            <div class="w-16 rounded">
+              <img :src="item.thumb"/>
+            </div>
+          </div>
+
+          <p v-if="! item.stock" class="text-error font-bold">Товар отсутствует на складе в нужном количестве.</p>
+
+          <h2 class="card-title">{{ item.name }}</h2>
+          <p class="text-sm font-bold">{{ formatPrice(item.total) }} ₽</p>
+          <p>{{ formatPrice(item.price) }} ₽/ед</p>
+          <div>
+            <div v-for="option in item.option">
+              <component
+                  v-if="SUPPORTED_OPTION_TYPES.includes(option.type) && componentMap[option.type]"
+                  :is="componentMap[option.type]"
+                  :option="option"
+              />
+              <div v-else class="text-sm text-error">
+                Тип опции "{{ option.type }}" не поддерживается.
+              </div>
+            </div>
           </div>
           <div class="card-actions justify-between">
-            <Quantity v-model="item.quantity" @update:modelValue="onQuantityUpdate(item.rowId, $event)"/>
-            <button class="btn btn-error" @click="cart.removeItem(item.rowId)">
+            <Quantity
+                :disabled="cart.isLoading"
+                v-model="item.quantity"
+                @update:modelValue="cart.setQuantity(item.cart_id, $event)"
+            />
+            <button class="btn btn-error" @click="cart.removeItem(item.cart_id)" :disabled="cart.isLoading">
               <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-6">
                 <path stroke-linecap="round" stroke-linejoin="round" d="m14.74 9-.346 9m-4.788 0L9.26 9m9.968-3.21c.342.052.682.107 1.022.166m-1.022-.165L18.16 19.673a2.25 2.25 0 0 1-2.244 2.077H8.084a2.25 2.25 0 0 1-2.244-2.077L4.772 5.79m14.456 0a48.108 48.108 0 0 0-3.478-.397m-12 .562c.34-.059.68-.114 1.022-.165m0 0a48.11 48.11 0 0 1 3.478-.397m7.5 0v-.916c0-1.18-.91-2.164-2.09-2.201a51.964 51.964 0 0 0-3.32 0c-1.18.037-2.09 1.022-2.09 2.201v.916m7.5 0a48.667 48.667 0 0 0-7.5 0" />
               </svg>
@@ -48,11 +50,21 @@
           </div>
         </div>
       </div>
+
+      <div class="fixed px-4 pb-10 pt-4 bottom-0 left-0 w-full bg-base-200 z-50 flex justify-between items-center gap-2 border-t-1 border-t-base-300">
+        <div>
+
+          <span class="text-xs text-base-content mr-2">Всего:</span>
+          <span v-if="cart.isLoading" class="loading loading-spinner loading-xs"></span>
+          <span v-else class="text-accent font-bold">{{ formatPrice(cart.total) }} ₽</span>
+        </div>
+        <button class="btn btn-primary" :disabled="cart.isLoading">Перейти к оформлению</button>
+      </div>
     </div>
 
     <div
         v-else
-        class="text-center text-gray-500 py-12 border border-dashed border-gray-300 rounded-2xl bg-white"
+        class="text-center rounded-2xl"
     >
       <p class="text-lg">Ваша корзина пуста</p>
     </div>
@@ -62,12 +74,19 @@
 <script setup>
 import { useCartStore } from '../stores/CartStore.js'
 import Quantity from "@/components/Quantity.vue";
+import {SUPPORTED_OPTION_TYPES} from "@/constants/options.js";
+import OptionRadio from "@/components/ProductOptions/Cart/OptionRadio.vue";
+import OptionCheckbox from "@/components/ProductOptions/Cart/OptionCheckbox.vue";
+import OptionText from "@/components/ProductOptions/Cart/OptionText.vue";
+import {formatPrice} from "../helpers.js";
 
-const cart = useCartStore()
+const cart = useCartStore();
 
-function onQuantityUpdate(rowId, newQuantity) {
-  if (newQuantity === 0) {
-    cart.removeItem(rowId)
-  }
-}
+const componentMap = {
+  radio: OptionRadio,
+  select: OptionRadio,
+  checkbox: OptionCheckbox,
+  text: OptionText,
+  textarea: OptionText,
+};
 </script>

spa/src/views/Product.vue

@@ -34,57 +34,52 @@
       </div>
     </div>
 
-    <div v-if="product.id" class="px-4 pb-10 pt-4 fixed bottom-0 left-0 w-full bg-base-200 z-50 flex justify-between gap-2 border-t-1 border-t-base-300">
-      <div class="flex-1">
-        <button
-            class="btn btn-lg w-full"
-            :class="isInCartNow ? 'btn-success' : 'btn-primary'"
-            :disabled="canAddToCart === false"
-            @click="actionBtnClick"
-        >
-          <span>{{ buttonText }}</span><br>
-        </button>
-
-        <div v-if="canAddToCart === false" class="text-error text-center text-xs mt-1">
-          Выберите обязательные опции
-        </div>
+    <div v-if="product.id" class="fixed px-4 pb-10 pt-4 bottom-0 left-0 w-full bg-base-200 z-50 flex flex-col gap-2 border-t-1 border-t-base-300">
+      <div class="text-error">
+        {{ error }}
       </div>
 
-      <Quantity
-          v-if="quantity > 0"
-          :modelValue="quantity"
-          @update:modelValue="setQuantity"
-          :max="10"
-          size="lg"
-      />
+      <div v-if="canAddToCart === false" class="text-error text-center text-xs mt-1">
+        Выберите обязательные опции
+      </div>
+
+      <div class="flex gap-2">
+        <div class="flex-1">
+          <button
+              class="btn btn-primary btn-lg w-full"
+              :disabled="canAddToCart === false"
+              @click="actionBtnClick"
+          >
+            Купить
+          </button>
+        </div>
+
+        <Quantity
+            :modelValue="quantity"
+            @update:modelValue="setQuantity"
+            size="lg"
+        />
+      </div>
     </div>
   </div>
 </template>
 
 <script setup>
-import {computed, onMounted, onUnmounted, ref, watch, watchEffect} from "vue";
+import {computed, onMounted, ref} from "vue";
 import {$fetch} from "ofetch";
 import {useRoute} from 'vue-router'
-import {useRouter} from 'vue-router'
 import ProductOptions from "../components/ProductOptions/ProductOptions.vue";
 import {useCartStore} from "../stores/CartStore.js";
 import ProductImageSwiper from "../components/ProductImageSwiper.vue";
 import Quantity from "../components/Quantity.vue";
+import {SUPPORTED_OPTION_TYPES} from "@/constants/options.js";
 
 const route = useRoute();
-const router = useRouter();
 const productId = computed(() => route.params.id);
 const product = ref({});
 const cart = useCartStore();
-
-const rowId = computed(() => cart.generateRowId(productId.value, product.value.options));
-
-const buttonText = computed(() => {
-  const item = cart.getItem(rowId.value);
-  return item && item.quantity > 0
-      ? `В корзине`
-      : 'Добавить в корзину'
-});
+const quantity = ref(1);
+const error = ref('');
 
 const canAddToCart = computed(() => {
   if (!product.value || product.value.options === undefined || product.value.options?.length === 0) {
@@ -92,7 +87,7 @@ const canAddToCart = computed(() => {
   }
 
   const required = product.value.options.filter(item => {
-    return ['checkbox', 'radio', 'select', 'text', 'textarea'].indexOf(item.type) !== -1
+    return SUPPORTED_OPTION_TYPES.includes(item.type)
         && item.required === true
         && !item.value;
   });
@@ -100,32 +95,21 @@ const canAddToCart = computed(() => {
   return required.length === 0;
 });
 
-const isInCartNow = computed(() => {
-  return cart.hasItem(rowId.value);
-});
-
-const quantity = computed(() => {
-  return cart.getQuantity(rowId.value);
-});
-
-function actionBtnClick() {
-  if (cart.hasItem(rowId.value)) {
-    window.Telegram.WebApp.HapticFeedback.selectionChanged();
-    router.push({name: 'cart.show'});
-  } else {
-    cart.addProduct(productId.value, product.value.name, product.value.price, 1, product.value.options);
+async function actionBtnClick() {
+  try {
+    error.value = '';
+    console.log(product.value);
+    await cart.addProduct(productId.value, product.value.name, product.value.price, quantity.value, product.value.options);
     window.Telegram.WebApp.HapticFeedback.notificationOccurred('success');
+  } catch (e) {
+    await window.Telegram.WebApp.HapticFeedback.notificationOccurred('error');
+    error.value = e.message;
   }
 }
 
 function setQuantity(newQuantity) {
-  if (newQuantity === 0) {
-    cart.removeItem(rowId.value);
-    window.Telegram.WebApp.HapticFeedback.notificationOccurred('warning');
-  } else {
-    cart.setQuantity(rowId.value, newQuantity);
-    window.Telegram.WebApp.HapticFeedback.selectionChanged();
-  }
+  quantity.value = newQuantity;
+  window.Telegram.WebApp.HapticFeedback.selectionChanged();
 }
 
 onMounted(async () => {

spa/src/views/Products.vue

@@ -0,0 +1,22 @@
+<template>
+  <div ref="goodsRef">
+    <ProductsList
+        :products="productsStore.products.data"
+        :meta="productsStore.products.meta"
+        :isLoading="productsStore.isLoading"
+    />
+  </div>
+</template>
+
+<script setup>
+import {useProductsStore} from "@/stores/ProductsStore.js";
+import ProductsList from "@/components/ProductsList.vue";
+import {onMounted} from "vue";
+import {useRoute} from "vue-router";
+
+const route = useRoute();
+const categoryId = route.params.id ?? null;
+
+const productsStore = useProductsStore();
+onMounted(() => productsStore.fetchProducts(categoryId))
+</script>