person: display user in the modal 'search person'

src/Bundle/ChillPersonBundle/Resources/public/vuejs/_components/AddPersons/PersonSuggestion.vue

@@ -20,18 +20,25 @@
             v-bind:item="item">
          </suggestion-third-party>
 
+         <suggestion-user
+            v-if="item.result.type === 'user'"
+            v-bind:item="item">
+         </suggestion-user>
+
    </div>
 </template>
 
 <script>
 import SuggestionPerson from './TypePerson';
 import SuggestionThirdParty from './TypeThirdParty';
+import SuggestionUser from './TypeUser';
 
 export default {
    name: 'PersonSuggestion',
    components: {
       SuggestionPerson,
       SuggestionThirdParty,
+      SuggestionUser,
    },
    props: [
       'item', 

src/Bundle/ChillPersonBundle/Resources/public/vuejs/_components/AddPersons/TypeUser.vue

@@ -0,0 +1,47 @@
+<template>
+    <div class="container usercontainer">
+      <div class="user-identification">
+        <span class="name">
+           {{ item.result.text }}
+        </span>
+      </div>
+    </div>
+    <div class="right_actions">
+      <span class="badge rounded-pill bg-secondary">
+        {{ $t('user')}}
+      </span>
+    </div>
+</template>
+
+<script>
+
+const i18n = {
+  messages: {
+    fr: {
+      user: 'T(M)S' // TODO how to define other translations?
+    }
+  }
+};
+
+export default {
+   name: 'SuggestionUser',
+   props: ['item'],
+   i18n,
+   computed: {
+     hasParent() {
+       return this.$props.item.result.parent !== null;
+     },
+   }
+}
+</script>
+
+<style lang="scss" scoped>
+.usercontainer {
+ .userparent {
+    .name {
+      font-weight: bold;
+      font-variant: all-small-caps;
+    }
+ }
+}
+</style>