79 lines
2.0 KiB
Vue
79 lines
2.0 KiB
Vue
<script setup>
|
|
|
|
import {onMounted, reactive} from "vue";
|
|
import {setDefaultData} from "src/composables/form/formHandling";
|
|
import FormWrapper from "components/FormWrapper.vue";
|
|
import {commonProps} from "src/composables/inputs";
|
|
import {isRequired} from "src/composables/form/rules";
|
|
import RichTextEditor from "components/inputs/RichTextEditor.vue";
|
|
import DatetimePicker from "components/inputs/DatetimePicker.vue";
|
|
import {FORMAT_DATE, FORMAT_DATETIME_LONG} from "src/composables/datetimeUtils";
|
|
import SlugInput from "components/inputs/SlugInput.vue";
|
|
import {storeToRefs} from "pinia";
|
|
import {useLoggedUserStore} from "stores/LoggedUser";
|
|
|
|
const props = defineProps({
|
|
event: {
|
|
type: Object,
|
|
required: false,
|
|
},
|
|
isRequestPending: {
|
|
type: Boolean,
|
|
required: false,
|
|
default: false,
|
|
}
|
|
})
|
|
|
|
const formData = reactive({
|
|
name: "",
|
|
urlSlug: "",
|
|
isPublic: false,
|
|
description: "",
|
|
dateFrom: null,
|
|
dateTo: null,
|
|
});
|
|
|
|
const rules = {
|
|
name: [isRequired]
|
|
}
|
|
|
|
onMounted(() => {
|
|
if (props.event) {
|
|
setDefaultData(formData, props.event);
|
|
}
|
|
})
|
|
|
|
const loggedUser = storeToRefs(useLoggedUserStore()).user;
|
|
</script>
|
|
|
|
<template>
|
|
<FormWrapper v-model="formData" :is-request-pending="props.isRequestPending">
|
|
<q-input
|
|
v-bind="commonProps"
|
|
label="Jméno"
|
|
:rules="rules.name"
|
|
v-model="formData.name"
|
|
/>
|
|
<SlugInput
|
|
v-if="formData.isPublic"
|
|
v-bind="commonProps"
|
|
v-model="formData.urlSlug"
|
|
label="URL"
|
|
:url="`/${loggedUser?.publicUsername}/udalosti/`"
|
|
:slug-source="formData.name"
|
|
/>
|
|
<q-checkbox v-model="formData.isPublic" label="Veřejný?"/>
|
|
|
|
<div class="row">
|
|
<div class="col q-pr-sm">
|
|
<DatetimePicker :mask="FORMAT_DATE" v-model="formData.dateFrom" label="Od"/>
|
|
</div>
|
|
<div class="col q-pl-sm">
|
|
<DatetimePicker :mask="FORMAT_DATE" v-model="formData.dateTo" label="Do"/>
|
|
</div>
|
|
</div>
|
|
|
|
<RichTextEditor v-model="formData.description" v-bind="commonProps" label="Popis letu, poznámky, ..."/>
|
|
</FormWrapper>
|
|
</template>
|