From 89ab114eee571a0018356128d47ad4a3362a0e04 Mon Sep 17 00:00:00 2001 From: James Collins Date: Wed, 25 Jan 2023 17:54:06 +1000 Subject: [PATCH] change to UTC/Local conversion --- resources/js/views/NewsList.vue | 6 ++- resources/js/views/NewsView.vue | 7 +++- resources/js/views/WorkshopList.vue | 21 ++++++++++- resources/js/views/WorkshopView.vue | 4 ++ resources/js/views/dashboard/EventEdit.vue | 43 ++++++++++++++-------- resources/js/views/dashboard/EventList.vue | 36 +++++++++++------- resources/js/views/dashboard/PostEdit.vue | 5 ++- resources/js/views/dashboard/PostList.vue | 12 ++++-- 8 files changed, 95 insertions(+), 39 deletions(-) diff --git a/resources/js/views/NewsList.vue b/resources/js/views/NewsList.vue index ac020c3..bd4f837 100644 --- a/resources/js/views/NewsList.vue +++ b/resources/js/views/NewsList.vue @@ -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 || diff --git a/resources/js/views/NewsView.vue b/resources/js/views/NewsView.vue index 175b32f..2ed42f5 100644 --- a/resources/js/views/NewsView.vue +++ b/resources/js/views/NewsView.vue @@ -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 { diff --git a/resources/js/views/WorkshopList.vue b/resources/js/views/WorkshopList.vue index 998e2f5..8ff0126 100644 --- a/resources/js/views/WorkshopList.vue +++ b/resources/js/views/WorkshopList.vue @@ -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) { diff --git a/resources/js/views/WorkshopView.vue b/resources/js/views/WorkshopView.vue index b8e1b6b..5385329 100644 --- a/resources/js/views/WorkshopView.vue +++ b/resources/js/views/WorkshopView.vue @@ -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) { diff --git a/resources/js/views/dashboard/EventEdit.vue b/resources/js/views/dashboard/EventEdit.vue index 0b911a0..c24aa2e 100644 --- a/resources/js/views/dashboard/EventEdit.vue +++ b/resources/js/views/dashboard/EventEdit.vue @@ -135,9 +135,11 @@ - - - + + + @@ -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"; } diff --git a/resources/js/views/dashboard/EventList.vue b/resources/js/views/dashboard/EventList.vue index 658bd85..0b3768c 100644 --- a/resources/js/views/dashboard/EventList.vue +++ b/resources/js/views/dashboard/EventList.vue @@ -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; diff --git a/resources/js/views/dashboard/PostEdit.vue b/resources/js/views/dashboard/PostEdit.vue index dfac5fd..1477eae 100644 --- a/resources/js/views/dashboard/PostEdit.vue +++ b/resources/js/views/dashboard/PostEdit.vue @@ -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, diff --git a/resources/js/views/dashboard/PostList.vue b/resources/js/views/dashboard/PostList.vue index 13cddf6..2113723 100644 --- a/resources/js/views/dashboard/PostList.vue +++ b/resources/js/views/dashboard/PostList.vue @@ -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) + ); } });