75 lines
1.5 KiB
Vue
75 lines
1.5 KiB
Vue
<template>
|
|
<Form
|
|
:fields="formFields"
|
|
:validation-rules="validationRules"
|
|
@submit="handleSubmit"
|
|
class="event-popover"
|
|
/>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import { type Location, type Event } from "../../types"
|
|
|
|
const formFields = [
|
|
{
|
|
id: "title",
|
|
label: $t("event.form.title.label"),
|
|
type: "text",
|
|
defaultValue: "",
|
|
attrs: {
|
|
placeholder: $t("event.form.title.placeholder"),
|
|
},
|
|
},
|
|
{
|
|
id: "location",
|
|
label: $t("event.form.location.label"),
|
|
type: "text",
|
|
defaultValue: "",
|
|
attrs: {
|
|
placeholder: $t("event.form.location.placeholder"),
|
|
},
|
|
},
|
|
]
|
|
|
|
const validationRules = {
|
|
title: {
|
|
required: true,
|
|
minLength: 3,
|
|
},
|
|
location: {
|
|
required: false,
|
|
},
|
|
}
|
|
|
|
const voyageStore = useVoyageStore()
|
|
|
|
const handleSubmit = async (formData: Record<string, string>) => {
|
|
console.log("Form submitted", formData)
|
|
|
|
const event: Omit<Event, "id"> = {
|
|
title: formData.title,
|
|
}
|
|
|
|
if (formData.location) {
|
|
const location: Omit<Location, "id"> = {
|
|
name: formData.location,
|
|
}
|
|
const serverLocation = await voyageStore.addLocation(location)
|
|
console.log("loc", serverLocation)
|
|
event.location_id = Number(serverLocation.id)
|
|
}
|
|
console.log("send event", event)
|
|
voyageStore.addEvent(event)
|
|
}
|
|
</script>
|
|
|
|
<style>
|
|
.event-popover {
|
|
border: 1px solid var(--neutral-20);
|
|
box-shadow: var(--shadow-3);
|
|
border-radius: 12px;
|
|
padding: 1rem;
|
|
padding-top: 0px;
|
|
background-color: var(--app-background);
|
|
}
|
|
</style>
|