- 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)

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>