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

feat: basic toggle post visibility

Browse Source
This commit is contained in:
FernandoJVideira
2026-01-23 17:29:04 +00:00
parent e423497fd2
commit 6eae88f4e9
4 changed files with 343 additions and 362 deletions
Download Patch File Download Diff File Expand all files Collapse all files
app/pages/index.vue
+10 -24
View File
@@ -127,26 +127,20 @@
<TransitionGroup v-else appear enter-active-class="transition duration-500 ease-out"
enter-from-class="translate-y-4 opacity-0" enter-to-class="translate-y-0 opacity-100">
<div v-for="post in filteredPosts" :key="post.id"
:class="['relative group bg-white dark:bg-gray-900 border dark:border-gray-800 rounded-xl p-5 shadow-sm hover:border-blue-500/50 transition-all cursor-pointer mb-4 overflow-hidden', post.isHidden ? 'opacity-60 bg-gray-50' : 'bg-white']"
:class="['relative group bg-white dark:bg-gray-900 border dark:border-gray-800 rounded-xl p-5 shadow-sm hover:border-blue-500/50 transition-all cursor-pointer mb-4 overflow-hidden', post.hidden ? 'opacity-60 bg-gray-50' : 'bg-white']"
@click="fetchPostDetail(post.id)">
<div v-if="post.attachedFile"
class="absolute right-1 bottom-5 opacity-50 group-hover:opacity-100 transition-opacity duration-300">
<img src="/f.png" alt="attachment"
class="w-32 h-32 transform rotate-[-45deg] pointer-events-none select-none">
</div>
<div class="flex gap-4">
<div
class="flex flex-col items-center gap-1 text-gray-500 dark:text-gray-400 bg-gray-50 dark:bg-gray-800/50 p-2 rounded-lg h-fit">
<button class="hover:text-blue-500 transition-colors text-lg"
:class="{ 'text-orange-500': post.my_vote === 'UP' }" @click.stop="votePost(post, 1)">▲</button>
@click.stop="votePost(post, 1)">▲</button>
<span class="text-xs font-bold">{{ post.rating }}</span>
<button class="hover:text-red-500 transition-colors text-lg"
:class="{ 'text-blue-500': post.my_vote === 'DOWN' }" @click.stop="votePost(post, -1)">▼</button>
@click.stop="votePost(post, -1)">▼</button>
</div>
<div class="flex-1">
@@ -159,17 +153,9 @@
year:
'numeric', month: 'long', day: 'numeric'
}) }}</span>
<button v-if="authStore.user.id == post.submitter.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="openEditModal(post)">
<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 == post.submitter.id || authStore.user.role != 'COLLABORATOR'"
<button v-if="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.isHidden ? 'Unhide' : 'Hide'" @click.stop="toggleHide(post)">
:title="post.hidden ? 'Unhide' : 'Hide'" @click.stop="toggleHide(post)">
<svg width="16px" height="16px" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg"
fill="currentColor">
<path
@@ -177,7 +163,7 @@
<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="post.isHidden" x1="3" y1="3" x2="13" y2="13" stroke="currentColor"
<line v-if="post.hidden" x1="3" y1="3" x2="13" y2="13" stroke="currentColor"
stroke-width="1.5" stroke-linecap="round" />
</svg>
</button>
@@ -482,15 +468,15 @@ const checkQueryForModal = () => {
const toggleHide = async (post) => {
try {
const newState = !post.isHidden;
const newState = !post.hidden;
await $fetch(`${api}/publications/${post.id}`, {
await $fetch(`${api}/publications/${post.id}/hide`, {
method: 'PATCH',
headers: { Authorization: `Bearer ${token.value}` },
body: { isHidden: newState }
body: { is_hidden: newState }
});
post.isHidden = newState;
post.hidden = newState;
notifications.success(`Post ${newState ? 'hidden' : 'restored'}`);
} catch (err) {