forked from Kispi/Core
167 lines
No EOL
4 KiB
Vue
167 lines
No EOL
4 KiB
Vue
<template>
|
|
<AtomModal
|
|
:id="id"
|
|
title="Account hinzufügen"
|
|
>
|
|
<div class="flex flex-col gap-4">
|
|
<h4 class="text-md">Daten</h4>
|
|
<div class="flex gap-4">
|
|
<AtomInput
|
|
v-model="firstName"
|
|
placeholder="Vorname"
|
|
/>
|
|
<AtomInput
|
|
v-model="lastName"
|
|
placeholder="Nachname"
|
|
/>
|
|
</div>
|
|
<AtomInput
|
|
v-model="accountNumber"
|
|
placeholder="Kontonummer"
|
|
type="number"
|
|
/>
|
|
<AtomInput
|
|
v-model="birthday"
|
|
placeholder="Geburtsdatum"
|
|
/>
|
|
<div class="flex gap-4">
|
|
<AtomInput
|
|
v-model="street"
|
|
placeholder="Straße"
|
|
/>
|
|
<AtomInput
|
|
v-model="houseNumber"
|
|
placeholder="Hnr."
|
|
class="w-3/12"
|
|
/>
|
|
</div>
|
|
<div class="flex gap-4">
|
|
<AtomInput
|
|
v-model="zipCode"
|
|
placeholder="Postleitzahl"
|
|
class="w-6/12"
|
|
/>
|
|
<AtomInput
|
|
v-model="city"
|
|
placeholder="Stadt"
|
|
/>
|
|
</div>
|
|
<h4 class="text-md">Kontakt</h4>
|
|
<div
|
|
v-for="index in contactCount"
|
|
class="flex gap-4"
|
|
>
|
|
<AtomSelect
|
|
v-model="contactLabel[index - 1]"
|
|
placeholder="Label"
|
|
:options="['Festnetz', 'Mobil', 'Arbeit']"
|
|
class="w-4/12"
|
|
@change="handleContactChange(index)"
|
|
/>
|
|
<AtomInput
|
|
v-model="contactPhone[index - 1]"
|
|
:disabled="contactLabel.length < index"
|
|
placeholder="Telefonnummer"
|
|
/>
|
|
</div>
|
|
</div>
|
|
<template #action>
|
|
<label
|
|
ref="abortButton"
|
|
:for="id"
|
|
class="btn gap-2"
|
|
>
|
|
<XCircleIcon class="w-6 h-6" />
|
|
Abbrechen
|
|
</label>
|
|
<button
|
|
class="btn gap-2"
|
|
@click="handleSubmit"
|
|
>
|
|
<CheckCircleIcon class="w-6 h-6" />
|
|
Speichern
|
|
</button>
|
|
</template>
|
|
</AtomModal>
|
|
</template>
|
|
|
|
<script lang="ts" setup>
|
|
import { ref } from 'vue';
|
|
import { DataService } from '../services/data.service';
|
|
import { CheckCircleIcon, XCircleIcon } from '@heroicons/vue/outline';
|
|
import AtomInput from '../atoms/AtomInput.vue';
|
|
import AtomModal from '../atoms/AtomModal.vue';
|
|
import AtomSelect from '../atoms/AtomSelect.vue';
|
|
|
|
const abortButton = ref();
|
|
const firstName = ref('');
|
|
const lastName = ref('');
|
|
const accountNumber = ref('');
|
|
const birthday = ref('');
|
|
const street = ref('');
|
|
const houseNumber = ref('');
|
|
const zipCode = ref('');
|
|
const city = ref('');
|
|
const contactLabel = ref([]);
|
|
const contactPhone = ref([]);
|
|
const contactCount = ref(1);
|
|
|
|
defineProps({
|
|
id: {
|
|
type: String,
|
|
required: true,
|
|
},
|
|
});
|
|
|
|
async function handleSubmit() {
|
|
try {
|
|
const account = await DataService.addAccount(
|
|
{
|
|
accountNumber: accountNumber.value,
|
|
firstName: firstName.value,
|
|
lastName: lastName.value,
|
|
birthday: birthday.value,
|
|
address: `${street.value} ${houseNumber.value}, ${zipCode.value} ${city.value}`,
|
|
contact: contactLabel.value.map((label, index) => JSON.stringify({
|
|
label,
|
|
phone: contactPhone.value[index],
|
|
})),
|
|
},
|
|
);
|
|
emit('submit', account);
|
|
firstName.value = '';
|
|
lastName.value = '';
|
|
accountNumber.value = '';
|
|
birthday.value = '';
|
|
street.value = '';
|
|
houseNumber.value = '';
|
|
zipCode.value = '';
|
|
city.value = '';
|
|
contactLabel.value = [];
|
|
contactPhone.value = [];
|
|
contactCount.value = 1;
|
|
abortButton.value.click();
|
|
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
|
} catch (error: any) {
|
|
if(error.message == 'Account already exists') {
|
|
alert('Konto existiert bereits');
|
|
} else {
|
|
alert('Fehler beim Speichern');
|
|
// eslint-disable-next-line no-console
|
|
console.error(error);
|
|
}
|
|
}
|
|
}
|
|
|
|
function handleContactChange(index: number) {
|
|
if(index === contactCount.value) {
|
|
contactCount.value++;
|
|
}
|
|
}
|
|
|
|
const emit = defineEmits(['submit']);
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
|
|
</style> |