@viur/shop-components 0.0.1-dev.3 → 0.0.1-dev.4

package/src/components/order/information/UserInformation.vue

@@ -0,0 +1,332 @@
+<template>
+  <!-- <slot name="form" v-if="mode === 'form'">
+    <form @submit.prevent="sendData">
+      <h2 class="viur-shop-form-headline headline">Nutzterdaten</h2>
+      <div class="viur-shop-form-wrap">
+        <sl-input
+          name="email"
+          v-model="state.formValues['email']"
+          placeholder="E-Mail"
+          class="viur-shop-form-grid-w-4"
+        >
+          <label slot="label">E-Mail*</label>
+        </sl-input>
+        <sl-input
+          name="name"
+          v-model="state.formValues['lastname']"
+          placeholder="Name"
+          class="viur-shop-form-grid-w-2"
+        >
+          <label slot="label">Name*</label>
+        </sl-input>
+        <sl-input
+          name="firstname"
+          v-model="state.formValues['firstname']"
+          placeholder="Vorname"
+          class="viur-shop-form-grid-w-2"
+        >
+          <label slot="label">Vorname*</label>
+        </sl-input>
+      </div>
+      <div class="viur-shop-form-adress-wrapper">
+        <div class="viur-shop-form-adress-column">
+          <h2 class="viur-shop-form-headline headline">Lieferadresse</h2>
+          <div class="viur-shop-form-wrap">
+            <sl-input
+              name="street"
+              v-model="state.formValues['street']"
+              placeholder="Straße"
+              class="viur-shop-form-grid-w-3"
+            >
+              <label slot="label">Strasse *</label>
+            </sl-input>
+            <sl-input
+              name="street"
+              v-model="state.formValues['streetnumber']"
+              placeholder="Hausnummer"
+              type="number"
+            >
+              <label slot="label">Hausnummer *</label>
+            </sl-input>
+            <sl-input
+              name="street"
+              v-model="state.formValues['areacode']"
+              placeholder="Postleitzahl"
+              class="viur-shop-form-grid-w-2"
+              type="number"
+            >
+              <label slot="label">Postleitzahl *</label>
+            </sl-input>
+            <sl-input
+              name="city"
+              v-model="state.formValues['city']"
+              placeholder="Stadt"
+              class="viur-shop-form-grid-w-2"
+            >
+              <label slot="label">Stadt*</label>
+            </sl-input>
+            <sl-input
+              name="province"
+              v-model="state.formValues['province']"
+              placeholder="Bundesland"
+              class="viur-shop-form-grid-w-2"
+            >
+              <label slot="label">Bundesland</label>
+            </sl-input>
+          </div>
+        </div>
+
+        <sl-checkbox @sl-change="onCustomAdressChange" checked>
+          Rechnungsadresse wie Lieferadresse
+        </sl-checkbox>
+
+        <div class="viur-shop-form-adress-column" v-show="state.isCustomAdress">
+          <h2 class="viur-shop-form-headline headline">Rechnungsadresse</h2>
+          <div class="viur-shop-form-wrap">
+            <sl-input
+              name="street"
+              v-model="state.formValues['billing.street']"
+              placeholder="Straße"
+              class="viur-shop-form-grid-w-3"
+            >
+              <label slot="label">Strasse *</label>
+            </sl-input>
+            <sl-input
+              name="street"
+              v-model="state.formValues['billing.streetnumber']"
+              placeholder="Hausnummer"
+              type="number"
+            >
+              <label slot="label">Hausnummer *</label>
+            </sl-input>
+            <sl-input
+              name="city"
+              v-model="state.formValues['billing.areacode']"
+              placeholder="Postleitzahl"
+              type="number"
+              class="viur-shop-form-grid-w-2"
+            >
+              <label slot="label">Postleitzahl *</label>
+            </sl-input>
+            <sl-input
+              name="city"
+              v-model="state.formValues['billing.city']"
+              placeholder="Stadt"
+              class="viur-shop-form-grid-w-2"
+            >
+              <label slot="label">Stadt*</label>
+            </sl-input>
+            <sl-input
+              name="province"
+              v-model="state.formValues['billing.province']"
+              placeholder="Bundesland"
+              class="viur-shop-form-grid-w-2"
+            >
+              <label slot="label">Bundesland</label>
+            </sl-input>
+          </div>
+        </div>
+      </div>
+      <div class="viur-shop-form-footer">
+        <sl-button type="submit"> Zurück </sl-button>
+        <sl-button
+          :disabled="!state.requiredFieldsFilled"
+          type="submit"
+          variant="primary"
+        >
+          Weiter
+        </sl-button>
+      </div>
+    </form>
+  </slot> -->
+  <!-- <div class="viur-shop-form-wrap"> -->
+
+  <div>
+    <h2 class="viur-shop-form-headline headline">Nutzterdaten</h2>
+    <template v-for="item in state.addSkel" :key="item[0]">
+      <bone
+        :is="getBoneWidget(item[1].type)"
+        v-if="item[1].visible && item[1].params.group === 'Customer Info'"
+        :name="item[0]"
+        :structure="structToDict(state.addSkel)"
+        :errors="state.errors[item[0]] ? state.errors[item[0]] : []"
+        :skel="state.formValues"
+        @change="changeEvent(item[0], $event)"
+        class="viur-shop-form-grid-w-2"
+      >
+      </bone>
+    </template>
+  </div>
+  <div>
+    <h2 class="viur-shop-form-headline headline">Lieferadresse</h2>
+    <template v-for="item in state.addSkel" :key="item[0]">
+      <bone
+        :is="getBoneWidget(item[1].type)"
+        v-if="item[1].visible && item[1].params.group === 'Customer Address'"
+        :name="item[0]"
+        :structure="structToDict(state.addSkel)"
+        :errors="state.errors[item[0]] ? state.errors[item[0]] : []"
+        :skel="state.formValues"
+        @change="changeEvent(item[0], $event)"
+      >
+      </bone>
+    </template>
+  </div>
+  <div v-if="state.isCustomAdress">
+    <h2 class="viur-shop-form-headline headline">Rechnungsadresse</h2>
+    <template v-for="item in state.addSkel" :key="item[0]">
+      <bone
+        :is="getBoneWidget(item[1].type)"
+        v-if="item[1].visible && item[1].params.group === 'Customer Address'"
+        :name="item[0]"
+        :structure="structToDict(state.addSkel)"
+        :errors="state.errors[item[0]] ? state.errors[item[0]] : []"
+        :skel="state.formValues"
+        @change="changeEvent(item[0], $event)"
+      >
+      </bone>
+    </template>
+  </div>
+
+  <sl-checkbox @sl-change="onCustomAdressChange" checked>
+    Rechnungsadresse wie Lieferadresse
+  </sl-checkbox>
+
+  <!-- </div> -->
+</template>
+
+<script setup>
+import { getBoneWidget } from "@viur/vue-utils/bones/edit/index";
+
+import { reactive, computed, watch, onBeforeMount } from "vue";
+import { useCartStore } from "../../../stores/cart";
+
+const props = defineProps({
+  mode: { type: String, default: "form" },
+  conditions: { type: Function },
+});
+
+const cartStore = useCartStore();
+
+const state = reactive({
+  formValues: {},
+  requiredFieldsFilled: computed(() => {
+    if (state.isCustomAdress) {
+      return (
+        Object.keys(state.formValues).includes("city") &&
+        Object.keys(state.formValues).includes("street") &&
+        Object.keys(state.formValues).includes("billing.city") &&
+        Object.keys(state.formValues).includes("billing.street") &&
+        Object.keys(state.formValues).includes("email") &&
+        Object.keys(state.formValues).includes("firstname") &&
+        Object.keys(state.formValues).includes("lastname")
+      );
+    }
+    if (!state.isCustomAdress) {
+      return (
+        Object.keys(state.formValues).includes("city") &&
+        Object.keys(state.formValues).includes("street") &&
+        Object.keys(state.formValues).includes("email") &&
+        Object.keys(state.formValues).includes("firstname") &&
+        Object.keys(state.formValues).includes("lastname")
+      );
+    }
+  }),
+  isCustomAdress: false,
+  addSkel: null,
+  errors: {},
+});
+
+// function updateFormValues(e){
+//   state.formValues[e.target.name] = e.target.value
+// }
+
+function sendData(e) {
+  console.log("sende daten...", state.formValues);
+}
+
+function onCustomAdressChange(e) {
+  if (e.target.checked) state.isCustomAdress = false;
+  if (!e.target.checked) state.isCustomAdress = true;
+}
+
+function changeEvent(boneName, ev) {
+  for (const [key, value] of Object.entries(ev.value[0])) {
+    state.formValues[key] = value;
+  }
+}
+
+function structToDict(structure) {
+  let output = {};
+
+  structure.forEach((bone) => {
+    let boneName = bone[0];
+    let boneValues = bone[1];
+
+    output[boneName] = boneValues;
+  });
+
+  return output;
+}
+
+function initBoneNames(structure) {
+  let output = [];
+
+  structure.forEach((bone) => {
+    let boneName = bone[0];
+
+    output.push(boneName);
+  });
+
+  return output;
+}
+
+watch(state.formValues, (newValues) => {
+  Object.entries(newValues).forEach(([k, v]) => {
+    if (v === "") {
+      delete state.formValues[k];
+    }
+  });
+});
+
+onBeforeMount(async () => {
+  await cartStore.getAdressStructure();
+  state.addSkel = cartStore.state.structure.address;
+});
+</script>
+
+<style scoped>
+
+.viur-shop-form-adress-wrapper {
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+  width: 100%;
+  justify-content: space-around;
+  align-items: flex-start;
+}
+
+.viur-shop-form-adress-column {
+  align-self: flex-start;
+  flex-grow: 1;
+}
+
+.viur-shop-form-wrap {
+  display: grid;
+  grid-template-columns: repeat(4, minmax(0, 1fr));
+  gap: 0 var(--sl-spacing-medium);
+  margin: var(--sl-spacing-large) 0;
+}
+
+.viur-shop-form-grid-w-2 {
+  grid-column: span 2;
+}
+
+.viur-shop-form-grid-w-3 {
+  grid-column: span 3;
+}
+
+.viur-shop-form-grid-w-4 {
+  grid-column: span 4;
+}
+</style>

