apps/ptpchat-frontend
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Merge pull request #3 from joschuatonn/feature/defaultFunctionality

Browse Source 
Feature/default functionality
This commit is contained in:
JonaKl
2024-05-13 08:23:49 +02:00
committed by GitHub
parent da6624f544 4df0ff4bd2
commit cfd19c2660
5 changed files with 225 additions and 46 deletions
Download Patch File Download Diff File Expand all files Collapse all files

139
src/components/ProtectedData.vue
View File

@@ -1,18 +1,57 @@
<script lang="ts">
import { defineComponent, onMounted, ref } from 'vue';
import { useUserStore } from 'stores/user-store';
import { defineComponent, onMounted, Ref, ref } from 'vue';
import { useRouter } from 'vue-router';
import { ptpUser } from 'src/models';
import { useUserStore } from 'stores/user-store';
import { useChatStore } from 'stores/chat-store';
import { ptpUser, chat } from 'src/models';
export default defineComponent({
name: 'ProtectedData',
components: {},
setup() {
const userStore = useUserStore();
const chatStore = useChatStore();
const router = useRouter();
const user = ref();
const userLoaded = ref(false);
const chatName = ref('');
const userSearch = ref('');
const chats = ref([] as chat[]);
const chatsLoaded = ref(false);
const matchingUsers = ref([] as ptpUser[]);
const usersForChat = ref([] as string[]);
const usersForChatOptions = ref([] as {label: string, value: string}[]);
const updateUsersForChatOptions = async () =>{
if(!usersLoaded.value){
await loadUsers();
}
console.log(user.value);
console.log(users.value);
usersForChatOptions.value = users.value
.sort((a, b) => compare(a.firstName + ' ' + a.lastName, userSearch) - compare(b.firstName + ' ' + b.lastName, userSearch))
.filter((u, index) => u.id != user.value.id && index < 5)
.map((u) => {
return {label: u.firstName + ' ' + u.lastName, value: u.id};
});
}
const compare = (a: string, match: Ref<string>): number => {
if(a == match.value){
return 2;
}
if(a.includes(match.value)){
return 1;
}
return 0;
};
const logout = () => {
userStore.logout();
router.push('/');
@@ -23,7 +62,24 @@ export default defineComponent({
await userStore.loadAllUsers();
usersLoaded.value = true;
users.value = userStore.users;
};
const createChat = async(chatName: string)=>{
if(chatName == ""){
chatName = "Chat";
}
await chatStore.createChat(chatName, usersForChat.value);
}
const loadChats = async() => {
chats.value = await chatStore.loadChatsByUser();
chatsLoaded.value = true;
users.value = await userStore.loadAllUsers();
usersLoaded.value = true;
console.log(users.value);
console.log(chats.value);
};
onMounted(async () => {
userLoaded.value = userStore.userLoaded;
user.value = userStore.user;
@@ -32,10 +88,25 @@ export default defineComponent({
return {
user,
userLoaded,
logout,
loadUsers,
users,
usersLoaded
usersLoaded,
chatName,
createChat,
loadChats,
chats,
chatsLoaded,
userSearch,
matchingUsers,
usersForChatOptions,
usersForChat,
updateUsersForChatOptions,
};
},
})
@@ -48,19 +119,73 @@ export default defineComponent({
<p>{{ user.firstName }}</p>
<p>{{ user.lastName }}</p>
<p>{{ user.username }}</p>
<p>{{ user.keycloakID }}</p>
<p>{{ user.id }}</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">
<div v-for="user in users" :key="user.id">
<p>{{ user.firstName }}</p>
<p>{{ user.lastName }}</p>
<p>{{ user.username }}</p>
<p>{{ user.keycloakID }}</p>
<p>{{ user.id }}</p>
</div>
</div>
<br>
<q-input
v-model="chatName"
label="Chat Name"
clearable
/>
<div class="q-gutter-y-md" style="max-width: 300px">
<q-input
standout
bottom-slots
v-model="userSearch"
label="Search User"
clearable
filled
color="orange"
@update:model-value="updateUsersForChatOptions()"
>
<template v-slot:after>
<q-btn
round
dense
flat
icon="search"
@click="updateUsersForChatOptions()"
/>
</template>
</q-input>
</div>
<div class="q-pa-lg">
<q-option-group
v-model="usersForChat"
rules="[val => val.length > 0 || 'Please select at least one user']"
:options="usersForChatOptions"
type="checkbox"
color="primary"
inline
>
</q-option-group>
</div>
<q-btn @click="createChat(chatName)" label="Create Chat"/>
<br>
<q-btn @click="loadChats()" label="Load Chats"/>
<div v-if="chatsLoaded">
<p>Chats:</p>
<div v-for="chat in chats" :key="chat.id">
<h5>{{ chat.displayName }}</h5>
<div v-for="ptpUser in chat.members" :key="ptpUser.id">
<p>{{ ptpUser.id }}</p>
</div>
</div>
</div>
</template>
<style scoped>

11
src/main.ts
View File

@@ -18,14 +18,9 @@ const keycloak: Keycloak = await userStore.initKeycloak();
// Anfrage ans Backend
if (keycloak.subject) {
userStore.keycloakId = keycloak.subject;
//userStore.loadPtpUsersByKeycloakID(keycloak.subject);
await userStore.getPtpUserByKeycloakID(keycloak.subject);
/*console.log(userStore.userLoaded);
if(userStore.userLoaded) {
console.log("Hier ist der Bruder: " + JSON.stringify(userStore.user));
}*/
userStore.loadPtpUsersByKeycloakID(keycloak.subject).then(user => {
userStore.id = keycloak.subject;
await userStore.getPtpUserById(keycloak.subject);
userStore.loadPtpUsersById(keycloak.subject).then(user => {
console.log(JSON.stringify(user));
})
} else {

20
src/models.ts
View File

@@ -1,5 +1,5 @@
export interface ptpUser {
keycloakID: string;
id: string;
firstName: string;
lastName: string;
username: string;
@@ -11,7 +11,25 @@ export interface responseModel {
response: any;
}
export interface chat{
id: number;
members: ptpUser[];
messages: message[];
displayName: string;
}
export interface user{
id: string;
firstName: string;
lastName: string;
username: string;
chats: chat[];
}
export interface message {
id: number;
chat: chat;
sender:user;
content: string;
timestamp: string;
isOwn: boolean;

37
src/stores/chat-store.ts Normal file
View File

@@ -0,0 +1,37 @@
import { defineStore } from 'pinia';
import { chat } from 'src/models';
import { api } from 'src/boot/axios';
import { useUserStore } from 'stores/user-store';
const userStore = useUserStore();
export const useChatStore = defineStore('chatStore',{
state:() => ({
chats: [] as chat[],
}),
actions: {
async getChatsByUser(): Promise<chat[]> {
if(!this.chats){
await this.loadChatsByUser();
}
return this.chats;
},
async loadChatsByUser() : Promise<chat[]>{
this.chats = (await api.get("/users/chat/" + userStore.id)).data.response;
return this.chats;
},
async createChat(chatName: string, members: string[]){
if(userStore.id) {
if (!members.includes(userStore.id)) {
members.push(userStore.id);
}
}else if(userStore.user?.id){
if (! members.includes(userStore.user.id)) {
members.push(userStore.user.id);
}
}
console.log(members);
return (await api.post("/chats/create/" + chatName, members)).data;
}
}
});

64
src/stores/user-store.ts
View File

@@ -3,6 +3,29 @@ import { api } from 'src/boot/axios';
import { ptpUser, responseModel } from 'src/models';
import Keycloak, { KeycloakInitOptions, KeycloakLoginOptions } from 'keycloak-js';
/**
* Variablen für Keycloak Funktionen; sind in quasar.config.js definiert.
* @param keycloakPort Port, auf dem Keycloak läuft, hinterlegt in docker-compose.yml
* @param frontendPort Port, auf dem das Frontend läuft, hinterlegt in quasar.config.js und realm-export.json von Keycloak für die Redirect-URL
* @param realm Name des Realms, hinterlegt in realm-export.json von Keycloak
* @param clientId Name des Clients, hinterlegt in realm-export.json von Keycloak
*/
const keycloakPort: string = "" + process.env.PORT_KEYCLOAK;
const frontendPort: string = "" + process.env.PORT_FRONTEND;
const realm : string= "" + process.env.KEYCLOAK_REALM;
const clientId: string = "" + process.env.KEYCLOAK_CLIENT_ID;
const keycloak: Keycloak = new Keycloak({
url: 'http://localhost:' + keycloakPort + '/',
realm: realm,
clientId: clientId
});
const initOptions: KeycloakInitOptions = {
onLoad: 'login-required', //erzwingt Login
redirectUri: 'http://localhost:' + frontendPort + '/',
checkLoginIframe: false,
locale: 'login-required',
}
export const useUserStore = defineStore('userStore', {
state: () => ({
user: null as ptpUser | null,
@@ -10,52 +33,33 @@ export const useUserStore = defineStore('userStore', {
users: [] as ptpUser[],
usersLoaded: false,
keycloak: null as Keycloak | null,
keycloakId: "",
id: "",
users: [] as ptpUser[],
}),
getters: {},
actions: {
async getPtpUserByKeycloakID(keycloakID : string) {
await this.loadPtpUsersByKeycloakID(keycloakID).then((response : responseModel) => {
async getPtpUserById(id : string) {
await this.loadPtpUsersById(id).then((response : responseModel) => {
this.user = response.response;
this.userLoaded = true;
});
},
async loadPtpUsersByKeycloakID(keycloakID : string) : Promise<responseModel> {
return (await api.get("/users/login/"+keycloakID)).data;
async loadPtpUsersById(id : string) : Promise<responseModel> {
return (await api.get("/users/login/"+id)).data;
},
getAllPtpUsers() {
this.loadAllPtpUsers().then((response : ptpUser[]) => {
this.users = response;
this.usersLoaded = true;
})
},
async loadAllPtpUsers() {
return (await api.get("/users/user")).data;
},
async initKeycloak() {
/**
* Variablen sind in quasar.config.js definiert und werden hier verwendet.
* @param keycloakPort Port, auf dem Keycloak läuft, hinterlegt in docker-compose.yml
* @param frontendPort Port, auf dem das Frontend läuft, hinterlegt in quasar.config.js und realm-export.json von Keycloak für die Redirect-URL
* @param realm Name des Realms, hinterlegt in realm-export.json von Keycloak
* @param clientId Name des Clients, hinterlegt in realm-export.json von Keycloak
*/
const keycloakPort: string = "" + process.env.PORT_KEYCLOAK;
const frontendPort: string = "" + process.env.PORT_FRONTEND;
const realm : string= "" + process.env.KEYCLOAK_REALM;
const clientId: string = "" + process.env.KEYCLOAK_CLIENT_ID;
const keycloak: Keycloak = new Keycloak({
url: 'http://localhost:' + keycloakPort + '/',
realm: realm,
clientId: clientId
});
const initOptions: KeycloakInitOptions = {
onLoad: 'login-required', //erzwingt Login
redirectUri: 'http://localhost:' + frontendPort + '/',
checkLoginIframe: false,
locale: 'login-required',
}
async initKeycloak() : Promise<Keycloak>{
try {
await keycloak.init(initOptions).then( (auth: boolean): void => {
console.log("Authenticated: " + auth);
@@ -72,7 +76,7 @@ export const useUserStore = defineStore('userStore', {
}else await this.keycloak?.login( {prompt: 'login'} as KeycloakLoginOptions);
},
async logout() {
window.location.href= 'http://localhost:' + process.env.PORT_KEYCLOAK + '/realms/' + process.env.KEYCLOAK_REALM + '/protocol/openid-connect/logout?post_logout_redirect_uri=http%3A%2F%2Flocalhost:' + process.env.PORT_FRONTEND + '&client_id=' + process.env.KEYCLOAK_CLIENT_ID;
window.location.href= 'http://localhost:' + keycloakPort + '/realms/' + realm + '/protocol/openid-connect/logout?post_logout_redirect_uri=http%3A%2F%2Flocalhost:' + frontendPort + '&client_id=' + clientId;
},
},
});