From 5ea83d8a44e213737ecf6e92981ea689c70a199d Mon Sep 17 00:00:00 2001
From: Juergen Schoeffmann <juergen@schoeffmann.com>
Date: Mon, 21 Oct 2019 09:18:05 +0200
Subject: [PATCH] #26: added visual feedback for button click

---
 aar-frontend/src/components/FetchButton.vue | 35 +++++++++++++++++++++
 aar-frontend/src/pages/MainPage.vue         |  8 ++---
 2 files changed, 39 insertions(+), 4 deletions(-)
 create mode 100644 aar-frontend/src/components/FetchButton.vue

diff --git a/aar-frontend/src/components/FetchButton.vue b/aar-frontend/src/components/FetchButton.vue
new file mode 100644
index 0000000..02d8a9f
--- /dev/null
+++ b/aar-frontend/src/components/FetchButton.vue
@@ -0,0 +1,35 @@
+<template>
+  <v-btn @click.prevent="performDownload()" :class="className">
+    <div v-if="loading" style="display:inline;margin-right:16px;width:24px;height:24px;">
+      <v-progress-circular indeterminate="true" size="18" width="2"></v-progress-circular>
+    </div>
+    <v-icon v-else left>{{icon}}</v-icon>
+    <slot/>
+  </v-btn>
+</template>
+
+<script>
+  import {fetchService} from '../service/FetchService';
+  import Urls from '../constants/Urls';
+
+  export default {
+    name: 'FetchButton',
+    props: ['url', 'className', 'icon'],
+    data: function () {
+      return {
+        loading: false,
+      };
+    },
+    methods: {
+      performDownload () {
+        const me = this;
+        me.loading = true;
+        fetchService.performGet(Urls.HTTP_BASE + this.url).then(response => {
+          me.loading = false;
+        });
+      }
+    },
+    created: function () {
+    }
+  };
+</script>
diff --git a/aar-frontend/src/pages/MainPage.vue b/aar-frontend/src/pages/MainPage.vue
index fc2898c..33ac176 100644
--- a/aar-frontend/src/pages/MainPage.vue
+++ b/aar-frontend/src/pages/MainPage.vue
@@ -45,10 +45,9 @@
           </v-list>
         </v-card>
       </v-menu>
-      <v-btn @click.prevent="analyseRecords()" class="diagramButton">
-        <v-icon left>rotate_right</v-icon>
+      <fetch-button url="/analyseRecords" className="diagramButton" icon="rotate_right">
         Post-Process
-      </v-btn>
+      </fetch-button>
       <v-menu offset-y content-class="dropdown-menu" transition="slide-y-transition">
         <v-btn slot="activator">
           <v-icon left>save_alt</v-icon>
@@ -97,9 +96,11 @@
   import EventName from '../constants/EventName';
   import {fetchService} from '../service/FetchService';
   import Urls from '../constants/Urls';
+  import FetchButton from '../components/FetchButton';
 
   export default {
     name: 'MainPage',
+    components: {FetchButton},
     data: () => ({
       exportDataItems: [
         {exportType: 'CSV', title: 'CSV'},
@@ -130,7 +131,6 @@
       },
       downloadReport (reportType) {
         const path = (reportType === 'FIRST_IMPRESSION') ? 'createFIEPDFReport' : 'createPDFStatisticReport';
-        console.log("###", reportType, path);
         fetchService.performSimpleDownload(path);
       }
     },