Final front end #16

Merged
AfonsoCMSousa merged 4 commits from na/final-frontend into develop 2026-01-23 21:23:10 +00:00
Showing only changes of commit 582cb3cb4c - Show all commits
+37 -63
View File
@@ -441,27 +441,30 @@
class="relative bg-slate-50 dark:bg-slate-800/50 rounded-xl p-5 border border-slate-200 dark:border-slate-800">
<div class="flex gap-4">
<div class="flex flex-col items-center min-w-[90px] text-center">
<span class="text-xs font-bold text-slate-500 uppercase mb-1">{{ new
Date(item.timestamp).toLocaleDateString('en-US', {
month: 'short',
day: 'numeric'
}) }}</span>
<span class="text-xs text-slate-400">{{ new
Date(item.timestamp).toLocaleTimeString([], {
hour: '2-digit',
minute: '2-digit'
}) }}</span>
<span class="text-xs font-bold text-slate-500 uppercase mb-1">
{{ new Date(item.timestamp).toLocaleDateString('en-US', {
month:
'short', day: 'numeric' }) }}
</span>
<span class="text-xs text-slate-400">
{{ new Date(item.timestamp).toLocaleTimeString([], {
hour:
'2-digit', minute: '2-digit' }) }}
</span>
</div>
<div class="flex-1">
<div class="flex items-center gap-2 mb-2">
<span
class="px-2.5 py-1 rounded-md text-xs font-bold uppercase tracking-wide bg-slate-200 dark:bg-slate-700 text-slate-700 dark:text-slate-300">{{
item.action.replace('_', ' ') }}</span>
<span class="text-xs text-slate-400 font-medium">{{ item.target_type
}} #{{ item.target_id }}</span>
class="px-2.5 py-1 rounded-md text-xs font-bold uppercase tracking-wide bg-slate-200 dark:bg-slate-700 text-slate-700 dark:text-slate-300">
{{ item.actionType.replace('_', ' ') }}
</span>
<span class="text-xs text-slate-400 font-medium">
{{ item.targetType }} #{{ item.targetId }}
</span>
</div>
<p class="text-sm text-slate-700 dark:text-slate-300 leading-relaxed">{{
item.details }}</p>
<p class="text-sm text-slate-700 dark:text-slate-300 leading-relaxed">
{{ item.description }}
</p>
</div>
</div>
</div>
@@ -504,51 +507,6 @@ const searchQuery = ref('');
const selectedUser = ref(null);
const userHistory = ref([]);
const generateMockHistory = () => {
const actions = ['UPLOADED_PUBLICATION', 'ADDED_COMMENT', 'CORRECTED_PUBLICATION', 'RATED_PUBLICATION', 'TAGGED_PUBLICATION'];
const targetTypes = ['Publication', 'Comment', 'Review'];
const details = [
'Fez upload da publicação "A New Technique for Data Science"',
'Comentou na publicação "Reference Paper Y"',
'Corrigiu informação da publicação "Machine Learning Advances"',
'Atribuiu 5 estrelas à publicação "Deep Learning Research"',
'Adicionou tag "AI" à publicação "Neural Networks Study"',
'Fez upload da publicação "Quantum Computing Overview"',
'Comentou na publicação "Data Analysis Methods"',
'Corrigiu informação da publicação "Statistical Models in Research"',
'Atribuiu 4 estrelas à publicação "Big Data Trends"',
'Adicionou tag "Data Science" à publicação "Data Visualization Techniques"'
];
const history = [];
const numEvents = Math.floor(Math.random() * 20) + 8;
for (let i = 0; i < numEvents; i++) {
const randomAction = actions[Math.floor(Math.random() * actions.length)];
const randomTargetType = targetTypes[Math.floor(Math.random() * targetTypes.length)];
const randomDetails = details[Math.floor(Math.random() * details.length)];
const daysAgo = Math.floor(Math.random() * 30);
const hoursAgo = Math.floor(Math.random() * 24);
const minutesAgo = Math.floor(Math.random() * 60);
const timestamp = new Date();
timestamp.setDate(timestamp.getDate() - daysAgo);
timestamp.setHours(timestamp.getHours() - hoursAgo);
timestamp.setMinutes(timestamp.getMinutes() - minutesAgo);
history.push({
id: 1000 + i,
action: randomAction,
target_type: randomTargetType,
target_id: 200 + Math.floor(Math.random() * 50),
details: randomDetails,
timestamp: timestamp.toISOString()
});
}
return history.sort((a, b) => new Date(b.timestamp).getTime() - new Date(a.timestamp).getTime());
};
const formData = reactive({
id: 0,
name: '',
@@ -654,10 +612,26 @@ const confirmDelete = async (user) => {
}
};
const openUserDetails = (user) => {
const openUserDetails = async (user) => {
selectedUser.value = user;
userHistory.value = generateMockHistory(user.id);
showDetailsModal.value = true;
try {
const data = await $fetch(`${api}/users/${user.id}/history`, {
method: 'GET',
headers: { Authorization: `Bearer ${token.value}` }
});
if (data && typeof data === 'object') {
userHistory.value = Object.values(data).sort((a, b) => b.timestamp - a.timestamp);
} else {
userHistory.value = [];
}
} catch (error) {
console.error("Error fetching user history", error);
notifications.error("Failed to load activity history");
userHistory.value = [];
}
};
const closeDetailsModal = () => {