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

package/src/components/ui/stepper/StepperItem.vue

@@ -0,0 +1,39 @@
+<template>
+  <sl-tab-panel class="viur-shop-order-tab-panel" :name="tab">
+    <component
+      :is="tabs[tab].component"
+      v-bind="tabs[tab].props ? tabs[tab].props : ''"
+      @goToStart="goToStart()"
+      @editAddress="goToUserData"
+    >
+    </component>
+  </sl-tab-panel>
+</template>
+
+<script setup>
+const props = defineProps({
+  tab: {
+    type: String,
+    required: true,
+  },
+  tabs: {
+    type: Object,
+    required: true,
+  },
+});
+
+const emit = defineEmits(["goToStart", "editAddress"]);
+
+function goToStart() {
+  emit("goToStart");
+}
+
+function goToUserData(e) {
+  emit("editAddress", e);
+}
+</script>
+
+<style scoped>
+.viur-shop-order-tab-panel {
+}
+</style>

package/src/components/ui/stepper/StepperTab.vue

@@ -0,0 +1,133 @@
+<template>
+  <sl-tab
+    class="viur-shop-order-tab"
+    slot="nav"
+    :panel="tab"
+    :disabled="tabs[tab].disabled"
+  >
+    <div class="viur-shop-order-step">
+      <sl-icon
+        class="viur-shop-order-step-icon"
+        v-if="tabs[tab].icon?.name"
+        :name="tabs[tab].icon.name"
+        :library="tabs[tab].icon.library ? tabs[tab].icon.library : 'default'"
+      >
+      </sl-icon>
+
+      <div class="viur-shop-order-status-text">
+        {{ tabIdx + 1 }}.
+        <span class="viur-shop-order-status-span">{{
+          tabs[tab].displayName
+        }}</span>
+      </div>
+    </div>
+
+    <sl-icon
+      name="chevron-right"
+      class="viur-shop-order-tab-check"
+      v-if="tabIdx < stepperLength - 1"
+    >
+    </sl-icon>
+  </sl-tab>
+</template>
+
+<script setup>
+const props = defineProps({
+  tab: {
+    type: String,
+    required: true,
+  },
+  tabIdx: {
+    type: Number,
+    required: true,
+  },
+  stepperLength: {
+    type: Number,
+    required: true,
+  },
+  tabs: {
+    type: Object,
+    required: true,
+  },
+});
+</script>
+
+<style scoped>
+.viur-shop-order-tab {
+  width: 25%;
+  position: relative;
+
+  &::part(base) {
+    color: var(--shop-tab-color);
+    display: flex;
+    height: 100%;
+  }
+
+  &[aria-selected="true"] {
+    --shop-tab-color: var(--shop-tab-color--active);
+  }
+
+  @media (max-width: 900px) {
+    &::part(base) {
+      height: 100%;
+      padding: var(--sl-spacing-small) var(--sl-spacing-medium);
+    }
+  }
+
+  @media (max-width: 600px) {
+    &[aria-selected="true"] {
+      width: 100%;
+    }
+
+    &:not([aria-selected="true"]) {
+      .viur-shop-order-status-span {
+        display: none;
+      }
+    }
+  }
+}
+
+.viur-shop-order-step {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+
+  &:has(sl-icon) {
+    justify-content: flex-start;
+  }
+
+  sl-icon {
+    font-size: 2.5em;
+    margin-bottom: 15px;
+  }
+
+  @media (max-width: 900px) {
+    justify-content: center;
+
+    sl-icon {
+      display: none;
+    }
+  }
+}
+
+.viur-shop-order-status-text {
+  font-size: 0.8em;
+  color: inherit;
+  text-align: center;
+  white-space: initial;
+}
+
+.viur-shop-order-tab-check {
+  position: absolute;
+  right: -0.5em;
+
+  @media (max-width: 900px) {
+    font-size: 0.7em;
+    right: -0.35em;
+    top: calc(50% - 0.35em);
+  }
+}
+</style>

package/src/components/ui/stepper/StepperTrigger.vue

@@ -0,0 +1,35 @@
+<template>
+  <sl-button type="submit" v-show="index !== 0" @click="prevTab()">
+    Zurück
+    <!-- TODO: $t(i18n referenz) -->
+  </sl-button>
+
+  <sl-button type="submit" variant="primary" @click="nextTab()">
+    Weiter
+    <!-- TODO: $t(i18n referenz) -->
+  </sl-button>
+</template>
+
+<script setup>
+const props = defineProps({
+  index: {
+    type: Number,
+    required: true,
+  },
+});
+const emit = defineEmits({prevTab: null, nextTab: null});
+
+function prevTab() {
+  emit("prevTab");
+}
+
+function nextTab() {
+  emit("nextTab");
+}
+</script>
+
+<style scoped>
+.sticky {
+  position: sticky;
+}
+</style>

