pkp/pkp-lib#11576 Add backoffice UI for comment moderation

Author: taslangraham

src/pages/userComments/userCommentStore.js

@@ -62,7 +62,7 @@ export const useUserCommentStore = defineComponentStore(
 					headerSrOnly: false,
 				},
 				{
-					header: t('manager.userComment.reason'),
+					header: t('manager.userComment.report.reason'),
 					headerSrOnly: false,
 				},
 				{
@@ -150,12 +150,12 @@ export const useUserCommentStore = defineComponentStore(
 						label: t('common.delete'),
 						isWarnable: true,
 						callback: async (close) => {
-							const {apiUrl} = useUrl(
-								`comments/${report.userCommentId}/reports/${report.id}`,
+							const {isSuccess, fetch: deleteReport} = useFetch(
+								`${apiUrl.value}/${report.userCommentId}/reports/${report.id}`,
+								{
+									method: 'DELETE',
+								},
 							);
-							const {isSuccess, fetch: deleteReport} = useFetch(apiUrl, {
-								method: 'DELETE',
-							});
 
 							await deleteReport();
 
@@ -322,9 +322,12 @@ export const useUserCommentStore = defineComponentStore(
 						label: t('common.delete'),
 						isWarnable: true,
 						callback: async (close) => {
-							const {isSuccess, fetch} = useFetch(apiUrl, {
-								method: 'DELETE',
-							});
+							const {isSuccess, fetch} = useFetch(
+								`${apiUrl.value}/${comment.id}`,
+								{
+									method: 'DELETE',
+								},
+							);
 							await fetch();
 							if (isSuccess.value) {
 								pkp.eventBus.$emit(
@@ -348,6 +351,26 @@ export const useUserCommentStore = defineComponentStore(
 			});
 		}
 
+		/**
+		 * Get the options for comment types(approved, needs approval, reported), to select from to view comments
+		 */
+		const commentTypeOptions = computed(() => {
+			return [
+				{
+					label: t('manager.userComment.approved'),
+					value: 'approved',
+				},
+				{
+					label: t('manager.userComment.needsApproval'),
+					value: 'needsApproval',
+				},
+				{
+					label: t('manager.userComment.reported'),
+					value: 'reported',
+				},
+			];
+		});
+
 		/**
 		 * Open the report detail modal for a specific report.
 		 * @param {object} report - The report to open in detail view.
@@ -359,6 +382,25 @@ export const useUserCommentStore = defineComponentStore(
 				comment: comments.value.find((c) => c.id === report.userCommentId),
 			});
 		}
+
+		/**
+		 * Get the status text for a comment.
+		 * @param comment
+		 * @returns {string}
+		 */
+		function getCommentStatusText(comment) {
+			const status = [];
+			if (comment.isApproved) {
+				status.push('Approved');
+			} else {
+				status.push('Hidden/Needs Approval');
+			}
+			if (comment.isReported) {
+				status.push('Reported');
+			}
+			return status.join(', ');
+		}
+
 		return {
 			reportDelete,
 			toggleCommentApproval,
@@ -371,6 +413,7 @@ export const useUserCommentStore = defineComponentStore(
 			setCurrentReportsPage,
 			fetchReportsPaginated: fetchCommentReports,
 			openReport,
+			getCommentStatusText,
 			commentApprovalOptions,
 			selectedCommentStatus,
 			itemsPerPage,
@@ -380,6 +423,7 @@ export const useUserCommentStore = defineComponentStore(
 			currentCommentReports,
 			currentCommentReportsPagination,
 			reportsTableColumns,
+			commentTypeOptions,
 		};
 	},
 );

src/pages/userComments/userCommentsPage.vue

@@ -9,7 +9,7 @@
 			<template #top-controls>
 				<FieldSelect
 					label="Status"
-					:options="options"
+					:options="userCommentStore.commentTypeOptions"
 					primary-locale="en"
 					size="normal"
 					:value="userCommentStore.selectedCommentStatus"
@@ -47,7 +47,9 @@
 							{{ comment.userName }}
 						</span>
 					</TableCell>
-					<TableCell>{{ getStatusText(comment) }}</TableCell>
+					<TableCell>
+						{{ userCommentStore.getCommentStatusText(comment) }}
+					</TableCell>
 					<TableCell>
 						<PkpButton
 							:is-link="true"
@@ -96,32 +98,4 @@ const props = defineProps({
 
 const userCommentStore = useUserCommentStore(props);
 const {t} = useLocalize();
-
-const options = [
-	{
-		label: t('manager.userComment.approved'),
-		value: 'approved',
-	},
-	{
-		label: t('manager.userComment.needsApproval'),
-		value: 'needsApproval',
-	},
-	{
-		label: t('manager.userComment.reported'),
-		value: 'reported',
-	},
-];
-
-function getStatusText(comment) {
-	const status = [];
-	if (comment.isApproved) {
-		status.push('Approved');
-	} else {
-		status.push('Hidden/Needs Approval');
-	}
-	if (comment.isReported) {
-		status.push('Reported');
-	}
-	return status.join(', ');
-}
 </script>