pkp/pkp-lib#11327 Allow user to delete comment

Author: taslangraham

src/frontend/components/PkpButton/PkpButton.vue

@@ -13,12 +13,15 @@ const props = defineProps({
 		type: Boolean,
 		default: false,
 	},
+	/** Use when this button represents an action such as delete, go back, revert or cancel. */
+	isWarnable: Boolean,
 });
 
 const buttonClass = computed(() => {
 	return [
 		'pkpButton',
 		props.isSecondary ? 'pkpButton--secondary' : 'pkpButton--primary',
+		props.isWarnable ? 'pkpButton--warnable' : '',
 	];
 });
 </script>
@@ -73,4 +76,17 @@ const buttonClass = computed(() => {
 	border-color: var(--pkp-text-color-disabled);
 	color: var(--pkp-text-color-disabled);
 }
+
+.pkpButton--warnable {
+	color: var(--pkp-color-negative);
+	border-color: var(--pkp-border-color-light);
+	background-color: var(--pkp-background-color-secondary);
+}
+
+.pkpButton--warnable:disabled {
+	color: var(--pkp-text-color-disabled);
+}
+.pkpButton--warnable:hover {
+	background-color: var(--pkp-background-color-secondary);
+}
 </style>

src/frontend/components/PkpModal/PkpDialog.vue

@@ -68,6 +68,9 @@ import {
 } from 'reka-ui';
 import PkpIcon from '@/frontend/components/PkpIcon/PkpIcon.vue';
 
+import {useLocalize} from '@/composables/useLocalize';
+const {t} = useLocalize();
+
 const props = defineProps({
 	/** Used only internally, don't pass this prop via openDialog */
 	opened: {type: Boolean, default: false},

src/frontend/components/PkpUserComment/PkpUserComment.vue

@@ -38,10 +38,6 @@ const props = defineProps({
 		type: Number,
 		required: true,
 	},
-	publicationId: {
-		type: Number,
-		required: true,
-	},
 	publicationIds: {
 		type: Array,
 		required: false,

src/frontend/components/PkpUserComment/PkpUserCommentsList.vue

@@ -107,7 +107,9 @@ import {usePkpModal} from '@/frontend/composables/usePkpModal';
 import {usePkpFetch} from '@/frontend/composables/usePkpFetch';
 import {useUrl} from '@/frontend/composables/usePkpUrl';
 import {usePkpDate} from '@/frontend/composables/usePkpDate';
-import {t} from '@/utils/i18n';
+import {useLocalize} from '@/composables/useLocalize';
+
+const {t} = useLocalize();
 
 const {openModal, closeModal, openDialogNetworkError} = usePkpModal();
 const {formatShortDateTime} = usePkpDate();
@@ -145,8 +147,49 @@ const commentText = ref('');
 
 const commentActionMethods = {
 	commentReport,
+	deleteComment,
 };
 
+function deleteComment(comment) {
+	if (!currentUser || currentUser.id !== comment.userId) {
+		throw new Error('Only the comment author can delete the comment');
+	}
+
+	const {openDialog} = usePkpModal();
+	openDialog({
+		title: 'Delete Comment',
+		message: t('userComment.deleteCommentConfirm', {
+			comment: comment.commentText,
+		}),
+		actions: [
+			{
+				label: t('common.delete'),
+				isWarnable: true,
+				callback: async (close) => {
+					const {apiUrl} = useUrl(`comments/${comment.id}`);
+					const {fetch: deleteComment, isSuccess} = usePkpFetch(apiUrl, {
+						method: 'DELETE',
+					});
+					await deleteComment();
+					if (isSuccess.value) {
+						comments.value = comments.value.filter((c) => c.id !== comment.id);
+					} else {
+						openDialogNetworkError();
+					}
+
+					close();
+				},
+			},
+			{
+				label: t('common.cancel'),
+				callback: (close) => {
+					close();
+				},
+			},
+		],
+	});
+}
+
 function canReportComment(comment) {
 	return currentUser && currentUser.id !== comment.userId && comment.isApproved;
 }