cleanup
This commit is contained in:
@@ -1,106 +1,117 @@
|
||||
<template>
|
||||
<SMPage :page-error="pageError" permission="admin/events">
|
||||
<SMRow>
|
||||
<SMDialog :loading="formLoading">
|
||||
<h1>{{ page_title }}</h1>
|
||||
<SMForm :model-value="form" @submit="handleSubmit">
|
||||
<SMRow>
|
||||
<SMColumn><SMInput control="title" /></SMColumn>
|
||||
</SMRow>
|
||||
<SMRow>
|
||||
<SMColumn>
|
||||
<SMInput
|
||||
control="location"
|
||||
:options="{
|
||||
online: 'Online',
|
||||
physical: 'Physical',
|
||||
}" />
|
||||
</SMColumn>
|
||||
<SMColumn
|
||||
><SMInput
|
||||
v-if="form.location.value !== 'online'"
|
||||
control="address"
|
||||
/></SMColumn>
|
||||
</SMRow>
|
||||
<SMRow>
|
||||
<SMColumn>
|
||||
<SMDatepicker
|
||||
control="start_at"
|
||||
label="Start Date/Time"></SMDatepicker>
|
||||
</SMColumn>
|
||||
<SMColumn>
|
||||
<SMDatepicker
|
||||
control="end_at"
|
||||
label="End Date/Time"></SMDatepicker>
|
||||
</SMColumn>
|
||||
</SMRow>
|
||||
<SMRow>
|
||||
<SMColumn>
|
||||
<SMDatepicker
|
||||
control="publish_at"
|
||||
label="Publish Date/Time"></SMDatepicker>
|
||||
</SMColumn>
|
||||
<SMColumn>
|
||||
<SMInput
|
||||
control="status"
|
||||
:options="{
|
||||
draft: 'Draft',
|
||||
soon: 'Opening Soon',
|
||||
open: 'Open',
|
||||
closed: 'Closed',
|
||||
cancelled: 'Cancelled',
|
||||
}" />
|
||||
</SMColumn>
|
||||
</SMRow>
|
||||
<SMRow>
|
||||
<SMColumn>
|
||||
<SMInput
|
||||
control="registration_type"
|
||||
label="Registration"
|
||||
:options="{
|
||||
none: 'None',
|
||||
email: 'Email',
|
||||
link: 'Link',
|
||||
}" />
|
||||
</SMColumn>
|
||||
<SMColumn>
|
||||
<SMInput
|
||||
v-if="registration_data?.visible"
|
||||
control="registration_data"
|
||||
:label="registration_data?.title"
|
||||
:type="registration_data?.type" />
|
||||
</SMColumn>
|
||||
</SMRow>
|
||||
<SMRow>
|
||||
<SMColumn>
|
||||
<SMInput
|
||||
control="hero"
|
||||
type="media"
|
||||
label="Hero image" />
|
||||
</SMColumn>
|
||||
</SMRow>
|
||||
<SMRow>
|
||||
<SMColumn>
|
||||
<SMEditor
|
||||
v-model:srcContent="form.content.value"
|
||||
:mime-types="[
|
||||
'image/png',
|
||||
'image/jpeg',
|
||||
'image/gif',
|
||||
]"
|
||||
@trix-attachment-add="attachmentAdd" />
|
||||
</SMColumn>
|
||||
</SMRow>
|
||||
<SMRow>
|
||||
<SMFormFooter>
|
||||
<template #right>
|
||||
<SMButton type="submit" label="Save" />
|
||||
</template>
|
||||
</SMFormFooter>
|
||||
</SMRow>
|
||||
</SMForm>
|
||||
</SMDialog>
|
||||
</SMRow>
|
||||
<SMPage
|
||||
:page-error="pageError"
|
||||
permission="admin/events"
|
||||
class="sm-page-event-edit">
|
||||
<template #container>
|
||||
<h1>{{ page_title }}</h1>
|
||||
<SMForm :model-value="form" @submit="handleSubmit">
|
||||
<SMRow>
|
||||
<SMColumn><SMInput control="title" /></SMColumn>
|
||||
</SMRow>
|
||||
<SMRow>
|
||||
<SMColumn>
|
||||
<SMInput
|
||||
control="location"
|
||||
type="select"
|
||||
:options="{
|
||||
online: 'Online',
|
||||
physical: 'Physical',
|
||||
}" />
|
||||
</SMColumn>
|
||||
<SMColumn
|
||||
><SMInput
|
||||
v-if="form.controls.location.value !== 'online'"
|
||||
control="address"
|
||||
/></SMColumn>
|
||||
</SMRow>
|
||||
<SMRow>
|
||||
<SMColumn>
|
||||
<SMInput
|
||||
type="datetime"
|
||||
control="start_at"
|
||||
label="Start Date/Time" />
|
||||
</SMColumn>
|
||||
<SMColumn>
|
||||
<SMInput
|
||||
type="datetime"
|
||||
control="end_at"
|
||||
label="End Date/Time" />
|
||||
</SMColumn>
|
||||
</SMRow>
|
||||
<SMRow>
|
||||
<SMColumn>
|
||||
<SMInput
|
||||
type="datetime"
|
||||
control="publish_at"
|
||||
label="Publish Date/Time" />
|
||||
</SMColumn>
|
||||
<SMColumn>
|
||||
<SMInput
|
||||
type="select"
|
||||
control="status"
|
||||
:options="{
|
||||
draft: 'Draft',
|
||||
soon: 'Opening Soon',
|
||||
open: 'Open',
|
||||
closed: 'Closed',
|
||||
cancelled: 'Cancelled',
|
||||
}" />
|
||||
</SMColumn>
|
||||
</SMRow>
|
||||
<SMRow>
|
||||
<SMColumn>
|
||||
<SMInput
|
||||
type="select"
|
||||
control="registration_type"
|
||||
label="Registration"
|
||||
:options="{
|
||||
none: 'None',
|
||||
email: 'Email',
|
||||
link: 'Link',
|
||||
}" />
|
||||
</SMColumn>
|
||||
<SMColumn>
|
||||
<SMInput
|
||||
v-if="registration_data?.visible"
|
||||
control="registration_data"
|
||||
:label="registration_data?.title"
|
||||
:type="registration_data?.type" />
|
||||
</SMColumn>
|
||||
</SMRow>
|
||||
<SMRow>
|
||||
<SMColumn>
|
||||
<SMInput
|
||||
control="hero"
|
||||
type="media"
|
||||
label="Hero image" />
|
||||
</SMColumn>
|
||||
</SMRow>
|
||||
<SMRow>
|
||||
<SMColumn>
|
||||
<SMEditor
|
||||
:model-value="form.controls.content.value"
|
||||
:mime-types="[
|
||||
'image/png',
|
||||
'image/jpeg',
|
||||
'image/gif',
|
||||
]" />
|
||||
</SMColumn>
|
||||
</SMRow>
|
||||
<SMRow>
|
||||
<SMColumn>
|
||||
<SMInputAttachments :model-value="attachments" />
|
||||
</SMColumn>
|
||||
</SMRow>
|
||||
<SMRow>
|
||||
<SMFormFooter>
|
||||
<template #right>
|
||||
<SMButton type="submit" label="Save" />
|
||||
</template>
|
||||
</SMFormFooter>
|
||||
</SMRow>
|
||||
</SMForm>
|
||||
</template>
|
||||
</SMPage>
|
||||
</template>
|
||||
|
||||
@@ -108,14 +119,12 @@
|
||||
import { computed, reactive, ref } from "vue";
|
||||
import { useRoute } from "vue-router";
|
||||
import SMButton from "../../components/SMButton.vue";
|
||||
import SMDatepicker from "../../components/SMDatePicker.vue";
|
||||
import SMDialog from "../../components/SMDialog.vue";
|
||||
import SMEditor from "../../components/SMEditor.vue";
|
||||
import SMFormFooter from "../../components/SMFormFooter.vue";
|
||||
import SMInput from "../../components/SMInput.vue";
|
||||
import { api } from "../../helpers/api";
|
||||
import { SMDate } from "../../helpers/datetime";
|
||||
import { FormControl } from "../../helpers/form";
|
||||
import { Form, FormControl } from "../../helpers/form";
|
||||
import {
|
||||
And,
|
||||
Custom,
|
||||
@@ -125,12 +134,13 @@ import {
|
||||
Required,
|
||||
Url,
|
||||
} from "../../helpers/validate";
|
||||
|
||||
import SMInputAttachments from "../../components/SMInputAttachments.vue";
|
||||
import SMForm from "../../components/SMForm.vue";
|
||||
|
||||
const route = useRoute();
|
||||
const page_title = route.params.id ? "Edit Event" : "Create New Event";
|
||||
const pageError = ref(200);
|
||||
const attachments = ref([]);
|
||||
|
||||
const address_data = computed(() => {
|
||||
let data = {
|
||||
@@ -138,9 +148,9 @@ const address_data = computed(() => {
|
||||
required: false,
|
||||
};
|
||||
|
||||
if (form?.location.value === "online") {
|
||||
if (form?.controls.location.value === "online") {
|
||||
data.required = false;
|
||||
} else if (form?.location.value === "physical") {
|
||||
} else if (form?.controls.location.value === "physical") {
|
||||
data.title = "Address";
|
||||
data.required = true;
|
||||
}
|
||||
@@ -155,11 +165,11 @@ const registration_data = computed(() => {
|
||||
type: "text",
|
||||
};
|
||||
|
||||
if (form?.registration_type.value === "email") {
|
||||
if (form?.controls.registration_type.value === "email") {
|
||||
data.visible = true;
|
||||
data.title = "Registration email";
|
||||
data.type = "email";
|
||||
} else if (form?.registration_type.value === "link") {
|
||||
} else if (form?.controls.registration_type.value === "link") {
|
||||
data.visible = true;
|
||||
data.title = "Registration URL";
|
||||
data.type = "url";
|
||||
@@ -174,7 +184,7 @@ const form = reactive(
|
||||
location: FormControl("online"),
|
||||
address: FormControl(
|
||||
"",
|
||||
Custom((value) => {
|
||||
Custom(async (value) => {
|
||||
return address_data?.value.required && value.length == 0
|
||||
? "A venue address is required"
|
||||
: false;
|
||||
@@ -187,7 +197,7 @@ const form = reactive(
|
||||
Required(),
|
||||
DateTime({
|
||||
after: (v) => {
|
||||
return form.start_at.value;
|
||||
return form.controls.start_at.value;
|
||||
},
|
||||
invalidAfterMessage:
|
||||
"The ending date/time must be after the starting date/time.",
|
||||
@@ -199,16 +209,16 @@ const form = reactive(
|
||||
registration_type: FormControl("none"),
|
||||
registration_data: FormControl(
|
||||
"",
|
||||
Custom((v) => {
|
||||
Custom(async (v) => {
|
||||
let validationResult = {
|
||||
valid: true,
|
||||
invalidMessages: [""],
|
||||
};
|
||||
|
||||
if (registration_data.value.type == "email") {
|
||||
validationResult = Email().validate(v);
|
||||
validationResult = await Email().validate(v);
|
||||
} else if (registration_data.value.type == "url") {
|
||||
validationResult = Url().validate(v);
|
||||
validationResult = await Url().validate(v);
|
||||
}
|
||||
|
||||
if (!validationResult.valid) {
|
||||
@@ -233,30 +243,35 @@ const loadData = async () => {
|
||||
throw new Error("The server is currently not available");
|
||||
}
|
||||
|
||||
form.title.value = res.data.event.title;
|
||||
form.location.value = res.data.event.location;
|
||||
form.address.value = res.data.event.address
|
||||
form.controls.title.value = res.data.event.title;
|
||||
form.controls.location.value = res.data.event.location;
|
||||
form.controls.address.value = res.data.event.address
|
||||
? res.data.event.address
|
||||
: "";
|
||||
form.start_at.value = new SMDate(res.data.event.start_at, {
|
||||
form.controls.start_at.value = new SMDate(res.data.event.start_at, {
|
||||
format: "ymd",
|
||||
utc: true,
|
||||
}).format("yyyy/MM/dd HH:mm:ss");
|
||||
form.end_at.value = new SMDate(res.data.event.end_at, {
|
||||
form.controls.end_at.value = new SMDate(res.data.event.end_at, {
|
||||
format: "ymd",
|
||||
utc: true,
|
||||
}).format("yyyy/MM/dd HH:mm:ss");
|
||||
form.status.value = res.data.event.status;
|
||||
form.publish_at.value = new SMDate(res.data.event.publish_at, {
|
||||
format: "ymd",
|
||||
utc: true,
|
||||
}).format("yyyy/MM/dd HH:mm:ss");
|
||||
form.registration_type.value = res.data.event.registration_type;
|
||||
form.registration_data.value = res.data.event.registration_data;
|
||||
form.content.value = res.data.event.content
|
||||
form.controls.status.value = res.data.event.status;
|
||||
form.controls.publish_at.value = new SMDate(
|
||||
res.data.event.publish_at,
|
||||
{
|
||||
format: "ymd",
|
||||
utc: true,
|
||||
}
|
||||
).format("yyyy/MM/dd HH:mm:ss");
|
||||
form.controls.registration_type.value =
|
||||
res.data.event.registration_type;
|
||||
form.controls.registration_data.value =
|
||||
res.data.event.registration_data;
|
||||
form.controls.content.value = res.data.event.content
|
||||
? res.data.event.content
|
||||
: "";
|
||||
form.hero.value = res.data.event.hero;
|
||||
form.controls.hero.value = res.data.event.hero;
|
||||
} catch (err) {
|
||||
pageError.value = err.response.status;
|
||||
}
|
||||
@@ -268,28 +283,26 @@ const loadData = async () => {
|
||||
const handleSubmit = async () => {
|
||||
try {
|
||||
let data = {
|
||||
title: form.title.value,
|
||||
location: form.location.value,
|
||||
address: form.address.value,
|
||||
start_at: new SMDate(form.start_at.value, { format: "dmy" }).format(
|
||||
"yyyy/MM/dd HH:mm:ss",
|
||||
{ utc: true }
|
||||
),
|
||||
end_at: new SMDate(form.end_at.value, { format: "dmy" }).format(
|
||||
"yyyy/MM/dd HH:mm:ss",
|
||||
{ utc: true }
|
||||
),
|
||||
status: form.status.value,
|
||||
title: form.controls.title.value,
|
||||
location: form.controls.location.value,
|
||||
address: form.controls.address.value,
|
||||
start_at: new SMDate(form.controls.start_at.value, {
|
||||
format: "dmy",
|
||||
}).format("yyyy/MM/dd HH:mm:ss", { utc: true }),
|
||||
end_at: new SMDate(form.controls.end_at.value, {
|
||||
format: "dmy",
|
||||
}).format("yyyy/MM/dd HH:mm:ss", { utc: true }),
|
||||
status: form.controls.status.value,
|
||||
publish_at:
|
||||
form.publish_at.value == ""
|
||||
form.controls.publish_at.value == ""
|
||||
? ""
|
||||
: new SMDate(form.publish_at.value, {
|
||||
: new SMDate(form.controls.publish_at.value, {
|
||||
format: "dmy",
|
||||
}).format("yyyy/MM/dd HH:mm:ss", { utc: true }),
|
||||
registration_type: form.registration_type.value,
|
||||
registration_data: form.registration_data.value,
|
||||
content: form.content.value,
|
||||
hero: form.hero.value,
|
||||
registration_type: form.controls.registration_type.value,
|
||||
registration_data: form.controls.registration_data.value,
|
||||
content: form.controls.content.value,
|
||||
hero: form.controls.hero.value,
|
||||
};
|
||||
|
||||
if (route.params.id) {
|
||||
@@ -316,46 +329,11 @@ const handleSubmit = async () => {
|
||||
});
|
||||
};
|
||||
|
||||
const createStorageKey = (file) => {
|
||||
var date = new Date();
|
||||
var day = date.toISOString().slice(0, 10);
|
||||
var name = date.getTime() + "-" + file.name;
|
||||
return ["tmp", day, name].join("/");
|
||||
};
|
||||
|
||||
const attachmentAdd = async (event) => {
|
||||
if (event.attachment.file) {
|
||||
const key = createStorageKey(event.attachment.file);
|
||||
|
||||
var fileFormData = new FormData();
|
||||
fileFormData.append("key", key);
|
||||
fileFormData.append("Content-Type", event.attachment.file.type);
|
||||
fileFormData.append("file", event.attachment.file);
|
||||
|
||||
try {
|
||||
let res = await axios.post("media", fileFormData, {
|
||||
headers: {
|
||||
"Content-Type": "multipart/form-data",
|
||||
},
|
||||
onUploadProgress: (progressEvent) =>
|
||||
event.attachment.setUploadProgress(
|
||||
(progressEvent.loaded * progressEvent.total) / 100
|
||||
),
|
||||
});
|
||||
|
||||
event.attachment.setAttributes({
|
||||
url: res.data.media.url,
|
||||
href: res.data.media.url,
|
||||
});
|
||||
} catch (err) {
|
||||
event.preventDefault();
|
||||
alert(
|
||||
err.response?.data?.message ||
|
||||
"An unexpected server error occurred"
|
||||
);
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
loadData();
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.sm-page-event-edit {
|
||||
background-color: #f8f8f8;
|
||||
}
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user