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

implemented functionality to index page

Browse Source
This commit is contained in:
JonaKl
2024-05-13 09:44:58 +02:00
parent cfd19c2660
commit e9b042a2ea
4 changed files with 101 additions and 222 deletions
Download Patch File Download Diff File Expand all files Collapse all files

193
src/components/ProtectedData.vue
View File

@@ -1,193 +0,0 @@
<script lang="ts">
import { defineComponent, onMounted, Ref, ref } from 'vue';
import { useRouter } from 'vue-router';
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('/');
};
const users = ref([] as ptpUser[]);
const usersLoaded = ref(false);
const loadUsers = async() => {
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;
//users = await userStore.getAllUsers();
});
return {
user,
userLoaded,
logout,
loadUsers,
users,
usersLoaded,
chatName,
createChat,
loadChats,
chats,
chatsLoaded,
userSearch,
matchingUsers,
usersForChatOptions,
usersForChat,
updateUsersForChatOptions,
};
},
})
</script>
<template>
<h3>Nutzerdaten</h3>
<div v-if="userLoaded">
<p>{{ user.firstName }}</p>
<p>{{ user.lastName }}</p>
<p>{{ user.username }}</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.id">
<p>{{ user.firstName }}</p>
<p>{{ user.lastName }}</p>
<p>{{ user.username }}</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>
</style>

116
src/pages/IndexPage.vue
View File

