Skip to content
Snippets Groups Projects
Verified Commit 96b512e0 authored by Jonathan Weth's avatar Jonathan Weth :keyboard:
Browse files

Set correct page title on person overview page

parent 905949fd
No related branches found
No related tags found
1 merge request!1123Resolve "Finalise Vuetify app as SPA"
Pipeline #107868 canceled
Stage: prepare
Stage: test
Stage: build
Stage: publish
Stage: docker
Stage: deploy
Hide whitespace changes
Inline Side-by-side
aleksis/core/assets/components/person/PersonOverview.vue
+ 201
− 196
View file @ 96b512e0
<template>
<ApolloQuery :query="require('./personOverview.graphql')" :variables="{ id }">
<template #default="{ result: { error, data, loading } }">
<template v-if="loading">
<v-skeleton-loader type="article" />
<div>
<template v-if="$apollo.queries.person.loading">
<v-skeleton-loader type="article" />
<v-row>
<v-col cols="12" lg="4" v-for="idx in 3" :key="idx">
<v-skeleton-loader type="card" />
</v-col>
</v-row>
</template>
<template v-else-if="person">
<detail-view>
<template #avatarContent>
<person-avatar-clickbox :id="id" />
</template>
<template #title>
{{ person.firstName }} {{ person.lastName }}
</template>
<template #subtitle>
{{ person.username }}
</template>
<template #actions="{ classes }">
<person-actions :class="classes" :id="person.id" />
</template>
<div class="text-center my-5" v-text="person.description"></div>
<v-row>
<v-col cols="12" lg="4" v-for="idx in 3" :key="idx">
<v-skeleton-loader type="card" />
<v-col cols="12" lg="4">
<v-card class="mb-6">
<v-card-title>{{ $t("person.details") }}</v-card-title>
<v-list two-line>
<v-list-item>
<v-list-item-icon>
<v-icon> mdi-account-outline</v-icon>
</v-list-item-icon>
<v-list-item-content>
<v-list-item-title>
{{ person.firstName }}
{{ person.additionalName }}
{{ person.lastName }}
</v-list-item-title>
</v-list-item-content>
</v-list-item>
<v-divider inset />
<v-list-item>
<v-list-item-icon>
<v-icon> mdi-human-non-binary</v-icon>
</v-list-item-icon>
<v-list-item-content>
<v-list-item-title>
{{ person.sex || "–" }}
</v-list-item-title>
</v-list-item-content>
</v-list-item>
<v-divider inset />
<v-list-item>
<v-list-item-icon>
<v-icon> mdi-map-marker-outline</v-icon>
</v-list-item-icon>
<v-list-item-content>
<v-list-item-title
>{{ person.street || "–" }}
{{ person.housenumber }}
</v-list-item-title>
<v-list-item-subtitle
>{{ person.postalCode }}
{{ person.place }}
</v-list-item-subtitle>
</v-list-item-content>
</v-list-item>
<v-divider inset />
<v-list-item
:href="person.phoneNumber ? 'tel:' + person.phoneNumber : ''"
>
<v-list-item-icon>
<v-icon> mdi-phone-outline</v-icon>
</v-list-item-icon>
<v-list-item-content>
<v-list-item-title>
{{ person.phoneNumber || "–" }}
</v-list-item-title>
<v-list-item-subtitle>
{{ $t("person.home") }}
</v-list-item-subtitle>
</v-list-item-content>
</v-list-item>
<v-list-item
:href="
person.mobileNumber ? 'tel:' + person.mobileNumber : ''
"
>
<v-list-item-action></v-list-item-action>
<v-list-item-content>
<v-list-item-title>
{{ person.mobileNumber || "–" }}
</v-list-item-title>
<v-list-item-subtitle>
{{ $t("person.mobile") }}
</v-list-item-subtitle>
</v-list-item-content>
</v-list-item>
<v-divider inset />
<v-list-item
:href="person.email ? 'mailto:' + person.email : ''"
>
<v-list-item-icon>
<v-icon>mdi-email-outline</v-icon>
</v-list-item-icon>
<v-list-item-content>
<v-list-item-title>
{{ person.email || "–" }}
</v-list-item-title>
</v-list-item-content>
</v-list-item>
<v-divider inset />
<v-list-item>
<v-list-item-icon>
<v-icon> mdi-cake-variant-outline</v-icon>
</v-list-item-icon>
<v-list-item-content>
<v-list-item-title
>{{
!!person.dateOfBirth
? $d(new Date(person.dateOfBirth), "short")
: "–"
}}
</v-list-item-title>
<v-list-item-subtitle
>{{ person.placeOfBirth }}
</v-list-item-subtitle>
</v-list-item-content>
</v-list-item>
</v-list>
</v-card>
<additional-image :src="person.secondaryImageUrl" />
</v-col>
<v-col
cols="12"
md="6"
lg="4"
v-if="person.children.length || person.guardians.length"
>
<v-card v-if="person.children.length" class="mb-6">
<v-card-title>{{ $t("person.children") }}</v-card-title>
<person-collection :persons="person.children" />
</v-card>
<v-card v-if="person.guardians.length">
<v-card-title>{{ $t("person.guardians") }}</v-card-title>
<person-collection :persons="person.guardians" />
</v-card>
</v-col>
<v-col
cols="12"
md="6"
lg="4"
v-if="person.memberOf.length || person.ownerOf.length"
>
<v-card v-if="person.memberOf.length" class="mb-6">
<v-card-title>{{ $t("group.title_plural") }}</v-card-title>
<group-collection :groups="person.memberOf" />
</v-card>
<v-card v-if="person.ownerOf.length">
<v-card-title>{{ $t("group.ownership") }}</v-card-title>
<group-collection :groups="person.ownerOf" />
</v-card>
</v-col>
</v-row>
</template>
<template v-else-if="data && data.person">
<detail-view>
<template #avatarContent>
<person-avatar-clickbox :id="id" />
</template>
<template #title>
{{ data.person.firstName }} {{ data.person.lastName }}
</template>
<template #subtitle>
{{ data.person.username }}
</template>
<template #actions="{ classes }">
<person-actions :class="classes" :id="data.person.id" />
</template>
<div class="text-center my-5" v-text="data.person.description"></div>
<v-row>
<v-col cols="12" lg="4">
<v-card class="mb-6">
<v-card-title>{{ $t("person.details") }}</v-card-title>
<v-list two-line>
<v-list-item>
<v-list-item-icon>
<v-icon> mdi-account-outline</v-icon>
</v-list-item-icon>
<v-list-item-content>
<v-list-item-title>
{{ data.person.firstName }}
{{ data.person.additionalName }}
{{ data.person.lastName }}
</v-list-item-title>
</v-list-item-content>
</v-list-item>
<v-divider inset />
<v-list-item>
<v-list-item-icon>
<v-icon> mdi-human-non-binary</v-icon>
</v-list-item-icon>
<v-list-item-content>
<v-list-item-title>
{{ data.person.sex || "–" }}
</v-list-item-title>
</v-list-item-content>
</v-list-item>
<v-divider inset />
<v-list-item>
<v-list-item-icon>
<v-icon> mdi-map-marker-outline</v-icon>
</v-list-item-icon>
<v-list-item-content>
<v-list-item-title
>{{ data.person.street || "–" }}
{{ data.person.housenumber }}
</v-list-item-title>
<v-list-item-subtitle
>{{ data.person.postalCode }}
{{ data.person.place }}
</v-list-item-subtitle>
</v-list-item-content>
</v-list-item>
<v-divider inset />
<v-list-item
:href="
data.person.phoneNumber
? 'tel:' + data.person.phoneNumber
: ''
"
>
<v-list-item-icon>
<v-icon> mdi-phone-outline</v-icon>
</v-list-item-icon>
<v-list-item-content>
<v-list-item-title>
{{ data.person.phoneNumber || "–" }}
</v-list-item-title>
<v-list-item-subtitle>
{{ $t("person.home") }}
</v-list-item-subtitle>
</v-list-item-content>
</v-list-item>
<v-list-item
:href="
data.person.mobileNumber
? 'tel:' + data.person.mobileNumber
: ''
"
>
<v-list-item-action></v-list-item-action>
<v-list-item-content>
<v-list-item-title>
{{ data.person.mobileNumber || "–" }}
</v-list-item-title>
<v-list-item-subtitle>
{{ $t("person.mobile") }}
</v-list-item-subtitle>
</v-list-item-content>
</v-list-item>
<v-divider inset />
<v-list-item
:href="
data.person.email ? 'mailto:' + data.person.email : ''
"
>
<v-list-item-icon>
<v-icon>mdi-email-outline</v-icon>
</v-list-item-icon>
<v-list-item-content>
<v-list-item-title>
{{ data.person.email || "–" }}
</v-list-item-title>
</v-list-item-content>
</v-list-item>
<v-divider inset />
<v-list-item>
<v-list-item-icon>
<v-icon> mdi-cake-variant-outline</v-icon>
</v-list-item-icon>
<v-list-item-content>
<v-list-item-title
>{{
!!data.person.dateOfBirth
? $d(new Date(data.person.dateOfBirth), "short")
: "–"
}}
</v-list-item-title>
<v-list-item-subtitle
>{{ data.person.placeOfBirth }}
</v-list-item-subtitle>
</v-list-item-content>
</v-list-item>
</v-list>
</v-card>
<additional-image :src="data.person.secondaryImageUrl" />
</v-col>
<v-col
cols="12"
md="6"
lg="4"
v-if="data.person.children.length || data.person.guardians.length"
>
<v-card v-if="data.person.children.length" class="mb-6">
<v-card-title>{{ $t("person.children") }}</v-card-title>
<person-collection :persons="data.person.children" />
</v-card>
<v-card v-if="data.person.guardians.length">
<v-card-title>{{ $t("person.guardians") }}</v-card-title>
<person-collection :persons="data.person.guardians" />
</v-card>
</v-col>
<v-col
cols="12"
md="6"
lg="4"
v-if="data.person.memberOf.length || data.person.ownerOf.length"
>
<v-card v-if="data.person.memberOf.length" class="mb-6">
<v-card-title>{{ $t("group.title_plural") }}</v-card-title>
<group-collection :groups="data.person.memberOf" />
</v-card>
<v-card v-if="data.person.ownerOf.length">
<v-card-title>{{ $t("group.ownership") }}</v-card-title>
<group-collection :groups="data.person.ownerOf" />
</v-card>
</v-col>
</v-row>
</detail-view>
</template>
</detail-view>
</template>
</ApolloQuery>
</div>
</template>
<script>
......@@ -210,6 +200,8 @@ import PersonActions from "./PersonActions.vue";
import PersonAvatarClickbox from "./PersonAvatarClickbox.vue";
import PersonCollection from "./PersonCollection.vue";
import gqlPersonOverview from "./personOverview.graphql";
export default {
name: "PersonOverview",
components: {
......@@ -220,6 +212,19 @@ export default {
PersonAvatarClickbox,
PersonCollection,
},
apollo: {
person: {
query: gqlPersonOverview,
variables() {
return {
id: this.$route.params.id,
};
},
result({ data: { person } }) {
this.$root.$setPageTitle(person.fullName);
},
},
},
props: {
id: {
type: String,
......
aleksis/core/assets/components/person/personOverview.graphql
+ 1
− 0
View file @ 96b512e0
......@@ -5,6 +5,7 @@ query person($id: ID) {
firstName
additionalName
lastName
fullName
description
......
aleksis/core/assets/messages/en.json
+ 1
− 0
View file @ 96b512e0
......@@ -150,6 +150,7 @@
"no_additional_image": "The person didn't upload an additional Image",
"logged_in_as": "Logged in as",
"menu_title": "Persons",
"page_title": "Person",
"title": "Person",
"title_plural": "Persons",
"mobile": "mobile phone",
......
aleksis/core/assets/routes.js
+ 1
− 1
View file @ 96b512e0
......@@ -84,7 +84,7 @@ const routes = [
name: "core.personById",
props: true,
meta: {
titleKey: "person.pageTitle",
titleKey: "person.page_title",
},
},
{
......
aleksis/core/urls.py
+ 3
− 1
View file @ 96b512e0
......@@ -86,7 +86,9 @@ urlpatterns = [
name="edit_school_term",
),
path("persons/", views.persons, name="persons"),
path("person/", TemplateView.as_view(template_name="core/empty.html"), name="person"),
path(
"person/", TemplateView.as_view(template_name="core/empty.html"), name="person"
),
path("persons/create/", views.CreatePersonView.as_view(), name="create_person"),
path(
"persons/<int:id_>/",
......
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment