change to UTC/Local conversion

This commit is contained in:
2023-01-25 17:54:06 +10:00
parent 0c837f935c
commit 89ab114eee
8 changed files with 95 additions and 39 deletions

View File

@@ -30,6 +30,7 @@ import axios from "axios";
import SMMessage from "../components/SMMessage.vue";
import SMPanelList from "../components/SMPanelList.vue";
import SMPanel from "../components/SMPanel.vue";
import { timestampUtcToLocal } from "../helpers/common";
const formMessage = reactive({
icon: "",
@@ -48,7 +49,10 @@ const handleLoad = async () => {
try {
let result = await axios.get("posts?limit=5");
posts.value = result.data.posts;
console.log(result.data.posts);
posts.value.forEach((post) => {
post.publish_at = timestampUtcToLocal(post.publish_at);
});
} catch (error) {
formMessage.message =
error.response?.data?.message ||

View File

@@ -27,7 +27,7 @@ import { ref, computed } from "vue";
import axios from "axios";
import { useRoute } from "vue-router";
import SMPageError from "../components/SMPageError.vue";
import { fullMonthString } from "../helpers/common";
import { fullMonthString, timestampUtcToLocal } from "../helpers/common";
import { useApplicationStore } from "../store/ApplicationStore";
const applicationStore = useApplicationStore();
@@ -50,6 +50,11 @@ const loadData = async () => {
error.value = 404;
} else {
post.value = res.data.posts[0];
post.value.publish_at = timestampUtcToLocal(
post.value.publish_at
);
applicationStore.setDynamicTitle(post.value.title);
try {

View File

@@ -51,7 +51,13 @@ import SMPanelList from "../components/SMPanelList.vue";
import SMPanel from "../components/SMPanel.vue";
import { reactive, ref } from "vue";
import axios from "axios";
import { buildUrlQuery } from "../helpers/common";
import {
buildUrlQuery,
timestampLocalToUtc,
timestampNowUtc,
timestampUtcToLocal,
} from "../helpers/common";
import { format, parse, parseISO } from "date-fns";
const loading = ref(true);
const events = reactive([]);
@@ -84,14 +90,25 @@ const handleLoad = async () => {
}
if (filterDateRange.value && Array.isArray(filterDateRange.value)) {
query["start_at"] =
filterDateRange.value[0] + "<>" + filterDateRange.value[1];
timestampLocalToUtc(filterDateRange.value[0]) +
"<>" +
timestampLocalToUtc(filterDateRange.value[1]);
} else {
query["end_at"] = ">" + timestampNowUtc();
}
console.log(new Date().toDateString());
const url = buildUrlQuery("events", query);
let result = await axios.get(url);
if (result.data.events) {
events.value = result.data.events;
events.value.forEach((item) => {
item.start_at = timestampUtcToLocal(item.start_at);
item.end_at = timestampUtcToLocal(item.end_at);
});
}
} catch (error) {
if (error.response.status != 404) {

View File

@@ -74,6 +74,7 @@ import { format } from "date-fns";
import SMButton from "../components/SMButton.vue";
import SMHTML from "../components/SMHTML.vue";
import SMMessage from "../components/SMMessage.vue";
import { timestampUtcToLocal } from "../helpers/common";
const applicationStore = useApplicationStore();
const event = ref({});
@@ -141,6 +142,9 @@ const handleLoad = async () => {
const result = await axios.get(`events/${route.params.id}`);
event.value = result.data.event;
event.value.start_at = timestampUtcToLocal(event.value.start_at);
event.value.end_at = timestampUtcToLocal(event.value.end_at);
applicationStore.setDynamicTitle(event.value.title);
handleLoadImage();
} catch (error) {

View File

@@ -135,9 +135,11 @@
</SMColumn>
</SMRow>
<SMRow>
<SMColumn class="justify-content-end">
<SMButton type="submit" label="Save" />
</SMColumn>
<SMFormFooter>
<template #right>
<SMButton type="submit" label="Save" />
</template>
</SMFormFooter>
</SMRow>
</form>
</SMDialog>
@@ -154,6 +156,7 @@ import SMSelect from "../../components/SMSelect.vue";
import SMDatepicker from "../../components/SMDatePicker.vue";
import SMEditor from "../../components/SMEditor.vue";
import SMMessage from "../../components/SMMessage.vue";
import SMFormFooter from "../../components/SMFormFooter.vue";
import axios from "axios";
import {
useValidation,
@@ -162,6 +165,7 @@ import {
restParseErrors,
} from "../../helpers/validation";
import { useRoute } from "vue-router";
import { timestampLocalToUtc, timestampUtcToLocal } from "../../helpers/common";
import { parseISO } from "date-fns";
const route = useRoute();
@@ -250,11 +254,11 @@ const formData = reactive({
rules: {
required: true,
datetime: true,
custom: (value) => {
if (parseISO(value) < parseISO(formData.start_at.value)) {
return "The ending date/time must be after the starting date/time.";
}
afterdate: () => {
return formData.start_at.value;
},
afterdate_message:
"The ending date/time must be after the starting date/time.",
},
},
publish_at: {
@@ -308,16 +312,19 @@ const loadData = async () => {
throw new Error("The server is currently not available");
}
console.log(res.data.event);
formData.title.value = res.data.event.title;
formData.location.value = res.data.event.location;
formData.address.value = res.data.event.address
? res.data.event.address
: "";
formData.start_at.value = res.data.event.start_at;
formData.end_at.value = res.data.event.end_at;
formData.start_at.value = timestampUtcToLocal(
res.data.event.start_at
);
formData.end_at.value = timestampUtcToLocal(res.data.event.end_at);
formData.status.value = res.data.event.status;
formData.publish_at.value = res.data.event.publish_at;
formData.publish_at.value = timestampUtcToLocal(
res.data.event.publish_at
);
formData.registration_type.value = res.data.event.registration_type;
formData.registration_data.value = res.data.event.registration_data;
formData.content.value = res.data.event.content
@@ -333,32 +340,36 @@ const loadData = async () => {
};
const submit = async () => {
console.log(formData.end_at.value);
try {
if (isValidated(formData)) {
let data = {
title: formData.title.value,
location: formData.location.value,
address: formData.address.value,
start_at: formData.start_at.value,
end_at: formData.end_at.value,
start_at: timestampLocalToUtc(formData.start_at.value),
end_at: timestampLocalToUtc(formData.end_at.value),
status: formData.status.value,
publish_at:
formData.publish_at.value == ""
? ""
: formData.publish_at.value,
: timestampLocalToUtc(formData.publish_at.value),
registration_type: formData.registration_type.value,
registration_data: formData.registration_data.value,
content: formData.content.value,
hero: formData.hero.value,
};
let res = {};
if (route.params.id) {
await axios.put(`events/${route.params.id}`, data);
res = await axios.put(`events/${route.params.id}`, data);
} else {
console.log(data);
await axios.post(`events`, data);
res = await axios.post(`events`, data);
}
console.log(res);
formMessage.type = "success";
formMessage.message = "Your details have been updated";
}

View File

@@ -52,22 +52,27 @@
import { ref, watch, reactive } from "vue";
import EasyDataTable from "vue3-easy-data-table";
import axios from "axios";
import { relativeDate, toParamString } from "../../helpers/common";
import {
relativeDate,
timestampUtcToLocal,
toParamString,
} from "../../helpers/common";
import { useRouter } from "vue-router";
import SMDialogConfirm from "../../components/dialogs/SMDialogConfirm.vue";
import { openDialog } from "vue3-promise-dialog";
import SMToolbar from "../../components/SMToolbar.vue";
import SMButton from "../../components/SMButton.vue";
import { debounce } from "../../helpers/common";
import SMHeading from "../../components/SMHeading.vue";
import SMMessage from "../../components/SMMessage.vue";
import { restParseErrors } from "../../helpers/validation";
const router = useRouter();
const search = ref("");
const headers = [
{ text: "Title", value: "title", sortable: true },
{ text: "Starts", value: "start_at", sortable: true },
{ text: "Created", value: "created_at", sortable: true },
{ text: "Updated", value: "updated_at", sortable: true },
{ text: "Actions", value: "actions" },
@@ -90,6 +95,9 @@ const serverOptions = ref({
});
const loadFromServer = async () => {
formMessage.icon = "";
formMessage.type = "error";
formMessage.message = "";
formLoading.value = true;
try {
@@ -121,21 +129,21 @@ const loadFromServer = async () => {
items.value = res.data.events;
// items.value.forEach((row) => {
// if (row.created_at !== "undefined") {
// row.created_at = relativeDate(row.created_at);
// }
// if (row.updated_at !== "undefined") {
// row.updated_at = relativeDate(row.updated_at);
// }
// });
items.value.forEach((row) => {
if (row.start_at !== "undefined") {
row.start_at = relativeDate(timestampUtcToLocal(row.start_at));
}
if (row.created_at !== "undefined") {
row.created_at = relativeDate(row.created_at);
}
if (row.updated_at !== "undefined") {
row.updated_at = relativeDate(row.updated_at);
}
});
serverItemsLength.value = res.data.total;
} catch (err) {
// formMessage.icon = ''
// formMessage.type = 'error'
// formMessage.message = ''
// restParseErrors(formData, [formMessage, 'message'], err)
// restParseErrors(formData, [formMessage, "message"], err);
}
formLoading.value = false;

View File

@@ -103,6 +103,7 @@ import {
import { useRoute } from "vue-router";
import { useUserStore } from "../../store/UserStore";
import SMFormFooter from "../../components/SMFormFooter.vue";
import { timestampLocalToUtc, timestampUtcToLocal } from "../../helpers/common";
const route = useRoute();
const formLoading = ref(false);
@@ -210,7 +211,7 @@ const loadData = async () => {
formData.user_id.value = res.data.post.user_id;
formData.content.value = res.data.post.content;
formData.publish_at.value = res.data.post.publish_at
? new Date(res.data.post.publish_at)
? timestampUtcToLocal(res.data.post.publish_at)
: "";
formData.content.value = res.data.post.content;
formData.hero.value = res.data.post.hero;
@@ -228,7 +229,7 @@ const submit = async () => {
let data = {
title: formData.title.value,
slug: formData.slug.value,
publish_at: formData.publish_at.value,
publish_at: timestampLocalToUtc(formData.publish_at.value),
user_id: formData.user_id.value,
content: formData.content.value,
hero: formData.hero.value,

View File

@@ -123,13 +123,19 @@ const loadFromServer = async () => {
items.value.forEach((row) => {
if (row.created_at !== "undefined") {
row.created_at = relativeDate(row.created_at);
row.created_at = relativeDate(
timestampUtcToLocal(row.created_at)
);
}
if (row.updated_at !== "undefined") {
row.updated_at = relativeDate(row.updated_at);
row.updated_at = relativeDate(
timestampUtcToLocal(row.updated_at)
);
}
if (row.publish_at !== "undefined") {
row.publish_at = relativeDate(row.publish_at);
row.publish_at = relativeDate(
timestampUtcToLocal(row.publish_at)
);
}
});