pkp/pkp-lib#11327 Code cleanup and refactoring

Author: taslangraham

src/frontend/components/PkpAvatarInitials/pkpAvatarInitials.vue

@@ -5,12 +5,16 @@ import MoreOptions from './icons/MoreOptions.vue';
 import Error from './icons/Error.vue';
 import Help from './icons/Help.vue';
 import User from './icons/User.vue';
+import Orcid from '@/frontend/components/PkpIcon/icons/Orcid.vue';
+import OrcidUnauthenticated from '@/frontend/components/PkpIcon/icons/OrcidUnauthenticated.vue';
 const svgIcons = {
 	Cancel,
 	MoreOptions,
 	Error,
 	Help,
 	User,
+	Orcid,
+	OrcidUnauthenticated,
 };
 
 const props = defineProps({

src/frontend/components/PkpIcon/PkpIcon.vue

@@ -0,0 +1,19 @@
+<template>
+	<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+		<g clip-path="url(#clip0_11_315)">
+			<path
+				d="M12 24C18.6274 24 24 18.6274 24 12C24 5.37258 18.6274 0 12 0C5.37258 0 0 5.37258 0 12C0 18.6274 5.37258 24 12 24Z"
+				fill="#A6CE39"
+			/>
+			<path
+				d="M8.10938 17.4375H6.65625V7.40625H8.10938V17.4375ZM10.2188 7.40625H14.1094C17.8125 7.40625 19.4531 10.0781 19.4531 12.4219C19.4531 15 17.4375 17.4375 14.1094 17.4375H10.1719L10.2188 7.40625ZM11.6719 16.1719H13.9688C17.25 16.1719 18 13.6875 18 12.4688C18 10.4531 16.7344 8.76562 13.9219 8.76562H11.7188L11.6719 16.1719ZM8.34375 5.34375C8.34375 5.85938 7.92188 6.28125 7.40625 6.28125C6.89062 6.28125 6.46875 5.85938 6.46875 5.34375C6.46875 5.09511 6.56752 4.85665 6.74334 4.68084C6.91915 4.50502 7.15761 4.40625 7.40625 4.40625C7.92188 4.40625 8.34375 4.82812 8.34375 5.34375Z"
+				fill="white"
+			/>
+		</g>
+		<defs>
+			<clipPath id="clip0_11_315">
+				<rect width="24" height="24" fill="white" />
+			</clipPath>
+		</defs>
+	</svg>
+</template>

src/frontend/components/PkpIcon/icons/Orcid.vue

@@ -0,0 +1,27 @@
+<template>
+	<svg
+		viewBox="0 0 32 32"
+		fill="none"
+		xmlns="http://www.w3.org/2000/svg"
+		class="mr-2 inline-block w-6 align-middle"
+	>
+		<path
+			fill-rule="evenodd"
+			clip-rule="evenodd"
+			d="M29.474 16c0 7.442-6.032 13.474-13.474 13.474S2.526 23.442 2.526 16 8.558 2.526 16 2.526 29.474 8.558 29.474 16Z"
+			fill="#fff"
+		/>
+		<path
+			fill-rule="evenodd"
+			clip-rule="evenodd"
+			d="M32 16c0 8.837-7.163 16-16 16S0 24.837 0 16 7.163 0 16 0s16 7.163 16 16ZM16 29.474c7.442 0 13.474-6.032 13.474-13.474S23.442 2.526 16 2.526 2.526 8.558 2.526 16 8.558 29.474 16 29.474Z"
+			fill="#7FAA26"
+		/>
+		<path
+			fill-rule="evenodd"
+			clip-rule="evenodd"
+			d="M18.22 10.973h-4.547v11.6h4.569c3.8 0 6.133-2.82 6.133-5.8 0-1.365-.469-2.815-1.478-3.925-1.013-1.115-2.557-1.875-4.676-1.875Zm-.177 9.732h-2.347v-7.864h2.264c1.521 0 2.603.46 3.304 1.167.703.709 1.046 1.688 1.046 2.765 0 .654-.2 1.641-.83 2.46-.621.808-1.677 1.473-3.437 1.473Zm-.083-8.073c3.13 0 4.558 1.898 4.558 4.141 0-2.243-1.429-4.141-4.558-4.141h-2.472 2.472Zm6.205 4.017.001.124c0 2.869-2.242 5.591-5.924 5.591h-4.36V11.182v11.182h4.36c3.682 0 5.924-2.722 5.924-5.591l-.001-.124ZM9.5 11.005v11.588h2.024V11.005H9.5Zm1.815.208v11.172-11.172H9.71h1.606ZM10.512 10.15c.7 0 1.262-.575 1.262-1.263 0-.687-.561-1.262-1.262-1.262-.7 0-1.262.563-1.262 1.262 0 .688.561 1.262 1.262 1.262Zm.614-.408a1.044 1.044 0 0 0 0 0Z"
+			fill="#7FAA26"
+		/>
+	</svg>
+</template>

src/frontend/components/PkpIcon/icons/OrcidUnauthenticated.vue

@@ -67,9 +67,9 @@ import {
 	DialogTitle,
 } from 'reka-ui';
 import PkpIcon from '@/frontend/components/PkpIcon/PkpIcon.vue';
+import {usePkpLocalize} from '@/frontend/composables/usePkpLocalize';
 
-import {useLocalize} from '@/composables/useLocalize';
-const {t} = useLocalize();
+const {t} = usePkpLocalize();
 
 const props = defineProps({
 	/** Used only internally, don't pass this prop via openDialog */

src/frontend/components/PkpModal/PkpDialog.vue

@@ -41,7 +41,7 @@
 						<div class="pkpModalBody__closeWrapper">
 							<DialogClose
 								ref="closeModalButton"
-								type="button"
+								as="button"
 								class="pkpModalBody__close"
 							>
 								<span class="pkpModalBody__srOnly">
@@ -78,8 +78,8 @@ import PkpIcon from '@/frontend/components/PkpIcon/PkpIcon.vue';
 import {focusFirstHeading} from '@/components/Modal/modalHelpers';
 
 const containerId = useId();
-import {useLocalize} from '@/composables/useLocalize';
-const {t} = useLocalize();
+import {usePkpLocalize} from '@/frontend/composables/usePkpLocalize';
+const {t} = usePkpLocalize();
 const closeModal = inject('closeModal');
 const closeModalButton = inject('closeModalButton');
 /* Initial focus */
@@ -230,6 +230,7 @@ function handleAutoFocus(event) {
 	position: relative;
 	outline: none;
 	background-color: var(--pkp-background-color-secondary);
+	cursor: pointer;
 }
 
 .pkpModalBody__close:hover {

src/frontend/components/PkpModal/PkpModalBody.vue

@@ -1,6 +1,10 @@
 <template>
 	<div class="pkpTextarea">
-		<Label class="pkpTextarea__label" :for="textareaId">
+		<Label
+			class="pkpTextarea__label"
+			:class="{'-screenReader': isLabelSrOnly}"
+			:for="textareaId"
+		>
 			{{ props.label }}
 		</Label>
 		<textarea
@@ -35,6 +39,11 @@ const props = defineProps({
 		type: Boolean,
 		default: false,
 	},
+	// Whether the label should be visually hidden but still accessible to screen readers
+	isLabelSrOnly: {
+		type: Boolean,
+		default: false,
+	},
 });
 
 defineEmits(['update:modelValue']);

src/frontend/components/PkpTextarea/PkpTextarea.vue

@@ -0,0 +1,70 @@
+<template>
+	<div>
+		<a
+			id="scrollToComments"
+			style="cursor: pointer"
+			@click.prevent="scrollToComments"
+		>
+			{{ t('userComment.allComments', {commentCount: allCommentsCount}) }}
+		</a>
+		<div>
+			<a
+				v-if="!currentUser"
+				class="pkpScrollToComments__login"
+				style="margin-top: 2rem"
+				:href="loginUrl"
+			>
+				{{ t('userComment.login') }}
+			</a>
+		</div>
+	</div>
+</template>
+
+<script setup>
+import {usePkpLocalize} from '@/frontend/composables/usePkpLocalize';
+const {t} = usePkpLocalize();
+
+const currentUser = pkp.currentUser;
+defineProps({
+	/** The total number of comments across all publications */
+	allCommentsCount: {
+		type: Number,
+		required: true,
+	},
+	/** The URL to the login page */
+	loginUrl: {
+		type: String,
+		required: true,
+	},
+});
+
+const scrollToComments = () => {
+	// Element with ID 'pkpUserCommentsContainer' is defined in the pkpUserComment component.
+	const commentsContainer = document.getElementById('pkpUserCommentsContainer');
+	if (commentsContainer) {
+		commentsContainer.scrollIntoView({behavior: 'smooth'});
+	}
+};
+</script>
+
+<style>
+.pkpScrollToComments__login {
+	display: inline-flex;
+	align-items: center;
+	justify-content: center;
+	padding: var(--pkp-spacing-2) var(--pkp-spacing-4);
+	font: var(--pkp-font-base-bold);
+	border-radius: var(--pkp-radius);
+	cursor: pointer;
+	border: 1px solid var(--pkp-color-transparent);
+	gap: var(--pkp-spacing-2);
+	background-color: var(--pkp-color-primary);
+	color: var(--pkp-text-color-on-dark);
+	text-decoration: none;
+}
+
+.pkpScrollToComments__login:hover {
+	background-color: var(--pkp-color-hover);
+	color: var(--pkp-text-color-on-dark);
+}
+</style>

src/frontend/components/PkpUserComment/PkpScrollToComments.vue

@@ -9,7 +9,7 @@
 			>
 				<PkpButton
 					v-if="!currentUser && id === latestPublicationId"
-					class="userComments__loginButton"
+					class="pkpUserComments__loginButton"
 					@click="login"
 				>
 					{{ t('userComment.login') }}
@@ -19,7 +19,7 @@
 					:publication-id="id"
 					:items-per-page="itemsPerPage"
 					:is-latest-publication="id === latestPublicationId"
-					:total-publication-comments="commentsCountPerPublication[id] || 0"
+					:total-publication-comments="commentsCountPerPublication[id]"
 				/>
 			</PkpAccordion>
 		</template>
@@ -30,53 +30,65 @@
 import PkpUserCommentsList from '@/frontend/components/PkpUserComment/PkpUserCommentsList.vue';
 import PkpAccordion from '@/frontend/components/PkpAccordion/PkpAccordion.vue';
 import PkpButton from '@/frontend/components/PkpButton/PkpButton.vue';
-import {useLocalize} from '@/composables/useLocalize';
+import {usePkpLocalize} from '@/frontend/composables/usePkpLocalize';
 
-const {t} = useLocalize();
+const {t} = usePkpLocalize();
 const props = defineProps({
+	/** The ID of the latest publication associated with the published item(article, book, etc.)*/
 	latestPublicationId: {
 		type: Number,
 		required: true,
 	},
+	/** An array of published publication IDs associated with the published item(article, book, etc.) */
 	publicationIds: {
 		type: Array,
 		required: false,
 		default: () => [],
 	},
-	userCommentForm: {
-		type: Object,
-		required: true,
-	},
-	userCommentReportForm: {
-		type: Object,
+	/** Number of comments get when fetching comments */
+	itemsPerPage: {
+		type: Number,
 		required: true,
 	},
-	itemsPerPage: {},
+	/**
+	 * URL to redirect the user to login page
+	 */
 	loginUrl: {
 		type: String,
 		required: true,
 	},
+	/**
+	 * An object where keys are publication IDs and values are the number of comments for that publication
+	 */
 	commentsCountPerPublication: {
 		type: Object,
 		required: true,
 	},
 });
 const currentUser = pkp.currentUser;
 
+/**
+ * Returns the title for the accordion based on the publication ID and the number of comments.
+ * @param {number} id - The publication ID.
+ * @returns {string} The title for the accordion.
+ */
 function getVersionTitle(id) {
 	return t('userComment.versionWithCount', {
 		version: id,
-		versionCommentsCount: props.commentsCountPerPublication[id],
+		versionCommentsCount: props.commentsCountPerPublication[id] || 0,
 	});
 }
 
+/**
+ * Redirects the user to the login page.
+ */
 function login() {
 	window.location = props.loginUrl;
 }
 </script>
 
 <style>
-.userComments__loginButton {
+.pkpUserComments__loginButton {
 	margin-top: 0.5rem;
 	margin-bottom: 1rem;
 }