diff --git a/aleksis/core/assets/components/person/PersonOverview.vue b/aleksis/core/assets/components/person/PersonOverview.vue
index 62b4962fe9385a8dbea2803ad459a3b786408e17..b46008ab4ce5befb256e6285f53d45e80359f283 100644
--- a/aleksis/core/assets/components/person/PersonOverview.vue
+++ b/aleksis/core/assets/components/person/PersonOverview.vue
@@ -1,205 +1,195 @@
<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,
diff --git a/aleksis/core/assets/components/person/personOverview.graphql b/aleksis/core/assets/components/person/personOverview.graphql
index 1d2de79d9018ffe3fc72eca1597067f1d5c4d1be..cbf77ef19e48346007d7ebab43f6325a6ded3d3f 100644
--- a/aleksis/core/assets/components/person/personOverview.graphql
+++ b/aleksis/core/assets/components/person/personOverview.graphql
@@ -5,6 +5,7 @@ query person($id: ID) {
firstName
additionalName
lastName
+ fullName
description
diff --git a/aleksis/core/assets/messages/en.json b/aleksis/core/assets/messages/en.json
index d4a5e52784afd429cced438b0380faf5a421104a..0fb7d21be3ed74f094d22153617f4f637f08d462 100644
--- a/aleksis/core/assets/messages/en.json
+++ b/aleksis/core/assets/messages/en.json
@@ -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",
diff --git a/aleksis/core/assets/routes.js b/aleksis/core/assets/routes.js
index 3c5b874ee731a6bc7dc55b915ac3ac9bacc3cb32..04ad3e767e52075289e45689c56c3dd8c68a96cf 100644
--- a/aleksis/core/assets/routes.js
+++ b/aleksis/core/assets/routes.js
@@ -84,7 +84,7 @@ const routes = [
name: "core.personById",
props: true,
meta: {
- titleKey: "person.pageTitle",
+ titleKey: "person.page_title",
},
},
{
diff --git a/aleksis/core/urls.py b/aleksis/core/urls.py
index 178bf683bcec77a23911dd3d8110e2c2c076a5e5..cda85208fb10b469f8531bee90cd8aa1ff056d2d 100644
--- a/aleksis/core/urls.py
+++ b/aleksis/core/urls.py
@@ -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_>/",