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

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>

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

@@ -0,0 +1,71 @@
+<template>
+  <sl-input
+    ref="stringBone"
+    :placeholder="boneState.bonestructure.descr"
+    :disabled="boneState.readonly"
+    :value="Utils.unescape(value)"
+    :required="boneState.bonestructure.required"
+    @sl-change="changeEvent"
+    @keyup="changeEvent"
+  ></sl-input>
+</template>
+
+<script lang="ts">
+//@ts-nocheck
+import { reactive, defineComponent, onMounted, inject, computed, watchEffect, ref } from "vue"
+import { useTimeoutFn } from "@vueuse/core"
+import Utils from "@viur/vue-utils//bones/utils"
+
+export default defineComponent({
+  inheritAttrs: false,
+  props: {
+    name: String,
+    value: [Object, String, Number, Boolean, Array],
+    index: Number,
+    lang: String,
+    autofocus: Boolean
+  },
+  components: {},
+  emits: ["change"],
+  setup(props, context) {
+    const boneState = inject("boneState")
+    const state = reactive({
+      value: computed(() => props.value)
+    })
+
+    const stringBone = ref(null)
+
+    function changeEvent(event) {
+      context.emit("change", props.name, event.target.value, props.lang, props.index)
+    }
+
+    watchEffect(() => {
+      if (props.autofocus) {
+        if (stringBone.value && stringBone.value !== null && stringBone !== null) {
+          const { start } = useTimeoutFn(() => {
+            stringBone.value.focus()
+          }, 600)
+
+          start()
+        }
+      }
+    })
+
+    onMounted(() => {
+      context.emit("change", props.name, props.value, props.lang, props.index) //init
+    })
+
+    return {
+      state,
+      Utils,
+      boneState,
+      changeEvent,
+      stringBone
+    }
+  }
+})
+</script>
+
+<style scoped>
+
+</style>

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

@@ -0,0 +1,126 @@
+<template>
+  <div class="vi-shop-cart-form-wrap" v-if="Object.keys(formState.structure).length > 0">
+    <slot
+      boneName="salutation"
+      :widget="CustomSelectBone"
+      label="hide"
+    >
+    </slot>
+
+    <slot boneName="firstname"
+        :widget="CustomStringBone"
+        label="hide">
+    </slot>
+
+    <slot boneName="lastname"
+          :widget="CustomStringBone"
+          label="hide">
+    </slot>
+
+    <slot boneName="street_name"
+          :widget="CustomStringBone"
+          label="hide">
+    </slot>
+
+    <slot boneName="street_number"
+          :widget="CustomStringBone"
+          label="hide">
+    </slot>
+
+    <slot
+        boneName="zip_code"
+        :widget="CustomStringBone"
+        placeholder="PLZ"
+        label="hide"
+    >
+    </slot>
+
+    <slot boneName="city"
+          :widget="CustomStringBone"
+          label="hide">
+    </slot>
+
+
+  <slot boneName="country"
+        :widget="CustomSelectBone"
+        label="hide">
+  </slot>
+
+  <!--<slot boneName="address_type"
+        :widget="CustomSelectBone"
+        label="hide">
+  </slot>-->
+
+  <slot
+    boneName="is_default"
+    :widget="CustomBooleanBone"
+    label="hide"
+  >
+  </slot>
+
+
+  </div>
+
+
+</template>
+<script setup>
+import { inject } from "vue";
+import { getBoneWidget } from "@viur/vue-utils/bones/edit";
+import CustomBooleanBone from "./CustomBooleanBone.vue";
+import CustomStringBone from "./CustomStringBone.vue";
+import CustomSelectBone from "./CustomSelectBone.vue";
+import booleanBone from '@viur/vue-utils/bones/edit/default/booleanBone.vue';
+
+const formState = inject("formState");
+const formUpdate = inject("formUpdate");
+</script>
+<style scoped>
+
+.vi-shop-cart-form-wrap{
+  display: grid;
+  grid-template-columns: repeat(4, minmax(0, 1fr));
+  gap: var(--sl-spacing-small);
+  margin-bottom: var(--sl-spacing-medium);
+}
+
+:deep(.bone-wrapper){
+  margin: 0;
+}
+
+:deep(.wrapper-bone-firstname){
+  grid-column: 1 / span 2;
+}
+
+:deep(.wrapper-bone-lastname){
+  grid-column: 3 / span 2;
+}
+
+:deep(.wrapper-bone-street_name){
+  grid-column: 1 / span 3;
+}
+
+:deep(.wrapper-bone-street_number){
+  grid-column: 4 / span 1;
+}
+
+:deep(.wrapper-bone-zip_code){
+  grid-column: 1 / span 2;
+}
+
+:deep(.wrapper-bone-city){
+  grid-column: 3 / span 2;
+}
+
+:deep(.wrapper-bone-country){
+  grid-column: 1 / span 4;
+}
+
+:deep(.wrapper-bone-is_default){
+  padding: var(--sl-spacing-x-small) 0;
+  grid-column: 1 / span 4;
+}
+
+
+
+
+</style>

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

