feat: add friends in account setting

src/components/AccountUserNew.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="account-user-new">
-    <h3 class="subtitle is-3">{{ $tc('account.friends', localeUsers.length, { count: localeUsers.length }) }}</h3>
+    <h3 v-if="showTitle" class="subtitle is-3">{{ $tc('account.friends', localeUsers.length, { count: localeUsers.length }) }}</h3>
-    <user-new v-if="user" v-model="user" />
+    <user-new v-if="user && defaultUser" v-model="user" />
     <div v-for="(user, k) in localeUsers" :key="k">
       <user-new v-model="localeUsers[k]" @remove="() => remove(k)" />
     </div>
@@ -24,7 +24,7 @@
 </template>
 
 <script lang="ts">
-import { Component, Model, Vue, Watch } from 'vue-property-decorator'
+import { Component, Model, Prop, Vue, Watch } from 'vue-property-decorator'
 import { Getter } from 'vuex-class'
 import IUser from '@/models/IUser'
 
@@ -38,6 +38,10 @@ export default class HelloWorld extends Vue {
   public user!: IUser | null
   @Model('input', { type: Array, required: true })
   public users!: IUser[]
+  @Prop({ type: Boolean, default: true })
+  public defaultUser!: boolean
+  @Prop({ type: Boolean, default: true })
+  public showTitle!: boolean
   public localeUsers: IUser[] = []
   public userId: string = ''
   public newUserId: string = ''
@@ -72,6 +76,11 @@ export default class HelloWorld extends Vue {
     this.localeUsers.pop()
   }
 
+  @Watch('users')
+  public onUsersChange(users: IUser[]): void {
+    this.localeUsers = users
+  }
+
   @Watch('localeUsers')
   public onUserChange(users: IUser[]): void {
     this.$emit('input', users)

src/messages/fr.ts

@@ -30,7 +30,8 @@ export default {
     publicInformation: `Toutes les personnes accédant à ce compte
     pourront ajouter, modifier et supprimer des dépenses.`,
     privateInformation:
-      'Seul les amis inscrits à ce compte pourront ajouter, modifier et supprimer des dépenses.'
+      'Seul les amis inscrits à ce compte pourront ajouter, modifier et supprimer des dépenses.',
+    newUserAdded: `L'ami a été ajouté | Les amis ont été ajoutés`
   },
   about: {
     description: `

src/views/accounts/AccountSetting.vue

@@ -35,6 +35,19 @@
           </div>
         </div>
       </div>
+      <h3 class="subtitle is-3">Ajouter des amis</h3>
+      <div class="columns is-centered">
+        <div class="column is-one-third">
+          <account-user-new v-model="newUsers" :default-user="false" :show-title="false" />
+        </div>
+      </div>
+      <div class="columns is-centered" v-if="newUsers.length">
+        <div class="column is-one-third">
+          <button @click="saveUsers" class="button is-primary is-fullwidth is-large">
+            <awe-icon icon="check" />
+          </button>
+        </div>
+      </div>
     </div>
     <hr />
     <div class="columns is-centered">
@@ -77,11 +90,13 @@ import notif from '@/utils/notif'
   components: {
     'confirm-button': () => import('@/components/ConfirmButton.vue'),
     'color-picker': () => import('@/components/ColorPicker.vue'),
-    'account-share': () => import('@/components/AccountShare.vue')
+    'account-share': () => import('@/components/AccountShare.vue'),
+    'account-user-new': () => import('@/components/AccountUserNew.vue')
   }
 })
 export default class AccountSetting extends BaseAccount {
   public removing: boolean = false
+  public newUsers: IUser[] = []
 
   public async getData(docIds?: string[]): Promise<void> {
     if (docIds && !docIds.find((i: string) => i === this.id)) {
@@ -141,6 +156,49 @@ export default class AccountSetting extends BaseAccount {
     }
   }
 
+  public async saveUsers(): Promise<void> {
+    if (!this.account || !this.account._id) {
+      return
+    }
+    if (!this.validate()) {
+      return
+    }
+    this.account.users = [...this.account.users, ...this.newUsers]
+    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())
+    this.newUsers = []
+  }
+
+  public validate(): boolean {
+    if (!this.account) {
+      return false
+    }
+    const allUsers: IUser[] = [...this.account.users, ...this.newUsers]
+    const aliases: string[] = allUsers.map((user: IUser) =>
+      user.alias ? user.alias.toLowerCase() : ''
+    )
+    if (aliases.length === 0) {
+      notif.error('Au moins une personne doit être ajoutée au compte.')
+      return false
+    }
+    if (aliases.length !== new Set(aliases).size) {
+      notif.error('Les alias doivent être uniques.')
+      return false
+    }
+
+    const userIds: string[] = allUsers.map((user: IUser) => user.userId)
+    if (userIds.length !== new Set(userIds).size) {
+      notif.error('Les identifiants doivent être uniques.')
+      return false
+    }
+
+    return true
+  }
+
   public get isAdmin(): boolean {
     if (!this.account || !this.user) {
       return true