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

src/components/Container/Page.vue

@@ -11,6 +11,7 @@ import FailedJobDetailsPage from '@/pages/jobs/FailedJobDetailsPage.vue';
 import CounterReportsPage from '@/pages/counter/CounterReportsPage.vue';
 import UserInvitationPage from '@/pages/userInvitation/UserInvitationPage.vue';
 import AcceptInvitationPage from '@/pages/acceptInvitation/AcceptInvitationPage.vue';
+import UserCommentsPage from '@/pages/userComments/userCommentsPage.vue';
 
 export default {
 	name: 'Page',
@@ -25,6 +26,7 @@ export default {
 		DashboardPage,
 		UserInvitationPage,
 		AcceptInvitationPage,
+		UserCommentsPage,
 	},
 	extends: Container,
 	data() {

src/components/Icon/Icon.vue

@@ -122,6 +122,7 @@ import UsefulTipsPrimary from './icons/UsefulTipsPrimary.vue';
 import User from './icons/User.vue';
 import View from './icons/View.vue';
 import Workflow from './icons/Workflow.vue';
+import Content from './icons/Content.vue';
 
 const svgIcons = {
 	Add,
@@ -240,6 +241,7 @@ const svgIcons = {
 	View,
 	Workflow,
 	OrcidUnauthenticated,
+	Content,
 };
 
 const props = defineProps({

src/components/Icon/icons/Content.vue

@@ -0,0 +1,16 @@
+<template>
+	<svg
+		width="18"
+		height="18"
+		viewBox="0 0 18 18"
+		fill="none"
+		xmlns="http://www.w3.org/2000/svg"
+	>
+		<path
+			d="M10.029 2.467H16.9042M10.029 4.5295H16.9042M10.029 6.592H16.9042M10.029 11.4048H16.9042M10.029 13.4672H16.9042M10.029 15.5297H16.9042M7.96874 16.219C7.96874 16.4013 7.89638 16.5761 7.76757 16.705C7.63875 16.834 7.46401 16.9066 7.28174 16.9067H1.78124C1.59897 16.9066 1.42423 16.834 1.29541 16.705C1.16659 16.5761 1.09424 16.4013 1.09424 16.219V10.7192C1.09424 10.537 1.16659 10.3622 1.29541 10.2332C1.42423 10.1042 1.59897 10.0317 1.78124 10.0315H7.28249C7.46476 10.0317 7.6395 10.1042 7.76832 10.2332C7.89713 10.3622 7.96949 10.537 7.96949 10.7192L7.96874 16.219ZM7.96874 7.28125C7.96874 7.46352 7.89638 7.63834 7.76757 7.7673C7.63875 7.89625 7.46401 7.9688 7.28174 7.969H1.78124C1.59897 7.9688 1.42423 7.89625 1.29541 7.7673C1.16659 7.63834 1.09424 7.46352 1.09424 7.28125V1.7815C1.09424 1.59923 1.16659 1.42441 1.29541 1.29545C1.42423 1.1665 1.59897 1.09395 1.78124 1.09375H7.28249C7.46476 1.09395 7.6395 1.1665 7.76832 1.29545C7.89713 1.42441 7.96949 1.59923 7.96949 1.7815L7.96874 7.28125Z"
+			stroke="#006798"
+			stroke-linecap="round"
+			stroke-linejoin="round"
+		/>
+	</svg>
+</template>

src/components/Table/Table.vue

@@ -145,8 +145,8 @@ provide('tableContext', tableContext);
 <style lang="less">
 @import '../../styles/_import';
 
-/** 
-Keeping subset of table styling to support urn plugin, which inserts table via FieldHtml 
+/**
+Keeping subset of table styling to support urn plugin, which inserts table via FieldHtml
 Better solution in future would be to implement custom Field, which would use our table component directly.
 */
 

src/components/Tabs/Tabs.vue

@@ -69,6 +69,16 @@ export default {
 				return false;
 			},
 		},
+		/**
+		 * Passing a string value will enable `controlled mode`.
+		 * In this mode, the `activeTab` is used by the parent component to control which tab is active.
+		 *
+		 * When `null`, the component will manage the active tab internally.
+		 */
+		activeTab: {
+			type: [String, null],
+			default: null,
+		},
 	},
 	data() {
 		return {
@@ -83,7 +93,11 @@ export default {
 		 * @param {String} tabId
 		 */
 		setCurrentTab(tabId) {
-			this.currentTab = tabId;
+			if (this.activeTab === null) {
+				this.currentTab = tabId;
+			} else {
+				this.$emit('update:activeTab', tabId);
+			}
 			this.$nextTick(() => {
 				$(this.$refs['button' + tabId]).focus();
 				this.updateUrl();
@@ -155,6 +169,14 @@ export default {
 		currentTab(newVal, oldVal) {
 			this.tabs.forEach((tab) => tab.isActive(tab.id === newVal));
 		},
+		/**
+		 * In controlled mode, when the `activeTab` prop changes, update the current tab.
+		 */
+		activeTab(newVal) {
+			if (newVal !== null) {
+				this.currentTab = newVal;
+			}
+		},
 	},
 	provide() {
 		return {
@@ -176,7 +198,11 @@ export default {
 		/**
 		 * Set the tab to view when loaded
 		 */
-		this.currentTab = this.defaultTab || this.tabs[0].id;
+		const initialTab =
+			this.activeTab !== null
+				? this.activeTab
+				: this.defaultTab || this.tabs[0]?.id || '';
+		this.currentTab = initialTab;
 
 		/**
 		 * Listen for global 'open-tab' events and open the correct tab when called

src/pages/dashboard/dashboardPageStore.js

@@ -186,7 +186,7 @@ export const useDashboardPageStore = defineComponentStore(
 			});
 		});
 
-		// Teoretically initFiltersFormFromQueryParams could be called only on the page load.
+		// Theoretically initFiltersFormFromQueryParams could be called only on the page load.
 		// Motivation to use watch here is to keep using the url as source of the truth, to
 		// catch bugs early, without testing all possible filters being loaded just from the url.
 		watch(

src/pages/userComments/UserCommentDetailModal.vue

@@ -0,0 +1,143 @@
+<template>
+	<SideModalBody>
+		<template #pre-title>
+			<span>{{ comment.id }}.</span>
+			<span>{{ comment.publication.authorsStringShort }}</span>
+			<span>;</span>
+			<span>{{ comment.publication.fullTitle }}</span>
+		</template>
+		<template #title>
+			{{ t('manager.userComment.viewDetailsCommentBy') }}
+		</template>
+
+		<template #description>
+			{{ comment.userName }}
+		</template>
+
+		<div class="min-w-fit p-4">
+			<div class="w-full bg-secondary">
+				<div class="border-y border-e border-s border-light">
+					<div class="flex h-full">
+						<div class="flex-grow border-e border-light p-5">
+							<Panel>
+								<PanelSection>
+									<template #header>
+										<span class="font-bold text-heading">
+											{{ t('manager.userComment.commentPreview') }}
+										</span>
+									</template>
+								</PanelSection>
+
+								<PanelSection>
+									<div>
+										<span class="text-sm-light text-secondary">
+											{{ formatShortDateTime(comment.createdAt) }}
+										</span>
+
+										<div
+											v-strip-unsafe-html="comment.commentText"
+											class="mt-3 text-lg-normal"
+										></div>
+										<div class="mt-4">
+											<div class="text-base-normal font-bold leading-5">
+												{{ comment.userName }}
+											</div>
+											<div
+												v-if="comment.userOrcidDisplayValue"
+												class="mb-1 flex items-center"
+											>
+												<Icon
+													:icon="
+														comment.isUserOrcidAuthenticated
+															? 'Orcid'
+															: 'OrcidUnauthenticated'
+													"
+												/>
+												<a
+													class="text-sm-light text-secondary"
+													target="_blank"
+													:href="comment.userOrcidDisplayValue"
+												>
+													{{ comment.userOrcidDisplayValue }}
+												</a>
+											</div>
+
+											<div
+												v-if="comment.userAffiliation"
+												class="text-base-normal"
+											>
+												{{ comment.userAffiliation }}
+											</div>
+										</div>
+									</div>
+								</PanelSection>
+							</Panel>
+							<div class="mt-6">
+								<UserCommentReportsTable
+									:items="userCommentStore.currentCommentReports"
+								/>
+							</div>
+						</div>
+						<div class="w-96 border-s border-light">
+							<div class="border-b border-light p-8">
+								<div class="text-lg-normal">
+									<span v-if="comment.isApproved">
+										{{
+											t('manager.userComment.approved.note', {
+												approvedBy: comment.approvedByUserName,
+												approvedAt: formatShortDate(comment.approvedAt),
+											})
+										}}
+									</span>
+									<span v-else>
+										{{ t('manager.userComment.approval.warning') }}
+									</span>
+								</div>
+							</div>
+							<div class="flex flex-col items-start space-y-4 p-4">
+								<PkpButton
+									:is-primary="!comment.isApproved"
+									:is-disabled="comment.isApproved"
+									@click="userCommentStore.commentToggleApproval(true)"
+								>
+									{{ t('manager.userComment.approveComment') }}
+								</PkpButton>
+								<PkpButton
+									:is-warnable="true"
+									@click="userCommentStore.commentDelete(comment)"
+								>
+									{{ t('manager.userComment.deleteComment') }}
+								</PkpButton>
+
+								<PkpButton
+									:is-disabled="!comment.isApproved"
+									@click="userCommentStore.commentToggleApproval(false)"
+								>
+									{{ t('manager.userComment.hideComment') }}
+								</PkpButton>
+							</div>
+						</div>
+					</div>
+				</div>
+			</div>
+		</div>
+	</SideModalBody>
+</template>
+
+<script setup>
+import SideModalBody from '@/components/Modal/SideModalBody.vue';
+import Panel from '@/components/Panel/Panel.vue';
+import PanelSection from '@/components/Panel/PanelSection.vue';
+import PkpButton from '@/components/Button/Button.vue';
+import Icon from '@/components/Icon/Icon.vue';
+import {useUserCommentStore} from '@/pages/userComments/userCommentStore';
+import {useLocalize} from '@/composables/useLocalize';
+import {useDate} from '@/composables/useDate';
+import UserCommentReportsTable from '@/pages/userComments/UserCommentReportsTable.vue';
+
+const {formatShortDate, formatShortDateTime} = useDate();
+const {t} = useLocalize();
+
+const userCommentStore = useUserCommentStore();
+const comment = userCommentStore.currentComment;
+</script>

src/pages/userComments/UserCommentReportDetailModal.vue

@@ -0,0 +1,107 @@
+<template>
+	<SideModalBody>
+		<template #title>
+			{{ t('manager.userComment.viewReportDetailsBy') }}
+		</template>
+
+		<template #description>
+			{{ report.userName }}
+		</template>
+
+		<div class="min-w-fit p-4">
+			<div class="w-full bg-secondary">
+				<div class="border-y border-e border-s border-light">
+					<div class="flex h-full">
+						<div class="flex-grow border-e border-light p-5">
+							<Panel>
+								<PanelSection>
+									<template #header>
+										<span class="font-bold text-heading">
+											{{ t('manager.userComment.reportPreview') }}
+										</span>
+									</template>
+								</PanelSection>
+
+								<PanelSection>
+									<div>
+										<span class="text-sm-light text-secondary">
+											{{ formatShortDateTime(report.createdAt) }}
+										</span>
+
+										<div
+											v-strip-unsafe-html="report.note"
+											class="mt-3 text-lg-normal"
+										></div>
+										<div class="mt-4">
+											<div class="text-base-normal font-bold leading-5">
+												{{ report.userName }}
+											</div>
+											<div
+												v-if="report.userOrcidDisplayValue"
+												class="mb-1 flex items-center"
+											>
+												<Icon
+													:icon="
+														report.isUserOrcidAuthenticated
+															? 'Orcid'
+															: 'OrcidUnauthenticated'
+													"
+												/>
+												<a
+													class="text-sm-light text-secondary"
+													target="_blank"
+													:href="report.userOrcidDisplayValue"
+												>
+													{{ report.userOrcidDisplayValue }}
+												</a>
+											</div>
+
+											<div
+												v-if="report.userAffiliation"
+												class="text-base-normal"
+											>
+												{{ report.userAffiliation }}
+											</div>
+										</div>
+									</div>
+								</PanelSection>
+							</Panel>
+						</div>
+						<div class="w-96 border-s border-light">
+							<div class="flex flex-col items-start space-y-4 p-4">
+								<PkpButton
+									:is-warnable="true"
+									@click="userCommentStore.reportDelete(report)"
+								>
+									{{ t('manager.userComment.deleteReport') }}
+								</PkpButton>
+							</div>
+						</div>
+					</div>
+				</div>
+			</div>
+		</div>
+	</SideModalBody>
+</template>
+
+<script setup>
+import SideModalBody from '@/components/Modal/SideModalBody.vue';
+import {useDate} from '@/composables/useDate';
+import PanelSection from '@/components/Panel/PanelSection.vue';
+import Icon from '@/components/Icon/Icon.vue';
+import Panel from '@/components/Panel/Panel.vue';
+import PkpButton from '@/components/Button/Button.vue';
+import {useUserCommentStore} from '@/pages/userComments/userCommentStore';
+
+const {formatShortDateTime} = useDate();
+
+defineProps({
+	/** The report to display information about */
+	report: {
+		type: Object,
+		required: true,
+	},
+});
+
+const userCommentStore = useUserCommentStore();
+</script>