From 4d0c325770ab5e2df5088ac899edb495aee0b083 Mon Sep 17 00:00:00 2001
From: Julien Calixte <julienc@bam.tech>
Date: Sat, 12 Oct 2019 12:49:07 +0200
Subject: [PATCH] :art: (Home page) Remove box if there is no accounts

---
 src/views/Home.vue | 29 ++++++++++++++++++++++++-----
 1 file changed, 24 insertions(+), 5 deletions(-)

diff --git a/src/views/Home.vue b/src/views/Home.vue
index b438eca..de32861 100644
--- a/src/views/Home.vue
+++ b/src/views/Home.vue
@@ -8,15 +8,27 @@
     <div v-else>
       <div>
         <img class="logo" src="../assets/logo.svg" title="logo Vaquant" />
-        <h2 class="title is-2">Gérer vos budgets de groupe en toute simplicité&nbsp;!</h2>
+        <h2 class="title is-2">
+          Gérer vos budgets de groupe en toute simplicité&nbsp;!
+        </h2>
       </div>
       <br />
-      <router-link class="button is-primary" :to="{ name: 'user' }" v-t="'user.loginsignup'"></router-link>
-      <div class="account-list-container box">
+      <router-link
+        class="button is-primary"
+        :to="{ name: 'user' }"
+        v-t="'user.loginsignup'"
+      ></router-link>
+      <div class="account-list-container box" v-if="showAccounts">
         <account-list />
       </div>
-      <h3 class="title is-3">Fonctionnalités</h3>
-      <app-resume />
+      <section class="hero">
+        <div class="hero-body">
+          <div class="container">
+            <h3 class="title is-3">Fonctionnalités</h3>
+            <app-resume />
+          </div>
+        </div>
+      </section>
     </div>
   </div>
 </template>
@@ -26,6 +38,7 @@ import { Component, Vue } from 'vue-property-decorator'
 import { Getter } from 'vuex-class'
 import IUser from '@/models/IUser'
 import AccountList from '@/components/AccountList.vue'
+import accountService from '@/services/AccountService'
 
 @Component({
   components: {
@@ -36,6 +49,12 @@ import AccountList from '@/components/AccountList.vue'
 export default class Home extends Vue {
   @Getter
   public user!: IUser | null
+  public showAccounts: boolean = false
+
+  public async created() {
+    const accounts = await accountService.getAll()
+    this.showAccounts = !!accounts.length
+  }
 }
 </script>