✨ (account) add tab for account settings

src/components/AccountSetting.vue

@@ -1,17 +1,5 @@
 <template>
-  <div class="account-setting no-margin" v-if="account">
-    <nav class="breadcrumb" aria-label="breadcrumbs" v-if="account">
-      <ul>
-        <li>
-          <router-link :to="{ name: 'account', params: { id: account._id } }">{{
-            account.name
-          }}</router-link>
-        </li>
-        <li class="is-active">
-          <a href="#" @click.prevent>Paramètres</a>
-        </li>
-      </ul>
-    </nav>
+  <div class="account-setting no-margin">
     <div class="columns is-centered">
       <div class="column is-one-third">
         <color-picker v-model="account.color" @color-change="save" />
@@ -78,14 +66,15 @@
 </template>
 
 <script lang="ts">
-import { Component } from 'vue-property-decorator'
+import { Component, Prop, Vue } from 'vue-property-decorator'
+import { Getter } from 'vuex-class'
 import BaseAccount from '@/base-components/BaseAccount'
+import { confirmation } from '@/utils'
+import notif from '@/utils/notif'
 import bus, { SYNC } from '@/utils/bus-event'
 import IAccount from '@/models/IAccount'
 import IUser from '@/models/IUser'
 import accountService from '@/services/AccountService'
-import { confirmation } from '@/utils'
-import notif from '@/utils/notif'
 
 @Component({
   components: {
@@ -95,33 +84,16 @@ import notif from '@/utils/notif'
     'account-user-new': () => import('@/components/AccountUserNew.vue')
   }
 })
