ki-frontend/src/views/profile/View.vue

<!--
SPDX-FileCopyrightText: WTF Kooperative eG <https://wtf-eg.de/>

SPDX-License-Identifier: AGPL-3.0-or-later
-->

<template>
  <div v-if="profile" class="container">
    <h1>
        {{profile.nickname}}
        <span v-if="profile.pronouns">({{profile.pronouns}})</span>
    </h1>
    <p><label class="fw-bold">Vorstellung: </label> {{profile.freetext}}</p>
    <p><label class="fw-bold">Ehrentamtliche Arbeit: </label> {{profile.volunteerwork}}</p>
    <p><label class="fw-bold">Verfügbarkeit: </label> {{profile.availability}}</p>
    <h3>Das kann ich:</h3>
    <profile-list
      :values="profile.skills"
      type="skill"
    ></profile-list>
    <h3>Das suche ich:</h3>
    <profile-list
      :values="profile.searchtopics"
      type="skill"
    ></profile-list>
    <h3>Meine Kontaktmöglichkeiten:</h3>
    <profile-list
      :values="profile.contacts"
      type="contacttype"
    ></profile-list>
    <h3>Ich Spreche Folgende Sprachen:</h3>
    <profile-list
      :values="profile.languages"
      type="language"
    ></profile-list>
    <div v-if="profile.address">
      <h3>Meine Location:</h3>
      {{profile.address.city}}<span v-if="profile.address && profile.address.postcode"> ({{profile.address.postcode}})</span>, {{profile.address.country}}
    </div>
  </div>
</template>
<script>
import { mapState } from 'vuex'

import RequestMixin from '@/mixins/request.mixin'

import ProfileList from '@/components/ProfileList';

export default {
  name: "profileView",
  mixins: [RequestMixin],
  components: {
    ProfileList,
  },
  computed: {
    ...mapState({
      profile: 'currentProfile'
    })
  },
  async created() {
    await this.initViewPage();
  }
};
</script>