feat: add creating order

src/App.vue

@@ -14,6 +14,7 @@
     searchQuery: '',
     sortBy: ''
   });
+  const isCreatingOrder = ref(false);
 
   const fetchItems = async (filters = {}) => {
     const params = {};
@@ -48,7 +49,8 @@
           "type": "success",
           "hideProgressBar": true,
           "transition": "slide",
-          "dangerouslyHTMLString": true
+          "dangerouslyHTMLString": true,
+          "position": "bottom-right",
         })
       }
     } catch (e) {
@@ -57,7 +59,8 @@
         "type": "error",
         "hideProgressBar": true,
         "transition": "slide",
-        "dangerouslyHTMLString": true
+        "dangerouslyHTMLString": true,
+        "position": "bottom-right",
       })
     }
   }
@@ -72,7 +75,8 @@
           "type": "success",
           "hideProgressBar": true,
           "transition": "slide",
-          "dangerouslyHTMLString": true
+          "dangerouslyHTMLString": true,
+          "position": "bottom-right",
         })
       }
     } catch (e) {
@@ -80,6 +84,43 @@
     }
   }
 
+  const createOrder = async () => {
+    try {
+      isCreatingOrder.value = true;
+      const { data } = await axios.post(`${import.meta.env.VITE_API_URL}/orders`, {
+        items: cart.value,
+        totalPrice: totalPrice.value
+      });
+
+      items.value.forEach((item) => {
+        item.isAdded = false;
+      });
+
+      await axios.patch(`${import.meta.env.VITE_API_URL}/items`, items.value);
+
+      toast("Заказ успешно оформлен", {
+        "type": "success",
+        "hideProgressBar": true,
+        "transition": "slide",
+        "dangerouslyHTMLString": true,
+        "position": "bottom-right",
+      })
+
+      return data;
+    } catch (e) {
+      toast("Ошибка при создании заказа", {
+        "type": "error",
+        "hideProgressBar": true,
+        "transition": "slide",
+        "dangerouslyHTMLString": true,
+        "position": "bottom-right",
+      })
+    } finally {
+      isCreatingOrder.value = false;
+      showDrawer.value = false;
+    }
+  }
+
   const cart = computed(() => items.value.filter(i => i.isAdded));
   const totalPrice = computed(() => cart.value.reduce((res, cur) => {
     return res + cur.price
@@ -91,6 +132,8 @@
     totalPrice,
     openDrawer: () => showDrawer.value = true,
     closeDrawer: () => showDrawer.value = false,
+    createOrder,
+    isCreatingOrder,
   })
 </script>
 <template>

src/components/Drawer.vue

@@ -1,10 +1,15 @@
 <script setup>
   import DrawerHead from './DrawerHead.vue'
   import CartItemList from '@/components/CartItemList.vue'
-  import { inject } from 'vue'
+  import { inject, onMounted, onUnmounted } from 'vue'
   import { decimalFormatter } from '@/utils/helpers.js'
 
-  const { closeDrawer, totalPrice } = inject('cart')
+  const {
+    closeDrawer,
+    totalPrice,
+    createOrder,
+    isCreatingOrder,
+  } = inject('cart')
 
   defineProps({
     cart: {
@@ -12,6 +17,14 @@
       required: true
     }
   })
+
+  onMounted(() => {
+    document.body.style.overflow = 'hidden'
+  })
+
+  onUnmounted(() => {
+    document.body.style.overflow = 'unset'
+  })
 </script>
 
 <template>
@@ -43,7 +56,11 @@
           <b>{{ decimalFormatter.format(totalPrice * 0.95) }} руб.</b>
         </div>
 
-        <button class="mt-5 bg-lime-500 w-full rounded-xl py-3 text-white transition disabled:bg-slate-300 hover:bg-lime-600 active:bg-lime-700">
+        <button
+          @click="createOrder"
+          class="mt-5 bg-lime-500 w-full rounded-xl py-3 text-white transition disabled:bg-slate-300 hover:bg-lime-600 active:bg-lime-700"
+          :disabled="isCreatingOrder"
+        >
           Оформить заказ
         </button>
       </div>