@wip: confirm dialog to remove items from cart

viur-framework · Apr 18, 2024 · 0b316dc · 0b316dc
1 parent 5eb4211
commit 0b316dc
Show file tree

Hide file tree

Showing 3 changed files with 108 additions and 89 deletions.
diff --git a/source/src/components/cart/CartView.vue b/source/src/components/cart/CartView.vue
@@ -2,6 +2,17 @@
   <Loader v-if="!state.cartIsInit"></Loader>
   <template v-else>
     <div class="bind bind-wrap">
+      <sl-dialog ref="confirm" @sl-hide="state.currentItem = {}">
+        <p>Möchten Sie sich wirklich ausloggen?</p>
+        <div class="footer-wrap" slot="footer">
+          <sl-button variant="danger" @click="confirm.hide()" size="medium">
+            Abbrechen
+          </sl-button>
+          <sl-button variant="success" @click="onConfirm" size="medium">
+            Aus Warenkorb entfernen
+          </sl-button>
+        </div>
+      </sl-dialog>
       <div class="list">
         <sl-tab-group class="cart-tab" noScrollControls>
           <sl-tab slot="nav" panel="general">
@@ -169,7 +180,10 @@
                     variant="primary"
                     title="Remove from cart"
                     @click="
-                      cartStore.removeItem(item.article.dest.key, cartStore.state.basket)
+                      cartStore.removeItem(
+                        item.article.dest.key,
+                        cartStore.state.basket,
+                      )
                     "
                   >
                     <sl-icon name="trash" slot="prefix"></sl-icon>
@@ -184,7 +198,8 @@
                   placeholder="Number"
                   v-model="item.quantity"
                   @input="
