@viur/shop-components 0.0.1-dev.6 → 0.0.1-dev.60

package/src/components/cart/CartLeafModel.vue

@@ -0,0 +1,304 @@
+<template>
+  <!-- Debugging -->
+  <!-- <pre>{{ modelValue.leaf.article.dest.key }}</pre>
+
+  <pre>{{ modelValue }}</pre> -->
+
+  <sl-dialog no-header ref="confirm" @sl-hide="resetItem">
+    <p>Möchten Sie den Artikel wirklich aus dem Warenkorb entfernen?</p>
+    <sl-bar>
+      <sl-button
+        slot="left"
+        variant="danger"
+        @click="confirm.hide()"
+        size="medium"
+      >
+        Abbrechen
+      </sl-button>
+      <sl-button
+        slot="right"
+        variant="success"
+        @click="onConfirm"
+        size="medium"
+      >
+        Aus Warenkorb entfernen
+      </sl-button>
+    </sl-bar>
+  </sl-dialog>
+
+  <div v-if="!modelValue"></div>
+  <sl-card horizontal class="viur-shop-cart-leaf" v-else>
+    <img
+      class="viur-shop-cart-leaf-image"
+      slot="image"
+      :src="
+        getImage(
+          modelValue.article.dest.shop_image
+            ? modelValue.article.dest.shop_image
+            : undefined,
+        )
+      "
+    />
+    <h4
+      class="viur-shop-cart-leaf-headline headline"
+      v-html="modelValue.article.dest.shop_name"
+    ></h4>
+    <h5 class="viur-shop-cart-leaf-artno">
+      {{ modelValue.article.dest.shop_art_no_or_gtin }}
+    </h5>
+    <div
+      class="viur-shop-cart-leaf-description"
+      v-html="modelValue.article.dest.shop_description"
+    ></div>
+    <div class="viur-shop-cart-leaf-quantity">
+      <sl-input
+        class="viur-shop-cart-leaf-value viur-shop-cart-leaf-value--quantity"
+        type="number"
+        label="Anzahl"
+        placeholder="Number"
+        min="0"
+        :value="modelValue.quantity"
+        @sl-change="updateItem"
+      >
+      </sl-input>
+    </div>
+    <div class="viur-shop-cart-leaf-unitprice">
+      <div class="viur-shop-cart-leaf-label">Stückpreis</div>
+      <sl-format-number
+        class="viur-shop-cart-leaf-value viur-shop-cart-leaf-value--unitprice"
+        lang="de"
+        type="currency"
+        currency="EUR"
+        :value="modelValue.shop_price_retail"
+      >
+      </sl-format-number>
+    </div>
+
+    <div class="viur-shop-cart-leaf-actions">
+      <!-- <sl-button
+        size="small"
+        outline
+        class="viur-shop-cart-leaf-add-to-favourites-btn"
+        variant="primary"
+        title="Add to favourites"
+      >
+        <sl-icon name="heart" slot="prefix"></sl-icon>
+      </sl-button> -->
+      <sl-button
+        size="small"
+        outline
+        class="viur-shop-cart-leaf-delete-btn"
+        variant="primary"
+        title="Remove from cart"
+        @click="confirm.show()"
+      >
+        <sl-icon name="trash" slot="prefix"></sl-icon>
+      </sl-button>
+    </div>
+
+    <div class="viur-shop-cart-leaf-price">
+      <div class="viur-shop-cart-leaf-label">Gesamtpreis</div>
+      <sl-format-number
+        class="viur-shop-cart-leaf-value viur-shop-cart-leaf-value--price"
+        lang="de"
+        type="currency"
+        currency="EUR"
+        :value="modelValue.shop_price_retail * modelValue.quantity"
+      >
+      </sl-format-number>
+    </div>
+    <!-- TODO: Some customer needs an availability indicator ("in stock" etc.) here -->
+  </sl-card>
+</template>
+
+<script setup>
+import { computed, onBeforeMount, reactive, ref } from "vue";
+import { Request } from "@viur/vue-utils";
+import { useCartStore } from "../../stores/cart";
+// import ShopPriceFormatter from "../ui/generic/ShopPriceFormatter.vue";
+
+const props = defineProps(["modelValue"]);
+const emit = defineEmits(["update:modelValue"]);
+
+const cartStore = useCartStore();
+const confirm = ref(null);
+const isConfirmed = ref(false);
+
+function getImage(image) {
+  if (image !== undefined) return Request.downloadUrlFor(image);
+
+  return cartStore.state.placeholder;
+}
+
+function updateItem(ev) {
+  let newEvent = { ...props.modelValue };
+
+  newEvent.quantity = ev.target.value;
+
+  console.log("update", newEvent.quantity);
+  if (newEvent.quantity < 1) {
+    confirm.value.show();
+  } else {
+    emit("update:modelValue", newEvent);
+  }
+}
+
+function removeItem() {
+  let newEvent = { ...props.modelValue };
+  newEvent.quantity = 0;
+  emit("update:modelValue", newEvent);
+}
+
+function resetItem() {
+  if (!isConfirmed.value) {
+    let newEvent = { ...props.modelValue };
+    newEvent.quantity = 1;
+    emit("update:modelValue", newEvent);
+  }
+}
+
+async function onConfirm() {
+  isConfirmed.value = true;
+  confirm.value.hide();
+  removeItem();
+}
+</script>
+
+<style scoped>
+@layer foundation.shop {
+  .viur-shop-cart-leaf {
+    --shop-leaf-label-color: var(--ignt-color-primary);
+    --shop-leaf-label-font-weight: 600;
+    --shop-leaf-label-font-size: 1em;
+    --shop-leaf-price-font-size: 1em;
+    --shop-leaf-headline-font-size: 1.3em;
+
+    margin-bottom: var(--ignt-spacing-x-large);
+
+    &::part(base) {
+      display: flex;
+      position: relative;
+    }
+
+    &::part(header) {
+      border-bottom: none;
+      padding-top: 0;
+      padding-right: 0;
+    }
+
+    &::part(image) {
+      aspect-ratio: 1;
+    }
+
+    &::part(body) {
+      display: grid;
+      grid-template-columns: repeat(5, minmax(0, 1fr));
+      gap: var(--sl-spacing-medium);
+      padding: var(--sl-spacing-large);
+      height: 100%;
+    }
+
+    &::part(group) {
+      padding: 0;
+    }
+
+    @media (max-width: 600px) {
+      &::part(body) {
+        grid-template-columns: repeat(2, minmax(0, 1fr));
+        gap: var(--sl-spacing-medium);
+        padding: var(--sl-spacing-large);
+        height: 100%;
+      }
+
+      &::part(image) {
+        border-radius: var(--border-radius);
+        align-self: baseline;
+      }
+    }
+  }
+
+  .viur-shop-cart-leaf-image {
+    aspect-ratio: 1;
+  }
+
+  .viur-shop-cart-leaf-headline {
+    grid-column: 1 / span 4;
+    order: -2;
+    margin: 0;
+    font-size: var(--shop-leaf-headline-font-size);
+
+    @media (max-width: 600px) {
+      grid-column: 1 / span 2;
+    }
+  }
+
+  .viur-shop-cart-leaf-artno {
+    grid-column: 1 / span 5;
+    margin: 0;
+
+    @media (max-width: 600px) {
+      grid-column: 1 / span 2;
+    }
+  }
+
+  .viur-shop-cart-leaf-actions {
+    display: flex;
+    justify-content: start;
+    gap: var(--sl-spacing-x-small);
+
+    @media (min-width: 600px) {
+      grid-column: 5 / span 1;
+      order: -1;
+      justify-content: end;
+      align-items: end;
+    }
+  }
+
+  .viur-shop-cart-leaf-description {
+    grid-column: 1 / span 5;
+    margin-bottom: var(--ignt-spacing-small);
+    display: -webkit-box;
+    -webkit-line-clamp: 3;
+    -webkit-box-orient: vertical;
+    overflow: hidden;
+
+    &:deep(*) {
+      margin: 0;
+    }
+
+    @media (max-width: 600px) {
+      grid-column: span 2;
+    }
+
+    @media (max-width: 500px) {
+      display: none;
+    }
+  }
+
+  .viur-shop-cart-leaf-price {
+    align-self: flex-end;
+    text-align: right;
+    font-size: var(--shop-leaf-price-font-size);
+  }
+
+  .viur-shop-cart-leaf-quantity {
+    align-self: flex-end;
+  }
+
+  .viur-shop-cart-leaf-unitprice {
+    align-self: flex-end;
+
+    @media (max-width: 600px) {
+      text-align: right;
+    }
+  }
+
+  .viur-shop-cart-leaf-label,
+  .viur-shop-cart-leaf-value--quantity::part(form-control-label) {
+    color: var(--shop-leaf-label-color);
+    font-weight: var(--shop-leaf-label-font-weight);
+    font-size: var(--shop-leaf-label-font-size);
+    margin-bottom: var(--ignt-spacing-x-small);
+  }
+}
+</style>

