now able to get all users and print them

This commit is contained in:
Jona Kläß
2024-05-02 16:05:24 +02:00
parent 64edf9b81c
commit 74d9c2a62e
2 changed files with 32 additions and 4 deletions

View File

@@ -2,6 +2,7 @@
import { defineComponent, onMounted, ref } from 'vue';
import { useUserStore } from 'stores/user-store';
import { useRouter } from 'vue-router';
import { ptpUser } from 'src/models';
export default defineComponent({
name: 'ProtectedData',
@@ -16,13 +17,26 @@ export default defineComponent({
userStore.logout();
router.push('/');
};
onMounted(() => {
console.log("IM MOUNTEEED: " + userStore.userLoaded + " " + userStore.user)
const users = ref([] as ptpUser[]);
const usersLoaded = ref(false);
const loadUsers = async() => {
await userStore.loadAllUsers();
usersLoaded.value = true;
users.value = userStore.users;
}
onMounted(async () => {
userLoaded.value = userStore.userLoaded;
user.value = userStore.user;
return { user, userLoaded };
//users = await userStore.getAllUsers();
});
return { user, userLoaded, logout };
return {
user,
userLoaded,
logout,
loadUsers,
users,
usersLoaded
};
},
})
@@ -37,6 +51,16 @@ export default defineComponent({
<p>{{ user.keycloakID }}</p>
</div>
<q-btn @click="logout()" label="Logout"/>
<q-btn @click="loadUsers()" label="Print Users"/>
<div v-if="usersLoaded">
<p>Users:</p>
<div v-for="user in users" :key="user.keycloakID">
<p>{{ user.firstName }}</p>
<p>{{ user.lastName }}</p>
<p>{{ user.username }}</p>
<p>{{ user.keycloakID }}</p>
</div>
</div>
</template>
<style scoped>

View File

@@ -9,6 +9,7 @@ export const useUserStore = defineStore('userStore', {
userLoaded: false,
keycloak: null as Keycloak | null,
keycloakId: "",
users: [] as ptpUser[],
}),
getters: {},
actions: {
@@ -21,6 +22,9 @@ export const useUserStore = defineStore('userStore', {
async loadPtpUsersByKeycloakID(keycloakID : string) : Promise<responseModel> {
return (await api.get("/users/login/"+keycloakID)).data;
},
async loadAllUsers(){
this.users = (await api.get("/users/user")).data;
},
async initKeycloak() {
/**
* Variablen sind in quasar.config.js definiert und werden hier verwendet.