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

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

@@ -0,0 +1,160 @@
+<template>
+  <sl-spinner v-if="state.isLoading"></sl-spinner>
+  <ViForm
+    ref="addForm"
+    :module="`${cartStore.state.shopModuleName}/address`"
+    action="add"
+    :useCategories="false"
+    :layout="layout ? layout : DefaultLayout"
+    :values="modelValue"
+    :skel="
+      type === 'billing'
+        ? addressStore.state.active.billing
+        : addressStore.state.active.shipping
+    "
+    @change="updateValues"
+  >
+  </ViForm>
+
+  <!-- BUTTON NUR PLATZHALTER FÜR TESTS -->
+  <sl-bar>
+    <div slot="left">
+      <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";
+import { useAddressStore } from "../../../stores/address";
+import { useOrderStore } from "../../../main";
+
+const props = defineProps({
+  layout: { required: false },
+  customer: { type: Object, required: true },
+  type: { type: String, default: "billing" },
+  modelValue: { type: Object },
+});
+
+const emit = defineEmits(["update:modelValue", "addSuccess", "valid"]);
+
+const cartStore = useCartStore();
+const addressStore = useAddressStore();
+const orderStore = useOrderStore();
+
+const addForm = ref(null);
+
+const state = reactive({
+  isLoading: computed(() => (addForm.value ? addForm.value.loading : true)),
+  isSending: false,
+  wasSuccess: false,
+  user: {},
+});
+
+function sendForm() {
+  const isValid = validate(addForm.value.state.skel);
+
+  if (isValid) {
+    state.isSending = true;
+
+    addForm.value.sendData().then(async (resp) => {
+      let data = await resp.json();
+
+      state.isSending = false;
+
+      if (data["action"] === "addSuccess") {
+        addForm.value.state.skel = data.values;
+
+        if (props.type === "billing") {
+          addressStore.state.active.billing = addForm.value.state.skel;
+
+          orderStore.updateParams({
+            billing_address_key: addressStore.state.active.billing.key,
+          });
+
+          if (addressStore.state.clone) {
+            cartStore.update({
+              key: orderStore.state.currentOrder.cart.dest.key,
+              shippingAddress: addressStore.state.active.shipping.key,
+            });
+          }
+        } else {
+          addressStore.state.active.shipping = addForm.value.state.skel;
+
+          cartStore.update({
+            key: orderStore.state.currentOrder.cart.dest.key,
+            shippingAddress: addressStore.state.active.shipping.key,
+          });
+        }
+
+        emit("addSuccess", {
+          show: true,
+          msg: "Erfolg!",
+          variant: "success",
+          icon: "check2-circle",
+        });
+
+        emit("valid", true);
+      } else {
+        emit("valid", false);
+      }
+    });
+  }
+}
+
+// TODO: needs a real validation solution with logics used in backend configuration
+function validate(formData) {
+  const structure = addressStore.state.structure;
+  let total = 0;
+  let valid = 0;
+
+  // TODO: will be deleted when backend address module is set up properly
+  structure.firstname.required = true;
+  structure.lastname.required = true;
+  structure.street_name.required = true;
+  structure.street_number.required = true;
+  structure.zip_code.required = true;
+  structure.city.required = true;
+  structure.country.required = true;
+
+  for (let key of Object.keys(structure)) {
+    if (structure[key].required) {
+      total += 1;
+    }
+  }
+
+  for (let [key, value] of Object.entries(formData)) {
+    if (structure[key].required && value) {
+      valid += 1;
+    }
+  }
+
+  if (valid === total) {
+    return true;
+  }
+
+  return false;
+}
+
+function updateValues() {
+  emit("update:modelValue", addForm.value.state.skel);
+}
+
+onMounted(() => {
+  addressStore.getStructure();
+});
+</script>
+
+<style scoped></style>

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

