#26: added visual feedback for button click

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>

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);
       }
     },