nuxt-start/pages/rent/preview.vue
2026-01-02 19:19:19 +01:00

119 lines
4.5 KiB
Vue

<template>
<div class="p-3">
<div class="p-card border-t border-t-4 border-primary p-4">
<div class="flex justify-between"><b>Név: </b>{{ user.nev }}</div>
<div class="flex justify-between"><b>E-mail: </b>{{ user.email }}</div>
<div class="flex justify-between"><b>Telefon: </b>{{ user.telefon }}</div>
<div class="flex justify-between"><b>Anyja neve: </b>{{ user.anyja_neve }}</div>
<div class="flex justify-between"><b>Születési hely: </b>{{ user.szuletesi_hely }}</div>
<div class="flex justify-between"><b>Születési idő: </b>{{ user.szuletesi_ido }}</div>
<div class="flex justify-between"><b>Állampolgárság: </b>{{ user.nemzetiseg }}</div>
<div class="text-sm mt-3"><b>Személyi igazolvány / Útlevél száma: </b><br>{{ user.szigszam }}</div>
<div class="text-sm"><b>Jogosítvány száma: </b><br>{{ user.jogositvany_szama }}</div>
<div class="text-sm"><b>Lakcím: </b><br>{{ user.lakcim }}</div>
<div class="text-sm"><b>Tartózkodási cím: </b><br>{{ user.tartozkodasicim }}</div>
<Message v-if="missingFields.length > 0" class="mt-2" severity="error">
<div>Hiányzó adatok:</div>
<ul class="list-disc list-inside">
<li v-for="field in missingFields" :key="field.key">{{ field.label }}</li>
</ul>
</Message>
<Message v-else class="mt-2 text-center" severity="warn">Amennyiben adataidban változás történt, módosítsd a <span class="text-nowrap"><i
class="pi pi-user mx-1"></i> profilodban</span>.</Message>
<div class="text-center">
<Button variant="link" @click="$router.push({ path: '/profile' })">Adatok módosítása</Button>
</div>
</div>
<div class="space-y-4 mt-4">
<div class="p-card border-t border-t-4 border-primary">
<div v-if="rent.jaratszam" class="text-end text-xs pe-3"><span class="">járatszám:</span><b>{{
rent.jaratszam
}}</b></div>
<div class="flex items-baseline flex-row">
<div class="text-center p-2 w-full items-top">
<div class="text-xs">{{ rent.auto_felvetel_datum }}</div>
<div class="text-2xl">{{ rent.auto_felvetel_idopont }}</div>
<div class="text-xs">{{ rent.auto_felvetel_hely?.name }}</div>
</div>
<div class="w-4"></div>
<div class="text-center p-2 w-full">
<div class="text-xs">{{ rent.auto_leadas_datum }}</div>
<div class="text-2xl">{{ rent.auto_leadas_idopont }}</div>
<div class="text-xs">{{ rent.auto_leadas_hely?.name }}</div>
</div>
</div>
</div>
<div class="flex items-start gap-1" v-for="t in config?.rent.confirms">
<Checkbox v-model="confirms" :inputId="`confirm${t.id}`" name="confirms[]" :value="t.id" />
<label :for="`confirm${t.id}`" class="text-sm">{{ t.label }}</label>
</div>
</div>
<div class="py-5">
<Button @click="sendRent()" class="w-full" :disabled="isValid">Foglalás
elküldése</Button>
</div>
</div>
</template>
<script lang="ts" setup>
const { rent, user } = storeToRefs(useAuthStore())
const { config } = storeToRefs(useMyConfigStore())
const { apiRequest } = useApi()
const confirms = ref([])
const requiredFields = [
{ key: 'nev', label: 'Név' },
{ key: 'email', label: 'E-mail' },
{ key: 'telefon', label: 'Telefon' },
{ key: 'anyja_neve', label: 'Anyja neve' },
{ key: 'szuletesi_hely', label: 'Születési hely' },
{ key: 'szuletesi_ido', label: 'Születési idő' },
{ key: 'nemzetiseg', label: 'Állampolgárság' },
{ key: 'szigszam', label: 'Személyi igazolvány / Útlevél száma' },
{ key: 'jogositvany_szama', label: 'Jogosítvány száma' },
{ key: 'lakcim', label: 'Lakcím' },
{ key: 'tartozkodasicim', label: 'Tartózkodási cím' }
]
const missingFields = computed(() => {
return requiredFields.filter(field => !user.value?.[field.key])
})
const isUserDataValid = computed(() => {
return missingFields.value.length === 0
})
definePageMeta({
rentStep: 7,
title: 'Foglalás áttekintése'
})
const isValid = computed(() => {
if (!isUserDataValid.value) return true
if (config.value?.rent.confirms.length > confirms.value?.length) return true
return false
})
async function sendRent(){
console.log(rent.value)
const data = await apiRequest('/rent', {
method: 'POST',
body:{
user:user.value,
rent:rent.value
}
})
if(data?.success){
}
if(data?.error){
}
}
</script>
<style></style>