@@ -0,0 +1,137 @@
+<template>
+  <div class="viur-shop-address-box">
+    <select-address
+      v-if="addressSelection"
+      :address-list="state.addressList"
+      :modelValue="
+        type === 'billing'
+          ? addressStore.state.active.billing.key
+          : addressStore.state.active.shipping.key
+      "
+      @update:modelValue="handleSelection"
+    >
+    </select-address>
+
+    <!-- debugging -->
+    <!-- {{ mode === "billing" ? addressStore.state.activeBillingAddress : "" }} -->
+    <!-- {{ mode === "billing" ? "" : addressStore.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 } from "vue";
+import { useAddressStore } from "../../../stores/address";
+import { useOrderStore } from "../../../stores/order";
+import { useCartStore } from "../../../stores/cart";
+import SelectAddress from "./SelectAddress.vue";
+
+const props = defineProps({
+  type: { type: String, default: "billing" },
+  addressSelection: { type: Boolean, default: false },
+  modelValue: { type: Object },
+});
+
+const emit = defineEmits(["update:modelValue", "valid"]);
+
+const addressStore = useAddressStore();
+const orderStore = useOrderStore();
+const cartStore = useCartStore();
+
+const state = reactive({
+  addressList: computed(() =>
+    props.type === "billing"
+      ? addressStore.getList()
+      : addressStore.getList("shipping"),
+  ),
+  address: computed(() => {
+    return props.type === "billing"
+      ? addressStore.state.active.billing
+      : addressStore.state.active.shipping;
+  }),
+});
+
+function isValid() {
+  if (props.type === "billing") {
+    if (addressStore.state.active.billing.key) {
+      orderStore.updateParams({
+        billing_address_key: addressStore.state.active.billing.key,
+      });
+
+      if (addressStore.state.clone) {
+        cartStore.update({
+          key: orderStore.state.currentOrder
+            ? orderStore.state.currentOrder.cart.dest.key
+            : cartStore.state.basket.key,
+          shippingAddress: addressStore.state.active.shipping.key,
+        });
+      }
+
+      emit("valid", true);
+    } else {
+      emit("valid", false);
+    }
+  } else {
+    if (addressStore.state.active.shipping.key) {
+      cartStore.update({
+        key: orderStore.state.currentOrder.cart.dest.key,
+        shippingAddress: addressStore.state.active.shipping.key,
+      });
+
+      emit("valid", true);
+    } else {
+      emit("valid", false);
+    }
+  }
+}
+
+function handleSelection(e) {
+  let address = state.addressList.filter((address) => address.key === e);
+
+  if (props.type === "billing") {
+    addressStore.state.active.billing = address[0];
+
+    orderStore.updateParams({
+      billing_address_key: addressStore.state.active.billing.key,
+    });
+
+    if (addressStore.state.clone) {
+      cartStore.update({
+        key: orderStore.state.currentOrder.cart.dest.key,
+        shippingAddress: addressStore.state.active.shipping.key,
+      });
+    }
+
+    emit("valid", true);
+  } else {
+    addressStore.state.active.shipping = address[0];
+
+    cartStore.update({
+      key: orderStore.state.currentOrder.cart.dest.key,
+      shippingAddress: addressStore.state.active.shipping.key,
+    });
+
+    emit("valid", true);
+  }
+}
+
+onBeforeMount(() => {
+  isValid();
+});
+</script>
+
+<style scoped>
+.viur-shop-address-box-preview {
+  margin: var(--sl-spacing-medium) 0;
+}
+</style>

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

@@ -0,0 +1,77 @@
+<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") }}
+      </div>
+
+      <slot name="billing-address">
+        <address-box
+          :address-selection="true"
+          :type="'billing'"
+          @valid="emit('valid', $event)"
+        >
+        </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") }}
+      </div>
+
+      <slot name="shipping-address" v-if="customAddress">
+        <address-box
+          :address-selection="customAddress"
+          :type="'shipping'"
+          @valid="emit('valid', $event)"
+        >
+        </address-box>
+      </slot>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { reactive } from "vue";
+import AddressBox from "./AddressBox.vue";
+
+const props = defineProps({
+  customer: { type: Object, required: true },
+  customAddress: { type: Boolean, default: false },
+});
+
+const emit = defineEmits(["valid"]);
+
+const state = reactive({ });
+</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/old/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/old/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/old/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>