creation of vue component person-text

src/Bundle/ChillPersonBundle/Resources/public/vuejs/_components/Entity/PersonText.vue

@@ -0,0 +1,53 @@
+<template>
+    <span v-if="isCut">{{ cutText }}</span>
+    <span v-else class="person-text">
+        <span class="firstname">{{ person.firstName }}</span>
+        <span class="lastname">{{ person.lastName }}</span>
+        <span v-if="person.altNames.length > 0" class="altnames">
+            <span :class="'altname altname-' + altNameKey"> ({{ altNameLabel }})</span>
+        </span>
+        <span class="age" v-if="person.birthdate !== null && person.deathdate === null">{{ $tc('renderbox.years_old', this.getAge) }}</span>
+    </span>
+</template>
+
+<script>
+
+export default {
+    name: "PersonText",
+    props: ['person', 'isCut'],
+    computed: {
+        getAge: function() {
+            if(this.person.birthdate && !this.person.deathdate){
+                const birthday = new Date(this.person.birthdate.datetime)
+                const now = new Date()
+                return (now.getFullYear() - birthday.getFullYear())
+            } else if(this.person.birthdate && this.person.deathdate){
+                    const birthday = new Date(this.person.birthdate.datetime)
+                    const deathdate = new Date(this.person.deathdate.datetime)
+                    return (deathdate.getFullYear() - birthday.getFullYear())
+            } else if(!this.person.birthdate && this.person.deathdate.datetime) {
+                // todo: change this
+                    return "Age unknown"
+            } else {
+                // todo: change this
+                    return "Age unknown"
+            }
+        },
+        altNameLabel: function() {
+            for(let i = 0; i < this.person.altNames.length; i++){
+                return this.person.altNames[i].label
+            }
+            console.log(this.person.altNames)
+        },
+        altNameKey: function() {
+            for(let i = 0; i < this.person.altNames.length; i++){
+                return this.person.altNames[i].key
+            }
+        },
+        cutText: function() {
+            let more = (this.person.text.length > 15) ?'…' : '';
+            return this.person.text.slice(0,15) + more;
+        }
+    }
+}
+</script>