From b71aeda651a251cdbaed7f0468739e5a863f3b7c Mon Sep 17 00:00:00 2001
From: Axolotle <nchesnais@mailoo.org>
Date: Fri, 9 Oct 2020 18:02:22 +0200
Subject: [PATCH] add Overlay to handle waiting screen with store value
 enabling its show value

---
 app/src/App.vue                       | 31 ++++++++++--------
 app/src/components/ApiWaitOverlay.vue | 46 +++++++++++++++++++++++++++
 app/src/helpers/api.js                |  5 +++
 app/src/store/info.js                 | 10 ++++--
 4 files changed, 77 insertions(+), 15 deletions(-)
 create mode 100644 app/src/components/ApiWaitOverlay.vue

diff --git a/app/src/App.vue b/app/src/App.vue
index 89cdda14..d850ec2b 100644
--- a/app/src/App.vue
+++ b/app/src/App.vue
@@ -30,15 +30,16 @@
     </header>
 
     <!-- MAIN -->
-    <breadcrumb />
-
-    <main id="main">
-      <transition v-if="transitions" :name="transitionName">
-        <router-view class="animated" />
-      </transition>
-      <router-view v-else class="static" />
-    </main>
+    <api-wait-overlay>
+      <breadcrumb />
 
+      <main id="main">
+        <transition v-if="transitions" :name="transitionName">
+          <router-view class="animated" />
+        </transition>
+        <router-view v-else class="static" />
+      </main>
+    </api-wait-overlay>
     <!-- FOOTER -->
     <footer>
       <nav>
@@ -77,14 +78,14 @@
 <script>
 import { mapGetters } from 'vuex'
 
+import ApiWaitOverlay from '@/components/ApiWaitOverlay'
+
 export default {
   name: 'App',
 
-  data () {
-    return {
-      transitionName: null
-    }
-  },
+  data: () => ({
+    transitionName: null
+  }),
 
   computed: {
     ...mapGetters(['connected', 'yunohost', 'transitions'])
@@ -107,6 +108,10 @@ export default {
     }
   },
 
+  components: {
+    ApiWaitOverlay
+  },
+
   // This hook is only triggered at page first load
   async created () {
     // From this hook the value of `connected` always come from the localStorage.
diff --git a/app/src/components/ApiWaitOverlay.vue b/app/src/components/ApiWaitOverlay.vue
new file mode 100644
index 00000000..243d3bda
--- /dev/null
+++ b/app/src/components/ApiWaitOverlay.vue
@@ -0,0 +1,46 @@
+<template>
+  <b-overlay
+    variant="white" rounded="sm" opacity="0.5"
+    no-center
+    :show="waiting"
+  >
+
+    <slot name="default" />
+
+    <template v-slot:overlay>
+      <b-card>
+        <div class="d-flex justify-content-center m-3">
+          <b-spinner />
+        </div>
+        <b-card-title class="text-center" v-t="'api_waiting'" />
+      </b-card>
+    </template>
+  </b-overlay>
+</template>
+
+<script>
+import { mapGetters } from 'vuex'
+
+export default {
+  name: 'ApiWaitOverlay',
+
+  computed: {
+    ...mapGetters(['waiting'])
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.card {
+  position: sticky;
+  top: 5vh;
+  margin: 0 5%;
+
+  @include media-breakpoint-up(md) {
+    margin: 0 10%;
+  }
+  @include media-breakpoint-up(lg) {
+    margin: 0 20%;
+  }
+}
+</style>
diff --git a/app/src/helpers/api.js b/app/src/helpers/api.js
index 03fe73a5..378e6b51 100644
--- a/app/src/helpers/api.js
+++ b/app/src/helpers/api.js
@@ -52,6 +52,7 @@ export function objectToParams (object, { addLocale = false } = {}) {
  * @return {DigestedResponse} Parsed response's json, response's text or an error.
  */
 export async function handleResponse (response) {
+  store.commit('UPDATE_WAITING', false)
   if (!response.ok) return handleErrors(response)
   // FIXME the api should always return json objects
   const responseText = await response.text()
@@ -150,6 +151,7 @@ export default {
    * @return {Promise<module:api~DigestedResponse>} Promise that resolve the api responses as an array.
    */
   post (uri, data = {}) {
+    store.commit('UPDATE_WAITING', true)
     return this.fetch('POST', uri, data).then(handleResponse)
   },
 
@@ -161,6 +163,7 @@ export default {
    * @return {Promise<module:api~DigestedResponse>} Promise that resolve the api responses as an array.
    */
   put (uri, data = {}) {
+    store.commit('UPDATE_WAITING', true)
     return this.fetch('PUT', uri, data).then(handleResponse)
   },
 
@@ -172,7 +175,9 @@ export default {
    * @return {Promise<('ok'|Error)>} Promise that resolve the api responses as an array.
    */
   delete (uri, data = {}) {
+    store.commit('UPDATE_WAITING', true)
     return this.fetch('DELETE', uri, data).then(response => {
+      store.commit('UPDATE_WAITING', false)
       return response.ok ? 'ok' : handleErrors(response)
     })
   }
diff --git a/app/src/store/info.js b/app/src/store/info.js
index 49a3a22e..c4e90d00 100644
--- a/app/src/store/info.js
+++ b/app/src/store/info.js
@@ -4,7 +4,8 @@ import router from '@/router'
 export default {
   state: {
     connected: localStorage.getItem('connected') === 'true',
-    yunohost: null // yunohost app infos: Object {version, repo}
+    yunohost: null, // yunohost app infos: Object {version, repo}
+    waiting: false
   },
 
   mutations: {
@@ -15,6 +16,10 @@ export default {
 
     'SET_YUNOHOST_INFOS' (state, yunohost) {
       state.yunohost = yunohost
+    },
+
+    'UPDATE_WAITING' (state, boolean) {
+      state.waiting = boolean
     }
   },
 
@@ -77,6 +82,7 @@ export default {
 
   getters: {
     connected: state => (state.connected),
-    yunohost: state => (state.yunohost)
+    yunohost: state => (state.yunohost),
+    waiting: state => state.waiting
   }
 }