✨ delete user cart

client/src/components/ListingCard.vue

@@ -27,27 +27,33 @@
         <i class="bx bx-show"></i>
         <span class="span">{{ listing.views }}</span>
       </vs-button>
-      <vs-tooltip v-if="inCart">
+      <vs-tooltip v-if="inProfile">
+        <vs-button class="btn-chat" primary icon>
+          <i class="bx bx-edit-alt"></i>
+        </vs-button>
+        <template #tooltip> Edit Listing </template>
+      </vs-tooltip>
+      <vs-tooltip v-if="inProfile">
         <vs-button
           class="btn-chat"
-          warn
+          danger
           icon
-          @click="removeFromCart({ cartId: cart.id, listingId: listing.id })"
+          @click="setListingIdToDelete(listing.id), toggleDeleteDialog()"
         >
           <i class="bx bx-trash"></i>
         </vs-button>
-        <template #tooltip> Remove from cart </template>
+        <template #tooltip> Delete Listing </template>
       </vs-tooltip>
-      <vs-tooltip v-if="inProfile">
+      <vs-tooltip v-if="inCart">
         <vs-button
           class="btn-chat"
-          danger
+          warn
           icon
-          @click="setListingIdToDelete(listing.id), toggleDeleteDialog()"
+          @click="removeFromCart({ cartId: cart.id, listingId: listing.id })"
         >
           <i class="bx bx-trash"></i>
         </vs-button>
-        <template #tooltip> Delete Listing </template>
+        <template #tooltip> Remove from cart </template>
       </vs-tooltip>
       <vs-button-group v-if="inCart">
         <vs-button

client/src/pages/Cart.vue

@@ -24,7 +24,7 @@
         </div>
         <div v-if="!cart.cart_listing.length">
           <h2>Your {{ cart.name }} cart is lonely :( No items yet</h2>
-          <vs-button border class="mr-20" @click="checkOut(cart.id)">
+          <vs-button border class="mr-20" @click="deleteCart(cart.id)">
             <i class="bx bx-trash-alt"></i>&nbsp;Delete list
           </vs-button>
         </div>
@@ -42,7 +42,7 @@
             <vs-button border class="mr-20" @click="checkOut(cart.id)">
               <i class="bx bx-cart"></i>&nbsp;Checkout
             </vs-button>
-            <vs-button border class="mr-20" @click="checkOut(cart.id)">
+            <vs-button border class="mr-20" @click="deleteCart(cart.id)">
               <i class="bx bx-trash-alt"></i>&nbsp;Delete list
             </vs-button>
             <p>Subtotal: ${{ getSubTotal(cart.cart_listing) }}</p>
@@ -84,8 +84,12 @@ export default {
   },
   methods: {
     ...mapActions("navigation", ["setActivePage"]),
-    ...mapActions("stripe", ["checkout"]),
-    ...mapActions("cart", ["getUserCartItems", "toggleNewCartDialog"]),
+    ...mapActions("stripe", ["checkOut"]),
+    ...mapActions("cart", [
+      "getUserCartItems",
+      "toggleNewCartDialog",
+      "deleteCart",
+    ]),
     getSubTotal(items) {
       const rawSubTotal = items.reduce((acc, item) => {
         return acc + item.price * item.cart_info.quantity;

client/src/services/CartServices.js

@@ -15,6 +15,16 @@ export const GetUserCartItems = async (userId) => {
   return res
 }
 
+export const DeleteCart = async (cartId) => {
+  const res = await Client.delete(`/cart/delete/${cartId}`)
+    .then((res) =>{
+    return res
+  }).catch((err)=>{
+    return err.response
+  })
+  return res
+}
+
 export const AddItemToUserCart = async (data) => {
   const res = await Client.post('/cartlisting/add', data)
     .then((res) =>{

client/src/store/modules/cart.js

@@ -1,4 +1,4 @@
-import { GetUserCartItems, AddItemToUserCart, GetUserCartsList, RemoveItemFromUserCart, IncrementCartItem, DecrementCartItem, CreateNewCartList } from "../../services/CartServices";
+import { GetUserCartItems, AddItemToUserCart, GetUserCartsList, RemoveItemFromUserCart, IncrementCartItem, DecrementCartItem, CreateNewCartList, DeleteCart } from "../../services/CartServices";
 
 const state = () => ({
   userCarts: [],
@@ -110,6 +110,8 @@ const actions = {
     const res = await IncrementCartItem(req)
     if(res.status === 200){
       commit('setCartStatus','Incremented')
+    } else {
+      commit('setCartStatus','Failed')
     }
   },
   async decrementCartItem({commit},payload){
@@ -120,6 +122,16 @@ const actions = {
     const res = await DecrementCartItem(req)
     if(res.status === 200){
       commit('setCartStatus','Decremented')
+    } else {
+      commit('setCartStatus','Failed')
+    }
+  },
+  async deleteCart({commit}, payload){
+    const res = await DeleteCart(payload)
+    if(res.status === 200){
+      commit('setCartStatus','Cart Deleted')
+    } else {
+      commit('setCartStatus','Failed')
     }
   }
 }

controllers/CartController.js

@@ -81,7 +81,7 @@ const DeleteCart = async (req, res) => {
     const deletedCartListings = CartListing.destroy({ where: { cart_id: id} })
     const cart = await Cart.findOne({where: { id: id }})
     const deletedCart = await cart.destroy({returning: true})
-    return res.send({msg: "Deleted Cart", deleted: [deletedCart, deletedCartListings]})
+    return res.send({msg: "Deleted Cart", payload: { cart_id: id }, deleted: [deletedCart, deletedCartListings]})
   } catch (error) {
     return res.status(500).send(error.message)
   }

controllers/ListingController.js

@@ -110,7 +110,7 @@ const DeleteListing = async (req, res) => {
       where: { id: id }
     })
     const deleted = await listing.destroy()
-    return res.send({ msg: "Deleted listing", deleted: [deletedCartsListing, deletedImage, deleted ]})
+    return res.send({ msg: "Deleted listing", payload: { listing_id: id }, deleted: [deletedCartsListing, deletedImage, deleted ]})
   } catch (error) {
     return res.status(500).send({ error: error })
   }