package/src/components/ui/userdata/AddForm.vue

@@ -0,0 +1,125 @@
+<template>
+  <sl-spinner v-if="state.isLoading"></sl-spinner>
+  <ViForm
+    ref="addForm"
+    module="shop/address"
+    action="add"
+    :useCategories="false"
+    :layout="layout ? layout : DefaultLayout"
+    :values="modelValue"
+    :skel="
+      mode === 'shipping'
+        ? cartStore.state.activeShippingAddress
+        : cartStore.state.activeBillingAddress
+    "
+    @change="updateValues"
+  >
+  </ViForm>
+
+  <sl-bar>
+    <div slot="left">
+      <!-- BUTTON NUR PLATZHALTER FÜR TESTS -->
+      <sl-button
+        variant="success"
+        @click.stop.prevent="sendForm"
+        :loading="state.isSending"
+      >
+        <sl-icon name="floppy2" slot="prefix"></sl-icon>
+        {{
+          $t("actions.add").charAt(0).toUpperCase() + $t("actions.add").slice(1)
+        }}
+      </sl-button>
+    </div>
+  </sl-bar>
+</template>
+
+<script setup>
+import { reactive, ref, computed, onMounted } from "vue";
+import ViForm from "@viur/vue-utils/forms/ViForm.vue";
+import DefaultLayout from "./DefaultLayout.vue";
+import { useCartStore } from "../../../stores/cart";
+
+const props = defineProps({
+  layout: { required: false },
+  customer: { type: Object, required: true },
+  mode: { type: String, default: "shipping" },
+  modelValue: { type: Object },
+});
+const emit = defineEmits(["update:modelValue", "addSuccess"]);
+const cartStore = useCartStore();
+const addForm = ref(null);
+const state = reactive({
+  isLoading: computed(() => (addForm.value ? addForm.value.loading : true)),
+  isSending: false,
+  wasSuccess: false,
+  user: {},
+  skel: computed(() => {
+    if (props.mode === "shipping") return cartStore.state.activeShippingAddress;
+    else return cartStore.state.activeBillingAddress;
+  }),
+});
+
+function sendForm() {
+  if (props.mode === "shipping") {
+    cartStore.state.activeShippingAddress = addForm.value.state.skel;
+  } else {
+    cartStore.state.activeBillingAddress = addForm.value.state.skel;
+  }
+
+  state.isSending = true;
+  addForm.value.sendData().then(async (resp) => {
+    let data = await resp.json();
+    state.isSending = false;
+    if (data["action"] === "addSuccess") {
+      emit("addSuccess", {
+        show: true,
+        msg: "Erfolg!",
+        variant: "success",
+        icon: "check2-circle",
+      });
+    }
+  });
+}
+
+function setSkelValues(dict = {}) {
+  let structure = cartStore.state.structure.address;
+  let skel = {};
+
+  Object.keys(structure).forEach((boneName) => {
+    if (boneName === "customer") {
+      skel[boneName] = state.user.key;
+      return;
+    }
+    skel[boneName] = null;
+  });
+
+  Object.entries(dict).forEach(([boneName, boneValue]) => {
+    skel[boneName] = boneValue;
+  });
+
+  return skel;
+}
+
+function updateValues() {
+  emit("update:modelValue", addForm.value.state.skel);
+}
+
+// onBeforeMount(() => {
+//   cartStore.getAddressStructure();
+
+//   // state.skel = setSkelValues({
+//   //   address_type: "shipping",
+//   //   customer: props.customer.key,
+//   // });
+// });
+onMounted(() => {
+  cartStore.getAddressStructure();
+  // updateValues();
+  // state.skel = setSkelValues({
+  //   address_type: "shipping",
+  //   customer: props.customer.key,
+  // });
+});
+</script>
+
+<style scoped></style>

package/src/components/ui/userdata/AddressBox.vue

