From ec61019d767a2c89e1a62f49f53ce5b6f8095551 Mon Sep 17 00:00:00 2001
From: Richard Bowman <richard.bowman@cantab.net>
Date: Mon, 8 Jan 2024 16:23:20 +0000
Subject: [PATCH] Improve modal progress dialog

I've tidied up the UI a bit here:
* The modal box stays open and must be explicitly closed.
  Pretty much everywhere we want to use this, it would be nice
  to see the final confirmation it's worked - so I have removed
  the line that closes it after the task completes.
* The progress bar no longer animates after the task has
  finished (logic previously didn't consider that state as the
  bar wasn't visible except while it was running).
* A helpful message is printed when the task completes or is
  cancelled.
---
 .../genericComponents/taskSubmitter.vue       | 42 +++++++++++++++----
 1 file changed, 33 insertions(+), 9 deletions(-)

diff --git a/webapp/src/components/genericComponents/taskSubmitter.vue b/webapp/src/components/genericComponents/taskSubmitter.vue
index 5694a8f6..f8b7cb67 100644
--- a/webapp/src/components/genericComponents/taskSubmitter.vue
+++ b/webapp/src/components/genericComponents/taskSubmitter.vue
@@ -6,10 +6,25 @@
     <div v-if="taskStarted" ref="isPollingElement">
       <div class="progress uk-margin-small">
         <div
-          v-if="progress"
+          v-if="progress & (taskStatus == 'running')"
           class="determinate"
           :style="barWidthFromProgress"
         ></div>
+        <div
+          v-else-if="taskStatus == 'cancelled'"
+          class="determinate"
+          :style="barWidthFromProgress"
+        ></div>
+        <div
+          v-else-if="taskStatus == 'completed'"
+          class="determinate"
+          style="width:100%"
+        ></div>
+        <div
+          v-else-if="taskStatus == 'error'"
+          class="determinate"
+          style="width:0%"
+        ></div>
         <div v-else class="indeterminate"></div>
       </div>
 
@@ -48,19 +63,25 @@
             {{ item.message }}
           </div>
           <div v-if="taskStatus == 'error'" class="uk-alert-danger">
-            The task failed due to an error - use the button below to close this
-            dialog.
+            The task failed due to an error. There may be more information in
+            the log.
+          </div>
+          <div v-if="taskStatus == 'cancelled'" class="uk-alert-primary">
+            The task was cancelled.
+          </div>
+          <div v-if="taskStatus == 'completed'" class="uk-alert-primary">
+            The task completed successfully.
           </div>
         </div>
         <div id="progress-and-cancel-row">
           <div class="stretchy">
             <div class="progress uk-margin-small">
+              <div v-if="indeterminateProgressBar" class="indeterminate"></div>
               <div
-                v-if="progress"
+                v-else
                 class="determinate"
                 :style="barWidthFromProgress"
               ></div>
-              <div v-else class="indeterminate"></div>
             </div>
           </div>
 
@@ -162,6 +183,13 @@ export default {
       var progress = this.progress <= 100 ? this.progress : 100;
       var styleString = `width: ${progress}%`;
       return styleString;
+    },
+    indeterminateProgressBar: function() {
+      if (this.taskStatus == "pending") return true;
+      if ((this.taskStatus == "running") & !this.progress) {
+        return true;
+      }
+      return false;
     }
   },
 
@@ -266,10 +294,6 @@ export default {
         if (this.selfUpdate) {
           this.getFormData();
         }
-        if (this.taskStatus != "error") {
-          // Leave the modal up if there was an error.
-          UIkit.modal(this.$refs.statusModal).hide();
-        }
       }
     },