Display additional images of a person in the overview

aleksis/core/assets/components/person/AdditionalImage.vue

+<template>
+  <v-dialog
+      v-model="popup"
+      max-width="fit-content"
+      v-if="src"
+  >
+    <template v-slot:activator="{ on, attrs }">
+      <v-card
+          v-bind="attrs"
+          v-on="on"
+      >
+        <v-img
+            :src="src"
+            :alt="$t('person.additional_image')"
+            class="white--text align-end"
+            gradient="to bottom, rgba(0,0,0,.1), rgba(0,0,0,.5)"
+        >
+          <v-card-title v-text="$t('person.additional_image')"></v-card-title>
+        </v-img>
+      </v-card>
+    </template>
+    <v-sheet class="d-flex justify-center align-center flex-column text-center transparent">
+      <v-img
+          :src="src"
+          :alt="$t('person.additional_image')"
+          width="80vmin"
+          max-height="80vmin"
+      />
+    </v-sheet>
+  </v-dialog>
+  <v-card v-else>
+    <v-list>
+      <v-list-item>
+        <v-list-item-icon>
+          <v-icon>
+            mdi-image-off-outline
+          </v-icon>
+        </v-list-item-icon>
+
+        <v-list-item-content>
+          <v-list-item-title>
+            {{ $t("person.no_additional_image") }}
+          </v-list-item-title>
+        </v-list-item-content>
+      </v-list-item>
+    </v-list>
+  </v-card>
+</template>
+
+<script>
+export default {
+  name: "AdditionalImage",
+  props: {
+    src: {
+      type: [String, Object],
+      required: true
+    }
+  },
+  data: () => ({
+    popup: false,
+  }),
+}
+</script>
+
+<style scoped>
+
+</style>

aleksis/core/assets/components/person/PersonOverview.vue

@@ -44,7 +44,7 @@
               cols="12"
               lg="4"
           >
-            <v-card>
+            <v-card class="mb-6">
               <v-card-title>{{ $t("person.details") }}</v-card-title>
 
               <v-list two-line>
@@ -150,6 +150,8 @@
                 </v-list-item>
               </v-list>
             </v-card>
+
+            <AdditionalImage :src="data.person.secondaryImageUrl" />
           </v-col>
 
           <v-col
@@ -195,13 +197,14 @@
 </template>
 
 <script>
+import AdditionalImage from "./AdditionalImage.vue";
 import AvatarClickBox from "./AvatarClickBox.vue";
 import GroupList from "../group/GroupList.vue";
 import PersonList from "./PersonList.vue";
 
 export default {
   name: "PersonOverview",
-  components: {AvatarClickBox, GroupList, PersonList},
+  components: {AdditionalImage, AvatarClickBox, GroupList, PersonList},
   props: {
     id: {
       type: String,

aleksis/core/assets/components/person/personOverview.graphql

@@ -19,12 +19,7 @@ query person($id: ID) {
     dateOfBirth
     placeOfBirth
 
-    photo {
-      url
-    }
-    avatar {
-      url
-    }
+    secondaryImageUrl
 
     guardians {
       id

aleksis/core/assets/messages.json

@@ -47,7 +47,9 @@
     },
     "person": {
       "avatar": "Avatar",
-      "logged_in_as": "Angemeldet als"
+      "logged_in_as": "Angemeldet als",
+      "additional_image": "Weiteres Bild",
+      "no_additional_image": "Diese Person hat kein weiteres Bild hochgeladen"
     },
     "network_errors": {
       "error_404": "404",
@@ -194,6 +196,8 @@
     "person": {
       "account_menu_title": "Account",
       "avatar": "Avatar",
+      "additional_image": "Additional Image",
+      "no_additional_image": "The person didn't upload an additional Image",
       "logged_in_as": "Logged in as",
       "menu_title": "Persons",
       "title": "Person",

aleksis/core/schema/person.py

@@ -37,6 +37,7 @@ class PersonType(DjangoObjectType):
     avatar = graphene.Field(FieldFileType)
     avatar_url = graphene.String()
     avatar_content_url = graphene.String()
+    secondary_image_url = graphene.String()
 
     is_dummy = graphene.Boolean()
     preferences = graphene.Field(PersonPreferencesType)
@@ -60,6 +61,8 @@ class PersonType(DjangoObjectType):
         return root.identicon_url
 
     def resolve_avatar_content_url(root, info, **kwargs):  # noqa
+        # Returns the url for the main image for a person, either the avatar, photo or identicon,
+        # based on permissions and preferences
         if get_site_preferences()["account__person_prefer_photo"]:
             if info.context.user.has_perm("core.view_photo_rule", root) and root.photo:
                 return root.photo.url
@@ -74,6 +77,18 @@ class PersonType(DjangoObjectType):
 
         return root.identicon_url
 
+    def resolve_secondary_image_url(root, info, **kwargs):  # noqa
+        # returns either the photo url or the avatar url, depending on the one returned by avatar_content_url
+
+        if get_site_preferences()["account__person_prefer_photo"]:
+            if info.context.user.has_perm("core.view_avatar_rule", root) and root.avatar:
+                return root.avatar.url
+        elif info.context.user.has_perm("core.view_photo_rule", root) and root.photo:
+            return root.photo.url
+        return None
+
+
+
     def resolve_is_dummy(root: Union[Person, DummyPerson], info, **kwargs):
         return root.is_dummy if hasattr(root, "is_dummy") else False