Show children and parents in person overview

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

+<template>
+  <v-list
+      v-if="persons.length"
+  >
+    <v-list-item
+        v-for="person in persons"
+        :key="person.id"
+        :to="{ name: 'core.personById', params: { id: person.id }}"
+    >
+      <v-list-item-avatar>
+          <!-- FIXME: correct avatar -->
+          <v-icon
+            class="grey lighten-1"
+            dark
+          >
+            mdi-folder
+          </v-icon>
+        </v-list-item-avatar>
+
+        <v-list-item-content>
+          <v-list-item-title v-text="person.fullName"></v-list-item-title>
+        </v-list-item-content>
+    </v-list-item>
+  </v-list>
+  <p v-else>
+    {{ $t("person.no_persons")}}
+  </p>
+</template>
+
+<script>
+export default {
+  name: "PersonList",
+  props: {
+    persons: {
+      type: Array,
+      required: true,
+    }
+  }
+}
+</script>
+
+<style scoped>
+
+</style>

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

@@ -135,6 +135,29 @@
               </v-list>
             </v-card>
           </v-col>
+
+          <v-col
+              cols="12"
+              md="6"
+              lg="4"
+              v-if="data.person.children.length"
+          >
+            <v-card>
+              <v-card-title>{{ $t("person.children") }}</v-card-title>
+              <PersonList :persons="data.person.children"/>
+            </v-card>
+          </v-col>
+          <v-col
+              cols="12"
+              md="6"
+              lg="4"
+              v-if="data.person.guardians.length"
+          >
+            <v-card>
+              <v-card-title>{{ $t("person.guardians") }}</v-card-title>
+              <PersonList :persons="data.person.guardians"/>
+            </v-card>
+          </v-col>
         </v-row>
       </template>
     </template>
@@ -142,8 +165,11 @@
 </template>
 
 <script>
+import PersonList from "./PersonList.vue";
+
 export default {
   name: "PersonOverview",
+  components: {PersonList},
   props: {
     id: {
       type: String,

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

@@ -27,5 +27,9 @@ query person($id: ID) {
       id
       fullName
     }
+    children {
+      id
+      fullName
+    }
   }
 }

aleksis/core/assets/messages.json

@@ -199,7 +199,10 @@
       "title_plural": "Persons",
       "mobile": "mobile phone",
       "home": "home phone",
-      "details": "Contact details"
+      "details": "Contact details",
+      "children": "Children",
+      "guardians": "Guardians / Parents",
+      "no_persons": "No Persons"
     },
     "preferences": {
       "person": {