improve behavior of download pages button (status, loader, disabled b…

…utton, etc) (closes #483)
medialab · Aug 30, 2023 · c531b54 · c531b54
1 parent 8598f75
commit c531b54
Show file tree

Hide file tree

Showing 3 changed files with 23 additions and 9 deletions.
diff --git a/hyphe_frontend/app/app.css b/hyphe_frontend/app/app.css
@@ -1135,6 +1135,11 @@ textarea.over-error {
   margin-right: 12px;
 }
 
+.small-spinner .spinner-container {
+  -webkit-transform: scale(0.35) translate(-34px, -76px)!important;
+          transform: scale(0.35) translate(-34px, -76px)!important;
+}
+
 .sk-folding-cube {
   margin: 20px auto;
   width: 40px;
@@ -1169,6 +1174,10 @@ textarea.over-error {
           transform-origin: 100% 100%;
 }
 
+.small-spinner .sk-folding-cube .sk-cube:before {
+  background-color: darkgrey;
+}
+
 .sk-folding-cube .sk-cube2 {
   -webkit-transform: scale(1.1) rotateZ(90deg);
           transform: scale(1.1) rotateZ(90deg);

diff --git a/hyphe_frontend/app/views/webentity.html b/hyphe_frontend/app/views/webentity.html
@@ -490,9 +490,10 @@ <h3 style="padding: 4px 8px; margin: 0px" ng-if="webentity.pages_total>=1">
                   >
                 </md-input-container>
 
-                <md-button class="md-raised md-mini md-fab md-secondary" ng-click="downloadPagesCSV()" ng-show="webentity.pages_total>=1" style="position: relative; left: 0px; top: -22px; background-color: lightgrey;">
+                <md-button class="md-raised md-mini md-fab md-secondary" ng-click="downloadPagesCSV()" ng-show="webentity.pages_total>=1" style="position: relative; left: 0px; top: -22px; background-color: lightgrey;" ng-disabled="pagesLoading">
                   <md-tooltip md-direction="top">Export all pages metadata as CSV</md-tooltip>
-                  <md-icon>file_download</md-icon>
+                  <md-icon ng-show="!pagesLoading">file_download</md-icon>
+                  <spinner ng-show="pagesLoading" class="small-spinner"></spinner>
                 </md-button>
                 <md-button class="md-raised md-mini md-fab md-secondary" style="position: absolute; right: 16px; top: 225px; background-color: lightgrey" ng-click="pagesOnlyCrawled = !pagesOnlyCrawled">
                   <md-tooltip md-direction="left">Display only crawled pages</md-tooltip>

diff --git a/hyphe_frontend/app/views/webentity.js b/hyphe_frontend/app/views/webentity.js
@@ -217,13 +217,11 @@ angular.module('hyphe.webentityController', [])
     // Functions
     $scope.loadPages = function(callback){
       $scope.pagesLoading = true
-      if (!$scope.loadAllPages) {
+      if (!$scope.loadAllPages)
         $scope.status = {message: 'Loading pages'}
-      } else if (!$scope.pagesToken) {
-        $scope.status = {message: 'Loading pages 0 %', progress: 0}
-      }
+      else $scope.status = {message: 'Loading pages 0 %', progress: 0}
       $scope.webentity.startpages_lrus = ($scope.webentity.startpages || []).map(utils.URL_to_LRU)
-      api.getPaginatedPages({
+      setTimeout(function() { api.getPaginatedPages({
           webentityId: $scope.webentity.id
           ,includePageMetas: true
           ,token: $scope.pagesToken
@@ -269,10 +267,15 @@ angular.module('hyphe.webentityController', [])
           $scope.pagesLoading = false
           $scope.status = {message: 'Error loading pages', background: 'danger'}
         }
-      )
+      ) }, 0);
     }
 
     function triggerPagesCSVDownload() {
+        $scope.status = {message: 'Downloading pages...', progress: 0}
+        setTimeout(actuallyDownloadPagesCSV, 0);
+    }
+
+    function actuallyDownloadPagesCSV() {
         // Build Headline
         var headline = Object.keys($scope.CSVfields)
         // Build Table Content
@@ -304,10 +307,11 @@ angular.module('hyphe.webentityController', [])
         })
         var blob = new Blob(fileContent, {'type': "text/csv;charset=utf-8"});
         saveAs(blob, $scope.corpusName + "_webentity-" + $scope.webentity.id + "_pages.csv", true);
+        $scope.status = {}
     }
 
     $scope.downloadPagesCSV = function(){
-      if ($scope.rawPages.length < $scope.webentity.pages_total) {
+      if ($scope.pagesToken) {
         $scope.loadAllPages = true;
         $scope.loadPages(triggerPagesCSVDownload);
       } else triggerPagesCSVDownload();