package/src/components/order/information/adress/ShippingAdress.vue

@@ -0,0 +1,143 @@
+<template>
+  <sl-splinner
+    v-if="!cartStore.state.carts[cartStore.state.basket]?.items"
+  ></sl-splinner>
+  <template v-else>
+    <div class="form-wrap">
+      <sl-select
+        v-if="multiAdress"
+        multiple
+        clearable
+        ref="itemSelection"
+        @sl-change="onItemSelect"
+        @sl-clear="onItemReset"
+        :label="'Lieferadresse für: ' + state.selectedItem"
+        class="grid-w-4"
+      >
+        <sl-option
+          v-for="item in cartStore.state.carts[cartStore.state.basket]?.items"
+          :value="item.key"
+        >
+          {{ item.shop_name }}</sl-option
+        >
+      </sl-select>
+      <sl-input
+        name="street"
+        @sl-change="onInput"
+        placeholder="Straße"
+        class="grid-w-3"
+        :disabled="!state.isItemSelected"
+      >
+        <label slot="label">Strasse *</label>
+      </sl-input>
+      <sl-input
+        name="street"
+        @sl-change="onInput"
+        placeholder="Hausnummer"
+        type="number"
+        :disabled="!state.isItemSelected"
+      >
+        <label slot="label">Hausnummer *</label>
+      </sl-input>
+      <sl-input
+        name="street"
+        @sl-change="onInput"
+        placeholder="Postleitzahl"
+        type="number"
+        class="grid-w-2"
+        :disabled="!state.isItemSelected"
+      >
+        <label slot="label">Postleitzahl *</label>
+      </sl-input>
+      <sl-input
+        name="city"
+        @sl-change="onInput"
+        placeholder="Stadt"
+        class="grid-w-2"
+        :disabled="!state.isItemSelected"
+      >
+        <label slot="label">Stadt*</label>
+      </sl-input>
+      <sl-input
+        name="province"
+        @sl-change="onInput"
+        placeholder="Bundesland"
+        class="grid-w-2"
+        :disabled="!state.isItemSelected"
+      >
+        <label slot="label">Bundesland</label>
+      </sl-input>
+    </div>
+  </template>
+</template>
+
+<script setup>
+import { onBeforeMount, reactive, ref } from "vue";
+import { useCartStore } from "../../../../stores/cart";
+
+const props = defineProps({
+  multiAdress: { type: Boolean, default: false },
+  items: { type: Array },
+});
+
+const emit = defineEmits(["adressInput", "itemSelection"]);
+
+const state = reactive({
+  selectedItem: null,
+  isItemSelected: false,
+  items: {},
+});
+
+const itemSelection = ref(null);
+const cartStore = useCartStore();
+
+function onInput(e) {
+  let key = `${[state.selectedItem]}.${[e.target.name]}`;
+  emit("adressInput", {
+    [`${[state.selectedItem]}.${[e.target.name]}`]: e.target.value,
+  });
+}
+
+function onItemSelect(e) {
+  console.log(e.target.value);
+  if (!e.target.value.length) {
+    onItemReset();
+    return;
+  }
+  state.selectedItem = e.target.value;
+  state.isItemSelected = true;
+}
+
+function onItemReset() {
+  console.log("clearing...");
+  state.selectedItem = null;
+  state.isItemSelected = false;
+}
+
+onBeforeMount(() => {
+  console.log(props.items);
+});
+</script>
+
+<style scoped>
+.form-wrap {
+  display: grid;
+  grid-template-columns: repeat(4, minmax(0, 1fr));
+  gap: 0 var(--sl-spacing-medium);
+  margin: var(--sl-spacing-large) 0 var(--sl-spacing-x-large) 0;
+  padding-bottom: var(--sl-spacing-medium);
+  border-bottom: 1px solid var(--sl-color-neutral-400);
+}
+
+.grid-w-2 {
+  grid-column: span 2;
+}
+
+.grid-w-3 {
+  grid-column: span 3;
+}
+
+.grid-w-4 {
+  grid-column: span 4;
+}
+</style>