-export default class AccountSetting extends BaseAccount {
+export default class AccountSetting extends Vue {
+  @Getter
+  public user!: IUser | null
+  @Prop({ type: Object, required: true })
+  public account!: IAccount
   public removing: boolean = false
   public newUsers: IUser[] = []
 
-  public async getData(docIds?: string[]): Promise<void> {
-    if (docIds && !docIds.find((i: string) => i === this.id)) {
-      return
-    }
-    if (this.removing) {
-      return
-    }
-    if (this.id) {
-      this.account = await accountService.get(this.id)
-      if (!this.account) {
-        notif.error(`le compte ${this.id} n'existe pas`)
-        this.$router.push({ name: 'home' })
-        return
-      }
-      if (!this.isAdmin) {
-        this.$router.push({ name: 'home' })
-        notif.success('Vous ne pouvez pas paramétrer ce compte')
-      }
-    }
-  }
-
   public async active(): Promise<void> {
-    const ok: boolean = await accountService.active(this.id)
+    const ok: boolean = await accountService.active(this.account._id || '')
     if (ok) {
       this.$router.push({ name: 'home' })
       confirmation(this.$t('account.closed').toString())
@@ -129,7 +101,7 @@ export default class AccountSetting extends BaseAccount {
   }
 
   public async archive(): Promise<void> {
-    const ok: boolean = await accountService.archive(this.id)
+    const ok: boolean = await accountService.archive(this.account._id || '')
     if (ok) {
       this.$router.push({ name: 'home' })
       confirmation(this.$t('account.closed').toString())
@@ -137,7 +109,7 @@ export default class AccountSetting extends BaseAccount {
   }
 
   public async remove(): Promise<void> {
-    const ok: boolean = await accountService.remove(this.id)
+    const ok: boolean = await accountService.remove(this.account._id || '')
     if (ok) {
       this.$router.push({ name: 'home' })
       confirmation('Compte supprimée')
@@ -158,10 +130,7 @@ export default class AccountSetting extends BaseAccount {
   }
 
   public async saveUsers(): Promise<void> {
-    if (!this.account || !this.account._id) {
-      return
-    }
-    if (!this.validate()) {
+    if (!this.account._id || !this.validate()) {
       return
     }
     this.account.users = [...this.account.users, ...this.newUsers]
@@ -185,9 +154,6 @@ export default class AccountSetting extends BaseAccount {
   }
 
   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() : ''
@@ -211,7 +177,7 @@ export default class AccountSetting extends BaseAccount {
   }
 
   public get isAdmin(): boolean {
-    if (!this.account || !this.user) {
+    if (!this.user) {
       return true
     }
     return (
@@ -221,7 +187,7 @@ export default class AccountSetting extends BaseAccount {
   }
 
   public get backgroundColor(): any | null {
-    if (!this.account || !this.account.color) {
+    if (!this.account.color) {
       return null
     }
     return {
@@ -231,7 +197,7 @@ export default class AccountSetting extends BaseAccount {
   }
 
   public get isMultiUser(): boolean {
-    return !!this.account && this.account.users.length > 1
+    return this.account.users.length > 1
   }
 }
 </script>

src/router.ts

@@ -11,86 +11,93 @@ const router: Router = new Router({
     {
       path: '/',
       name: 'home',
-      component: Home
+      component: Home,
     },
     {
       path: '/about',
       name: 'about',
       component: () =>
-        import(/* webpackChunkName: "about" */ './views/About.vue')
+        import(/* webpackChunkName: "about" */ './views/About.vue'),
     },
     {
       path: '/pricing',
       name: 'pricing',
       component: () =>
-        import(/* webpackChunkName: "pricing" */ './views/Pricing.vue')
+        import(/* webpackChunkName: "pricing" */ './views/Pricing.vue'),
     },
     {
       path: '/security',
       name: 'security',
       component: () =>
-        import(/* webpackChunkName: "pricing" */ './views/Security.vue')
+        import(/* webpackChunkName: "pricing" */ './views/Security.vue'),
     },
     {
       path: '/account/new',
       name: 'account-new',
       component: () =>
-        import(/* webpackChunkName: "account-new" */ './views/accounts/AccountNew.vue')
+        import(
+          /* webpackChunkName: "account-new" */ './views/accounts/AccountNew.vue'
+        ),
     },
     {
       path: '/account/:id',
       name: 'account',
       props: true,
       component: () =>
-        import(/* webpackChunkName: "account" */ './views/accounts/AccountItem.vue')
-    },
-    {
-      path: '/account/:id/setting',
-      name: 'account-setting',
-      props: true,
-      component: () =>
-        import(/* webpackChunkName: "account-setting" */ './views/accounts/AccountSetting.vue')
+        import(
+          /* webpackChunkName: "account" */ './views/accounts/AccountItem.vue'
+        ),
     },
     {
       path: '/account/:id/public',
       name: 'account-public',
       props: true,
       component: () =>
-        import(/* webpackChunkName: "account-public" */ './views/accounts/AccountPublic.vue')
+        import(
+          /* webpackChunkName: "account-public" */ './views/accounts/AccountPublic.vue'
+        ),
     },
     {
       path: '/account/:id/transaction/new',
       name: 'transaction-new',
       props: true,
       component: () =>
-        import(/* webpackChunkName: "transaction-new" */ './views/transactions/TransactionNew.vue')
+        import(
+          /* webpackChunkName: "transaction-new" */ './views/transactions/TransactionNew.vue'
+        ),
     },
     {
       path: '/transaction/:id/update',
       name: 'transaction-update',
       props: true,
       component: () =>
-        import(/* webpackChunkName: "transaction-update" */ './views/transactions/TransactionUpdate.vue')
+        import(
+          /* webpackChunkName: "transaction-update" */ './views/transactions/TransactionUpdate.vue'
+        ),
     },
     {
       path: '/transaction/:id',
       name: 'transaction',
       props: true,
       component: () =>
-        import(/* webpackChunkName: "transaction" */ './views/transactions/TransactionItem.vue')
+        import(
+          /* webpackChunkName: "transaction" */ './views/transactions/TransactionItem.vue'
+        ),
     },
     {
       path: '/user',
       name: 'user',
-      component: () => import(/* webpackChunkName: "user" */ './views/User.vue')
+      component: () =>
+        import(/* webpackChunkName: "user" */ './views/User.vue'),
     },
     {
       path: '/user/:premail',
       name: 'user-premail',
       props: true,
-      component: () => import(/* webpackChunkName: "user" */ './views/User.vue')
-    }
-  ]
+      component: () =>
+        import(/* webpackChunkName: "user" */ './views/User.vue'),
+    },
+  ],
 })
 
 // tslint:disable-next-line:variable-name