feat: Added View API Request modal

backend/logic/actions/youtube.js

@@ -41,7 +41,16 @@ export default {
 	 * @param operator - the operator for queries
 	 * @param cb
 	 */
-	 getApiRequests: isAdminRequired(async function getApiRequests(session, page, pageSize, properties, sort, queries, operator, cb) {
+	getApiRequests: isAdminRequired(async function getApiRequests(
+		session,
+		page,
+		pageSize,
+		properties,
+		sort,
+		queries,
+		operator,
+		cb
+	) {
 		async.waterfall(
 			[
 				next => {

frontend/src/components/ModalManager.vue

@@ -30,6 +30,7 @@ export default {
 			report: "Report.vue",
 			viewReport: "ViewReport.vue",
 			bulkActions: "BulkActions.vue",
+			viewApiRequest: "ViewApiRequest.vue",
 			viewPunishment: "ViewPunishment.vue",
 			removeAccount: "RemoveAccount.vue",
 			importAlbum: "ImportAlbum.vue",

frontend/src/components/modals/ViewApiRequest.vue

@@ -0,0 +1,112 @@
+<template>
+	<modal title="View API Request">
+		<template #body>
+			<div v-if="!loaded" class="vertical-padding">
+				<p>Request hasn't loaded yet</p>
+			</div>
+			<div v-else class="vertical-padding">
+				<p><b>ID:</b> {{ request._id }}</p>
+				<p><b>URL:</b> {{ request.url }}</p>
+				<div>
+					<b>Params:</b>
+					<ul v-if="request.params">
+						<li
+							v-for="[paramKey, paramValue] in Object.entries(
+								request.params
+							)"
+							:key="paramKey"
+						>
+							<b>{{ paramKey }}</b
+							>: {{ paramValue }}
+						</li>
+					</ul>
+					<span v-else>None/Not found</span>
+				</div>
+				<div>
+					<b>Results:</b>
+					<vue-json-pretty
+						:data="request.results"
+						:show-length="true"
+					></vue-json-pretty>
+				</div>
+				<p><b>Date:</b> {{ request.date }}</p>
+				<p><b>Quota cost:</b> {{ request.quotaCost }}</p>
+			</div>
+		</template>
+	</modal>
+</template>
+
+<script>
+import { mapActions, mapGetters } from "vuex";
+
+import VueJsonPretty from "vue-json-pretty";
+import "vue-json-pretty/lib/styles.css";
+import Toast from "toasters";
+
+import ws from "@/ws";
+import { mapModalState, mapModalActions } from "@/vuex_helpers";
+
+export default {
+	components: {
+		VueJsonPretty
+	},
+	props: {
+		modalUuid: { type: String, default: "" }
+	},
+	data() {
+		return {
+			loaded: false
+		};
+	},
+	computed: {
+		...mapModalState("modals/viewApiRequest/MODAL_UUID", {
+			requestId: state => state.requestId,
+			request: state => state.request
+		}),
+		...mapGetters({
+			socket: "websockets/getSocket"
+		})
+	},
+	mounted() {
+		ws.onConnect(this.init);
+	},
+	beforeUnmount() {
+		// Delete the VueX module that was created for this modal, after all other cleanup tasks are performed
+		this.$store.unregisterModule([
+			"modals",
+			"viewApiRequest",
+			this.modalUuid
+		]);
+	},
+	methods: {
+		init() {
+			this.loaded = false;
+			this.socket.dispatch(
+				"youtube.getApiRequest",
+				this.requestId,
+				res => {
+					if (res.status === "success") {
+						const { apiRequest } = res.data;
+						this.viewApiRequest(apiRequest);
+						this.loaded = true;
+					} else {
+						new Toast("API request with that ID not found");
+						this.closeCurrentModal();
+					}
+				}
+			);
+		},
+		...mapModalActions("modals/viewApiRequest/MODAL_UUID", [
+			"viewApiRequest"
+		]),
+		...mapActions("modalVisibility", ["closeCurrentModal"])
+	}
+};
+</script>
+
+<style lang="less" scoped>
+ul {
+	list-style-type: disc;
+	padding-left: 20px;
+}
+</style>

frontend/src/pages/Admin/YouTube.vue

@@ -80,45 +80,10 @@
 				</template>
 			</advanced-table>
 		</div>
-		<div class="card" v-if="currentApiRequest">
-			<h4>API Request</h4>
-			<hr class="section-horizontal-rule" />
-			<div class="card-content">
-				<p><b>ID:</b> {{ currentApiRequest._id }}</p>
-				<p><b>URL:</b> {{ currentApiRequest.url }}</p>
-				<div>
-					<b>Params:</b>
-					<ul v-if="currentApiRequest.params">
-						<li
-							v-for="[paramKey, paramValue] in Object.entries(
-								currentApiRequest.params
-							)"
-							:key="paramKey"
-						>
-							<b>{{ paramKey }}</b
-							>: {{ paramValue }}
-						</li>
-					</ul>
-					<span v-else>None/Not found</span>
-				</div>
-				<div>
-					<b>Results:</b>
-					<vue-json-pretty
-						:data="currentApiRequest.results"
-						:show-length="true"
-					></vue-json-pretty>
-				</div>
-				<p><b>Date:</b> {{ currentApiRequest.date }}</p>
-				<p><b>Quota cost:</b> {{ currentApiRequest.quotaCost }}</p>
-			</div>
-		</div>
 	</div>
 </template>
 
 <script>
-import VueJsonPretty from "vue-json-pretty";
-import "vue-json-pretty/lib/styles.css";
-
 import { mapActions, mapGetters } from "vuex";
 
 import AdvancedTable from "@/components/AdvancedTable.vue";
@@ -127,13 +92,11 @@ import ws from "@/ws";
 
 export default {
 	components: {
-		VueJsonPretty,
 		AdvancedTable
 	},
 	data() {
 		return {
 			quotaStatus: {},
-			currentApiRequest: null,
 			fromDate: null,
 			columnDefault: {
 				sortable: true,
@@ -242,20 +205,6 @@ export default {
 						this.quotaStatus = res.data.status;
 				}
 			);
-
-			if (this.$route.query.apiRequestId) {
-				this.socket.dispatch(
-					"youtube.getApiRequest",
-					this.$route.query.apiRequestId,
-					res => {
-						if (res.status === "success")
-							this.currentApiRequest = res.data.apiRequest;
-					}
-				);
-			}
-		},
-		round(number) {
-			return Math.round(number);
 		},
 		getDateFormatted(createdAt) {
 			const date = new Date(createdAt);
@@ -305,9 +254,4 @@ td {
 .is-primary:focus {
 	background-color: var(--primary-color) !important;
 }
-
-ul {
-	list-style-type: disc;
-	padding-left: 20px;
-}
 </style>

frontend/src/store/index.js

@@ -34,6 +34,7 @@ export default createStore({
 				whatIsNew: emptyModule,
 				createStation: emptyModule,
 				editNews: emptyModule,
+				viewApiRequest: emptyModule,
 				viewPunishment: emptyModule,
 				report: emptyModule,
 				viewReport: emptyModule,

frontend/src/store/modules/modalVisibility.js

@@ -11,6 +11,7 @@ import editPlaylist from "./modals/editPlaylist";
 import report from "./modals/report";
 import viewReport from "./modals/viewReport";
 import bulkActions from "./modals/bulkActions";
+import viewApiRequest from "./modals/viewApiRequest";
 import viewPunishment from "./modals/viewPunishment";
 import importAlbum from "./modals/importAlbum";
 import confirm from "./modals/confirm";
@@ -33,6 +34,7 @@ const modalModules = {
 	report,
 	viewReport,
 	bulkActions,
+	viewApiRequest,
 	viewPunishment,
 	importAlbum,
 	confirm,

frontend/src/store/modules/modals/viewApiRequest.js

@@ -0,0 +1,23 @@
+/* eslint no-param-reassign: 0 */
+
+export default {
+	namespaced: true,
+	state: {
+		requestId: null,
+		request: {}
+	},
+	getters: {},
+	actions: {
+		init: ({ commit }, data) => commit("init", data),
+		viewApiRequest: ({ commit }, request) =>
+			commit("viewApiRequest", request)
+	},
+	mutations: {
+		init(state, { requestId }) {
+			state.requestId = requestId;
+		},
+		viewApiRequest(state, request) {
+			state.request = request;
+		}
+	}
+};