package/src/components/cart/CartNode.vue

@@ -0,0 +1,25 @@
+<template>
+  <sl-details v-if="node.children" :summary="node.name">
+    <slot></slot>
+  </sl-details>
+
+  <h1 class="viur-shop-cart-headline" v-else>
+    {{ node.name }}
+  </h1>
+</template>
+
+<script setup>
+import { computed, reactive } from "vue";
+import CartLeaf from "./CartLeaf.vue";
+const props = defineProps({
+  node: { type: Object, required: true },
+});
+
+const state = reactive({});
+</script>
+
+<style scoped>
+.viur-shop-cart-headline {
+  font-size: 2rem;
+}
+</style>

package/src/components/cart/CartTree.vue

@@ -0,0 +1,54 @@
+<template>
+  <CartTreeWrapper :tree="state.tree" @update:modelValue="handleChange">
+  </CartTreeWrapper>
+</template>
+<script setup>
+import { reactive, watch, computed } from "vue";
+import CartTreeWrapper from "./CartTreeWrapper.vue";
+
+const props = defineProps({
+  modelValue: { type: Array, required: true },
+});
+
+const emits = defineEmits(["update:modelValue"]);
+
+const arrayToTree = (arr, parent = null) =>
+  arr
+    .filter((item) => item.parententry === parent)
+    .map((child) => ({ ...child, children: arrayToTree(arr, child.key) }));
+
+const state = reactive({
+  loading: computed(() => {
+    return props.modelValue ? false : true;
+  }),
+  tree: computed(() => {
+    // ! NOTE: it is very important to unpack the prop (copy the array) at this point to avoid prop mutation!!!
+    let temp = props.modelValue ? arrayToTree([...props.modelValue]) : [""];
+
+    return temp[0];
+  }),
+});
+
+function handleChange(e) {
+  // ! NOTE: it is very important to unpack the prop (copy the array) at this point to avoid prop mutation!!!
+  let temp = [...props.modelValue];
+
+  temp.forEach((item, index) => {
+    if (item.key === e.key) {
+      if (e.quantity < 1) {
+        temp.splice(index, 1);
+      } else {
+        temp[index] = e;
+      }
+    }
+  });
+
+  emits("update:modelValue", temp);
+}
+
+// watch(() => props.modelValue,
+//  (oldVal, newVal) => {
+//   if(oldVal === )
+//  }
+//  );
+</script>

