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

package/src/components/ShopUserData.vue

@@ -0,0 +1,232 @@
+<template>
+  <shop-alert
+    v-if="state.alert.show"
+    :variant="state.alert.variant"
+    :iconName="state.alert.iconName"
+    @on-hide="resetAlert()"
+  >
+    <template #alertMsg> {{ state.alert.msg }} </template>
+  </shop-alert>
+
+  <div class="viur-shop-multi-address-wrap">
+    <div class="viur-shop-multi-adress-box" v-for="n in state.amount" :key="n">
+      <BaseLayout
+        :customer="state.customer"
+        :custom-address="!state.customAddress['grp' + n]"
+        @edit-billing="state.editBilling = $event"
+        @edit-shipping="state.editShipping = $event"
+      >
+        <template #cart-selection v-if="multiMode">
+          <CartSelection
+            :carts="reduce(carts, n)"
+            @cart-selected="onCartSelect($event, n)"
+          >
+          </CartSelection>
+        </template>
+        <template #mode-switch>
+          <sl-checkbox
+            :checked="true"
+            :ref="
+              (el) => {
+                if (el === null) return;
+
+                state.customAddress['grp' + n] = el.checked;
+              }
+            "
+            @sl-change="onCustomBillingAddress($event, n)"
+            class="viur-shop-form-bill-check"
+            v-html="$t('viur.shop.userdata.shipping_to_billaddress')"
+          >
+          </sl-checkbox>
+        </template>
+        <template
+          #shipping-address
+          v-if="
+            (state.editShipping && !state.customAddress['grp' + n]) ||
+            (!state.hasShippingAddress && !state.customAddress['grp' + n]) ||
+            cartStore.state.billingAddressList.length === 1
+          "
+        >
+          <UserDataForm
+            :customer="state.customer"
+            v-model="cartStore.state.activeShippingAddress"
+            @add-success="state.alert = $event"
+            :layout="layout"
+          >
+          </UserDataForm>
+        </template>
+        <template
+          #billing-address
+          v-if="
+            state.editBilling ||
+            !state.hasBillingAddress ||
+            cartStore.state.billingAddressList.length === 1
+          "
+        >
+          <UserDataForm
+            :customer="state.customer"
+            :mode="'billing'"
+            v-model="cartStore.state.activeBillingAddress"
+            @add-success="state.alert = $event"
+            :layout="layout"
+          >
+          </UserDataForm>
+        </template>
+      </BaseLayout>
+    </div>
+
+    <ActionBar
+      @on-address-add="addAddress"
+      @on-address-remove="removeAddress"
+      v-if="multiMode"
+    >
+    </ActionBar>
+  </div>
+</template>
+
+<script setup>
+import { ref, reactive, computed, onBeforeMount, watch } from "vue";
+import UserDataForm from "./ui/userdata/AddForm.vue";
+import CartSelection from "./ui/userdata/multi/CartSelection.vue";
+import ActionBar from "./ui/userdata/multi/ActionBar.vue";
+import ShopAlert from "./ui/generic/alerts/ShopAlert.vue";
+import { useCartStore } from "../stores/cart";
+import BaseLayout from "./ui/userdata/BaseLayout.vue";
+
+const props = defineProps({
+  multiMode: {
+    type: Boolean,
+    default: true,
+  },
+  layout: {
+    default: null,
+  },
+});
+
+const cartStore = useCartStore();
+
+const state = reactive({
+  selection: {},
+  customer: computed(() => cartStore.state.customer),
+  alert: {
+    show: false,
+    msg: "",
+    variant: "",
+    iconName: "",
+  },
+  amount: 1,
+  maxAmount: computed(() => {
+    return state.remainingCarts.length;
+  }),
+  remainingCarts: computed(() => {
+    const r = carts.value.filter((cart) => {
+      return !selection().includes(cart.key);
+    });
+    return r;
+  }),
+  customAddress: {},
+  hasBillingAddress: computed(() => cartStore.state.billingAddressList.length),
+  hasShippingAddress: computed(
+    () => cartStore.state.shippingAddressList.length,
+  ),
+  editBilling: false,
+  editShipping: false,
+  billingData: {},
+  shippingData: {},
+});
+
+const carts = ref(
+  cartStore.state.childrenByNode?.[cartStore.state.basketRootNode.key]
+    ? cartStore.state.childrenByNode?.[
+        cartStore.state.basketRootNode.key
+      ].filter((cart) => cart.skel_type === "node")
+    : [
+        { name: "Warenkorb1", key: "213123123123" },
+        { name: "Warenkorb2", key: "2131231232131233123" },
+      ],
+);
+
+function selection() {
+  let result = [];
+  Object.values(state.selection).forEach((selection) => {
+    result.push(...selection);
+  });
+  return result;
+}
+
+function onCartSelect(e, grp) {
+  state.selection["grp" + grp] = e;
+}
+
+function resetAlert() {
+  state.alert.show = false;
+  state.alert.msg = "";
+  state.alert.variant = "";
+  state.alert.iconName = "";
+}
+
+function addAddress() {
+  if (state.maxAmount > 0) state.amount += 1;
+  else {
+    state.alert.variant = "danger";
+    state.alert.show = true;
+    state.alert.iconName = "exclamation-octagon";
+    state.alert.msg =
+      "Keine weiteren Warenkörbe zum zuweisen von Adressen vorhanden.";
+  }
+}
+
+function removeAddress() {
+  if (state.amount === 1) {
+    state.alert.variant = "danger";
+    state.alert.show = true;
+    state.alert.iconName = "exclamation-octagon";
+    state.alert.msg = "Mindestens eine Adresse muss angegeben werden.";
+    return;
+  }
+  if (Object.keys(state.selection).includes("grp" + state.amount)) {
+    delete state.selection["grp" + state.amount];
+  }
+  if (Object.keys(state.customAddress).includes("grp" + state.amount)) {
+    delete state.customAddress["grp" + state.amount];
+  }
+  state.amount -= 1;
+}
+
+function reduce(arr, grp) {
+  let result = [];
+  let temp = [];
+
+  Object.entries(state.selection).forEach(([key, value]) => {
+    if (key === "grp" + grp) return;
+    temp.push(...value);
+  });
+
+  result = arr.filter((item) => !temp.includes(item.key));
+  return result;
+}
+
+function onCustomBillingAddress(e, grp) {
+  state.customAddress["grp" + grp] = e.target.checked;
+  cartStore.state.cloneBilling = e.target.checked;
+}
+
+onBeforeMount(() => {});
+</script>
+
+<style scoped>
+.viur-shop-form-bill-check {
+  margin: var(--sl-spacing-medium) 0;
+}
+
+.viur-shop-custom-billing-address-wrap {
+  display: flex;
+  flex-direction: row;
+}
+.viur-shop-cart-address-wrap {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: var(--sl-spacing-x-large);
+  margin-bottom: var(--sl-spacing-x-large);
+}
+</style>

