Feat: manager case when there is no datas

src/store/modules/datas.js

@@ -27,6 +27,9 @@ export default {
     rows: (state) => {
       return state.rows.data
     },
+    present: (state) => {
+      return state.rows.data.length > 0
+    },
     spending_rows: (state, getters) => {
       return getters.rows.filter(x => x.Montant < 0)
     },

src/views/home.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="import">
     <h1>Analyse</h1>
-    <div class="analysis" v-if="rows">
+    <div class="analysis" v-if="datas_present">
       <b-container fluid>
         <b-row class="date-selector">
           <b-col sm="1"><label for="start"> Entre </label> </b-col>
@@ -35,9 +35,16 @@
       </b-table>
     </div>
     <div v-else>
+      <div class="nodata">
+        <h1>
         <font-awesome-icon icon="dizzy" class="fa"/>
           Pas de données
           <font-awesome-icon icon="dizzy" class="fa"/>
+        </h1>
+        <p>
+          Penser à en importer!
+        </p>
+      </div>
     </div>
   </div>
 </template>
@@ -89,7 +96,7 @@ export default {
     ...mapGetters({
       'csvs': 'datas/csvs',
       'tag_filter_rows': 'datas/tag_filter_rows',
-      'rows': 'datas/rows',
+      'datas_present': 'datas/present',
       'start': 'datas/start',
       'end': 'datas/end',
       'tags': 'config/tags'
@@ -120,5 +127,8 @@ export default {
 .date-selector {
   padding: 1rem;
 }
+.nodata{
+  text-align: center;
+}
 
 </style>