Some more minor changes

src/components/CreateChatComponent.vue

@@ -56,7 +56,7 @@
               @click="handleClickEvent(user)"
             />
           </div>
-          <profile-card-component :user="user" :selected="false"></profile-card-component>
+          <ProfileCardComponent :user="user" :selected="false"></ProfileCardComponent>
         </div>
       </div>
 
@@ -71,8 +71,7 @@
   import { useUserStore } from 'src/stores/user-store';
   import type { ptpUser, responseModel } from 'src/models';
   import {sendNotification} from 'src/utils';
-import { useQuasar } from 'quasar';
+  import { useChatStore } from 'src/stores/chat-store';
-import { useChatStore } from 'src/stores/chat-store';
 
   const showDialog = ref(true);
   const userStore = useUserStore();

src/components/ProfileCardComponent.vue

@@ -1,3 +1,8 @@
+<!--
+  Diese Komponente erlaubt das Anzeigen eines Nutzers
+  Sie wird unter anderem bei der Suche verwendet
+-->
+
 <script setup lang="ts">
 
   const props =  defineProps({

src/models.ts

@@ -6,6 +6,7 @@ export interface ptpUser {
   status: string;
   profilepicture: string;
   isPrivate: boolean;
+  nametagColor?: string;
 }
 
 export interface responseModel {
@@ -21,7 +22,8 @@ export interface chat{
   displayName: string;
   profilepicture: string;
   profilepictureAsString: string;
-  isGroupChat: boolean;
+  groupChat: boolean;
+  adminIds: string[];
 }
 
 export interface message {

src/pages/IndexPage.vue

@@ -4,9 +4,9 @@
 
     <SettingsPopUp :showDialog="settingsDialog" @showModal="() => settingsDialog = false"/>
 
-    <CreateChatComponent :showDialog="createChatDialog" @showModal="() => createChatDialog = false"></CreateChatComponent>
+    <CreateChatComponent :showDialog="createChatDialog" @showModal="() => createChatDialog = false" :leaveChat="resetSelectedChat"></CreateChatComponent>
 
-    <div style="background: gray; width: 25%;height:100%;">
+    <div style="background: gray; width: 25%;height:100%;border-right: 1px solid black;">
       <div style="display: flex; align-items: center; justify-content: space-between;" class="navigation">
         <div title="Nach Nutzern suchen" @click="activeMenu = 'search'" :class="{menuItemActive : activeMenu === 'search', menuItemInactive : activeMenu !== 'search'}">
           <q-icon name="search"></q-icon>
@@ -49,7 +49,7 @@
           <div v-for="chat in chatStore.chats" :key="chat.id" style="margin-top: 10px;">
 
             <ChatCardComponent 
-              v-if="chat.members.length > 2" 
+              v-if="chat.groupChat" 
               :selected="chat.id == selectedChat.id" 
               :chat="chat"
               @click="selectChat(chat as chat)"
@@ -93,7 +93,7 @@
     <div style="width: 75%;height: 100%;background: #DFD0BF;">
       <div class="header" v-if="selectedUser.id != null || selectedChat.id != null" style="padding: 10px;">
         <HeaderInfoContainerComponent 
-          v-if="selectedChat.members.length == 2" 
+          v-if="!selectedChat.groupChat" 
           :displayName="selectedChat.members.find((member) => member.id !== userStore.user!.id)?.firstName + ' ' + selectedChat.members.find((member) => member.id !== userStore.user!.id)?.lastName"
           :image="selectedChat.members.find((member) => member.id !== userStore.user!.id)?.profilepicture"
         ></HeaderInfoContainerComponent>
@@ -115,10 +115,15 @@
           <q-space />
           <q-btn icon="more_vert" round flat @click="chatSettingsDialog = true"></q-btn>
 
-          <ChatSettingsComponent :chat="selectedChat" :showDialog="chatSettingsDialog" @showModal="() => chatSettingsDialog = false"></ChatSettingsComponent>
+          <ChatSettingsComponent :chat="selectedChat" :chatID="selectedChat.id" :showDialog="chatSettingsDialog" @showModal="() => chatSettingsDialog = false"></ChatSettingsComponent>
         </div>
       </div>
 
+      <div v-else style="text-align: center; margin-top: 10rem;">
+        <img src="https://media1.tenor.com/m/SpXWQo0Mq7EAAAAd/welcome-michael-scott.gif" style="width:20rem;border-radius: 1rem; box-shadow: 1px 1px 5px 0 rgba(0,0,0,0.15);">
+        <div class="text-h6">Wähle einen Chat aus</div>
+      </div>
+
 
       <div v-if="selectedUser.id != null && selectedChat.members.length == 2" id="messageContainer" style="padding: 25px;overflow-y: auto;height: 100%;display: flex;flex-direction: column-reverse;">
         <div v-if="!hasChatWith(selectedUser.id)" style="width: 100%; text-align: center;font-size: 1.2rem;">
@@ -146,6 +151,7 @@
           <MessageComponent
             v-if="!message.gif && !message.link"
             :message="message.content"
+            :nametagColor="chatStore.chats.find((chat) => chat.id == selectedChat.id)!.members.find((member) => member.id === message.sender.id)?.nametagColor!"
             :timestamp="message.timestamp"
             :own-message="message.sender.id == userStore.user!.id"
             :sender="message.sender"
@@ -209,7 +215,9 @@
   import SettingsPopUp from 'src/components/SettingsPopUp.vue';
   import ChatSettingsComponent from 'src/components/ChatSettingsComponent.vue';
   import CreateChatComponent from 'src/components/CreateChatComponent.vue';
-import { useMessageStore } from 'src/stores/message-store';
+  import { useMessageStore } from 'src/stores/message-store';
+  import { useNotificationStore } from 'src/stores/notification-store';
+  import { sendNotification } from 'src/utils';
 
   defineOptions({
     name: 'IndexPage'
@@ -218,6 +226,7 @@ import { useMessageStore } from 'src/stores/message-store';
   const tenorStore = useTenorStore();
   const userStore = useUserStore();
   const chatStore = useChatStore();
+  const notificationStore = useNotificationStore();
 
   const searchQuery = ref("")
   const message = ref("");
@@ -233,7 +242,7 @@ import { useMessageStore } from 'src/stores/message-store';
   const createChatDialog = ref(false);
 
 
-  const activeMenu = ref("search");
+  const activeMenu = ref("chats");
 
   let loadedGifsAmount = 10;
 
@@ -309,6 +318,8 @@ import { useMessageStore } from 'src/stores/message-store';
   }
 
   function toggleGifMenu() {
+    if(!selectedChat.value.id) return;
+
     showGifMenu.value = !showGifMenu.value;
     if(showGifMenu.value) {
       // Somehow focus the input field
@@ -317,6 +328,11 @@ import { useMessageStore } from 'src/stores/message-store';
   }
 
   function sendMessage() {
+    if(message.value == "") {
+      sendNotification("Nachricht kann nicht leer sein", false);
+      return;
+    }
+
     if(selectedChat.value.id != -1) {
       messageStore.sendMessage(selectedChat.value.id, userStore.user!.id, message.value);
     } else {
@@ -353,6 +369,7 @@ import { useMessageStore } from 'src/stores/message-store';
   };
 
   setInterval(getMessages, 5000);
+  setInterval(chatStore.loadChatsByUser, 5000);
 
 
   setInterval(getGifs, 500);
@@ -366,6 +383,11 @@ import { useMessageStore } from 'src/stores/message-store';
   const selectedUser = ref({} as ptpUser);
   const selectedChat = ref({} as chat);
 
+  const resetSelectedChat = () => {
+    //console.log("HAHHSHHDSD");
+    selectedChat.value = {} as chat
+  }
+
   function selectUser(user : ptpUser) {
     selectedUser.value = user;
     //selectedChat.value = {} as chat;
@@ -377,7 +399,8 @@ import { useMessageStore } from 'src/stores/message-store';
       displayName: user.firstName + " " + user.lastName,
       profilepicture: user.profilepicture,
       profilepictureAsString: user.profilepicture,
-      isGroupChat: false
+      groupChat: false,
+      adminIds: []
     };
     selectedChat.value = exampleChat;
   }