refactor: Consolidated getDateFormatted into utils

frontend/src/pages/Admin/Playlists.vue

@@ -235,18 +235,6 @@ if (hasPermission("playlists.createMissing"))
 	});
 
 const { openModal } = useModalsStore();
-
-const getDateFormatted = createdAt => {
-	const date = new Date(createdAt);
-	const year = date.getFullYear();
-	const month = `${date.getMonth() + 1}`.padStart(2, "0");
-	const day = `${date.getDate()}`.padStart(2, "0");
-	const hour = `${date.getHours()}`.padStart(2, "0");
-	const minute = `${date.getMinutes()}`.padStart(2, "0");
-	return `${year}-${month}-${day} ${hour}:${minute}`;
-};
-
-const formatTimeLong = length => utils.formatTimeLong(length);
 </script>
 
 <template>
@@ -308,9 +296,12 @@ const formatTimeLong = length => utils.formatTimeLong(length);
 				}}</span>
 			</template>
 			<template #column-totalLength="slotProps">
-				<span :title="formatTimeLong(slotProps.item.totalLength)">{{
+				<span
-					formatTimeLong(slotProps.item.totalLength)
+					:title="utils.formatTimeLong(slotProps.item.totalLength)"
-				}}</span>
+					>{{
+						utils.formatTimeLong(slotProps.item.totalLength)
+					}}</span
+				>
 			</template>
 			<template #column-createdBy="slotProps">
 				<span v-if="slotProps.item.createdBy === 'Musare'">Musare</span>
@@ -318,7 +309,7 @@ const formatTimeLong = length => utils.formatTimeLong(length);
 			</template>
 			<template #column-createdAt="slotProps">
 				<span :title="new Date(slotProps.item.createdAt).toString()">{{
-					getDateFormatted(slotProps.item.createdAt)
+					utils.getDateFormatted(slotProps.item.createdAt)
 				}}</span>
 			</template>
 			<template #column-createdFor="slotProps">

frontend/src/pages/Admin/Reports.vue

@@ -5,6 +5,7 @@ import { useModalsStore } from "@/stores/modals";
 import { useUserAuthStore } from "@/stores/userAuth";
 import { useReports } from "@/composables/useReports";
 import { TableColumn, TableFilter, TableEvents } from "@/types/advancedTable";
+import utils from "@/utils";
 
 const AdvancedTable = defineAsyncComponent(
 	() => import("@/components/AdvancedTable.vue")
@@ -161,16 +162,6 @@ const resolve = (reportId, value) =>
 			if (res.status !== "success") new Toast(res.message);
 		})
 		.catch(err => new Toast(err.message));
-
-const getDateFormatted = createdAt => {
-	const date = new Date(createdAt);
-	const year = date.getFullYear();
-	const month = `${date.getMonth() + 1}`.padStart(2, "0");
-	const day = `${date.getDate()}`.padStart(2, "0");
-	const hour = `${date.getHours()}`.padStart(2, "0");
-	const minute = `${date.getMinutes()}`.padStart(2, "0");
-	return `${year}-${month}-${day} ${hour}:${minute}`;
-};
 </script>
 
 <template>
