- Outsorced the settings popup into its own component

- Chats with more than 2 users are now displayed correctly
- The user can now select chats as well
- Added header which displays the Name and ProfilePicture
of the selected user (and displayName and groupProfilePicture for group chats)

quasar.config.js

@@ -133,7 +133,9 @@ module.exports = configure(function (/* ctx */) {
       // directives: [],
 
       // Quasar plugins
-      plugins: []
+      plugins: [
+        'Notify'
+      ]
     },
 
     // animations: 'all', // --- includes all animations

src/components/ChatCardComponent.vue

@@ -0,0 +1,48 @@
+<script setup lang="ts">
+  import {message, ptpTestUser} from 'src/models';
+
+  const props =  defineProps({
+    chat: Object,
+    selected: Boolean,
+  })
+
+</script>
+
+<template>
+  <div class="profileCard" :class="selected ? 'selected' : ''">
+    <div class="profilePicture" :style="{'background-image' : 'url(https://i.pinimg.com/736x/f2/6d/38/f26d38b9685a48e8a43481391f75471c.jpg)' }"></div>
+    <div style="margin-left:10px;">
+      <p style="margin-bottom: 0;line-height: 25px;vertical-align: middle;height: 25px;display: table-cell;">
+        <span style="font-weight: bold;font-size: 1.2rem;">{{props.chat!.displayName}}</span>
+      </p>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+  .profilePicture {
+    width: 50px;
+    height: 50px;
+    border-radius: 50%;
+    background-size: cover;
+    background-position: center;
+
+  }
+
+  .profileCard {
+    display: flex;
+    border-radius: 10px;
+    padding: 10px;
+    transition: .3s;
+    cursor: pointer;
+  }
+
+  .profileCard:hover {
+    transition: .3s;
+    background: rgba(0,0,0,0.2);
+  }
+
+  .selected {
+    background: rgba(0,0,0,0.2);
+  }
+</style>

src/components/HeaderInfoContainerComponent.vue

@@ -0,0 +1,31 @@
+<template>
+  <div style="display: flex">
+    <div 
+      :style="{'background-image' : 'url('+props.image+')' }"
+      class="image"
+    ></div>
+    <h6 class="displayName">{{ props.displayName }}</h6>
+  </div>
+</template>
+
+<script setup lang="ts">
+  const props = defineProps({
+    image: String,
+    displayName: String
+  });
+</script>
+
+<style scoped>
+  .displayName {
+    height: 100%;
+    margin: 0.5rem 1rem;
+  }
+
+  .image {
+    height: 3rem; 
+    width:3rem; 
+    border-radius: 100%; 
+    background-size: cover; 
+    background-position: center;
+  }
+</style>

src/components/SettingsPopUp.vue

@@ -0,0 +1,175 @@
+<template>
+  <q-dialog v-model="internalShowDialog" backdrop-filter="brightness(60%)" full-width>
+      <q-card style="margin: 3rem 20rem;padding: 30px;height: 80vh;overflow-y:scroll" v-if="userStore.userLoaded">
+        <!--<h1>{{ internalShowDialog }}</h1>-->
+
+        <!-- HEADLINE -->
+        <q-card-section class="row items-center q-pb-none">
+          <h4 style="margin: 0;">Einstellungen</h4>
+          <q-space />
+          <q-btn icon="close" flat round dense @click="closeDialog" />
+        </q-card-section>
+          
+        <div class="grid-container">
+          <q-card-section>
+            <h5>Nutzerdaten</h5>
+            <div style="display: flex; flex-wrap: nowrap">
+              <div>
+                  <table>
+                      <tr>
+                          <td>Vorname:</td>
+                          <td>{{ userStore.user!.firstName }}</td>
+                      </tr>
+                      <tr>
+                          <td>Nachname:</td>
+                          <td>{{ userStore.user!.lastName }}</td>
+                      </tr>
+                      <tr>
+                          <td>Nutzername:</td>
+                          <td>{{ userStore.user!.username }}</td>
+                      </tr>
+                  </table>
+              </div>
+            </div>
+          </q-card-section>
+
+          <q-card-section>
+            <h5>Profilbild</h5>
+            <p>Du kannst eins der folgenden Porfilbilder aussuchen</p>
+
+            <div style="display: flex;">
+              <div
+                v-for="(imageUrl, index) in profilePictures"
+                :style="{'background-image' : 'url('+imageUrl+')' , 'outline' : imageUrl == userStore.user!.profilePictureUrl ? 'dashed grey' : 'none'}"
+                style="color: red;"
+                round
+                flat
+                outline
+                class="profilePictureSelector"
+                @click="selectProfilePicture(index)"
+              >
+              </div>
+            </div>
+          </q-card-section>
+
+          <q-card-section>
+            <h5>Aktionen</h5>
+            <q-btn @click="logout()" label="Abmelden" style="color:darkred;border:2px solid darkred;border-radius: 6px;width: 100%;margin-bottom: 14px;"/>
+            <q-btn @click="logout()" label="Account privatisieren" style="color:darkred;border:2px solid darkred;border-radius: 6px;width: 100%;margin-bottom: 14px;"/>
+            <q-btn @click="" label="Account löschen" style="color:darkred;border:2px solid darkred;border-radius: 6px;width: 100%;"/>
+          </q-card-section>
+
+          <q-card-section>
+            <h5>Status</h5>
+            <p>Hier kannst du deinen Status festlegen</p>
+
+            <q-input filled v-model="userStore.user!.status" placeholder="" counter maxlength="256" @update:model-value="showUnsavedChangesAlert">
+            </q-input>
+          </q-card-section>
+        </div>
+      </q-card>
+    </q-dialog>
+</template>
+
+<script setup lang="ts">
+  import { useQuasar } from 'quasar';
+  import {message, ptpTestUser} from 'src/models';
+  import { useUserStore } from 'src/stores/user-store';
+  import { computed, onMounted, toRefs } from 'vue';
+  import { ref } from 'vue';
+
+  const userStore = useUserStore();
+  const showingAlert = ref(false);
+  const $q = useQuasar();
+
+  const emit = defineEmits(['update:showDialog']);
+  const props = defineProps({
+    showDialog: Boolean
+  });
+
+  const internalShowDialog = computed({
+      get: () => props.showDialog,
+      set: (value) => emit('update:showDialog', value)
+  });
+
+  // Eine Liste der möglichen Bilder soll später aus dem Backend kommen
+  let profilePictures : string[] = [
+    "https://assets.change.org/photos/8/jw/ax/QMjwAxeQAfcpoxs-1600x900-noPad.jpg?1597557421",
+    "https://media.tenor.com/fErt1YElZ2gAAAAe/shrek-rizz-reverse.png",
+    "https://i.pinimg.com/736x/8b/08/d0/8b08d0127947da23310a14135b865f61.jpg",
+    "https://th.bing.com/th/id/R.487fe8708797950ab745a3800c31b7a4?rik=qW3zkDdZfweqmQ&pid=ImgRaw&r=0",
+    "https://media.discordapp.net/attachments/698162708427833355/1241378744032297041/image.png?ex=6649fb8c&is=6648aa0c&hm=2024b84dc61ec55d1923ff2e517af250d8e63cf599fcc223d014801adfe5b4e0&=&format=webp&quality=lossless&width=416&height=350"
+  ]
+
+  function selectProfilePicture(id : number) {
+    showUnsavedChangesAlert();
+    userStore.user!.profilePictureUrl = profilePictures[id];
+  }
+
+  function saveProfileChanges() {
+    showingAlert.value = false;
+    // Hier muss ein request ans Backend geschickt werden, welcher den gesamten User enthält
+  }
+
+  const logout = () => {
+    userStore.logout();
+  };
+
+  const closeDialog = () => {
+    internalShowDialog.value = false;
+  };
+
+  const showUnsavedChangesAlert = () => {
+    if(!showingAlert.value) {
+      $q.notify({
+        message: 'Du hast Änderungen vorgenommen, die noch nicht gespeichert wurden',
+        position: 'top',
+        timeout: 0,
+        color: "green",
+        icon: 'announcement',
+        actions: [
+          { label: 'Änderungen speichern', color: 'white', handler: () => { saveProfileChanges() } },
+        ]
+      });
+
+      showingAlert.value = true;
+    }
+  }
+</script>
+
+<style scoped>
+  .profilePictureSelector {
+    transition: .3s;
+    background-size: cover;
+    background-position:center;
+    width: 6rem;
+    height:6rem;
+    margin: 15px;
+    border-radius: 100%;
+    cursor: pointer;
+  }
+
+  .profilePictureSelector:hover {
+    transition: .3s;
+    filter: brightness(0.6);
+  }
+
+  td:nth-child(1) {
+    font-weight: bold;
+    padding-right: 30px;
+  }
+
+  table {
+    border-spacing: 10px;
+  }
+
+  .grid-container {
+    display: grid;
+    grid-template-columns: auto auto;
+    padding: 10px;
+  }
+
+  .grid-container > div:nth-child(odd) {
+    margin-right: 50px;
+  }
+</style>

src/pages/IndexPage.vue

@@ -2,91 +2,7 @@
   <div style="width:100%;display: flex; align-items: center; justify-content: space-between;height:100vh;position: fixed;">
     <!-- Hier gibt es die ganzen PopUps und so -->
 
-    <q-dialog v-model="settingsDialog" backdrop-filter="brightness(60%)" full-width>
+    <SettingsPopUp :showDialog="settingsDialog"/>
-      <q-card style="margin: 3rem 20rem;padding: 30px;height: 80vh;overflow-y:scroll">
-
-        <q-card-section class="row items-center q-pb-none">
-          <h4 style="margin: 0;">Einstellungen</h4>
-          <q-space />
-          <q-btn icon="close" flat round dense v-close-popup />
-        </q-card-section>
-
-        <q-card-section>
-          <h5>Nutzerdaten</h5>
-          <div style="display: flex; flex-wrap: nowrap">
-            <div>
-              <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="margin-left: 50px;">
-              <div style="border-radius:100%;height:10rem;width:10rem;background-image: url('https://th.bing.com/th/id/R.487fe8708797950ab745a3800c31b7a4?rik=qW3zkDdZfweqmQ&pid=ImgRaw&r=0');background-size: cover; background-position: center;"></div>
-            </div>
-          </div>
-
-        </q-card-section>
-
-        <q-card-section>
-          <h5>Status</h5>
-          <p>Hier kannst du deinen Status festlegen</p>
-
-          <q-input filled v-model="newStatus" placeholder="" counter maxlength="256">
-            <!--<template v-slot:prepend>
-              <q-icon name="search"></q-icon>
-            </template>-->
-            <template v-slot:after>
-              <q-btn flat :disable="newStatus == newStatus">Speichern</q-btn>
-            </template>
-          </q-input>
-        </q-card-section>
-
-        <q-card-section>
-          <h5>Profilbild</h5>
-          <p>Du kannst eins der folgenden Porfilbilder aussuchen</p>
-
-          <div class="flex-center">
-            <q-btn
-              style="background-image: url('https://th.bing.com/th/id/R.487fe8708797950ab745a3800c31b7a4?rik=qW3zkDdZfweqmQ&pid=ImgRaw&r=0');"
-              round
-              flat
-              class="profilePictureSelector"
-            >
-            </q-btn>
-            <q-btn
-              style="background-image: url('https://th.bing.com/th/id/R.487fe8708797950ab745a3800c31b7a4?rik=qW3zkDdZfweqmQ&pid=ImgRaw&r=0');"
-              round
-              flat
-              class="profilePictureSelector"
-            >
-            </q-btn>
-            <q-btn
-              style="background-image: url('https://th.bing.com/th/id/R.487fe8708797950ab745a3800c31b7a4?rik=qW3zkDdZfweqmQ&pid=ImgRaw&r=0');"
-              round
-              flat
-              class="profilePictureSelector"
-            >
-            </q-btn>
-            <q-btn
-              style="background-image: url('https://th.bing.com/th/id/R.487fe8708797950ab745a3800c31b7a4?rik=qW3zkDdZfweqmQ&pid=ImgRaw&r=0');"
-              round
-              flat
-              class="profilePictureSelector"
-            >
-            </q-btn>
-          </div>
-        </q-card-section>
-
-        <q-card-section>
-          <q-btn @click="logout()" label="Abmelden" style="color:darkred;border:2px solid darkred;border-radius: 6px;"/>
-        </q-card-section>
-      </q-card>
-    </q-dialog>
-
-
 
     <div style="background: gray; width: 25%;height:100%;">
       <div style="display: flex; align-items: center; justify-content: space-between;" class="navigation">
@@ -128,16 +44,22 @@
         <p>Chats, in denen du Mitglied bist:</p>
         <div v-if="chatStore.chatsLoaded">
           <div v-for="chat in chatStore.chats" :key="chat.id">
-            <div v-if="chat.members.length > 2">
+
-              <h5>{{ chat.displayName }}</h5>
+            <ChatCardComponent 
-            </div>
+              v-if="chat.members.length > 2" 
+              :selected="chat.id == selectedChat.id" 
+              :chat="chat"
+              @click="selectChat(chat as chat)"
+            ></ChatCardComponent>
+
+
             <div v-else>
               <h5>Ist ein Chat für zwei</h5>
             </div>
 
-            <p v-for="member in chat.members">
+            <!--<p v-for="member in chat.members">
               {{ member.id }}
-            </p>
+            </p>-->
             <!----<ProfileCardComponent
               v-else
               :user="userStore.users.find((user) => user.id === chat.members.find((member) => member.id !== userStore.user!.id)?.id)"
@@ -182,11 +104,37 @@
         <q-btn @click="createChat(chatName)" label="Create Chat"/>
       </div>
 
-      <q-btn round flat icon="settings" title="Einstellungen" @click="settingsDialog = true">
+      <q-btn 
+        round 
+        flat 
+        v-if="userStore.userLoaded"
+        :style="{'background-image' : 'url('+userStore.user!.profilePictureUrl+')' }"
+        style="background-size: cover;background-position: center;position: fixed; left:1rem; bottom: 1rem;"
+        title="Profil und Einstellungen" 
+        @click="settingsDialog = true"
+      >
       </q-btn>
     </div>
 
+    <!-- RECHTE SPALTE -->
+
     <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="selectedUser.id != null" 
+          :displayName="selectedUser.firstName + ' ' + selectedUser.lastName"
+          :image="selectedUser.profilePictureUrl"
+        ></HeaderInfoContainerComponent>
+
+        <div v-if="selectedChat.id != null">
+          <HeaderInfoContainerComponent  
+            :displayName="selectedChat.displayName"
+            image="https://i.pinimg.com/736x/f2/6d/38/f26d38b9685a48e8a43481391f75471c.jpg"
+          ></HeaderInfoContainerComponent>
+        </div>
+        
+      </div>
+
 
       <div v-if="selectedUser.id != null" id="messageContainer" style="padding: 25px;overflow-y: auto;height: 90%;display: flex;flex-direction: column-reverse;">
         <div v-if="!hasChatWith(selectedUser.id)" style="width: 100%; text-align: center;font-size: 1.2rem;">
@@ -264,13 +212,17 @@
 </template>
 
 <script setup lang="ts">
-  import { ref } from 'vue';
+  import { onMounted, ref } from 'vue';
   import MessageComponent from 'components/MessageComponent.vue';
   import { useTenorStore } from 'stores/tenor-store';
   import ProfileCardComponent from 'components/ProfileCardComponent.vue';
+  import ChatCardComponent from 'components/ChatCardComponent.vue';
+  import HeaderInfoContainerComponent from 'components/HeaderInfoContainerComponent.vue';
   import {message, ptpTestUser} from 'src/models';
+  import type {chat} from 'src/models';
   import {useUserStore} from 'stores/user-store';
   import { useChatStore } from 'stores/chat-store';
+  import SettingsPopUp from 'src/components/SettingsPopUp.vue';
 
   defineOptions({
     name: 'IndexPage'
@@ -287,9 +239,7 @@
   const userSearch = ref('');
   const usersForChat = ref([] as string[]);
 
-  const settingsDialog = ref(true);
+  const settingsDialog = ref(false);
-
-  const newStatus = ref("");
 
 
   const activeMenu = ref("search");
@@ -389,10 +339,6 @@
   userStore.getAllPtpUsers();
 
 
-  const logout = () => {
-    userStore.logout();
-  };
-
   const createChat = async(chatName: string)=>{
     if(chatName == ""){
       chatName = "Chat";
@@ -406,9 +352,16 @@
   };
 
   const selectedUser = ref({} as ptpTestUser);
+  const selectedChat = ref({} as chat);
 
   function selectUser(user : ptpTestUser) {
     selectedUser.value = user;
+    selectedChat.value = {} as chat;
+  }
+
+  function selectChat(chat : chat) {
+    selectedChat.value = chat;
+    selectedUser.value = {} as ptpTestUser;
   }
 
   function hasChatWith(id : string) : boolean {
@@ -424,6 +377,15 @@
   // Init methods
   loadChats();
 
+
+  const user = ref();
+
+  onMounted(() => {
+    //alert("mounted");
+    user.value = userStore.user;
+    //alert(user.value.firstName);
+  })
+
 </script>
 
 <style scoped>
@@ -455,6 +417,15 @@
     padding: 10px;
   }
 
+  .header {
+    width: 75%;
+    height: auto;
+    background: gray;
+    position: fixed;
+    right: 0;
+    top: 0;
+  }
+
   .navigation {
     font-size: 2rem;
   }
@@ -479,20 +450,6 @@
     border-bottom: 2px solid transparent;
   }
 
-  .profilePictureSelector {
-    transition: .3s;
-    background-size: cover;
-    background-position:center;
-    width: 6rem;
-    height:6rem;
-    margin: 15px;
-  }
-
-  .profilePictureSelector:hover {
-    transition: .3s;
-    filter: brightness(0.6);
-  }
-
   h4, h5 {
     font-weight: bold;
     margin-bottom: 0;

src/stores/user-store.ts

@@ -40,6 +40,14 @@ export const useUserStore = defineStore('userStore', {
       await this.loadPtpUsersById(id).then((response : responseModel) => {
         this.user = response.response;
         this.userLoaded = true;
+
+        if(this.user!.profilePictureUrl == null) {
+          this.user!.profilePictureUrl = "https://th.bing.com/th/id/R.487fe8708797950ab745a3800c31b7a4?rik=qW3zkDdZfweqmQ&pid=ImgRaw&r=0";
+        }
+
+        if(this.user!.status == null) {
+          this.user!.status = "Hey there, I am using ptpChat!";
+        }
       });
     },
     async loadPtpUsersById(id : string) : Promise<responseModel>  {