From 9f3cdd4f1b0369f2dc2b367241dd733be800217d Mon Sep 17 00:00:00 2001
From: Bertrand Benjamin <benjamin.bertrand@opytex.org>
Date: Mon, 3 Dec 2018 12:15:22 +0100
Subject: [PATCH] Feat: manager case when there is no datas

---
 src/store/modules/datas.js |  3 ++
 src/views/home.vue         | 76 +++++++++++++++++++++-----------------
 2 files changed, 46 insertions(+), 33 deletions(-)

diff --git a/src/store/modules/datas.js b/src/store/modules/datas.js
index 3163efc..4c6c277 100644
--- a/src/store/modules/datas.js
+++ b/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)
     },
diff --git a/src/views/home.vue b/src/views/home.vue
index afabf91..f041000 100644
--- a/src/views/home.vue
+++ b/src/views/home.vue
@@ -1,43 +1,50 @@
 <template>
   <div class="import">
     <h1>Analyse</h1>
-    <div class="analysis" v-if="rows">
-        <b-container fluid>
-            <b-row class="date-selector">
-                <b-col sm="1"><label for="start"> Entre </label> </b-col>
-                <b-col sm="3">
-                    <b-form-input id="start" type="date" :value="start" @input="set_start"></b-form-input>
-                </b-col>
-                <b-col sm="1"><label for="end"> et </label></b-col>
-                <b-col sm="3">
-                    <b-form-input id="end" type="date" :value="end" @input="set_end"></b-form-input>
-                </b-col>
-            </b-row>
-        </b-container>
+    <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>
+          <b-col sm="3">
+            <b-form-input id="start" type="date" :value="start" @input="set_start"></b-form-input>
+          </b-col>
+          <b-col sm="1"><label for="end"> et </label></b-col>
+          <b-col sm="3">
+            <b-form-input id="end" type="date" :value="end" @input="set_end"></b-form-input>
+          </b-col>
+        </b-row>
+      </b-container>
 
-        <b-card-group deck class="mb-3">
-            <box @click.native="set_tags_filter([])"></box>
-            <box @click.native="set_tags_filter(['cash'])" tagname="cash"></box>
-            <box @click.native="set_tags_filter(['CB'])" tagname="CB"></box>
-            <box @click.native="set_tags_filter(['virements'])" tagname="virements"></box>
-        </b-card-group>
+      <b-card-group deck class="mb-3">
+        <box @click.native="set_tags_filter([])"></box>
+        <box @click.native="set_tags_filter(['cash'])" tagname="cash"></box>
+        <box @click.native="set_tags_filter(['CB'])" tagname="CB"></box>
+        <box @click.native="set_tags_filter(['virements'])" tagname="virements"></box>
+      </b-card-group>
 
-        <tags-comparison></tags-comparison>
+      <tags-comparison></tags-comparison>
 
-        <b-table striped hover :items="filtered_rows" :fields='fields'>
-            <template slot="tags" slot-scope="data">
-                <div v-for="tag in data.item.tags">
-                    <div v-if="tag.name !== 'Tout'">
-                        <font-awesome-icon :icon="tag.icon" class="fa"/>
-                    </div>
-                </div>
-            </template>
-        </b-table>
+      <b-table striped hover :items="filtered_rows" :fields='fields'>
+        <template slot="tags" slot-scope="data">
+          <div v-for="tag in data.item.tags">
+            <div v-if="tag.name !== 'Tout'">
+              <font-awesome-icon :icon="tag.icon" class="fa"/>
+            </div>
+          </div>
+        </template>
+      </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"/>
+          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'
@@ -118,7 +125,10 @@ export default {
 
 <style scoped>
 .date-selector {
-    padding: 1rem;
+  padding: 1rem;
+}
+.nodata{
+  text-align: center;
 }
 
 </style>