diff --git a/resources/js/views/Workshops.vue b/resources/js/views/Workshops.vue index eaadec8..997285b 100644 --- a/resources/js/views/Workshops.vue +++ b/resources/js/views/Workshops.vue @@ -19,7 +19,7 @@ @change="handleFilter" /> @@ -29,30 +29,39 @@ type="error" :message="formMessage" class="mt-5" /> - - - + +
+ +
+
+

{{ event.title }}

+
+ +
{{ computedDate(event) }}
+
+
+ +
{{ computedLocation(event) }}
+
+
+ +
{{ computedAges(event.ages) }}
+
+
+
$
+
{{ computedPrice(event.price) }}
+
+
+ +
@@ -61,13 +70,10 @@ import { reactive, ref, watch } from "vue"; import SMInput from "../components/SMInput.vue"; import SMMessage from "../components/SMMessage.vue"; import SMPagination from "../components/SMPagination.vue"; -import SMPanel from "../components/SMPanel.vue"; -import SMPanelList from "../components/SMPanelList.vue"; import SMToolbar from "../components/SMToolbar.vue"; import { api } from "../helpers/api"; import { Event, EventCollection } from "../helpers/api.types"; import { SMDate } from "../helpers/datetime"; -import { mediaGetVariantUrl } from "../helpers/media"; import SMMastHead from "../components/SMMastHead.vue"; import SMContainer from "../components/SMContainer.vue"; @@ -78,7 +84,7 @@ interface EventData { } const loading = ref(true); -let events: EventData[] = reactive([]); +let events: Event[] = reactive([]); const dateRangeError = ref(""); const formMessage = ref(""); @@ -87,7 +93,7 @@ const filterKeywords = ref(""); const filterLocation = ref(""); const filterDateRange = ref(""); -const postsPerPage = 9; +const postsPerPage = 24; let postsPage = ref(1); let postsTotal = ref(0); @@ -209,11 +215,10 @@ const handleLoad = async () => { bannerType = "warning"; } - events.push({ - event: item, - banner: banner, - bannerType: bannerType, - }); + item["banner"] = banner; + item["bannerType"] = bannerType; + + events.push(item); }); } } catch (error) { @@ -231,20 +236,86 @@ const handleFilter = async () => { handleLoad(); }; +/** + * Return a human readable Date string. + * + * @param {Event} event The event to convert. + * @returns The converted string. + */ +const computedDate = (event: Event) => { + let str = ""; + + if (event.start_at.length > 0) { + if ( + event.end_at.length > 0 && + event.start_at.substring(0, event.start_at.indexOf(" ")) != + event.end_at.substring(0, event.end_at.indexOf(" ")) + ) { + str = new SMDate(event.start_at, { format: "yMd" }).format( + "dd/MM/yyyy" + ); + if (event.end_at.length > 0) { + str = + str + + " - " + + new SMDate(event.end_at, { format: "yMd" }).format( + "dd/MM/yyyy" + ); + } + } else { + str = new SMDate(event.start_at, { format: "yMd" }).format( + "dd/MM/yyyy @ h:mm aa" + ); + } + } + + return str; +}; + +/** + * Return a human readable Location string. + * + * @param {Event} event The event to convert. + * @returns The converted string. + */ +const computedLocation = (event: Event): string => { + if (event.location == "online") { + return "Online"; + } + + return event.address; +}; + /** * Return a human readable Ages string. * - * @param item + * @param {string} ages The string to convert. + * @returns The converted string. */ -const computedAges = (item: Event): string => { - const trimmed = item.ages.trim(); +const computedAges = (ages: string): string => { + const trimmed = ages.trim(); const regex = /^(\d+)(\s*\+?\s*|\s*-\s*\d+\s*)?$/; if (regex.test(trimmed)) { return `Ages ${trimmed}`; } - return item.ages; + return ages; +}; + +/** + * Return a human readable Price string. + * + * @param {string} price The string to convert. + * @returns The converted string. + */ +const computedPrice = (price: string): string => { + const trimmed = parseInt(price.trim()); + if (trimmed == 0) { + return "Free"; + } + + return trimmed.toString(); }; watch( @@ -258,37 +329,109 @@ handleLoad();