@@ -0,0 +1,21 @@
+<template>
+  <sl-select
+    :value="modelValue"
+    @sl-change="emit('update:modelValue', $event.target.value)"
+  >
+    <sl-option
+      v-for="address in addressList"
+      :key="address.key"
+      :value="address.key"
+    >
+      {{ address.street_name }} {{ address.street_number }}
+    </sl-option>
+  </sl-select>
+</template>
+<script setup>
+const props = defineProps({
+  addressList: { type: Array, required: true },
+  modelValue: { type: String },
+});
+const emit = defineEmits(["update:modelValue"]);
+</script>

package/src/components/ui/userdata/multi/ActionBar.vue

@@ -0,0 +1,38 @@
+<template>
+  <div class="viur-shop-form-btn-wrap">
+    <sl-button
+      size="medium"
+      title="Lieferadresse entfernen"
+      @click="removeAddress"
+    >
+      <sl-icon name="x-lg" slot="prefix"></sl-icon>
+    </sl-button>
+    <sl-button size="medium" variant="primary" @click="addAddress">
+      <sl-icon name="plus-lg" slot="prefix"></sl-icon>
+      Lieferadresse hinzufügen
+    </sl-button>
+  </div>
+</template>
+
+<script setup>
+const emit = defineEmits(["onAddressAdd", "onAddressRemove"]);
+function addAddress() {
+  emit("onAddressAdd");
+}
+
+function removeAddress() {
+  emit("onAddressRemove");
+}
+</script>
+
+<style scoped>
+.viur-shop-form-btn-wrap {
+  display: flex;
+  flex-direction: row;
+  flex-wrap: nowrap;
+  justify-content: space-between;
+  width: 100%;
+
+  margin-top: var(--sl-spacing-medium);
+}
+</style>

package/src/components/ui/userdata/multi/CartSelection.vue

@@ -0,0 +1,42 @@
+<template>
+  <sl-select
+    :value="state.selectedCarts"
+    multiple="true"
+    clearable
+    @sl-change="handleSelect"
+    @sl-clear="reset"
+  >
+    <sl-option v-for="cart in carts" :key="cart.key" :value="cart.key">
+       {{ cart.name }}
+    </sl-option>
+  </sl-select>
+</template>
+<script setup>
+import { onBeforeMount, reactive } from "vue";
+
+const props = defineProps({
+  carts: { type: Array, required: true },
+});
+const emit = defineEmits(["cartSelected", "onReset"]);
+
+const state = reactive({
+  selectedCarts: [],
+});
+
+function handleSelect(e) {
+  state.selectedCarts = e.target.value;
+  emit("cartSelected", e.target.value);
+}
+
+function reset() {
+  emit("onReset");
+}
+
+onBeforeMount(() => {
+  props.carts.forEach((cart) => {
+    state.selectedCarts.push(cart.key);
+  });
+  emit("cartSelected", state.selectedCarts);
+});
+</script>
+<style scoped></style>