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>