ptpchat-frontend/src/components/SettingsPopUp.vue

<!--
  Diese Komponente erlaubt dem Nutzer die Änderung seiner Accountdaten
-->
<template>
  <q-dialog v-bind:model-value="showDeleteAccountPopup">
    <q-card style="padding: 20px;">
      <q-card-section>
        <div class="text-h4">Account löschen</div>
        <div class="text-body">Bist du sicher, dass du deinen Account löschen möchtest?</div>
      </q-card-section>
      <q-card-actions align="right">
        <q-btn label="Abbrechen" class="greyButton" style="width: 48%;" @click="showDeleteAccountPopup = false" />
        <q-btn label="Account löschen" class="buttonRed" style="width: 48%" @click="" />
      </q-card-actions>
    </q-card>
  </q-dialog>
  <q-dialog v-bind:model-value="internalShowDialog" @update:model-value="closeDialog" backdrop-filter="brightness(60%)" full-width>
      <q-card style="margin: 3rem 20rem;padding: 30px;height: 80vh;overflow-y:scroll" v-if="userStore.userLoaded">
        <!-- 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>
                  <tr>
                    <td>Sichtbarkeit:</td>
                    <td>{{ userStore.user!.isPrivate ? 'Privat' : 'Öffentlich' }}</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;" v-if="userStore.profilePicturesLoaded">
              <div
                v-for="(image, index) in userStore.profilePictures"
                :style="{'background-image' : 'url('+image.url+')' , 'outline' : image.url == userStore.user!.profilepicture ? 'dashed grey' : 'none'}"
                style="color: red;"
                round
                flat
                outline
                class="profilePictureSelector"
                @click="selectProfilePicture(image)"
              >
              </div>
            </div>
            <div v-else>
              <q-spinner
                color="primary"
                size="3em"
              />
            </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="toggleSetPrivate()" :label="userStore.user!.isPrivate ? 'Account entprivatisieren' : 'Account privatisieren'" style="color:darkred;border:2px solid darkred;border-radius: 6px;width: 100%;margin-bottom: 14px;"/>
            <q-btn @click="deleteAccount()" 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 {profilePicture, responseModel,} from 'src/models';
  import { useUserStore } from 'src/stores/user-store';
  import { sendNotification } from 'src/utils';
  import { computed } from 'vue';
  import { ref } from 'vue';

  const userStore = useUserStore();
  const showingAlert = ref(false);
  const $q = useQuasar();

  const emit = defineEmits(['update:showDialog', 'showModal']);
  const props = defineProps({
    showDialog: Boolean
  });

  const internalShowDialog = computed({
      get: () => props.showDialog,
      set: (value) => emit('update:showDialog', value)
  });

  function selectProfilePicture(image : profilePicture) {
    showUnsavedChangesAlert();
    userStore.user!.profilepicture = image.url;
  }

  function saveProfileChanges() {
    showingAlert.value = false;
    userStore.updateUser().then((response : responseModel) => {
      sendNotification(response.message, true);
    });
    closeDialog();
  }

  function toggleSetPrivate() {
    userStore.setPrivateForUser(userStore.user!.id, !userStore.user!.isPrivate).then((response : responseModel) => {
      userStore.user!.isPrivate = !userStore.user!.isPrivate;
      sendNotification(response.message, response.success);
    });
  }

  const logout = () => {
    userStore.logout();
  };

  const showDeleteAccountPopup = ref(false);

  const deleteAccount = () => {
    showDeleteAccountPopup.value = true;
  }

  const closeDialog = () => {
    //internalShowDialog.value = false;
    emit('showModal', true);
  };

  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;
  }

  .buttonRed {
    color: white;
    background: darkred;
  }

  .buttonRed:hover, .greyButton:hover {
    filter: brightness(0.7);
  }

  .greyButton {
    color: white;
    background: grey;
  }
</style>