SyntaxSquad/DAEProject_Frontend
4
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix frontend bugs #19

Merged
Edd merged 2 commits from na/fix-frontend into master 2026-01-26 22:01:32 +00:00
Conversation 2 Commits 2 Files Changed 3
+109 -1
1 changed files with 109 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files
Showing only changes of commit 7902992b77 - Show all commits
app/components/post/PostDetail.vue
+108
View File
@@ -11,6 +11,15 @@
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('_', ' ') }}
@@ -256,6 +265,53 @@
</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>
@@ -277,6 +333,43 @@ 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 {
@@ -343,6 +436,18 @@ const fetchComments = async () => {
}
};
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 {
@@ -391,5 +496,8 @@ const downloadFile = async () => {
onMounted(() => {
fetchComments();
fetchPublicationHistory().then(history => {
publicationHistory.value = history;
});
});
</script>