From 20d95873718c4d1cf3ecda3de57bb7b160187c31 Mon Sep 17 00:00:00 2001 From: Alessandro Venturini Date: Mon, 1 Sep 2025 18:18:12 +0200 Subject: [PATCH] chore: nicer req requests indicator now the requests are cached into a store, this solves the visual bug that caused the indicator to disappear on every page change and then reappear after the requests were loaded --- src/components/NavbarLayout.vue | 16 +++++++-------- src/stores/registrationRequests.ts | 20 +++++++++++++++++++ src/views/admin/ManageUsersView.vue | 30 ++++++++++++++--------------- 3 files changed, 43 insertions(+), 23 deletions(-) create mode 100644 src/stores/registrationRequests.ts diff --git a/src/components/NavbarLayout.vue b/src/components/NavbarLayout.vue index 6c5e1ba..2722e55 100644 --- a/src/components/NavbarLayout.vue +++ b/src/components/NavbarLayout.vue @@ -32,7 +32,7 @@ Users
@@ -81,7 +81,7 @@ Admin
@@ -94,7 +94,7 @@ Users
@@ -144,9 +144,8 @@ import { useUserInfoStore } from '@/stores/user-info' import { Role } from '@/model/users-management/User' import { useRouter } from 'vue-router' import { useNotificationsStore } from '@/stores/notifications' -import type { RegistrationRequest } from '@/model/users-management/RegistrationRequest' -import { onMounted, ref } from 'vue' -import { getAllRegistrationRequests } from '@/api/users-management/requests/users' +import { computed, onMounted } from 'vue' +import { useRegistrationRequestsStore } from '@/stores/registrationRequests' defineProps({ title: { type: String }, @@ -158,11 +157,12 @@ defineProps({ const userInfo = useUserInfoStore() const router = useRouter() +const registrationRequestsStore = useRegistrationRequestsStore() const goBack = () => router.back() -const registrationRequests = ref([]) +const registrationRequests = computed(() => registrationRequestsStore.registrationRequests) onMounted(async () => { - registrationRequests.value = await getAllRegistrationRequests(userInfo.token) + await registrationRequestsStore.updateRegistrationRequests() }) diff --git a/src/stores/registrationRequests.ts b/src/stores/registrationRequests.ts new file mode 100644 index 0000000..fc5c836 --- /dev/null +++ b/src/stores/registrationRequests.ts @@ -0,0 +1,20 @@ +import { defineStore } from 'pinia' +import { useUserInfoStore } from './user-info' +import type { RegistrationRequest } from '@/model/users-management/RegistrationRequest' +import { getAllRegistrationRequests } from '@/api/users-management/requests/users' +import { ref } from 'vue' + +export const useRegistrationRequestsStore = defineStore('registrationRequests', () => { + const userInfo = useUserInfoStore() + const registrationRequests = ref() + + async function updateRegistrationRequests() { + registrationRequests.value = await getAllRegistrationRequests(userInfo.token) + } + + function removeRequest(req: RegistrationRequest) { + registrationRequests.value = registrationRequests.value?.filter((u) => u.email !== req.email) + } + + return { registrationRequests, updateRegistrationRequests, removeRequest } +}) diff --git a/src/views/admin/ManageUsersView.vue b/src/views/admin/ManageUsersView.vue index fabe7e2..b8bbb84 100644 --- a/src/views/admin/ManageUsersView.vue +++ b/src/views/admin/ManageUsersView.vue @@ -5,27 +5,28 @@ import { Role, type User } from '@/model/users-management/User' import { useLoadingOverlayStore } from '@/stores/loading-overlay' import { presentSuccess, useSuccessPresenterStore } from '@/stores/success-presenter' import { useUserInfoStore } from '@/stores/user-info' -import { onMounted, ref } from 'vue' +import { computed, onMounted, ref } from 'vue' import { approveRegistrationRequest, rejectRegistrationRequest, deleteUser, - getAllRegistrationRequests, getAllUsers, } from '@/api/users-management/requests/users' +import { useRegistrationRequestsStore } from '@/stores/registrationRequests' const loadingOverlay = useLoadingOverlayStore() const successPresenter = useSuccessPresenterStore() +const registrationRequestsStore = useRegistrationRequestsStore() const userInfo = useUserInfoStore() const registeredUsers = ref() -const unregisteredUsers = ref() +const unregisteredUsers = computed(() => registrationRequestsStore.registrationRequests) onMounted(async () => { try { loadingOverlay.startLoading() Promise.all([ (registeredUsers.value = await getAllUsers(userInfo.token)), - (unregisteredUsers.value = await getAllRegistrationRequests(userInfo.token)), + await registrationRequestsStore.updateRegistrationRequests(), ]) } finally { loadingOverlay.stopLoading() @@ -43,29 +44,28 @@ async function removeUser(user: User) { } } -async function rejectRequest(user: RegistrationRequest) { +async function rejectRequest(req: RegistrationRequest) { try { - await rejectRegistrationRequest(userInfo.token, user.email) - unregisteredUsers.value = unregisteredUsers.value?.filter((u) => u.email !== user.email) - showToastMessage(`Request for ${user.nickname} rejected successfully.`) + await rejectRegistrationRequest(userInfo.token, req.email) + registrationRequestsStore.removeRequest(req) + showToastMessage(`Request for ${req.nickname} rejected successfully.`) } finally { loadingOverlay.stopLoading() } } -async function approveRequest(user: RegistrationRequest) { +async function approveRequest(req: RegistrationRequest) { try { loadingOverlay.startLoading() - await approveRegistrationRequest(userInfo.token, user.email) - - unregisteredUsers.value = unregisteredUsers.value?.filter((u) => u.email !== user.email) + await approveRegistrationRequest(userInfo.token, req.email) + registrationRequestsStore.removeRequest(req) const newUser: User = { - email: user.email, - nickname: user.nickname, + email: req.email, + nickname: req.nickname, role: Role.User, } registeredUsers.value?.push(newUser) - showToastMessage(`Request for ${user.nickname} accepted successfully.`) + showToastMessage(`Request for ${req.nickname} accepted successfully.`) } finally { loadingOverlay.stopLoading() }