✨ (account) add tab to account for account settings

src/views/accounts/AccountItem.vue

@@ -3,14 +3,7 @@
     <account-encrypted v-if="isEncrypted" />
     <div class="account-item-container">
       <h2 class="title is-2 account-title">
-        <router-link
+        <span :style="colorStyle()">{{ account.name }}</span>
-          v-if="isAdmin"
-          :to="{ name: 'account-setting', params: { id } }"
-          :style="colorStyle()"
-        >
-          {{ account.name }}
-        </router-link>
-        <span v-else :style="colorStyle()">{{ account.name }}</span>
       </h2>
       <div class="columns is-centered" v-if="showShare">
         <div class="column is-one-third">
@@ -85,6 +78,15 @@
               <awe-icon icon="balance-scale" />
             </a>
           </li>
+          <li v-if="isAdmin">
+            <a
+              :style="colorStyle(activeTab === 'settings')"
+              href="#"
+              @click.prevent="toggleTab('settings')"
+            >
+              <awe-icon icon="cog" />
+            </a>
+          </li>
         </ul>
       </div>
       <div
@@ -137,6 +139,14 @@
           Le compte est à l'équilibre&nbsp;!
         </div>
       </div>
+
+      <div
+        key="settings"
+        class="settings-panel tab-content is-centered"
+        v-if="activeTab === 'settings'"
+      >
+        <account-setting :account="account" />
+      </div>
     </div>
     <fab-button
       v-if="!account.archive"
@@ -179,6 +189,7 @@ import { primary, main, findContrastColor, findDarkValue } from '@/utils'
     'earth-map': () => import('@/components/EarthMap.vue'),
     'tag-list': () => import('@/components/TagList.vue'),
     'chart-balance': () => import('@/components/ChartBalance.vue'),
+    'account-setting': () => import('@/components/AccountSetting.vue'),
     'online-view': () => import('@/components/OnlineView.vue'),
     'refund-transaction': () => import('@/components/RefundTransaction.vue'),
     'fab-button': () => import('@/components/FabButton.vue')