@@ -0,0 +1,117 @@
+<template>
+  <div class="viur-shop-address-box">
+    <select-address
+      v-if="addressSelection"
+      :address-list="state.addressList"
+      v-model="state.activeAddress"
+    >
+    </select-address>
+    {{state.addressList.length}}
+    <br>
+    {{cartStore.state.billingAddressList.length}}
+    <!-- debugging -->
+    <!-- {{ mode === "billing" ? cartStore.state.activeBillingAddress : "" }} -->
+    <!-- {{ mode === "billing" ? "" : cartStore.state.activeShippingAddress }} -->
+    <!-- <pre>{{ customer }}</pre> -->
+    <div class="viur-shop-address-box-preview" v-if="state.address">
+      <span>Ausgewählte Adresse :</span>
+      <br>
+      {{ state.address?.street_name }} {{ state.address?.street_number }}<br />
+      {{ state.address?.zip_code }} {{ state.address?.city }}
+      <br />
+      {{ state.address?.country }}
+      <br />
+    </div>
+  </div>
+</template>
+
+<script setup>
+import {
+  reactive,
+  computed,
+  onBeforeMount,
+  watch,
+  onUpdated,
+  onUnmounted,
+} from "vue";
+import { useCartStore } from "../../../stores/cart";
+import SelectAddress from "./SelectAddress.vue";
+
+const props = defineProps({
+  mode: { type: String, default: "billing" },
+  addressSelection: { type: Boolean, default: false },
+  modelValue: { type: Object },
+});
+
+const emit = defineEmits(["update:modelValue"]);
+
+const cartStore = useCartStore();
+
+const state = reactive({
+  addressList: computed(() =>
+    props.mode === "billing"
+      ? cartStore.state.billingAddressList
+      : cartStore.state.shippingAddressList,
+  ),
+  activeAddress: "",
+  address: computed(() => {
+    if (!state.activeAddress) return {};
+
+    return state.addressList.filter(
+      (address) => address.key === state.activeAddress,
+    )[0];
+  }),
+});
+
+function getDefaultAddress() {
+  if (props.mode === "billing") {
+    state.activeAddress = cartStore.state.activeBillingAddress.key
+      ? cartStore.state.activeBillingAddress.key
+      : "";
+  } else {
+    state.activeAddress = cartStore.state.activeShippingAddress.key
+      ? cartStore.state.activeShippingAddress.key
+      : "";
+  }
+}
+
+watch(
+  () => state.address,
+  (newAddress) => {
+    if (props.mode === "billing") {
+      cartStore.state.activeBillingAddress = newAddress;
+    } else cartStore.state.activeShippingAddress = newAddress;
+  },
+);
+
+watch(
+  () => cartStore.state.activeBillingAddress,
+  (newValue, oldValue) => {
+    state.activeAddress = newValue.key;
+  },
+);
+
+watch(
+  () => cartStore.state.activeShippingAddress,
+  (newValue, oldValue) => {
+    state.activeAddress = newValue.key;
+  },
+);
+onBeforeMount(() => {
+  getDefaultAddress();
+});
+
+onUnmounted(() => {
+  state.activeAddress = "";
+});
+
+onUpdated(() => {
+  getDefaultAddress();
+});
+</script>
+
+<style scoped>
+.viur-shop-address-box-preview{
+  margin: var(--sl-spacing-medium) 0;
+}
+</style>

package/src/components/ui/userdata/BaseLayout.vue

@@ -0,0 +1,94 @@
+<template>
+  <!-- <div style="width: 100%">
+    {{ customer.firstname }} {{ customer.lastname }}<br />
+    Phone: {{ customer.phone }} <br />
+    E-Mail : {{ customer.name }}<br />
+    Debitor: {{ customer.debitornr }}<br />
+  </div> -->
+
+  <slot name="cart-selection"></slot>
+
+  <div class="viur-shop-cart-address-wrap">
+    <div class="viur-shop-cart-address">
+      <div class="viur-shop-cart-address-headline">
+        {{ $t("skeleton.address.address_type.billing") }}
+        <sl-button outline size="small" @click="editBilling">
+          <sl-icon name="pencil" slot="prefix"></sl-icon>
+        </sl-button>
+      </div>
+      <slot name="billing-address">
+        <address-box :address-selection="true" :mode="'billing'"></address-box>
+      </slot>
+    </div>
+    <slot name="mode-switch"></slot>
+    <div class="viur-shop-cart-address" v-if="customAddress">
+      <div class="viur-shop-cart-address-headline">
+        {{ $t("skeleton.address.address_type.shipping") }}
+        <sl-button
+          outline
+          size="small"
+          @click="editShipping"
+          v-if="customAddress"
+        >
+          <sl-icon name="pencil" slot="prefix"></sl-icon>
+        </sl-button>
+      </div>
+      <slot name="shipping-address" v-if="customAddress">
+        <address-box
+          :address-selection="true && customAddress"
+          :mode="'shipping'"
+        ></address-box>
+      </slot>
+      <slot name="shipping-address" v-else>
+        <address-box
+          :address-selection="true && customAddress"
+          :mode="'billing'"
+        >
+        </address-box>
+      </slot>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { reactive } from "vue";
+import { useCartStore } from "../../../stores/cart";
+import AddressBox from "./AddressBox.vue";
+
+const props = defineProps({
+  customer: { type: Object, required: true },
+  customAddress: { type: Boolean, default: false },
+});
+
+const emit = defineEmits(["editBilling", "editShipping"]);
+const state = reactive({ editBilling: false, editShipping: false });
+
+function editBilling() {
+  state.editBilling = !state.editBilling;
+  emit("editBilling", state.editBilling);
+}
+
+function editShipping() {
+  state.editShipping = !state.editShipping;
+  emit("editShipping", state.editShipping);
+}
+</script>
+
+<style scoped>
+.viur-shop-cart-address-wrap {
+  display: flex;
+  flex-direction: column;
+  gap: var(--sl-spacing-x-large);
+  margin-top: var(--sl-spacing-large);
+}
+
+.viur-shop-cart-address-headline {
+  display: flex;
+  flex-direction: row;
+  flex-wrap: nowrap;
+  align-items: center;
+  justify-content: space-between;
+  font-weight: 600;
+  margin-bottom: var(--sl-spacing-medium);
+}
+</style>

