STEMMechanics/Website
1
0
Fork 0
Code Issues 4 Pull Requests 3 Actions Packages Projects Releases 3 Wiki Activity

updated to new dependencies

Browse Source
This commit is contained in:
James Collins
2023-02-17 14:44:11 +10:00
parent c18d7c56c1
commit cfa84faab4
1 changed files with 143 additions and 225 deletions
Download Patch File Download Diff File Expand all files Collapse all files

368
resources/js/views/dashboard/EventEdit.vue
View File

@@ -1,82 +1,48 @@
<template> <template>
<SMContainer :page-error="pageError" permission="admin/events"> <SMPage :page-error="pageError" permission="admin/events">
<SMRow> <SMRow>
<SMDialog :loading="formLoading"> <SMDialog :loading="formLoading">
<h1>{{ page_title }}</h1> <h1>{{ page_title }}</h1>
<SMMessage <SMForm v-model="form" @submit="handleSubmit">
v-if="formMessage.message"
:icon="formMessage.icon"
:type="formMessage.type"
:message="formMessage.message" />
<form @submit.prevent="submit">
<SMRow> <SMRow>
<SMColumn <SMColumn><SMInput control="title" /></SMColumn>
><SMInput
v-model="formData.title.value"
label="Title"
required
:error="formData.title.error"
@blur="fieldValidate(formData.title)"
/></SMColumn>
</SMRow> </SMRow>
<SMRow> <SMRow>
<SMColumn> <SMColumn>
<SMSelect <SMSelect
v-model="formData.location.value" control="location"
label="Location"
:options="{ :options="{
online: 'Online', online: 'Online',
physical: 'Physical', physical: 'Physical',
}" }" />
@change="fieldValidate(formData.address)" />
</SMColumn> </SMColumn>
<SMColumn <SMColumn
><SMInput ><SMInput
v-if="formData.location.value !== 'online'" v-if="form.location.value !== 'online'"
v-model="formData.address.value" control="address"
:label="address_data?.title"
type="text"
:required="address_data?.required"
:error="formData.address.error"
@blur="fieldValidate(formData.address)"
/></SMColumn> /></SMColumn>
</SMRow> </SMRow>
<SMRow> <SMRow>
<SMColumn> <SMColumn>
<SMDatepicker <SMDatepicker
v-model="formData.start_at.value" control="start_at"
label="Start Date/Time" label="Start Date/Time"></SMDatepicker>
:error="formData.start_at.error"
required
@blur="
fieldValidate(formData.start_at)
"></SMDatepicker>
</SMColumn> </SMColumn>
<SMColumn> <SMColumn>
<SMDatepicker <SMDatepicker
v-model="formData.end_at.value" control="end_at"
label="End Date/Time" label="End Date/Time"></SMDatepicker>
:error="formData.end_at.error"
required
@blur="
fieldValidate(formData.end_at)
"></SMDatepicker>
</SMColumn> </SMColumn>
</SMRow> </SMRow>
<SMRow> <SMRow>
<SMColumn> <SMColumn>
<SMDatepicker <SMDatepicker
v-model="formData.publish_at.value" control="publish_at"
label="Publish Date/Time" label="Publish Date/Time"></SMDatepicker>
:error="formData.publish_at.error"
@blur="
fieldValidate(formData.publish_at)
"></SMDatepicker>
</SMColumn> </SMColumn>
<SMColumn> <SMColumn>
<SMSelect <SMSelect
v-model="formData.status.value" control="status"
label="Status"
:options="{ :options="{
draft: 'Draft', draft: 'Draft',
open: 'Open', open: 'Open',
@@ -88,44 +54,34 @@
<SMRow> <SMRow>
<SMColumn> <SMColumn>
<SMSelect <SMSelect
v-model="formData.registration_type.value" control="registration_type"
label="Registration" label="Registration"
:options="{ :options="{
none: 'None', none: 'None',
email: 'Email', email: 'Email',
link: 'Link', link: 'Link',
}" }" />
@change="
fieldValidate(formData.registration_data)
" />
</SMColumn> </SMColumn>
<SMColumn> <SMColumn>
<SMInput <SMInput
v-if="registration_data?.visible" v-if="registration_data?.visible"
v-model="formData.registration_data.value" control="registration_data"
:label="registration_data?.title" :label="registration_data?.title"
:type="registration_data?.type" :type="registration_data?.type" />
required
:error="formData.registration_data.error"
@blur="
fieldValidate(formData.registration_data)
" />
</SMColumn> </SMColumn>
</SMRow> </SMRow>
<SMRow> <SMRow>
<SMColumn> <SMColumn>
<SMInput <SMInput
v-model="formData.hero.value" control="hero"
type="media" type="media"
label="Hero image" label="Hero image" />
:error="formData.hero.error"
required />
</SMColumn> </SMColumn>
</SMRow> </SMRow>
<SMRow> <SMRow>
<SMColumn> <SMColumn>
<SMEditor <SMEditor
v-model:srcContent="formData.content.value" v-model:srcContent="form.content.value"
:mime-types="[ :mime-types="[
'image/png', 'image/png',
'image/jpeg', 'image/jpeg',
@@ -141,52 +97,54 @@
</template> </template>
</SMFormFooter> </SMFormFooter>
</SMRow> </SMRow>
</form> </SMForm>
</SMDialog> </SMDialog>
</SMRow> </SMRow>
</SMContainer> </SMPage>
</template> </template>
<script setup lang="ts"> <script setup lang="ts">
import { ref, reactive, computed } from "vue"; import { ref, reactive, computed } from "vue";
import {
And,
Required,
Min,
DateTime,
Custom,
Email,
Url,
} from "../../helpers/validate";
import { FormObject, FormControl } from "../../helpers/form";
import { useRoute } from "vue-router";
import {
timestampLocalToUtc,
timestampUtcToLocal,
} from "../../helpers/datetime";
import { api } from "../../helpers/api";
import SMInput from "../../components/SMInput.vue"; import SMInput from "../../components/SMInput.vue";
import SMButton from "../../components/SMButton.vue"; import SMButton from "../../components/SMButton.vue";
import SMDialog from "../../components/SMDialog.vue"; import SMDialog from "../../components/SMDialog.vue";
import SMSelect from "../../components/SMSelect.vue"; import SMSelect from "../../components/SMSelect.vue";
import SMDatepicker from "../../components/SMDatePicker.vue"; import SMDatepicker from "../../components/SMDatePicker.vue";
import SMEditor from "../../components/SMEditor.vue"; import SMEditor from "../../components/SMEditor.vue";
import SMMessage from "../../components/SMMessage.vue";
import SMFormFooter from "../../components/SMFormFooter.vue"; import SMFormFooter from "../../components/SMFormFooter.vue";
import axios from "axios"; import SMPage from "../../components/SMPage.vue";
import { import SMForm from "../../components/SMForm.vue";
useValidation,
isValidated,
fieldValidate,
restParseErrors,
} from "../../helpers/validation";
import { useRoute } from "vue-router";
import { timestampLocalToUtc, timestampUtcToLocal } from "../../helpers/common";
const route = useRoute(); const route = useRoute();
const formLoading = ref(false); const formLoading = ref(false);
const page_title = route.params.id ? "Edit Event" : "Create New Event"; const page_title = route.params.id ? "Edit Event" : "Create New Event";
const pageError = ref(200); const pageError = ref(200);
const formMessage = reactive({
icon: "",
type: "",
message: "",
});
const address_data = computed(() => { const address_data = computed(() => {
let data = { let data = {
title: "", title: "",
required: false, required: false,
}; };
if (formData?.location.value === "online") { if (form?.location.value === "online") {
data.required = false; data.required = false;
} else if (formData?.location.value === "physical") { } else if (form?.location.value === "physical") {
data.title = "Address"; data.title = "Address";
data.required = true; data.required = true;
} }
@@ -201,11 +159,11 @@ const registration_data = computed(() => {
type: "text", type: "text",
}; };
if (formData?.registration_type.value === "email") { if (form?.registration_type.value === "email") {
data.visible = true; data.visible = true;
data.title = "Registration email"; data.title = "Registration email";
data.type = "email"; data.type = "email";
} else if (formData?.registration_type.value === "link") { } else if (form?.registration_type.value === "link") {
data.visible = true; data.visible = true;
data.title = "Registration URL"; data.title = "Registration URL";
data.type = "url"; data.type = "url";
@@ -214,170 +172,130 @@ const registration_data = computed(() => {
return data; return data;
}); });
const formData = reactive({ const form = reactive(
title: { FormObject({
value: "", title: FormControl("", And([Required(), Min(6)])),
error: "", location: FormControl("online"),
rules: { address: FormControl(
required: true, "",
required_message: "An event title is required", Custom((value) => {
min: 6, return address_data?.value.required && value.length == 0
min_message: "Your event title should be at least 6 letters long", ? "A venue address is required"
}, : false;
}, })
location: { ),
value: "online", start_at: FormControl("", And([Required(), DateTime()])),
error: "", end_at: FormControl(
}, "",
address: { And([
value: "", Required(),
error: "", DateTime({
rules: { after: (v) => {
required: () => { return form.start_at.value;
return address_data?.value.required; },
}, invalidAfterMessage:
required_message: "An address is required", "The ending date/time must be after the starting date/time.",
}, }),
}, ])
start_at: { ),
value: null, publish_at: FormControl("", DateTime()),
error: "", status: FormControl(),
rules: { registration_type: FormControl("none"),
required: true, registration_data: FormControl(
datetime: true, "",
}, Custom((v) => {
}, let validationResult = {
end_at: { valid: true,
value: null, invalidMessages: [""],
error: "", };
rules: {
required: true,
datetime: true,
afterdate: () => {
return formData.start_at.value;
},
afterdate_message:
"The ending date/time must be after the starting date/time.",
},
},
publish_at: {
value: null,
error: "",
},
status: {
value: "",
error: "",
},
registration_type: {
value: "none",
error: "",
},
registration_data: {
value: "",
error: "",
rules: {
type:
// eslint-disable-next-line
registration_data,
email_message: "A valid email address is required",
url_message: "A valid URL is required",
},
},
hero: {
value: "",
error: "",
rules: {
required: true,
},
},
content: {
value: "",
error: "",
},
});
useValidation(formData); if (registration_data.value.type == "email") {
validationResult = Email().validate(v);
} else if (registration_data.value.type == "url") {
validationResult = Url().validate(v);
}
if (!validationResult.valid) {
return validationResult.invalidMessages[0];
}
return true;
})
),
hero: FormControl("", Required()),
content: FormControl(),
})
);
const loadData = async () => { const loadData = async () => {
formLoading.value = true; form.loading(true);
formMessage.type = "error";
formMessage.icon = "fa-solid fa-circle-exclamation";
formMessage.message = "";
if (route.params.id) { if (route.params.id) {
try { try {
let res = await axios.get("events/" + route.params.id); let res = await api.get("/events/" + route.params.id);
if (!res.data.event) { if (!res.data.event) {
throw new Error("The server is currently not available"); throw new Error("The server is currently not available");
} }
formData.title.value = res.data.event.title; form.title.value = res.data.event.title;
formData.location.value = res.data.event.location; form.location.value = res.data.event.location;
formData.address.value = res.data.event.address form.address.value = res.data.event.address
? res.data.event.address ? res.data.event.address
: ""; : "";
formData.start_at.value = timestampUtcToLocal( form.start_at.value = timestampUtcToLocal(res.data.event.start_at);
res.data.event.start_at form.end_at.value = timestampUtcToLocal(res.data.event.end_at);
); form.status.value = res.data.event.status;
formData.end_at.value = timestampUtcToLocal(res.data.event.end_at); form.publish_at.value = timestampUtcToLocal(
formData.status.value = res.data.event.status;
formData.publish_at.value = timestampUtcToLocal(
res.data.event.publish_at res.data.event.publish_at
); );
formData.registration_type.value = res.data.event.registration_type; form.registration_type.value = res.data.event.registration_type;
formData.registration_data.value = res.data.event.registration_data; form.registration_data.value = res.data.event.registration_data;
formData.content.value = res.data.event.content form.content.value = res.data.event.content
? res.data.event.content ? res.data.event.content
: ""; : "";
formData.hero.value = res.data.event.hero; form.hero.value = res.data.event.hero;
} catch (err) { } catch (err) {
pageError.value = err.response.status; pageError.value = err.response.status;
} }
} }
formLoading.value = false; form.loading(false);
}; };
const submit = async () => { const handleSubmit = async () => {
console.log(formData.end_at.value);
try { try {
if (isValidated(formData)) { let data = {
let data = { title: form.title.value,
title: formData.title.value, location: form.location.value,
location: formData.location.value, address: form.address.value,
address: formData.address.value, start_at: timestampLocalToUtc(form.start_at.value),
start_at: timestampLocalToUtc(formData.start_at.value), end_at: timestampLocalToUtc(form.end_at.value),
end_at: timestampLocalToUtc(formData.end_at.value), status: form.status.value,
status: formData.status.value, publish_at:
publish_at: form.publish_at.value == ""
formData.publish_at.value == "" ? ""
? "" : timestampLocalToUtc(form.publish_at.value),
: timestampLocalToUtc(formData.publish_at.value), registration_type: form.registration_type.value,
registration_type: formData.registration_type.value, registration_data: form.registration_data.value,
registration_data: formData.registration_data.value, content: form.content.value,
content: formData.content.value, hero: form.hero.value,
hero: formData.hero.value, };
};
let res = {}; if (route.params.id) {
if (route.params.id) { await api.put({
res = await axios.put(`events/${route.params.id}`, data); url: `/events/${route.params.id}`,
} else { body: data,
console.log(data); });
res = await axios.post(`events`, data); } else {
} await api.post({
url: "events",
console.log(res); body: data,
formMessage.type = "success"; });
formMessage.message = "Your details have been updated";
} }
} catch (err) {
console.log(err); form.message("Your details have been updated", "success");
formMessage.icon = ""; } catch (error) {
formMessage.type = "error"; form.apiError(error);
formMessage.message = "";
restParseErrors(formData, [formMessage, "message"], err);
} }
window.scrollTo({ window.scrollTo({