Skip to content

Commit

Permalink
@wip: dynamic adress and userinfo input rendering
Browse files Browse the repository at this point in the history
  • Loading branch information
@KadirBalku
KadirBalku committed Apr 24, 2024
1 parent f27b970 commit fc1d39d
Show file tree
Hide file tree
Showing 3 changed files with 154 additions and 150 deletions.
2 changes: 2 additions & 0 deletions .gitignore
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,3 +3,5 @@ node_modules
.env
*.env
.env.*

*_backup.vue
298 changes: 151 additions & 147 deletions source/src/components/order/information/UserInformation.vue
View file
Original file line number Diff line number Diff line change
@@ -1,158 +1,156 @@
<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>
<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>
<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 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>
<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>
</template>

<script setup>
import { reactive, computed, watch } from "vue";
import { reactive, computed, watch, onBeforeMount } from "vue";
import { useCartStore } from "../../../stores/cart";
const props = defineProps({
mode: { type: String, default: "form" },
});
const cartStore = useCartStore();
const state = reactive({
formValues: {},
requiredFieldsFilled: computed(() => {
Expand All @@ -178,6 +176,7 @@ const state = reactive({
}
}),
isCustomAdress: false,
addSkel: null,
});
// function updateFormValues(e){
Expand All @@ -200,6 +199,11 @@ watch(state.formValues, (newValues) => {
}
});
});
onBeforeMount(async () => {
await cartStore.getAdressStructure();
state.addSkel = cartStore.state.structure.address;
});
</script>

<style scoped>
Expand All @@ -223,22 +227,22 @@ watch(state.formValues, (newValues) => {
flex-grow: 1;
}
.viur-shop-form-wrap{
.viur-shop-form-wrap {
display: grid;
grid-template-columns: repeat(4, minmax(0 , 1fr));
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{
.viur-shop-form-grid-w-2 {
grid-column: span 2;
}
.viur-shop-form-grid-w-3{
.viur-shop-form-grid-w-3 {
grid-column: span 3;
}
.viur-shop-form-grid-w-4{
.viur-shop-form-grid-w-4 {
grid-column: span 4;
}
</style>
4 changes: 1 addition & 3 deletions source/src/stores/cart.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -88,9 +88,7 @@ export const useCartStore = defineStore("cartstore", () => {
async function getAdressStructure() {
Request.getStructure("shop.address").then(async (resp) => {
let data = await resp.json();
data.editSkel.forEach((bone, index) => {
state.structure.address[index + " " + bone[0]] = bone[1];
});
state.structure.address = data.addSkel;

console.log("adress add", state.structure.address);
});
Expand Down

0 comments on commit fc1d39d

Please sign in to comment.