@@ -20,8 +20,8 @@
</q-input> </q-input>
<div v-if="userStore.usersLoaded && searchQuery.length > 0" style="margin-top: 20px;"> <div v-if="userStore.usersLoaded && searchQuery.length > 0" style="margin-top: 20px;">
<ProfileCardComponent v-for="user in userStore.users.filter(u => u.username.includes(searchQuery) || searchQuery == '*')" :displayName="user.firstName + ' ' + user.lastName" :username="user.username" profilePictureUrl="https://th.bing.com/th/id/OIP.ab5MRsPm1MXfNDVSMW6cjQHaHa?rs=1&pid=ImgDetMain" status="Hey there!"></ProfileCardComponent> <ProfileCardComponent v-for="user in userStore.users.filter(u => (u.username.includes(searchQuery) || (u.firstName + ' ' + u.lastName).includes(searchQuery) || searchQuery == '*') && u.id != userStore.id)" :displayName="user.firstName + ' ' + user.lastName" :username="user.username" profilePictureUrl="https://th.bing.com/th/id/OIP.ab5MRsPm1MXfNDVSMW6cjQHaHa?rs=1&pid=ImgDetMain" status="Hey there!"></ProfileCardComponent>
<div v-if="userStore.users.filter(u => u.username.includes(searchQuery) || searchQuery == '*').length == 0" style="text-align: center;"> <div v-if="userStore.users.filter(u => u.username.includes(searchQuery) || (u.firstName + ' ' + u.lastName).includes(searchQuery) || searchQuery == '*').length == 0" style="text-align: center;">
<!--<q-icon name="error"></q-icon> <!--<q-icon name="error"></q-icon>
<p>Wir konnten keine Nutzer mit diesem Nutzernamen finden</p>--> <p>Wir konnten keine Nutzer mit diesem Nutzernamen finden</p>-->
<img src="https://media.tenor.com/KOZLvzU0o4kAAAAd/no-results.gif" style="border-radius: 1rem;" alt="No search results found"> <img src="https://media.tenor.com/KOZLvzU0o4kAAAAd/no-results.gif" style="border-radius: 1rem;" alt="No search results found">
@@ -33,9 +33,61 @@
<div style="margin: 20px;" v-if="activeMenu == 'chats'"> <div style="margin: 20px;" v-if="activeMenu == 'chats'">
<p>Hier werden dann die Chats angezeigt</p> <p>Hier werden dann die Chats angezeigt</p>
<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=""
>
</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="userStore.users.filter(u => (u.username.includes(searchQuery) || (u.firstName + ' ' + u.lastName).includes(searchQuery) || searchQuery == '*') && u.id != userStore.id).map((u) => {
return {label: u.firstName + ' ' + u.lastName, value: u.id}})"
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="chatStore.chatsLoaded">
<p>Chats:</p>
<div v-for="chat in chatStore.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>
</div> </div>
<q-btn @click="logout()" label="Logout"/>
<h5>Nutzerdaten</h5>
<div v-if="userStore.userLoaded">
<p>{{ userStore.user?.firstName }}</p>
<p>{{ userStore.user?.lastName }}</p>
<p>{{ userStore.user?.username }}</p>
<p>{{ userStore.user?.id }}</p>
</div>
</div> </div>
<div style="width: 75%;height: 100%;background: #DFD0BF;"> <div style="width: 75%;height: 100%;background: #DFD0BF;">
@@ -115,6 +167,7 @@
import ProfileCardComponent from 'components/ProfileCardComponent.vue'; import ProfileCardComponent from 'components/ProfileCardComponent.vue';
import {message} from 'src/models'; import {message} from 'src/models';
import {useUserStore} from 'stores/user-store'; import {useUserStore} from 'stores/user-store';
import { useChatStore } from 'stores/chat-store';
defineOptions({ defineOptions({
name: 'IndexPage' name: 'IndexPage'
@@ -123,29 +176,33 @@
const searchQuery = ref("") const searchQuery = ref("")
const message = ref(""); const message = ref("");
const gifSearch = ref(""); const gifSearch = ref("");
const chatName = ref('');
const userSearch = ref('');
const usersForChat = ref([] as string[]);
const activeMenu = ref("search"); const activeMenu = ref("search");
let loadedGifsAmount = 10; let loadedGifsAmount = 10;
let messages : message[] = [ let messages : message[] = [
{content: "Halllo", timestamp: "13:38", isOwn: true, gif: false, link: false}, // {content: "Halllo", timestamp: "13:38", isOwn: true, gif: false, link: false},
{content: "https://www.google.com/", timestamp: "13:20", isOwn: false, gif: false, link: false}, // {content: "https://www.google.com/", timestamp: "13:20", isOwn: false, gif: false, link: false},
{content: "Halllo", timestamp: "13:15", isOwn: false, gif: false, link: false}, // {content: "Halllo", timestamp: "13:15", isOwn: false, gif: false, link: false},
{content: "Halllo", timestamp: "13:14", isOwn: true, gif: false, link: false}, // {content: "Halllo", timestamp: "13:14", isOwn: true, gif: false, link: false},
{content: "Halllo", timestamp: "13:13", isOwn: true, gif: false, link: false}, // {content: "Halllo", timestamp: "13:13", isOwn: true, gif: false, link: false},
{content: "https://media.tenor.com/mtiOW6O-k8YAAAAd/shrek-shrek-rizz.gif", timestamp: "13:11", isOwn: false, gif: false, link: false}, // {content: "https://media.tenor.com/mtiOW6O-k8YAAAAd/shrek-shrek-rizz.gif", timestamp: "13:11", isOwn: false, gif: false, link: false},
{content: "Halllo", timestamp: "13:10", isOwn: true, gif: false, link: false}, // {content: "Halllo", timestamp: "13:10", isOwn: true, gif: false, link: false},
{content: "Halllo", timestamp: "13:10", isOwn: true, gif: false, link: false}, // {content: "Halllo", timestamp: "13:10", isOwn: true, gif: false, link: false},
{content: "Halllo", timestamp: "13:10", isOwn: true, gif: false, link: false}, // {content: "Halllo", timestamp: "13:10", isOwn: true, gif: false, link: false},
{content: "Halllo", timestamp: "13:10", isOwn: true, gif: false, link: false}, // {content: "Halllo", timestamp: "13:10", isOwn: true, gif: false, link: false},
{content: "Halllo", timestamp: "13:10", isOwn: true, gif: false, link: false}, // {content: "Halllo", timestamp: "13:10", isOwn: true, gif: false, link: false},
{content: "Halllo", timestamp: "13:10", isOwn: true, gif: false, link: false}, // {content: "Halllo", timestamp: "13:10", isOwn: true, gif: false, link: false},
{content: "Halllo", timestamp: "13:10", isOwn: true, gif: false, link: false}, // {content: "Halllo", timestamp: "13:10", isOwn: true, gif: false, link: false},
{content: "Halllo", timestamp: "13:10", isOwn: true, gif: false, link: false}, // {content: "Halllo", timestamp: "13:10", isOwn: true, gif: false, link: false},
{content: "Halllo", timestamp: "13:10", isOwn: true, gif: false, link: false}, // {content: "Halllo", timestamp: "13:10", isOwn: true, gif: false, link: false},
{content: "Halllo", timestamp: "13:10", isOwn: true, gif: false, link: false}, // {content: "Halllo", timestamp: "13:10", isOwn: true, gif: false, link: false},
{content: "Hallo", timestamp: "13:10", isOwn: true, gif: false, link: false} // {content: "Hallo", timestamp: "13:10", isOwn: true, gif: false, link: false}
]; ];
function isUrl(url : string) { function isUrl(url : string) {
@@ -181,6 +238,8 @@
const tenorStore = useTenorStore(); const tenorStore = useTenorStore();
const userStore = useUserStore(); const userStore = useUserStore();
const chatStore = useChatStore();
function getGifs() { function getGifs() {
let query = gifSearch.value != "" ? gifSearch.value : "shrek"; let query = gifSearch.value != "" ? gifSearch.value : "shrek";
@@ -200,12 +259,12 @@
} }
function sendMessage() { function sendMessage() {
messages.unshift({content: message.value, timestamp: new Date().toTimeString().split(' ')[0].substring(0, 5), isOwn: true, gif: false, link: false}); //messages.unshift({content: message.value, timestamp: new Date().toTimeString().split(' ')[0].substring(0, 5), isOwn: true, gif: false, link: false});
message.value = ""; message.value = "";
} }
function sendGif(url : string) { function sendGif(url : string) {
messages.unshift({content: url, timestamp: new Date().toTimeString().split(' ')[0].substring(0, 5), isOwn: true, gif: true, link: false}); //messages.unshift({content: url, timestamp: new Date().toTimeString().split(' ')[0].substring(0, 5), isOwn: true, gif: true, link: false});
toggleGifMenu(); toggleGifMenu();
} }
@@ -221,7 +280,20 @@
userStore.getAllPtpUsers(); userStore.getAllPtpUsers();
const logout = () => {
userStore.logout();
};
const createChat = async(chatName: string)=>{
if(chatName == ""){
chatName = "Chat";
}
await chatStore.createChat(chatName, usersForChat.value);
}
const loadChats = async() => {
await chatStore.loadChatsByUser();
};
</script> </script>

7
src/stores/chat-store.ts
View File

@@ -3,11 +3,10 @@ import { chat } from 'src/models';
import { api } from 'src/boot/axios'; import { api } from 'src/boot/axios';
import { useUserStore } from 'stores/user-store'; import { useUserStore } from 'stores/user-store';
const userStore = useUserStore();
export const useChatStore = defineStore('chatStore',{ export const useChatStore = defineStore('chatStore',{
state:() => ({ state:() => ({
chats: [] as chat[], chats: [] as chat[],
chatsLoaded: false
}), }),
actions: { actions: {
async getChatsByUser(): Promise<chat[]> { async getChatsByUser(): Promise<chat[]> {
@@ -17,10 +16,12 @@ export const useChatStore = defineStore('chatStore',{
return this.chats; return this.chats;
}, },
async loadChatsByUser() : Promise<chat[]>{ async loadChatsByUser() : Promise<chat[]>{
this.chats = (await api.get("/users/chat/" + userStore.id)).data.response; this.chats = (await api.get("/users/chat/" + useUserStore().id)).data.response;
this.chatsLoaded = true;
return this.chats; return this.chats;
}, },
async createChat(chatName: string, members: string[]){ async createChat(chatName: string, members: string[]){
const userStore = useUserStore();
if(userStore.id) { if(userStore.id) {
if (!members.includes(userStore.id)) { if (!members.includes(userStore.id)) {
members.push(userStore.id); members.push(userStore.id);

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

@@ -34,7 +34,6 @@ export const useUserStore = defineStore('userStore', {
usersLoaded: false, usersLoaded: false,
keycloak: null as Keycloak | null, keycloak: null as Keycloak | null,
id: "", id: "",
users: [] as ptpUser[],
}), }),
actions: { actions: {
async getPtpUserById(id : string) { async getPtpUserById(id : string) {