504 lines
27 KiB
Vue
504 lines
27 KiB
Vue
<template>
|
|
<div class="animate-fade-in-up">
|
|
<button
|
|
class="my-6 mx-6 flex items-center gap-2 text-sm font-bold text-blue-600 dark:text-blue-400 hover:underline"
|
|
@click="$emit('back')">
|
|
← BACK TO FEED
|
|
</button>
|
|
|
|
<article class="bg-white dark:bg-gray-900 border dark:border-gray-800 rounded-2xl shadow-xl overflow-hidden">
|
|
<div
|
|
class="relative bg-gradient-to-br from-slate-50 to-slate-100 dark:from-slate-800 dark:to-slate-900 p-8 border-b dark:border-gray-800">
|
|
|
|
<div class="flex flex-col md:flex-row justify-between items-start md:items-center gap-4 mb-4">
|
|
<button
|
|
class="flex items-center gap-2 text-xs font-bold text-gray-500 dark:text-gray-400 hover:text-blue-600 dark:hover:text-blue-400 transition-colors"
|
|
@click="showHistory = true">
|
|
<svg class="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
|
|
d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z" />
|
|
</svg>
|
|
View history
|
|
</button>
|
|
<span
|
|
class="bg-blue-100 text-blue-700 dark:bg-blue-900/30 dark:text-blue-300 px-3 py-1 rounded-full text-xs font-bold uppercase tracking-wider shadow-sm border border-blue-200 dark:border-blue-800">
|
|
{{ post.type.replace('_', ' ') }}
|
|
</span>
|
|
<span class="text-sm font-medium text-gray-500 dark:text-gray-400 flex items-center gap-2">
|
|
<svg class="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
|
|
d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z" />
|
|
</svg>
|
|
{{ new Date(post.publicationDate).toLocaleDateString('en-US', {
|
|
year:
|
|
'numeric', month: 'long', day: 'numeric'
|
|
}) }}
|
|
</span>
|
|
</div>
|
|
|
|
<div class="flex gap-6 mb-6">
|
|
<div>
|
|
<span class="text-[10px] font-bold text-gray-400 uppercase tracking-widest mb-1">Rating</span>
|
|
<div
|
|
class="flex items-center gap-2 px-4 py-1.5 bg-white/80 dark:bg-gray-800/80 backdrop-blur shadow-sm rounded-xl border border-gray-200 dark:border-gray-700">
|
|
<span class="text-xl font-black text-blue-600 dark:text-blue-400">{{ post.rating }}</span>
|
|
</div>
|
|
</div>
|
|
<h1
|
|
class="content-end text-3xl md:text-4xl font-extrabold text-gray-900 dark:text-white leading-tight">
|
|
{{
|
|
post.title }}</h1>
|
|
</div>
|
|
|
|
<div
|
|
class="grid grid-cols-1 md:grid-cols-2 gap-6 p-4 bg-white/50 dark:bg-gray-800/50 rounded-xl border border-gray-200 dark:border-gray-700 backdrop-blur-sm">
|
|
|
|
<div>
|
|
<h4 class="text-xs font-bold text-gray-400 uppercase tracking-wider mb-2">Authors
|
|
</h4>
|
|
<div class="flex flex-wrap flex-col gap-2">
|
|
<span v-for="(author, idx) in post.authors" :key="idx"
|
|
class="inline-flex items-center gap-1.5 text-sm font-semibold text-gray-700 dark:text-gray-200">
|
|
<span
|
|
class="w-6 h-6 rounded-full bg-indigo-100 text-indigo-600 dark:bg-indigo-900 dark:text-indigo-300 flex items-center justify-center text-xs">
|
|
{{ author.charAt(0) }}
|
|
</span>
|
|
{{ author }}
|
|
</span>
|
|
</div>
|
|
</div>
|
|
|
|
<div>
|
|
<h4 class="text-xs font-bold text-gray-400 uppercase tracking-wider mb-2">Submitted
|
|
By</h4>
|
|
<div class="flex items-center gap-3">
|
|
<div
|
|
class="w-8 h-8 rounded-full bg-blue-600 text-white flex items-center justify-center font-bold text-xs">
|
|
{{ post.submitter.name.charAt(0) }}
|
|
</div>
|
|
<div>
|
|
<div class="text-sm font-bold text-gray-900 dark:text-white">{{
|
|
post.submitter.name }}</div>
|
|
<div class="text-xs text-gray-500">{{ post.submitter.role }} • {{
|
|
post.submitter.email }}</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="p-8">
|
|
<div class="mb-10">
|
|
<h3 class="text-lg font-bold text-gray-900 dark:text-white mb-4 flex items-center gap-2">
|
|
<svg class="w-5 h-5 text-blue-500" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
|
|
d="M4 6h16M4 12h16M4 18h7" />
|
|
</svg>
|
|
Abstract
|
|
</h3>
|
|
<p
|
|
class="text-gray-700 dark:text-gray-300 leading-relaxed text-lg text-justify whitespace-pre-line break-normal">
|
|
{{ post.abstractText }}
|
|
</p>
|
|
</div>
|
|
|
|
<div
|
|
class="flex flex-col md:flex-row justify-between items-start md:items-center gap-6 mb-8 pb-8 border-b dark:border-gray-800">
|
|
<div v-if="post.tags && post.tags.length > 0">
|
|
<h4 class="text-xs font-bold text-gray-400 uppercase tracking-wider mb-2">Tags</h4>
|
|
<div class="flex flex-wrap gap-2">
|
|
<span v-for="tag in post.tags" :key="tag.id"
|
|
class="px-3 py-1 rounded-lg bg-gray-100 dark:bg-gray-800 text-gray-600 dark:text-gray-400 text-sm font-medium border border-gray-200 dark:border-gray-700">
|
|
#{{ tag.name }}
|
|
</span>
|
|
</div>
|
|
</div>
|
|
<div v-else class="text-sm text-gray-400 italic">No tags assigned</div>
|
|
</div>
|
|
|
|
<div v-if="post.attachedFile"
|
|
class="mb-10 bg-slate-50 dark:bg-slate-800/50 border border-slate-200 dark:border-slate-700 rounded-xl p-5 hover:border-blue-400 transition-colors group">
|
|
<div class="flex items-center justify-between">
|
|
<div class="flex items-center gap-4">
|
|
<div
|
|
class="p-3 bg-red-100 text-red-600 rounded-lg group-hover:scale-110 transition-transform">
|
|
<svg class="w-8 h-8" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
|
|
d="M7 21h10a2 2 0 002-2V9.414a1 1 0 00-.293-.707l-5.414-5.414A1 1 0 0012.586 3H7a2 2 0 00-2 2v14a2 2 0 002 2z" />
|
|
</svg>
|
|
</div>
|
|
<div>
|
|
<div class="font-bold text-gray-900 dark:text-white mb-0.5">Attachment
|
|
Available</div>
|
|
<div class="text-xs text-gray-500 font-mono truncate max-w-[200px] md:max-w-md">
|
|
{{ getFileName(post.attachedFile) }}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<button
|
|
class="flex items-center gap-2 px-5 py-2.5 bg-blue-600 hover:bg-blue-700 text-white font-bold rounded-lg shadow-lg shadow-blue-500/30 transform hover:-translate-y-0.5 transition-all"
|
|
@click="downloadFile(post)">
|
|
<svg class="w-5 h-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
|
|
d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-4l-4 4m0 0l-4-4m4 4V4" />
|
|
</svg>
|
|
Download
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<section class="border-t dark:border-gray-800 pt-8">
|
|
<div class="flex justify-between items-center mb-6">
|
|
<h3 class="text-xl font-bold flex items-center gap-2">
|
|
Comments <span class="text-xs bg-gray-100 dark:bg-gray-800 px-2 py-1 rounded-full">{{
|
|
totalComments }}</span>
|
|
</h3>
|
|
<button
|
|
class="w-10 h-10 bg-blue-600 hover:bg-blue-700 text-white rounded-full shadow-lg transition-all active:scale-95 flex items-center justify-center group"
|
|
title="New Post" @click="showCommentInput = !showCommentInput">
|
|
<svg viewBox="0 0 24 24" class="w-5 h-5 fill-none stroke-current stroke-[2.5]"
|
|
xmlns="http://www.w3.org/2000/svg">
|
|
<line x1="12" y1="5" x2="12" y2="19" />
|
|
<line x1="5" y1="12" x2="19" y2="12" />
|
|
</svg>
|
|
</button>
|
|
</div>
|
|
|
|
<Transition enter-active-class="transition duration-200 ease-out"
|
|
enter-from-class="transform scale-95 opacity-0"
|
|
enter-to-class="transform scale-100 opacity-100"
|
|
leave-active-class="transition duration-150 ease-in"
|
|
leave-from-class="transform scale-100 opacity-100"
|
|
leave-to-class="transform scale-95 opacity-0">
|
|
<div v-if="showCommentInput" class="mb-8 space-y-3">
|
|
<textarea v-model="commentText" rows="3"
|
|
class="w-full px-4 py-3 bg-gray-50 dark:bg-gray-800 border dark:border-gray-700 rounded-lg outline-none text-sm focus:ring-2 focus:ring-blue-500"
|
|
placeholder="What are your thoughts?" />
|
|
<div class="flex justify-end">
|
|
<button :disabled="!commentText.trim() || submitting"
|
|
class="bg-blue-600 hover:bg-blue-700 disabled:bg-gray-400 text-white font-bold px-6 py-2 rounded-lg transition-all"
|
|
@click="handleCommentSubmit">
|
|
{{ submitting ? 'POSTING...' : 'COMMENT' }}
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</Transition>
|
|
|
|
<div class="space-y-6">
|
|
<div v-for="comment in comments" :key="comment.id" class="flex gap-4">
|
|
<div
|
|
class="w-8 h-8 rounded-full bg-gradient-to-br from-gray-200 to-gray-300 dark:from-gray-700 dark:to-gray-600 shrink-0 flex items-center justify-center text-[10px] font-bold">
|
|
{{ comment.author.name.charAt(0) }}
|
|
</div>
|
|
<div class="flex-1">
|
|
<div
|
|
class="bg-gray-50 dark:bg-gray-800/50 p-4 rounded-xl rounded-tl-none border dark:border-gray-800">
|
|
<div class="flex justify-between mb-2">
|
|
<div>
|
|
<span class="mr-3 font-bold text-sm text-blue-600 dark:text-blue-400">{{
|
|
comment.author.name }}</span>
|
|
<button v-if="authStore.user.id == comment.author.id"
|
|
class="p-1 text-slate-400 hover:text-blue-600 hover:bg-blue-50 dark:hover:bg-blue-900/20 rounded-lg transition-all transform hover:scale-110 active:scale-95 cursor-pointer"
|
|
title="Edit" @click.stop="startEdit(comment)">
|
|
<svg class="w-4 h-4" fill="none" viewBox="0 0 24 24"
|
|
stroke="currentColor">
|
|
<path stroke-linecap="round" stroke-linejoin="round"
|
|
stroke-width="2"
|
|
d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z" />
|
|
</svg>
|
|
</button>
|
|
<button
|
|
v-if="authStore.user.id == comment.author.id || authStore.user.role != 'COLLABORATOR'"
|
|
class="p-1 text-slate-400 hover:text-amber-600 hover:bg-amber-50 dark:hover:bg-amber-900/20 rounded-lg transition-all transform hover:scale-110 active:scale-95 cursor-pointer"
|
|
:title="post.hidden ? 'Unhide' : 'Hide'"
|
|
@click.stop="toggleHide(comment)">
|
|
<svg width="16px" height="16px" viewBox="0 0 16 16"
|
|
xmlns="http://www.w3.org/2000/svg" fill="currentColor">
|
|
<path
|
|
d="M16 8s-3-5.5-8-5.5S0 8 0 8s3 5.5 8 5.5S16 8 16 8zM1.173 8a13.133 13.133 0 0 1 1.66-2.043C4.12 4.668 5.88 3.5 8 3.5c2.12 0 3.879 1.168 5.168 2.457A13.133 13.133 0 0 1 14.828 8c-.058.087-.122.183-.195.288-.335.48-.83 1.12-1.465 1.755C11.879 11.332 10.119 12.5 8 12.5c-2.12 0-3.879-1.168-5.168-2.457A13.134 13.134 0 0 1 1.172 8z" />
|
|
<path
|
|
d="M8 5.5a2.5 2.5 0 1 0 0 5 2.5 2.5 0 0 0 0-5zM4.5 8a3.5 3.5 0 1 1 7 0 3.5 3.5 0 0 1-7 0z" />
|
|
|
|
<line v-if="comment.hidden" x1="3" y1="3" x2="13" y2="13"
|
|
stroke="currentColor" stroke-width="1.5"
|
|
stroke-linecap="round" />
|
|
</svg>
|
|
</button>
|
|
</div>
|
|
|
|
<span class="text-[10px] text-gray-400 uppercase">{{ new
|
|
Date(comment.createdAt).toLocaleDateString('en-US', {
|
|
year:
|
|
'numeric', month: 'long', day: 'numeric'
|
|
}) }}</span>
|
|
</div>
|
|
<div class="mt-2">
|
|
<div v-if="editingCommentId === comment.id" class="space-y-2">
|
|
<textarea v-model="editText"
|
|
class="w-full px-3 py-2 text-sm bg-white dark:bg-gray-800 border rounded-lg focus:ring-2 focus:ring-blue-500 outline-none"
|
|
rows="2" />
|
|
<div class="flex gap-2 justify-end">
|
|
<button class="text-xs font-bold text-gray-500 hover:text-gray-700"
|
|
@click="cancelEdit">CANCEL</button>
|
|
<button class="text-xs font-bold text-blue-600 hover:text-blue-700"
|
|
:disabled="submitting" @click="handleEditSubmit(comment)">
|
|
{{ submitting ? 'SAVING...' : 'SAVE' }}
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<p v-else
|
|
:class="['text-sm leading-relaxed whitespace-pre-wrap break-normal', comment.hidden ? 'text-gray-400 italic opacity-50' : 'text-gray-700 dark:text-gray-300']">
|
|
{{ comment.hidden ? 'This comment has been hidden.' : comment.content }}
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="h-20 flex flex-col items-center justify-center">
|
|
<p v-if="comments.length === 0 && !loadingComments"
|
|
class="text-sm text-gray-500 italic py-4">No comments yet. Be the first!</p>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
</div>
|
|
</div>
|
|
</article>
|
|
</div>
|
|
<Transition enter-active-class="transition duration-200 ease-out" enter-from-class="opacity-0 scale-95"
|
|
enter-to-class="opacity-100 scale-100" leave-active-class="transition duration-150 ease-in"
|
|
leave-from-class="opacity-100 scale-100" leave-to-class="opacity-0 scale-95">
|
|
<div v-if="showHistory"
|
|
class="fixed inset-0 z-50 flex items-center justify-center bg-black/40 backdrop-blur-sm">
|
|
<div
|
|
class="bg-white dark:bg-gray-900 w-full max-w-2xl rounded-2xl shadow-xl border dark:border-gray-800 overflow-hidden">
|
|
|
|
<!-- Header -->
|
|
<div class="flex justify-between items-center px-6 py-4 border-b dark:border-gray-800">
|
|
<h3 class="text-lg font-bold text-gray-900 dark:text-white">
|
|
Publication history
|
|
</h3>
|
|
<button class="text-gray-400 hover:text-gray-600 dark:hover:text-gray-300"
|
|
@click="showHistory = false">
|
|
✕
|
|
</button>
|
|
</div>
|
|
|
|
<!-- Body -->
|
|
<div class="p-6 space-y-4 max-h-[60vh] overflow-y-auto">
|
|
<div v-for="entry in publicationHistory" :key="entry.id"
|
|
class="p-4 rounded-xl border border-gray-200 dark:border-gray-800 bg-gray-50 dark:bg-gray-800/50">
|
|
<div class="flex items-start gap-3">
|
|
<!-- Action tag -->
|
|
<span class="px-2 py-0.5 rounded-md text-[10px] font-bold uppercase tracking-wide"
|
|
:class="actionTagClass(entry.actionType)">
|
|
{{ formatAction(entry.actionType) }}
|
|
</span>
|
|
</div>
|
|
|
|
<div class="mt-2 flex items-start gap-4">
|
|
<!-- Text -->
|
|
<div class="flex-1">
|
|
<div class="text-sm text-gray-700 dark:text-gray-300">
|
|
{{ entry.description }}
|
|
</div>
|
|
<div class="mt-1 text-xs text-gray-400">
|
|
{{ new Date(entry.timestamp).toLocaleString() }}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</Transition>
|
|
</template>
|
|
|
|
<script setup>
|
|
const props = defineProps({
|
|
post: Object,
|
|
api: String,
|
|
token: String
|
|
});
|
|
|
|
const emit = defineEmits(['back', 'comment-added']);
|
|
|
|
const authStore = useAuthStore();
|
|
const notifications = useNotificationStore();
|
|
const comments = ref([]);
|
|
const commentText = ref('');
|
|
const submitting = ref(false);
|
|
const loadingComments = ref(false);
|
|
const showCommentInput = ref(false);
|
|
const totalComments = ref(0);
|
|
const editingCommentId = ref(null);
|
|
const editText = ref('');
|
|
const showHistory = ref(false)
|
|
const publicationHistory = ref([])
|
|
|
|
const actionTagClass = (type) => {
|
|
const map = {
|
|
// Publication lifecycle
|
|
CREATE_PUBLICATION: 'bg-green-100 text-green-700 dark:bg-green-900/40 dark:text-green-300',
|
|
DELETE_PUBLICATION: 'bg-red-100 text-red-700 dark:bg-red-900/40 dark:text-red-300',
|
|
EDIT_PUBLICATION: 'bg-blue-100 text-blue-700 dark:bg-blue-900/40 dark:text-blue-300',
|
|
TAG_PUBLICATION: 'bg-purple-100 text-purple-700 dark:bg-purple-900/40 dark:text-purple-300',
|
|
HIDE_PUBLICATION: 'bg-yellow-100 text-yellow-700 dark:bg-yellow-900/40 dark:text-yellow-300',
|
|
|
|
// Interaction
|
|
COMMENT_PUBLICATION: 'bg-sky-100 text-sky-700 dark:bg-sky-900/40 dark:text-sky-300',
|
|
EDIT_COMMENT: 'bg-indigo-100 text-indigo-700 dark:bg-indigo-900/40 dark:text-indigo-300',
|
|
HIDE_COMMENT: 'bg-orange-100 text-orange-700 dark:bg-orange-900/40 dark:text-orange-300',
|
|
RATE_PUBLICATION: 'bg-pink-100 text-pink-700 dark:bg-pink-900/40 dark:text-pink-300',
|
|
|
|
// User / admin actions
|
|
CREATE_USER: 'bg-emerald-100 text-emerald-700 dark:bg-emerald-900/40 dark:text-emerald-300',
|
|
DELETE_USER: 'bg-rose-100 text-rose-700 dark:bg-rose-900/40 dark:text-rose-300',
|
|
CHANGE_ROLE: 'bg-teal-100 text-teal-700 dark:bg-teal-900/40 dark:text-teal-300',
|
|
CHANGE_EMAIL: 'bg-cyan-100 text-cyan-700 dark:bg-cyan-900/40 dark:text-cyan-300',
|
|
CHANGE_NAME: 'bg-lime-100 text-lime-700 dark:bg-lime-900/40 dark:text-lime-300',
|
|
|
|
// Fallback
|
|
UPLOAD_PUBLICATION: 'bg-gray-200 text-gray-700 dark:bg-gray-700 dark:text-gray-300'
|
|
}
|
|
|
|
return map[type] ?? 'bg-gray-200 text-gray-700 dark:bg-gray-700 dark:text-gray-300'
|
|
}
|
|
|
|
const formatAction = (type) => {
|
|
return type
|
|
.replace(/_/g, ' ')
|
|
.toLowerCase()
|
|
}
|
|
|
|
const toggleHide = async (comment) => {
|
|
try {
|
|
comment.hidden = !comment.hidden;
|
|
|
|
await $fetch(`${props.api}/comments/${comment.id}`, {
|
|
method: 'PATCH',
|
|
headers: { Authorization: `Bearer ${props.token}` },
|
|
body: { is_hidden: comment.hidden }
|
|
});
|
|
|
|
notifications.success(comment.hidden ? "Comment hidden" : "Comment visible");
|
|
} catch (err) {
|
|
comment.hidden = !comment.hidden;
|
|
notifications.error("Failed to update comment visibility");
|
|
}
|
|
};
|
|
|
|
const startEdit = (comment) => {
|
|
editingCommentId.value = comment.id;
|
|
editText.value = comment.content;
|
|
};
|
|
|
|
const cancelEdit = () => {
|
|
editingCommentId.value = null;
|
|
editText.value = '';
|
|
};
|
|
|
|
const handleEditSubmit = async (comment) => {
|
|
if (!editText.value.trim() || submitting.value) return;
|
|
|
|
submitting.value = true;
|
|
try {
|
|
await $fetch(`${props.api}/comments/${comment.id}`, {
|
|
method: 'PUT',
|
|
headers: { Authorization: `Bearer ${props.token}` },
|
|
body: { content: editText.value }
|
|
});
|
|
|
|
comment.content = editText.value;
|
|
editingCommentId.value = null;
|
|
notifications.success("Comment updated!");
|
|
} catch (err) {
|
|
notifications.error("Failed to edit comment");
|
|
} finally {
|
|
submitting.value = false;
|
|
}
|
|
};
|
|
|
|
const fetchComments = async () => {
|
|
if (loadingComments.value) return;
|
|
loadingComments.value = true;
|
|
try {
|
|
const data = await $fetch(`${props.api}/publications/${props.post.id}/comments`, {
|
|
headers: { Authorization: `Bearer ${props.token}` }
|
|
});
|
|
|
|
comments.value = data.items || data;
|
|
totalComments.value = data.total || comments.value.length;
|
|
} catch (err) {
|
|
console.error("Comments fetch error", err);
|
|
} finally {
|
|
loadingComments.value = false;
|
|
}
|
|
};
|
|
|
|
const fetchPublicationHistory = async () => {
|
|
try {
|
|
const history = await $fetch(`${props.api}/publications/${props.post.id}/history`, {
|
|
headers: { Authorization: `Bearer ${props.token}` }
|
|
});
|
|
return history;
|
|
} catch (err) {
|
|
console.error("Publication history fetch error", err);
|
|
return [];
|
|
}
|
|
};
|
|
|
|
const handleCommentSubmit = async () => {
|
|
submitting.value = true;
|
|
try {
|
|
const newComment = await $fetch(`${props.api}/publications/${props.post.id}/comments`, {
|
|
method: 'POST',
|
|
headers: { Authorization: `Bearer ${props.token}` },
|
|
body: { content: commentText.value }
|
|
});
|
|
|
|
comments.value.unshift(newComment);
|
|
totalComments.value++;
|
|
commentText.value = '';
|
|
showCommentInput.value = false;
|
|
emit('comment-added');
|
|
notifications.success("Comment posted!");
|
|
} catch (err) {
|
|
notifications.error("Failed to post comment");
|
|
} finally {
|
|
submitting.value = false;
|
|
}
|
|
};
|
|
|
|
const getFileName = (fullPath) => {
|
|
if (!fullPath) return null;
|
|
return fullPath.split(/[/\\]/).pop();
|
|
};
|
|
|
|
const downloadFile = async () => {
|
|
if (!props.post.attachedFile) return;
|
|
|
|
const filename = getFileName(props.post.attachedFile);
|
|
|
|
const downloadUrl = `${props.api}/publications/download/${filename}`;
|
|
|
|
try {
|
|
const link = document.createElement('a');
|
|
link.href = downloadUrl;
|
|
link.setAttribute('download', filename);
|
|
document.body.appendChild(link);
|
|
link.click();
|
|
document.body.removeChild(link);
|
|
} catch (e) {
|
|
notifications.error("Could not download file.");
|
|
}
|
|
};
|
|
|
|
onMounted(() => {
|
|
fetchComments();
|
|
fetchPublicationHistory().then(history => {
|
|
publicationHistory.value = history;
|
|
});
|
|
});
|
|
</script>
|