-                    cartStore.updateItem(
+                    updateItem(
+                      item,
                       item.article.dest.key,
                       cartStore.state.basket,
                       item.quantity,
@@ -242,13 +257,15 @@
 </template>
 
 <script setup>
-import { reactive, computed, onBeforeMount } from "vue";
+import { reactive, computed, onBeforeMount, ref } from "vue";
 import Loader from "@viur/vue-utils/generic/Loader.vue";
 import { useCartStore } from "../../stores/cart.js";
 import { Request } from "@viur/vue-utils";
 
 const cartStore = useCartStore();
 
+const confirm = ref(null);
+
 const state = reactive({
   cartIsInit: computed(() => {
     return cartStore.state.basket.length ? true : false;
@@ -257,6 +274,7 @@ const state = reactive({
     return cartStore.state.carts[cartStore.state.basket].items ? true : false;
   }),
   images: {},
+  currentItem: {},
 });
 
 function getImage(item) {
@@ -275,6 +293,20 @@ function getImage(item) {
   return state.images[item];
 }
 
+async function onConfirm() {
+  await cartStore.updateItem(state.currentItem.article.dest.key, cartStore.state.basket, 0);
+  confirm.value.hide();
+}
+
+function updateItem(item, articleKey, cartKey, quantity) {
+  if (quantity === 0) {
+    confirm.value.show();
+    state.currentItem = item;
+  } else {
+    cartStore.updateItem(articleKey, cartKey, quantity);
+  }
+}
+
 onBeforeMount(async () => {
   await cartStore.init();
 });

diff --git a/source/src/components/order/item/ItemCard.vue b/source/src/components/order/item/ItemCard.vue
@@ -1,18 +1,16 @@
 <template>
   <sl-card class="card">
     <img
-            slot="image"
-            :src="getImage(item)"
-            :alt="item.shop_name"
-            class="card-image"
-          />
-          <h3 class="card-headline"> {{ item.shop_name }}</h3>
-          <h4 class="card-subline">B 21 x H 6,5 x T 19 cm</h4>
-          <div class="price">
-            {{ item.shop_price_retail }} €
-          </div>
-        <div class="card-footer" slot="footer">
-          <!-- <sl-button-group label="Amount">
+      slot="image"
+      :src="getImage(item)"
+      :alt="item.shop_name"
+      class="card-image"
+    />
+    <h3 class="card-headline">{{ item.shop_name }}</h3>
+    <h4 class="card-subline">B 21 x H 6,5 x T 19 cm</h4>
+    <div class="price">{{ item.shop_price_retail }} €</div>
+    <div class="card-footer" slot="footer">
+      <!-- <sl-button-group label="Amount">
               <sl-tooltip content="Remove">
                 <sl-icon-button
                   variant="primary"
@@ -44,136 +42,123 @@
                 </sl-icon-button>
               </sl-tooltip>
             </sl-button-group> -->
-          <sl-button
-            size="small"
-            class="add-to-cart-btn"
-            variant="primary"
-            title="Add to cart"
-            @click.stop="cartStore.addToCart(item.key, cartStore.state.currentCart)"
-          >
-            <sl-icon name="bag-plus"
-                     slot="prefix"
-                     ></sl-icon>
-
-            In den Warenkorb
-          </sl-button>
-
-          <sl-button
-            size="small"
-            outline
-            class="add-to-favourites-btn"
-            variant="primary"
-            title="Add to favourites"
-          >
-            <sl-icon name="heart"
-                     slot="prefix"
-                     ></sl-icon>
-          </sl-button>
-
-
-        </div>
+      <sl-button
+        size="small"
+        class="add-to-cart-btn"
+        variant="primary"
+        title="Add to cart"
+        @click.stop="cartStore.addToCart(item.key, cartStore.state.currentCart)"
+      >
+        <sl-icon name="bag-plus" slot="prefix"></sl-icon>
+
+        In den Warenkorb
+      </sl-button>
+
+      <sl-button
+        size="small"
+        outline
+        class="add-to-favourites-btn"
+        variant="primary"
+        title="Add to favourites"
+      >
+        <sl-icon name="heart" slot="prefix"></sl-icon>
+      </sl-button>
+    </div>
   </sl-card>
 </template>
 
-<script>
-import {Request} from "@viur/vue-utils";
+<script setup>
+import { Request } from "@viur/vue-utils";
+import { useCartStore } from "../../../stores/cart";
 
-export default {
-  props: {
-    item: {
-      type: Object,
-      required: true
-    }
+const props = defineProps({
+  item: {
+    type: Object,
+    required: true,
   },
-  setup(props, context) {
+});
 
-  function getImage(item) {
-    let imageUrl =
-    "https://images.unsplash.com/photo-1559209172-0ff8f6d49ff7?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=80";
-    if (item.dk_artikel.dest.image) {
-     return Request.downloadUrlFor(item.dk_artikel.dest.image);
-    }
+const cartStore = useCartStore();
 
-    return imageUrl;
+function getImage(item) {
+  let imageUrl =
+    "https://images.unsplash.com/photo-1559209172-0ff8f6d49ff7?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=80";
+  if (item.dk_artikel.dest.image) {
+    return Request.downloadUrlFor(item.dk_artikel.dest.image);
   }
 
-	return {
-      props,
-    getImage
-	}
-  }
+  return imageUrl;
 }
 </script>
 
 <style scoped>
 .card {
   width: 100%;
 
-  &::part(header){
+  &::part(header) {
     padding: var(--sl-spacing-medium) 0;
-   }
+  }
 
-  &::part(body){
+  &::part(body) {
     padding: var(--sl-spacing-medium) 0;
-   }
+  }
 
-  &::part(footer){
+  &::part(footer) {
     padding: var(--sl-spacing-medium) 0;
-   }
+  }
 
-  &:hover{
-    .add-to-cart-btn{
+  &:hover {
+    .add-to-cart-btn {
       opacity: 1;
     }
 
-    .card-headline{
-      color: var(--sl-color-primary-500)
+    .card-headline {
+      color: var(--sl-color-primary-500);
     }
 
-    .card-image{
+    .card-image {
       transform: scale(1.02);
     }
   }
 }
 
-.card-footer{
-    display: flex;
-    flex-direction: row;
-    align-items: center;
-    width: 100%;
+.card-footer {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  width: 100%;
 }
 
-.add-to-cart-btn{
-  transition: all ease .3s;
+.add-to-cart-btn {
+  transition: all ease 0.3s;
   margin-right: var(--sl-spacing-medium);
   opacity: 0;
 }
 
-.add-to-favourites-btn{
+.add-to-favourites-btn {
   margin-left: auto;
 }
 
-
 .card-image {
   aspect-ratio: 1;
   object-fit: cover;
-  transition: all ease .3s;
+  transition: all ease 0.3s;
 }
 
-.card-headline{
+.card-headline {
   font-size: 1.1em;
   font-weight: bold;
   color: var(--ignt-basic-color-text);
   margin-bottom: var(--sl-spacing-2x-small);
-  transition: all ease .3s;
+  transition: all ease 0.3s;
 }
 
-.card-subline{
+.card-subline {
   color: var(--ignt-basic-color-text);
   margin-bottom: var(--sl-spacing-2x-small);
 }
 
-.price{
+.price {
   font-size: 1.1em;
   font-weight: bold;
   color: var(--ignt-basic-color-text);

diff --git a/source/src/stores/cart.js b/source/src/stores/cart.js
@@ -37,6 +37,8 @@ export const useCartStore = defineStore("cartstore", () => {
       article_key: articleKey,
       parent_cart_key: cartKey,
     });
+
+    console.log("addToCart", resp);
   }
 
   async function getArticleView(articleKey, cartKey) {