From e9b042a2ea21a5225c7734fb80a1f04d2ace6e6c Mon Sep 17 00:00:00 2001
From: JonaKl <jonaklaess@gmail.com>
Date: Mon, 13 May 2024 09:44:58 +0200
Subject: [PATCH] implemented functionality to index page

---
 src/components/ProtectedData.vue | 193 -------------------------------
 src/pages/IndexPage.vue          | 116 +++++++++++++++----
 src/stores/chat-store.ts         |   7 +-
 src/stores/user-store.ts         |   7 +-
 4 files changed, 101 insertions(+), 222 deletions(-)
 delete mode 100644 src/components/ProtectedData.vue

diff --git a/src/components/ProtectedData.vue b/src/components/ProtectedData.vue
deleted file mode 100644
index 9a686f2..0000000
--- a/src/components/ProtectedData.vue
+++ /dev/null
@@ -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>
diff --git a/src/pages/IndexPage.vue b/src/pages/IndexPage.vue
index 9cf4e30..54b1e90 100644
--- a/src/pages/IndexPage.vue
+++ b/src/pages/IndexPage.vue
@@ -20,8 +20,8 @@
         </q-input>
 
         <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>
-          <div v-if="userStore.users.filter(u => u.username.includes(searchQuery) || searchQuery == '*').length == 0" style="text-align: center;">
+          <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) || (u.firstName + ' ' + u.lastName).includes(searchQuery) || searchQuery == '*').length == 0" style="text-align: center;">
             <!--<q-icon name="error"></q-icon>
             <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">
@@ -33,9 +33,61 @@
 
       <div style="margin: 20px;" v-if="activeMenu == 'chats'">
         <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>
 
-
+      <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 style="width: 75%;height: 100%;background: #DFD0BF;">
@@ -115,6 +167,7 @@
   import ProfileCardComponent from 'components/ProfileCardComponent.vue';
   import {message} from 'src/models';
   import {useUserStore} from 'stores/user-store';
+  import { useChatStore } from 'stores/chat-store';
 
   defineOptions({
     name: 'IndexPage'
@@ -123,29 +176,33 @@
   const searchQuery = ref("")
   const message = ref("");
   const gifSearch = ref("");
+  const chatName = ref('');
+  const userSearch = ref('');
+  const usersForChat = ref([] as string[]);
+
 
   const activeMenu = ref("search");
 
   let loadedGifsAmount = 10;
 
   let messages : message[] = [
-    {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: "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: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: "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: "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: "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: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: "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}
   ];
 
   function isUrl(url : string) {
@@ -181,6 +238,8 @@
 
   const tenorStore = useTenorStore();
   const userStore = useUserStore();
+  const chatStore = useChatStore();
+
 
   function getGifs() {
     let query = gifSearch.value != "" ? gifSearch.value : "shrek";
@@ -200,12 +259,12 @@
   }
 
   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 = "";
   }
 
   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();
   }
 
@@ -221,7 +280,20 @@
   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>
 
diff --git a/src/stores/chat-store.ts b/src/stores/chat-store.ts
index 9b7a8f6..74e324f 100644
--- a/src/stores/chat-store.ts
+++ b/src/stores/chat-store.ts
@@ -3,11 +3,10 @@ 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[],
+    chatsLoaded: false
   }),
   actions: {
     async getChatsByUser(): Promise<chat[]> {
@@ -17,10 +16,12 @@ export const useChatStore = defineStore('chatStore',{
       return this.chats;
     },
     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;
     },
     async createChat(chatName: string, members: string[]){
+      const userStore = useUserStore();
       if(userStore.id) {
         if (!members.includes(userStore.id)) {
           members.push(userStore.id);
diff --git a/src/stores/user-store.ts b/src/stores/user-store.ts
index 877b554..7ff9eb7 100644
--- a/src/stores/user-store.ts
+++ b/src/stores/user-store.ts
@@ -34,7 +34,6 @@ export const useUserStore = defineStore('userStore', {
     usersLoaded: false,
     keycloak: null as Keycloak | null,
     id: "",
-    users: [] as ptpUser[],
   }),
   actions: {
     async getPtpUserById(id : string) {
@@ -46,18 +45,18 @@ export const useUserStore = defineStore('userStore', {
     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() : Promise<Keycloak>{
 
       try {