package/src/components/cart/CartLeaf.vue

@@ -0,0 +1,277 @@
+<template>
+  <!-- Debugging -->
+  <!-- <pre>{{ state.leaf.article.dest.key }}</pre>
+  <pre>{{ state.leaf.article.dest.article }}</pre> -->
+
+
+  <sl-card horizontal class="viur-shop-cart-leaf">
+    <img
+      class="viur-shop-cart-leaf-image"
+      slot="image"
+      :src="
+        getImage(
+          state.leaf.article.dest.shop_image
+            ? state.leaf.article.dest.shop_image
+            : undefined,
+        )
+      "
+    />
+    <h4
+      class="viur-shop-cart-leaf-headline headline"
+      v-html="state.leaf.article.dest.shop_name"
+    ></h4>
+    <h5 class="viur-shop-cart-leaf-artno">
+      {{ state.leaf.article.dest.shop_art_no_or_gtin }}
+    </h5>
+    <div
+      class="viur-shop-cart-leaf-description"
+      v-html="state.leaf.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"
+        v-model="state.leaf.quantity"
+        @input="
+          updateItem(
+            state.leaf,
+            state.leaf.article.dest.key,
+            node,
+            state.leaf.quantity,
+          )
+        "
+      >
+      </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="leaf.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="default"
+        :title="$t('viur.shop.cart_leaf.delete')"
+        @click="removeItem(state.leaf, state.leaf.article.dest.key, node)"
+      >
+        <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="leaf.shop_price_retail * leaf.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 } from "vue";
+import { Request } from "@viur/vue-utils";
+import ShopPriceFormatter from "../ui/generic/ShopPriceFormatter.vue";
+
+const props = defineProps({
+  leaf: { type: Object, required: true },
+  node: { type: Object, required: true },
+  placeholder: { type: String, required: true },
+});
+
+const emit = defineEmits(["updateItem", "removeItem"]);
+
+const state = reactive({
+  leaf: {},
+});
+
+function getImage(image) {
+  if (image !== undefined) return Request.downloadUrlFor(image);
+
+  return props.placeholder;
+}
+
+function updateItem(item, articleKey, node, quantity) {
+  emit("updateItem", {
+    item: item,
+    articleKey: articleKey,
+    node: node,
+    quantity: quantity,
+  });
+}
+
+function removeItem(item, articleKey, node) {
+  emit("removeItem", { item: item, articleKey: articleKey, node: node });
+}
+
+onBeforeMount(() => {
+  state.leaf = props.leaf;
+});
+</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>