package/src/components/ui/userdata/CustomBooleanBone.vue

@@ -0,0 +1,58 @@
+<template>
+  <sl-checkbox
+    class="widget-bone widget-bone-boolean widget-bone-boolean-default"
+    :class="([`widget-bone-boolean-${name}`])"
+    :disabled="boneState.readonly"
+    :checked="state.value"
+    @sl-change="changeEvent"
+  >
+    {{ boneState.bonestructure.descr }}
+  </sl-checkbox>
+</template>
+
+<script lang="ts">
+//@ts-nocheck
+import { reactive, defineComponent, onMounted, inject, computed } from "vue"
+
+export default defineComponent({
+  inheritAttrs: false,
+  props: {
+    name: String,
+    value: [Object, String, Number, Boolean, Array],
+    index: Number,
+    lang: String
+  },
+  components: {},
+  emits: ["change"],
+  setup(props, context) {
+    const boneState = inject("boneState")
+    const state = reactive({
+      value: computed(() => {
+        return ![false, null, undefined, ""].includes(props.value)
+      })
+    })
+
+    function changeEvent(event) {
+      context.emit("change", props.name, event.target.checked, props.lang, props.index)
+    }
+
+    onMounted(() => {
+      let val = props.value
+      if (!val) {
+        val = false
+      }
+      context.emit("change", props.name, val, props.lang, props.index) //init
+    })
+
+    return {
+      state,
+      boneState,
+      changeEvent
+    }
+  }
+})
+</script>
+
+<style scoped>
+
+</style>

package/src/components/ui/userdata/CustomSelectBone.vue

@@ -0,0 +1,91 @@
+<template>
+  <sl-select
+    class="widget-bone widget-bone-select widget-bone-select-default"
+    :class="([`widget-bone-select-${name}`])"
+    :disabled="boneState.readonly"
+    :value="state.value"
+    hoist
+    :multiple="boneState['bonestructure']['multiple']"
+    max-options-visible="0"
+    clearable
+    @sl-change="changeEvent"
+    :placeholder="boneState.bonestructure.descr"
+  >
+    <sl-option
+      v-for="value in convertObjToList()"
+      :key="value[0]"
+      :value="value[0]"
+    >
+      {{ value[1] }}
+    </sl-option>
+  </sl-select>
+</template>
+
+<script lang="ts">
+//@ts-nocheck
+import { reactive, defineComponent, onMounted, inject, computed } from "vue"
+
+export default defineComponent({
+  inheritAttrs: false,
+  props: {
+    name: String,
+    value: null,
+    index: Number,
+    lang: String
+  },
+  components: {},
+  emits: ["change"],
+  setup(props, context) {
+    const boneState = inject("boneState")
+    const state = reactive({
+      value: computed(() => {
+        let val = props.value
+        if (Array.isArray(props.value)) {
+          if (boneState["bonestructure"]["values"] instanceof Array) {
+            val = val.filter((i) => boneState["bonestructure"]["values"].map((i) => i[0].toString()).includes(i))
+          } else
+            val = val.filter((i) =>
+              Object.keys(boneState["bonestructure"]["values"])
+                .map((i) => i.toString())
+                .includes(i)
+            )
+
+          return val.map((i) => i.toString())
+        }
+        return props.value ? props.value.toString() : ""
+      })
+    })
+
+    function convertObjToList() {
+      if (Array.isArray(boneState["bonestructure"]["values"])) {
+        return boneState["bonestructure"]["values"]
+      } else {
+        let objToList = []
+        for (const [key, value] of Object.entries(boneState["bonestructure"]["values"])) {
+          objToList.push([key, value])
+        }
+        return objToList
+      }
+    }
+
+    function changeEvent(event) {
+      context.emit("change", props.name, event.target.value, props.lang, props.index)
+    }
+
+    onMounted(() => {
+      context.emit("change", props.name, state.value, props.lang, props.index) //init
+    })
+
+    return {
+      state,
+      boneState,
+      changeEvent,
+      convertObjToList
+    }
+  }
+})
+</script>
+
+<style scoped>
+
+</style>