refactored grid with flex, displayed footer tabs, diplay results, toggle results display

src/App.vue

@@ -16,7 +16,7 @@
     </section>
     <footer role="tools">
       <History />
-      <Results />
+      <Results v-if="resultsOpened" />
       <div id="footer-bottom" class="row">
         <FooterTabs />
         <Search />
@@ -31,7 +31,7 @@ import History from './components/nav/History'
 import Results from './components/nav/Results'
 import Search from './components/nav/Search'
 import FooterTabs from './components/nav/FooterTabs'
-// import { mapState, mapActions } from 'vuex'
+import { mapState } from 'vuex'
 
 export default {
   metaInfo: {
@@ -46,6 +46,11 @@ export default {
     Results,
     Search,
     FooterTabs
+  },
+  computed: {
+    ...mapState({
+      resultsOpened: state => state.Search.opened
+    })
   }
 }
 </script>

src/components/nav/FooterTabs.vue

@@ -2,21 +2,46 @@
   <div id="footer-tabs" class="col-1">
     <ul>
       <li class="history">
-        <span>Historique de consultation</span>
+        <div class="wrapper">
+          <span>Historique de consultation</span>
+        </div>
       </li>
       <li class="results">
-        <span>Resultas</span>
+        <div class="wrapper">
+          <span
+            v-if="resultsItems.length && !resultsOpened"
+            title="Ouvrir les resultats"
+            @click.prevent="openResults"
+            @keydown.enter.prevent="openResults"
+          >
+            Resultas
+          </span>
+        </div>
       </li>
     </ul>
   </div>
 </template>
 
 <script>
+
+import { mapState } from 'vuex'
+
 export default {
   name: 'FooterTabs',
-  data: () => ({
-
-  })
+  computed: {
+    resultsOpened: {
+      get () { return this.$store.state.Search.opened },
+      set (value) { this.$store.commit('Search/setOpened', value) }
+    },
+    ...mapState({
+      resultsItems: state => state.Search.results
+    })
+  },
+  methods: {
+    openResults () {
+      this.resultsOpened = true
+    }
+  }
 }
 </script>
 

src/components/nav/Results.vue

@@ -1,16 +1,33 @@
 <template>
-  <div id="results">
-    <h2>Resultats</h2>
-    <h3 v-if="keys">{{ keys }}</h3>
-    <div class="results-list">
-      <ul v-if="results.length">
-        <li v-for="result in results" :key="result.uuid">
-          <ResultItem :result="result" />
-        </li>
-      </ul>
+  <transition name="fade-roll">
+    <div
+      v-if="opened"
+      id="results"
+      class="row"
+    >
+      <section class="col-1">
+        <h2>Resultats</h2>
+        <span class="results-count">{{ results.length }} resultat(s)</span>
+      </section>
+      <section class="col-10 results-list">
+        <div class="wrapper">
+          <ul v-if="results.length">
+            <li v-for="result in results" :key="result.uuid" class="result">
+              <ResultItem :result="result" />
+            </li>
+          </ul>
+        </div>
+      </section>
+      <section class="col-1 tools">
+        <span
+          class="mdi mdi-close"
+          title="close"
+          @click.prevent="close"
+          @keydown.enter.prevent="close"
+        />
+      </section>
     </div>
-
-  </div>
+  </transition>
 </template>
 
 <script>
@@ -23,14 +40,21 @@ export default {
   components: {
     ResultItem
   },
-  data: () => ({
-
-  }),
   computed: {
+    opened: {
+      get () { return this.$store.state.Search.opened },
+      set (value) { this.$store.commit('Search/setOpened', value) }
+    },
     ...mapState({
       keys: state => state.Search.keys,
       results: state => state.Search.results
     })
+  },
+  methods: {
+    close () {
+      console.log('clicked on close results')
+      this.opened = false
+    }
   }
 }
 </script>

src/components/nav/Search.vue

@@ -1,28 +1,42 @@
 <template>
   <div id="search" class="col-11">
-    <form class="" action="index.html" method="post">
-      <label htmlFor="keys">Search</label>
+    <form class="search-form">
+      <label for="keys">Search</label>
       <input
         id="keys"
         v-model="keys"
         type="text"
         placeholder="search"
+        @keydown.enter.prevent="submit"
       >
-      <input
-        id="search"
+      <span
+        v-if="!isloading"
+        class="mdi mdi-magnify"
+        title="rechercher"
+        @click.prevent="submit"
+        @keydown.enter.prevent="submit"
+      />
+      <span
+        v-else
+        class="mdi mdi-loading"
+        title="chargement"
+      />
+      <!-- <input
+        id="submit-search"
         type="submit"
         name="search"
         value="Search"
+        class="mdi mdi-magnify"
         @click.prevent="submit"
         @keyup.enter="submit"
-      >
+      > -->
     </form>
   </div>
 </template>
 
 <script>
 
-import { mapActions } from 'vuex'
+import { mapActions, mapState } from 'vuex'
 
 export default {
   name: 'Search',
@@ -33,7 +47,10 @@ export default {
     keys: {
       get () { return this.$store.state.Search.keys },
       set (value) { this.$store.commit('Search/setKeys', value) }
-    }
+    },
+    ...mapState({
+      isloading: state => state.Search.isloading
+    })
   },
   methods: {
     ...mapActions({

src/store/modules/search.js

@@ -7,7 +7,9 @@ export default {
   // initial state
   state: {
     keys: '',
-    results: []
+    results: [],
+    isloading: false,
+    opened: false
   },
 
   // getters
@@ -20,6 +22,12 @@ export default {
     },
     setResults (state, content) {
       state.results = content
+    },
+    setIsloading (state, isloading) {
+      state.isloading = isloading
+    },
+    setOpened (state, opened) {
+      state.opened = opened
     }
   },
 
@@ -27,6 +35,7 @@ export default {
   actions: {
     getResults ({ dispatch, commit, state }) {
       console.log('getResults', state.keys)
+      commit('setIsloading', true)
       let params = {
         search: state.keys
       }
@@ -35,10 +44,13 @@ export default {
       return REST.get(`/search?` + q)
         .then(({ data }) => {
           console.log('search REST: data', data)
+          commit('setIsloading', false)
+          commit('setOpened', true)
           commit('setResults', data.content)
         })
         .catch((error) => {
           console.warn('Issue with search', error)
+          commit('setIsloading', false)
           Promise.reject(error)
         })
     }