From f605ef9fe56496d27a8fa95efdd42f5f184dcf35 Mon Sep 17 00:00:00 2001
From: Julien Calixte <jcalixte@isep.fr>
Date: Sun, 13 Oct 2019 21:44:41 +0200
Subject: [PATCH] feat(Account Setting): Change user info display

---
 src/views/accounts/AccountSetting.vue | 30 ++++++++++++---------------
 1 file changed, 13 insertions(+), 17 deletions(-)

diff --git a/src/views/accounts/AccountSetting.vue b/src/views/accounts/AccountSetting.vue
index bfbfe10..40eea2c 100644
--- a/src/views/accounts/AccountSetting.vue
+++ b/src/views/accounts/AccountSetting.vue
@@ -19,21 +19,7 @@
     <div>
       <h3 class="subtitle is-3" v-t="'account.users'"></h3>
       <div class="columns is-multiline is-centered">
-        <div v-for="(user, k) in account.users" :key="k" class="column is-one-third">
-          <div class="card">
-            <div class="card-content">
-              <div class="content">
-                <span class="user-id">{{ user.userId }}</span>
-                (
-                {{ user.alias }}
-                <span
-                  v-if="user.email"
-                >- {{ user.email }}</span>
-                )
-              </div>
-            </div>
-          </div>
-        </div>
+        <div class="column">{{ account.users.map(u => getUserInfo(u)).join(', ')}}</div>
       </div>
       <h3 class="subtitle is-3">Ajouter des amis</h3>
       <div class="columns is-centered">
@@ -164,15 +150,25 @@ export default class AccountSetting extends BaseAccount {
       return
     }
     this.account.users = [...this.account.users, ...this.newUsers]
-    const ok: boolean = await accountService.update(this.account._id, this.account)
+    const ok: boolean = await accountService.update(
+      this.account._id,
+      this.account
+    )
     if (!ok) {
       notif.error(`Une erreur s'est produite.`)
       return
     }
-    notif.success(this.$tc('account.newUserAdded', this.newUsers.length).toString())
+    notif.success(
+      this.$tc('account.newUserAdded', this.newUsers.length).toString()
+    )
     this.newUsers = []
   }
 
+  public getUserInfo(user: IUser): string {
+    const email = (user.email && ` - ${user.email}`) || ''
+    return `${user.alias} (${user.userId}${email})`
+  }
+
   public validate(): boolean {
     if (!this.account) {
       return false