package/src/components/order/item/ItemCard.vue

@@ -0,0 +1,168 @@
+<template>
+  <sl-card class="viur-shop-item-card-card">
+    <img
+      slot="image"
+      :src="getImage(item)"
+      :alt="item.shop_name"
+      loading="lazy"
+      class="viur-shop-item-card-image"
+    />
+    <h3 class="viur-shop-item-card-headline">{{ item.shop_name }}</h3>
+    <h4 class="viur-shop-item-card-subline">B 21 x H 6,5 x T 19 cm</h4>
+    <div class="viur-shop-item-card-price">{{ item.shop_price_retail }} €</div>
+    <div class="viur-shop-item-card-footer" slot="footer">
+      <!-- <sl-button-group label="Amount">
+              <sl-tooltip content="Remove">
+                <sl-icon-button
+                  variant="primary"
+                  name="cart-dash"
+                  label="Remove Amount"
+                  style="font-size: 2em"
+                >
+                </sl-icon-button>
+              </sl-tooltip>
+              <sl-tooltip content="Plus">
+                <sl-icon-button
+                  variant="primary"
+                  name="cart-plus"
+                  label="Add Amount"
+                  style="font-size: 2em"
+                >
+                </sl-icon-button>
+              </sl-tooltip>
+              <sl-tooltip content="Add to cart">
+                <sl-icon-button
+                  variant="primary"
+                  name="cart-check"
+                  label="Add to cart"
+                  style="font-size: 2em"
+                  @click="
+                    cartStore.addToCart(item.key, cartStore.state.currentCart)
+                  "
+                >
+                </sl-icon-button>
+              </sl-tooltip>
+            </sl-button-group> -->
+      <sl-button
+        size="small"
+        class="viur-shop-item-card-add-to-cart-btn"
+        variant="primary"
+        title="Add to cart"
+        @click.stop="cartStore.addToCart(item.key, cartStore.state.basket)"
+      >
+        <sl-icon name="bag-plus" slot="prefix"></sl-icon>
+
+        In den Warenkorb
+      </sl-button>
+
+      <sl-button
+        size="small"
+        outline
+        class="viur-shop-item-card-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 setup>
+import { Request } from "@viur/vue-utils";
+import { useCartStore } from "../../../stores/cart";
+
+const props = defineProps({
+  item: {
+    type: Object,
+    required: true,
+  },
+});
+
+const cartStore = useCartStore();
+
+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 imageUrl;
+}
+</script>
+
+<style scoped>
+.viur-shop-item-card-card {
+  width: 100%;
+
+  &::part(header) {
+    padding: var(--sl-spacing-medium) 0;
+  }
+
+  &::part(body) {
+    padding: var(--sl-spacing-medium) 0;
+  }
+
+  &::part(footer) {
+    padding: var(--sl-spacing-medium) 0;
+  }
+
+  &:hover {
+    .viur-shop-item-card-add-to-cart-btn {
+      opacity: 1;
+    }
+
+    .viur-shop-item-card-headline {
+      color: var(--sl-color-primary-500);
+    }
+
+    .viur-shop-item-card-image {
+      transform: scale(1.02);
+    }
+  }
+}
+
+.viur-shop-item-card-footer {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  width: 100%;
+}
+
+.viur-shop-item-card-add-to-cart-btn {
+  transition: all ease 0.3s;
+  margin-right: var(--sl-spacing-medium);
+  opacity: 0;
+}
+
+.viur-shop-item-card-add-to-favourites-btn {
+  margin-left: auto;
+}
+
+.viur-shop-item-card-image {
+  aspect-ratio: 1;
+  object-fit: cover;
+  transition: all ease 0.3s;
+}
+
+.viur-shop-item-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 0.3s;
+}
+
+.viur-shop-item-card-subline {
+  color: var(--ignt-basic-color-text);
+  margin-bottom: var(--sl-spacing-2x-small);
+}
+
+.viur-shop-item-card-price {
+  font-size: 1.1em;
+  font-weight: bold;
+  color: var(--ignt-basic-color-text);
+  margin-left: auto;
+}
+</style>