@@ -281,7 +272,7 @@ const getDateFormatted = createdAt => {
 			</template>
 			<template #column-createdAt="slotProps">
 				<span :title="new Date(slotProps.item.createdAt).toString()">{{
-					getDateFormatted(slotProps.item.createdAt)
+					utils.getDateFormatted(slotProps.item.createdAt)
 				}}</span>
 			</template>
 		</advanced-table>

frontend/src/pages/Admin/Songs/Import.vue

@@ -7,6 +7,7 @@ import { useLongJobsStore } from "@/stores/longJobs";
 import { useModalsStore } from "@/stores/modals";
 import { useUserAuthStore } from "@/stores/userAuth";
 import { TableColumn, TableFilter, TableEvents } from "@/types/advancedTable";
+import utils from "@/utils";
 
 const AdvancedTable = defineAsyncComponent(
 	() => import("@/components/AdvancedTable.vue")
@@ -339,16 +340,6 @@ const submitCreateImport = stage => {
 // 	if (stage === 2) createImport.value.stage = 1;
 // };
 
-const getDateFormatted = createdAt => {
-	const date = new Date(createdAt);
-	const year = date.getFullYear();
-	const month = `${date.getMonth() + 1}`.padStart(2, "0");
-	const day = `${date.getDate()}`.padStart(2, "0");
-	const hour = `${date.getHours()}`.padStart(2, "0");
-	const minute = `${date.getMinutes()}`.padStart(2, "0");
-	return `${year}-${month}-${day} ${hour}:${minute}`;
-};
-
 const editSongs = videos => {
 	const songs = videos.map(youtubeId => ({ youtubeId }));
 	if (songs.length === 1)
@@ -594,7 +585,9 @@ const removeImportJob = jobId => {
 									).toString()
 								"
 								>{{
-									getDateFormatted(slotProps.item.requestedAt)
+									utils.getDateFormatted(
+										slotProps.item.requestedAt
+									)
 								}}</span
 							>
 						</template>

frontend/src/pages/Admin/Songs/index.vue

@@ -7,6 +7,7 @@ import { useLongJobsStore } from "@/stores/longJobs";
 import { useModalsStore } from "@/stores/modals";
 import { useUserAuthStore } from "@/stores/userAuth";
 import { TableColumn, TableFilter, TableEvents } from "@/types/advancedTable";
+import utils from "@/utils";
 
 const AdvancedTable = defineAsyncComponent(
 	() => import("@/components/AdvancedTable.vue")
@@ -500,16 +501,6 @@ const deleteMany = selectedRows => {
 	);
 };
 
-const getDateFormatted = createdAt => {
-	const date = new Date(createdAt);
-	const year = date.getFullYear();
-	const month = `${date.getMonth() + 1}`.padStart(2, "0");
-	const day = `${date.getDate()}`.padStart(2, "0");
-	const hour = `${date.getHours()}`.padStart(2, "0");
-	const minute = `${date.getMinutes()}`.padStart(2, "0");
-	return `${year}-${month}-${day} ${hour}:${minute}`;
-};
-
 onMounted(() => {
 	if (route.query.songId) {
 		socket.dispatch("songs.getSongFromSongId", route.query.songId, res => {
@@ -682,7 +673,9 @@ onMounted(() => {
 			<template #column-requestedAt="slotProps">
 				<span
 					:title="new Date(slotProps.item.requestedAt).toString()"
-					>{{ getDateFormatted(slotProps.item.requestedAt) }}</span
+					>{{
+						utils.getDateFormatted(slotProps.item.requestedAt)
+					}}</span
 				>
 			</template>
 			<template #column-verifiedBy="slotProps">
@@ -690,7 +683,7 @@ onMounted(() => {
 			</template>
 			<template #column-verifiedAt="slotProps">
 				<span :title="new Date(slotProps.item.verifiedAt).toString()">{{
-					getDateFormatted(slotProps.item.verifiedAt)
+					utils.getDateFormatted(slotProps.item.verifiedAt)
 				}}</span>
 			</template>
 			<template #bulk-actions="slotProps">

frontend/src/pages/Admin/Users/Punishments.vue

@@ -5,6 +5,7 @@ import { useWebsocketsStore } from "@/stores/websockets";
 import { useModalsStore } from "@/stores/modals";
 import { useUserAuthStore } from "@/stores/userAuth";
 import { TableColumn, TableFilter, TableEvents } from "@/types/advancedTable";
+import utils from "@/utils";
 
 const AdvancedTable = defineAsyncComponent(
 	() => import("@/components/AdvancedTable.vue")
@@ -178,16 +179,6 @@ const banIP = () => {
 	);
 };
 
-const getDateFormatted = createdAt => {
-	const date = new Date(createdAt);
-	const year = date.getFullYear();
-	const month = `${date.getMonth() + 1}`.padStart(2, "0");
-	const day = `${date.getDate()}`.padStart(2, "0");
-	const hour = `${date.getHours()}`.padStart(2, "0");
-	const minute = `${date.getMinutes()}`.padStart(2, "0");
-	return `${year}-${month}-${day} ${hour}:${minute}`;
-};
-
 const deactivatePunishment = punishmentId => {
 	socket.dispatch("punishments.deactivatePunishment", punishmentId, res => {
 		if (res.status === "success") {
@@ -297,12 +288,12 @@ const deactivatePunishment = punishmentId => {
 			</template>
 			<template #column-punishedAt="slotProps">
 				<span :title="new Date(slotProps.item.punishedAt).toString()">{{
-					getDateFormatted(slotProps.item.punishedAt)
+					utils.getDateFormatted(slotProps.item.punishedAt)
 				}}</span>
 			</template>
 			<template #column-expiresAt="slotProps">
 				<span :title="new Date(slotProps.item.expiresAt).toString()">{{
-					getDateFormatted(slotProps.item.expiresAt)
+					utils.getDateFormatted(slotProps.item.expiresAt)
 				}}</span>
 			</template>
 		</advanced-table>

frontend/src/pages/Admin/YouTube/Videos.vue

@@ -11,6 +11,7 @@ import {
 	TableEvents,
 	TableBulkActions
 } from "@/types/advancedTable";
+import utils from "@/utils";
 
 const AdvancedTable = defineAsyncComponent(
 	() => import("@/components/AdvancedTable.vue")
@@ -255,16 +256,6 @@ const removeVideos = videoIds => {
 		}
 	});
 };
-
-const getDateFormatted = createdAt => {
-	const date = new Date(createdAt);
-	const year = date.getFullYear();
-	const month = `${date.getMonth() + 1}`.padStart(2, "0");
-	const day = `${date.getDate()}`.padStart(2, "0");
-	const hour = `${date.getHours()}`.padStart(2, "0");
-	const minute = `${date.getMinutes()}`.padStart(2, "0");
-	return `${year}-${month}-${day} ${hour}:${minute}`;
-};
 </script>
 
 <template>
@@ -382,7 +373,7 @@ const getDateFormatted = createdAt => {
 			</template>
 			<template #column-createdAt="slotProps">
 				<span :title="new Date(slotProps.item.createdAt).toString()">{{
-					getDateFormatted(slotProps.item.createdAt)
+					utils.getDateFormatted(slotProps.item.createdAt)
 				}}</span>
 			</template>
 			<template #column-songId="slotProps">

frontend/src/pages/Admin/YouTube/index.vue

@@ -5,6 +5,7 @@ import Toast from "toasters";
 import { useWebsocketsStore } from "@/stores/websockets";
 import { useModalsStore } from "@/stores/modals";
 import { TableColumn, TableFilter, TableEvents } from "@/types/advancedTable";
+import utils from "@/utils";
 
 const AdvancedTable = defineAsyncComponent(
 	() => import("@/components/AdvancedTable.vue")
@@ -142,16 +143,6 @@ const jobs = ref([
 
 const { openModal } = useModalsStore();
 
-const getDateFormatted = createdAt => {
-	const date = new Date(createdAt);
-	const year = date.getFullYear();
-	const month = `${date.getMonth() + 1}`.padStart(2, "0");
-	const day = `${date.getDate()}`.padStart(2, "0");
-	const hour = `${date.getHours()}`.padStart(2, "0");
-	const minute = `${date.getMinutes()}`.padStart(2, "0");
-	return `${year}-${month}-${day} ${hour}:${minute}`;
-};
-
 const removeApiRequest = requestId => {
 	socket.dispatch(
 		"youtube.removeStoredApiRequest",
@@ -309,7 +300,7 @@ onMounted(() => {
 				</template>
 				<template #column-timestamp="slotProps">
 					<span :title="new Date(slotProps.item.date).toString()">{{
-						getDateFormatted(slotProps.item.date)
+						utils.getDateFormatted(slotProps.item.date)
 					}}</span>
 				</template>
 				<template #column-url="slotProps">

frontend/src/stores/modals.ts

@@ -17,6 +17,21 @@ export const useModalsStore = defineStore("modals", {
 		preventCloseCbs: {}
 	}),
 	actions: {
+		openModal(
+			dataOrModal: string | { modal: string; props?: Record<string, any> }
+		) {
+			const uuid = utils.guid();
+			let modal;
+			let props;
+			if (typeof dataOrModal === "string") modal = dataOrModal;
+			else {
+				modal = dataOrModal.modal;
+				props = dataOrModal.props;
+			}
+			this.modals[uuid] = { modal, props };
+			this.activeModals.push(uuid);
+			return { uuid };
+		},
 		closeModal(uuid: string) {
 			Object.entries(this.modals).forEach(([_uuid, modal]) => {
 				if (uuid === _uuid) {
@@ -55,23 +70,6 @@ export const useModalsStore = defineStore("modals", {
 				}
 			});
 		},
-		openModal(
-			propsOrModal:
-				| string
-				| { modal: string; props?: Record<string, any> }
-		) {
-			const uuid = utils.guid();
-			let modal;
-			let props;
-			if (typeof propsOrModal === "string") modal = propsOrModal;
-			else {
-				modal = propsOrModal.modal;
-				props = propsOrModal.props;
-			}
-			this.modals[uuid] = { modal, props };
-			this.activeModals.push(uuid);
-			return { uuid };
-		},
 		closeCurrentModal() {
 			const currentlyActiveModalUuid =
 				this.activeModals[this.activeModals.length - 1];

frontend/src/utils.ts

@@ -67,5 +67,14 @@ export default {
 		};
 
 		return formatHours() + formatMinutes() + formatSeconds();
+	},
+	getDateFormatted: (createdAt: number) => {
+		const date = new Date(createdAt);
+		const year = date.getFullYear();
+		const month = `${date.getMonth() + 1}`.padStart(2, "0");
+		const day = `${date.getDate()}`.padStart(2, "0");
+		const hour = `${date.getHours()}`.padStart(2, "0");
+		const minute = `${date.getMinutes()}`.padStart(2, "0");
+		return `${year}-${month}-${day} ${hour}:${minute}`;
 	}
 };