package/src/components/cart/CartTreeWrapper.vue

@@ -0,0 +1,73 @@
+<template>
+  <div v-if="state.loading">keine Einträge im Warenkorb</div>
+
+  <template v-else-if="tree.is_root_node">
+    <template v-for="child in tree.children" :key="child.key">
+      <CartLeafModel
+        :modelValue="child"
+        v-if="child.skel_type === 'leaf'"
+        @update:modelValue="handleChange"
+      />
+
+      <CartNode
+        :node="child"
+        v-else-if="child.children.length && child?.skel_type === 'node'"
+      >
+        <template v-for="item in child.children" :key="item.key">
+          <CartLeafModel
+            :modelValue="item"
+            v-if="item.skel_type === 'leaf'"
+            @update:modelValue="handleChange"
+          >
+          </CartLeafModel>
+          <CartTreeWrapper
+            :tree="item"
+            @update:modelValue="handleChange"
+            v-else
+          >
+          </CartTreeWrapper>
+        </template>
+      </CartNode>
+    </template>
+  </template>
+
+  <CartNode :node="tree" v-else-if="tree.skel_type === 'node'">
+    <template v-for="item in tree.children" :key="item.key">
+      <CartLeafModel
+        :modelValue="item"
+        @update:modelValue="handleChange"
+        v-if="item.skel_type === 'leaf'"
+      >
+      </CartLeafModel>
+      <CartTreeWrapper :tree="item" @update:modelValue="handleChange" v-else>
+      </CartTreeWrapper>
+    </template>
+  </CartNode>
+</template>
+
+<script setup>
+import { reactive, watch, computed } from "vue";
+import CartLeafModel from "./CartLeafModel.vue";
+import CartNode from "./CartNode.vue";
+
+const props = defineProps({
+  tree: { type: Object },
+});
+
+const emits = defineEmits(["update:modelValue"]);
+
+const state = reactive({
+  loading: computed(() => {
+    if (props.tree) {
+      return false;
+    }
+    return true;
+  }),
+});
+
+function handleChange(e) {
+  emits("update:modelValue", e);
+}
+
+watch(() => {});
+</script>