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/admin/users/index.vue
+1 -1
View File
@@ -497,7 +497,7 @@ const config = useRuntimeConfig();
const api = config.public.apiBase;
const authStore = useAuthStore();
const { token } = storeToRefs(authStore);
const notifications = useNotifications();
const notifications = useNotificationStore();
const users = ref([]);
const loading = ref(false);
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) {
app/pages/profile/index.vue
+13 -8
View File
@@ -618,7 +618,7 @@
</template>
<script setup>
import { ref, computed, onMounted } from 'vue';
import { ref, computed, onMounted, watch } from 'vue';
import { useRouter } from 'vue-router';
import { useAuthStore } from "~/stores/auth-store.js";
import { storeToRefs } from "pinia";
@@ -765,6 +765,11 @@ async function fetchProfileData() {
avatarUrl: `https://ui-avatars.com/api/?name=${encodeURIComponent(userData.name)}&background=0D8ABC&color=fff`
};
if (authStore.user) {
authStore.user.name = userData.name;
authStore.user.email = userData.email;
}
userProfile.value.publications = (publicationsData).map(pub => {
const pubDate = new Date(pub.publicationDate);
@@ -837,21 +842,21 @@ const updateProfile = async () => {
const name = newUsername.value.trim();
const email = newEmail.value.trim();
if (name.length === 0 || email.length === 0) {
notifications.error("Name and email cannot be empty");
return;
}
await $fetch(`${api}/users/me`, {
method: 'PATCH',
headers: { Authorization: `Bearer ${token.value}` },
body: {
name: name,
email: email
name: name || userProfile.value.name,
email: email || userProfile.value.email
}
});
notifications.success("Profile updated successfully");
authStore.logout();
if (authStore.user) {
authStore.user.name = name || userProfile.value.name;
authStore.user.email = email || userProfile.value.email;
}
} catch (error) {
console.error("Profile update failed", error);