From 88ee6ec289bd7a3608ed48f24b6f69110dc7abac Mon Sep 17 00:00:00 2001
From: Odumosu Dipo <ironkyo@gmail.com>
Date: Wed, 16 Oct 2019 21:04:29 +0100
Subject: [PATCH 01/12] chore: remove unnecessary task

---
 apollo/formsframework/tasks.py | 20 --------------------
 apollo/tasks.py                |  1 -
 2 files changed, 21 deletions(-)
 delete mode 100644 apollo/formsframework/tasks.py

diff --git a/apollo/formsframework/tasks.py b/apollo/formsframework/tasks.py
deleted file mode 100644
index fbc6c0760..000000000
--- a/apollo/formsframework/tasks.py
+++ /dev/null
@@ -1,20 +0,0 @@
-# -*- coding: utf-8 -*-
-from .. import services
-from ..factory import create_celery_app
-
-celery = create_celery_app()
-
-
-@celery.task
-def update_submissions(form_pk):
-    '''
-    Updates submissions after a form has been updated, so all the fields
-    in the form are existent in the submissions.
-    '''
-    form = services.forms.get(pk=form_pk)
-    tags = form.tags
-    for submission in services.submissions.find(form=form):
-        for tag in tags:
-            if not hasattr(submission, tag):
-                setattr(submission, tag, None)
-        submission.save()
diff --git a/apollo/tasks.py b/apollo/tasks.py
index 907009675..8c5da75ec 100644
--- a/apollo/tasks.py
+++ b/apollo/tasks.py
@@ -3,7 +3,6 @@
 
 celery = create_celery_app()
 
-from apollo.formsframework.tasks import update_submissions
 from apollo.messaging.tasks import send_messages, send_email
 from apollo.participants.tasks import import_participants
 from apollo.locations.tasks import import_locations

From 7df34882edd46105276f680fcdf581fd939cead7 Mon Sep 17 00:00:00 2001
From: Odumosu Dipo <ironkyo@gmail.com>
Date: Tue, 22 Oct 2019 12:05:32 +0100
Subject: [PATCH 02/12] feat: add task label to info

---
 apollo/factory.py | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/apollo/factory.py b/apollo/factory.py
index 72a27d716..8fe71b0ec 100644
--- a/apollo/factory.py
+++ b/apollo/factory.py
@@ -189,6 +189,7 @@ def on_failure(self, exc, task_id, args, kwargs, einfo):
                     'progress': self.task_info,
                     'description': TASK_DESCRIPTIONS.get(self.request.task, _('Task')),
                     'quit': True,
+                    'name': self.request.task.split('.')[-1],
                 }
 
                 if channel is not None:
@@ -207,6 +208,7 @@ def on_success(self, retval, task_id, args, kwargs):
                     'progress': self.task_info,
                     'description': TASK_DESCRIPTIONS.get(self.request.task, _('Task')),
                     'quit': True,
+                    'name': self.request.task.split('.')[-1],
                 }
 
                 if channel is not None:

From 96f771fbfff345b67e8bdf6a50eb53fdff1188e0 Mon Sep 17 00:00:00 2001
From: Odumosu Dipo <ironkyo@gmail.com>
Date: Wed, 23 Oct 2019 20:26:06 +0100
Subject: [PATCH 03/12] feat: implement locations import toast

---
 apollo/factory.py                          |   2 +
 apollo/locations/views_locations.py        |   1 +
 apollo/templates/admin/locations_list.html | 151 +++++++++++++++++++++
 3 files changed, 154 insertions(+)

diff --git a/apollo/factory.py b/apollo/factory.py
index 8fe71b0ec..18f17f110 100644
--- a/apollo/factory.py
+++ b/apollo/factory.py
@@ -230,6 +230,8 @@ def update_task_info(self, **kwargs):
                 'status': _('RUNNING'),
                 'progress': task_metadata.get('result'),
                 'description': TASK_DESCRIPTIONS.get(self.request.task, _('Task'))
+                'name': self.request.task.split('.')[-1],
+                'quit': False,
             }
 
             if channel is not None:
diff --git a/apollo/locations/views_locations.py b/apollo/locations/views_locations.py
index d1c386971..0c59d0438 100644
--- a/apollo/locations/views_locations.py
+++ b/apollo/locations/views_locations.py
@@ -95,6 +95,7 @@ def locations_list(view, location_set_id):
     else:
         ctx = dict(
             args=args,
+            channel=session.get('_id'),
             extra_fields=extra_fields,
             filter_form=queryset_filter.form,
             breadcrumbs=breadcrumbs,
diff --git a/apollo/templates/admin/locations_list.html b/apollo/templates/admin/locations_list.html
index 9703af5df..5b72e7326 100644
--- a/apollo/templates/admin/locations_list.html
+++ b/apollo/templates/admin/locations_list.html
@@ -127,6 +127,11 @@ <h3>{{ _('Finalize') }}</h3>
   <div class="card-footer">
     {{ render_pager(locations, 'locationset.locations_list', args) }}
   </div>
+  <div aria-live="polite" aria-atomic="true" id="app">
+    <div style="position: absolute; bottom: 1rem; right: 1rem;">
+      <task-toast v-for="task in tasks" :key="task.id" :task-info="task"></task-toast>
+    </div>
+  </div>
 </div>
 <div class="modal fade" id="finalizeModal" tabindex="-1" role="dialog" aria-labelledby="finalizeModalLabel" aria-hidden="true">
   <div class="modal-dialog">
@@ -151,10 +156,155 @@ <h5 class="modal-title" id="finalizeModalLabel">{{ _('Import Locations') }}</h5>
 
 {%- block tail_js -%}
 {{ super() }}
+<template id="task-toast">
+  <div class="toast" role="alert" aria-live="assertive" aria-atomic="true" data-autohide="false" data-delay="5000">
+    <div class="toast-header">
+      <strong class="mr-auto">{{ '{{' }} taskInfo.status {{ '}}' }}</strong>
+      <button class="ml-2 mb-1 close" data-dismiss="toast" aria-label="Close"><span aria-hidden="true">&times;</span></button>
+    </div>
+    <div class="toast-body">
+      <div class="row">
+        <div class="col">
+          <div class="clearfix"><strong>{{ '{{' }} processedCount {{ '}}' }} / {{ '{{' }} totalCount {{ '}}' }}</strong></div>
+          <div class="progress" style="height: 0.25rem;">
+            <div class="progress-bar" :style="processedStyle"></div>
+          </div>
+        </div>
+      </div>
+      <div class="row">
+        <div class="col">
+          <div class="clearfix"><strong>{{ '{{' }} warningCount {{ '}}' }} / {{ '{{' }} totalCount {{ '}}' }}</strong></div>
+          <div class="progress" style="height: 0.25rem;">
+            <div class="progress-bar bg-warning" :style="warningStyle"></div>
+          </div>
+        </div>
+      </div>
+      <div class="row">
+        <div class="col">
+          <div class="clearfix"><strong>{{ '{{' }} errorCount {{ '}}' }} / {{ '{{' }} totalCount {{ '}}' }}</strong></div>
+          <div class="progress" style="height: 0.25rem;">
+            <div class="progress-bar bg-danger" :style="errorStyle"></div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
 <script type="text/javascript" src="{{ url_for('static', filename='js/bootstrap-wizard.min.js') }}"></script>
 <script type="text/javascript" src="{{ url_for('static', filename='js/jquery.form.js') }}"></script>
+<script src="{{ url_for('static', filename='js/vue.min.js') }}"></script>
+<script src="{{ url_for('static', filename='js/EventSource.js') }}"></script>
+<script src="{{ url_for('static', filename='js/promise-polyfill.min.js') }}"></script>
+<script src="{{ url_for('static', filename='js/fetch.umd.js') }}"></script>
 <script type="text/javascript">
 $(function(){
+  var roundTo = function(num) {
+    return Math.round((num + 0.00001) * 100) / 100;
+  };
+
+  Vue.component('task-toast', {
+    updated: function() {
+      if (this.taskInfo.quit == true)
+        this.clear();
+    },
+    template: '#task-toast',
+    props: {
+      taskInfo: {
+        id: String,
+        status: String,
+        quit: Boolean,
+        progress: Object,
+        description: String,
+        name: String
+      }
+    },
+    methods: {
+      clear: function() {
+        $(this.$el).toast('hide');
+      }
+    },
+    computed: {
+      processedCount: function() {
+        return this.taskInfo.progress.processed_records;
+      },
+      warningCount: function() {
+        return this.taskInfo.progress.warning_records;
+      },
+      errorCount: function() {
+        return this.taskInfo.progress.error_records;
+      },
+      totalCount: function() {
+        return this.taskInfo.progress.total_records;
+      },
+      processedStyle: function() {
+        return {width: roundTo(100 * this.taskInfo.progress.processed_records / this.taskInfo.progress.total_records) + '%'};
+      },
+      warningStyle: function() {
+        return {width: roundTo(100 * this.taskInfo.progress.warning_records / this.taskInfo.progress.total_records) + '%'};
+      },
+      errorStyle: function() {
+        return {width: roundTo(100 * this.taskInfo.progress.error_records / this.taskInfo.progress.total_records) + '%'};
+      }
+    },
+    mounted: function() {
+      $(this.$el).toast('show');
+    },
+    destroyed: function() {
+      $(this.el).toast('dispose');
+    }
+  });
+
+  var vm = new Vue({
+    el: '#app',
+    data: {
+      tasks: []
+    },
+    methods: {
+      addTask: function(taskInfo) {
+        var self = this;
+        var index = self.tasks.findIndex(function(task) {
+          return task.id == taskInfo.id;
+        });
+        if (index == -1)
+          self.tasks.unshift(taskInfo);
+        else
+          self.tasks.splice(index, 1, taskInfo);
+      },
+      loadCompletedTasks: function() {
+        var self = this;
+        fetch("{{ url_for('users.task_list') }}")
+        .then(function(response) {
+          return response.json();
+        }).then(function(data) {
+          if (data.results.length > 0) {
+            data.results.forEach(function(taskInfo) {
+              self.addTask(taskInfo);
+            });
+          }
+
+        }).catch(function(err) {
+          console.error(err);
+        });
+      },
+      loadRunningTasks: function() {
+        var self = this;
+        if (window.EventSource) {
+          var es = new EventSource("{{ url_for('sse.stream', channel=channel) }}");
+          es.onmessage = function (ev) {
+            let data = JSON.parse(ev.data);
+            if (data.id !== undefined) {
+              self.addTask(data);
+            }
+          };
+        }
+      }
+    },
+    mounted: function() {
+      this.loadCompletedTasks();
+      this.loadRunningTasks();
+    }
+  });
+
     $('#filter_reset').on('click', function() {
       var $form = $(this).parents('form').first();
       $form.find(':input').not('button').each(function() { $(this).val(''); })
@@ -238,6 +388,7 @@ <h5 class="modal-title" id="finalizeModalLabel">{{ _('Import Locations') }}</h5>
             wizard.submitSuccess();
             wizard.updateProgressBar(0);
             wizard.close();
+            vm.loadRunningTasks();
         }).fail(function (data) {
             wizard.submitFailure();
             wizard.showButtons();

From 35ca0fab5920ec8011f957056cd3365321e0ca44 Mon Sep 17 00:00:00 2001
From: Odumosu Dipo <ironkyo@gmail.com>
Date: Thu, 24 Oct 2019 21:28:01 +0100
Subject: [PATCH 04/12] feat: adjust styling and behaviour of task toasts

---
 apollo/templates/admin/locations_list.html | 12 ++++++++++--
 1 file changed, 10 insertions(+), 2 deletions(-)

diff --git a/apollo/templates/admin/locations_list.html b/apollo/templates/admin/locations_list.html
index 5b72e7326..28249f915 100644
--- a/apollo/templates/admin/locations_list.html
+++ b/apollo/templates/admin/locations_list.html
@@ -128,7 +128,7 @@ <h3>{{ _('Finalize') }}</h3>
     {{ render_pager(locations, 'locationset.locations_list', args) }}
   </div>
   <div aria-live="polite" aria-atomic="true" id="app">
-    <div style="position: absolute; bottom: 1rem; right: 1rem;">
+    <div style="position: absolute; top: 1rem; right: 1rem;">
       <task-toast v-for="task in tasks" :key="task.id" :task-info="task"></task-toast>
     </div>
   </div>
@@ -157,7 +157,7 @@ <h5 class="modal-title" id="finalizeModalLabel">{{ _('Import Locations') }}</h5>
 {%- block tail_js -%}
 {{ super() }}
 <template id="task-toast">
-  <div class="toast" role="alert" aria-live="assertive" aria-atomic="true" data-autohide="false" data-delay="5000">
+  <div class="toast" style="width: 250px;" role="alert" aria-live="assertive" aria-atomic="true" data-autohide="false" data-delay="5000">
     <div class="toast-header">
       <strong class="mr-auto">{{ '{{' }} taskInfo.status {{ '}}' }}</strong>
       <button class="ml-2 mb-1 close" data-dismiss="toast" aria-label="Close"><span aria-hidden="true">&times;</span></button>
@@ -204,6 +204,7 @@ <h5 class="modal-title" id="finalizeModalLabel">{{ _('Import Locations') }}</h5>
 
   Vue.component('task-toast', {
     updated: function() {
+      // clear completed tasks
       if (this.taskInfo.quit == true)
         this.clear();
     },
@@ -248,6 +249,13 @@ <h5 class="modal-title" id="finalizeModalLabel">{{ _('Import Locations') }}</h5>
     },
     mounted: function() {
       $(this.$el).toast('show');
+      var self = this;
+      if (this.taskInfo.quit == true) {
+        // clear already completed tasks after 5 seconds
+        window.setTimeout(function() {
+          self.clear();
+        }, 5000);
+      }
     },
     destroyed: function() {
       $(this.el).toast('dispose');

From ef9516b7023fe822e7963ce08f0318e3c079f5b6 Mon Sep 17 00:00:00 2001
From: Odumosu Dipo <ironkyo@gmail.com>
Date: Thu, 24 Oct 2019 21:48:29 +0100
Subject: [PATCH 05/12] feat: add toasts for participant import, update styles

---
 apollo/templates/admin/locations_list.html   |   4 +-
 apollo/templates/admin/participant_list.html | 160 +++++++++++++++++++
 2 files changed, 163 insertions(+), 1 deletion(-)

diff --git a/apollo/templates/admin/locations_list.html b/apollo/templates/admin/locations_list.html
index 28249f915..b46bdc2cf 100644
--- a/apollo/templates/admin/locations_list.html
+++ b/apollo/templates/admin/locations_list.html
@@ -128,7 +128,7 @@ <h3>{{ _('Finalize') }}</h3>
     {{ render_pager(locations, 'locationset.locations_list', args) }}
   </div>
   <div aria-live="polite" aria-atomic="true" id="app">
-    <div style="position: absolute; top: 1rem; right: 1rem;">
+    <div style="position: absolute; bottom: 2rem; right: 2rem;">
       <task-toast v-for="task in tasks" :key="task.id" :task-info="task"></task-toast>
     </div>
   </div>
@@ -269,6 +269,8 @@ <h5 class="modal-title" id="finalizeModalLabel">{{ _('Import Locations') }}</h5>
     },
     methods: {
       addTask: function(taskInfo) {
+        if (taskInfo.name !== 'import_locations')
+          return;
         var self = this;
         var index = self.tasks.findIndex(function(task) {
           return task.id == taskInfo.id;
diff --git a/apollo/templates/admin/participant_list.html b/apollo/templates/admin/participant_list.html
index 538ebd083..630424ff3 100644
--- a/apollo/templates/admin/participant_list.html
+++ b/apollo/templates/admin/participant_list.html
@@ -209,6 +209,11 @@
   {{ render_pager(participants, 'participants.participant_list', args) }}
   {%- endif %}
 </div>
+<div aria-live="polite" aria-atomic="true" id="app">
+  <div style="position: absolute; bottom: 2rem; right: 2rem;">
+    <task-toast v-for="task in tasks" :key="task.id" :task-info="task"></task-toast>
+  </div>
+</div>
 
 <div class="wizard" id="import-wizard" data-title="{{ _('Import Participants') }}">
   <div class="wizard-card" data-cardname="uploadFile">
@@ -248,10 +253,165 @@ <h3>{{ _('Finalize') }}</h3>
 
 {%- block tail_js -%}
 {{ super() }}
+<template id="task-toast">
+  <div class="toast" style="width: 250px;" role="alert" aria-live="assertive" aria-atomic="true" data-autohide="false" data-delay="5000">
+    <div class="toast-header">
+      <strong class="mr-auto">{{ '{{' }} taskInfo.status {{ '}}' }}</strong>
+      <button class="ml-2 mb-1 close" data-dismiss="toast" aria-label="Close"><span aria-hidden="true">&times;</span></button>
+    </div>
+    <div class="toast-body">
+      <div class="row">
+        <div class="col">
+          <div class="clearfix"><strong>{{ '{{' }} processedCount {{ '}}' }} / {{ '{{' }} totalCount {{ '}}' }}</strong></div>
+          <div class="progress" style="height: 0.25rem;">
+            <div class="progress-bar" :style="processedStyle"></div>
+          </div>
+        </div>
+      </div>
+      <div class="row">
+        <div class="col">
+          <div class="clearfix"><strong>{{ '{{' }} warningCount {{ '}}' }} / {{ '{{' }} totalCount {{ '}}' }}</strong></div>
+          <div class="progress" style="height: 0.25rem;">
+            <div class="progress-bar bg-warning" :style="warningStyle"></div>
+          </div>
+        </div>
+      </div>
+      <div class="row">
+        <div class="col">
+          <div class="clearfix"><strong>{{ '{{' }} errorCount {{ '}}' }} / {{ '{{' }} totalCount {{ '}}' }}</strong></div>
+          <div class="progress" style="height: 0.25rem;">
+            <div class="progress-bar bg-danger" :style="errorStyle"></div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
 <script type="text/javascript" src="{{ url_for('static', filename='js/bootstrap-wizard.min.js') }}"></script>
 <script type="text/javascript" src="{{ url_for('static', filename='js/jquery.form.js') }}"></script>
+<script src="{{ url_for('static', filename='js/vue.min.js') }}"></script>
+<script src="{{ url_for('static', filename='js/EventSource.js') }}"></script>
+<script src="{{ url_for('static', filename='js/promise-polyfill.min.js') }}"></script>
+<script src="{{ url_for('static', filename='js/fetch.umd.js') }}"></script>
 <script type="text/javascript">
 $(function(){
+  var roundTo = function(num) {
+    return Math.round((num + 0.00001) * 100) / 100;
+  };
+
+  Vue.component('task-toast', {
+    updated: function() {
+      // clear completed tasks
+      if (this.taskInfo.quit == true)
+        this.clear();
+    },
+    template: '#task-toast',
+    props: {
+      taskInfo: {
+        id: String,
+        status: String,
+        quit: Boolean,
+        progress: Object,
+        description: String,
+        name: String
+      }
+    },
+    methods: {
+      clear: function() {
+        $(this.$el).toast('hide');
+      }
+    },
+    computed: {
+      processedCount: function() {
+        return this.taskInfo.progress.processed_records;
+      },
+      warningCount: function() {
+        return this.taskInfo.progress.warning_records;
+      },
+      errorCount: function() {
+        return this.taskInfo.progress.error_records;
+      },
+      totalCount: function() {
+        return this.taskInfo.progress.total_records;
+      },
+      processedStyle: function() {
+        return {width: roundTo(100 * this.taskInfo.progress.processed_records / this.taskInfo.progress.total_records) + '%'};
+      },
+      warningStyle: function() {
+        return {width: roundTo(100 * this.taskInfo.progress.warning_records / this.taskInfo.progress.total_records) + '%'};
+      },
+      errorStyle: function() {
+        return {width: roundTo(100 * this.taskInfo.progress.error_records / this.taskInfo.progress.total_records) + '%'};
+      }
+    },
+    mounted: function() {
+      $(this.$el).toast('show');
+      var self = this;
+      if (this.taskInfo.quit == true) {
+        // clear already completed tasks after 5 seconds
+        window.setTimeout(function() {
+          self.clear();
+        }, 5000);
+      }
+    },
+    destroyed: function() {
+      $(this.el).toast('dispose');
+    }
+  });
+
+  var vm = new Vue({
+    el: '#app',
+    data: {
+      tasks: []
+    },
+    methods: {
+      addTask: function(taskInfo) {
+        if (taskInfo.name !== 'import_participants')
+          return;
+        var self = this;
+        var index = self.tasks.findIndex(function(task) {
+          return task.id == taskInfo.id;
+        });
+        if (index == -1)
+          self.tasks.unshift(taskInfo);
+        else
+          self.tasks.splice(index, 1, taskInfo);
+      },
+      loadCompletedTasks: function() {
+        var self = this;
+        fetch("{{ url_for('users.task_list') }}")
+        .then(function(response) {
+          return response.json();
+        }).then(function(data) {
+          if (data.results.length > 0) {
+            data.results.forEach(function(taskInfo) {
+              self.addTask(taskInfo);
+            });
+          }
+
+        }).catch(function(err) {
+          console.error(err);
+        });
+      },
+      loadRunningTasks: function() {
+        var self = this;
+        if (window.EventSource) {
+          var es = new EventSource("{{ url_for('sse.stream', channel=channel) }}");
+          es.onmessage = function (ev) {
+            let data = JSON.parse(ev.data);
+            if (data.id !== undefined) {
+              self.addTask(data);
+            }
+          };
+        }
+      }
+    },
+    mounted: function() {
+      this.loadCompletedTasks();
+      this.loadRunningTasks();
+    }
+  });
+
     $('#filter_reset').on('click', function() {
       var $form = $(this).parents('form').first();
       $form.find(':input').not('button').each(function() { $(this).val(''); })

From 16fe68d63c548c026eb3c3ae233eb8d3b424eace Mon Sep 17 00:00:00 2001
From: Odumosu Dipo <ironkyo@gmail.com>
Date: Mon, 28 Oct 2019 12:03:25 +0100
Subject: [PATCH 06/12] feat: repackage task toast functionality

---
 apollo/static/js/task-toasts.js              | 120 ++++++++++++
 apollo/templates/admin/locations_list.html   | 165 +----------------
 apollo/templates/admin/participant_list.html | 184 ++-----------------
 apollo/templates/admin/task_toast.html       |  46 +++++
 4 files changed, 196 insertions(+), 319 deletions(-)
 create mode 100644 apollo/static/js/task-toasts.js
 create mode 100644 apollo/templates/admin/task_toast.html

diff --git a/apollo/static/js/task-toasts.js b/apollo/static/js/task-toasts.js
new file mode 100644
index 000000000..877e63cb2
--- /dev/null
+++ b/apollo/static/js/task-toasts.js
@@ -0,0 +1,120 @@
+function setupTaskToasts(appSelector, taskName, taskListUrl, eventStreamUrl) {
+  var roundTo = function(num) {
+    return Math.round((num + 0.00001) * 100) / 100;
+  };
+
+  Vue.component('task-toast', {
+    updated: function() {
+      // clear completed tasks
+      if (this.taskInfo.quit == true)
+        this.clear();
+    },
+    template: '#task-toast',
+    props: {
+      taskInfo: {
+        id: String,
+        status: String,
+        quit: Boolean,
+        progress: Object,
+        description: String,
+        name: String
+      }
+    },
+    methods: {
+      clear: function() {
+        var self = this;
+        setTimeout(function() {
+          $(self.$el).toast('hide');
+        }, 5000);
+      }
+    },
+    computed: {
+      processedCount: function() {
+        return this.taskInfo.progress.processed_records;
+      },
+      warningCount: function() {
+        return this.taskInfo.progress.warning_records;
+      },
+      errorCount: function() {
+        return this.taskInfo.progress.error_records;
+      },
+      totalCount: function() {
+        return this.taskInfo.progress.total_records;
+      },
+      processedStyle: function() {
+        return {width: roundTo(100 * this.taskInfo.progress.processed_records / this.taskInfo.progress.total_records) + '%'};
+      },
+      warningStyle: function() {
+        return {width: roundTo(100 * this.taskInfo.progress.warning_records / this.taskInfo.progress.total_records) + '%'};
+      },
+      errorStyle: function() {
+        return {width: roundTo(100 * this.taskInfo.progress.error_records / this.taskInfo.progress.total_records) + '%'};
+      }
+    },
+    mounted: function() {
+      $(this.$el).toast('show');
+      var self = this;
+      if (this.taskInfo.quit == true) {
+        self.clear();
+      }
+    },
+    destroyed: function() {
+      $(this.el).toast('dispose');
+    }
+  });
+
+  var vm = new Vue({
+    el: appSelector,
+    data: {
+      tasks: []
+    },
+    methods: {
+      addTask: function(taskInfo) {
+        if (taskInfo.name !== taskName)
+          return;
+        var self = this;
+        var index = self.tasks.findIndex(function(task) {
+          return task.id == taskInfo.id;
+        });
+        if (index == -1)
+          self.tasks.unshift(taskInfo);
+        else
+          self.tasks.splice(index, 1, taskInfo);
+      },
+      loadCompletedTasks: function() {
+        var self = this;
+        fetch(taskListUrl)
+        .then(function(response) {
+          return response.json();
+        }).then(function(data) {
+          if (data.results.length > 0) {
+            data.results.forEach(function(taskInfo) {
+              self.addTask(taskInfo);
+            });
+          }
+
+        }).catch(function(err) {
+          console.error(err);
+        });
+      },
+      loadRunningTasks: function() {
+        var self = this;
+        if (window.EventSource) {
+          var es = new EventSource(eventStreamUrl);
+          es.onmessage = function (ev) {
+            let data = JSON.parse(ev.data);
+            if (data.id !== undefined) {
+              self.addTask(data);
+            }
+          };
+        }
+      }
+    },
+    mounted: function() {
+      this.loadCompletedTasks();
+      this.loadRunningTasks();
+    }
+  });
+
+  return vm;
+}
\ No newline at end of file
diff --git a/apollo/templates/admin/locations_list.html b/apollo/templates/admin/locations_list.html
index b46bdc2cf..309c52741 100644
--- a/apollo/templates/admin/locations_list.html
+++ b/apollo/templates/admin/locations_list.html
@@ -1,7 +1,8 @@
 {%- extends 'admin/master.html' -%}
 {%- from 'admin/locations_list_filter.html' import render_filter_form -%}
+{%- from 'admin/task_toast.html' import render_toast_parent, render_toast_template -%}
 {%- from 'frontend/macros/pagination.html' import render_pager, render_pager_counter -%}
-
+{%- set toast_app_id = 'app' -%}
 
 {% block head_css %}
 {{ super() }}
@@ -127,11 +128,7 @@ <h3>{{ _('Finalize') }}</h3>
   <div class="card-footer">
     {{ render_pager(locations, 'locationset.locations_list', args) }}
   </div>
-  <div aria-live="polite" aria-atomic="true" id="app">
-    <div style="position: absolute; bottom: 2rem; right: 2rem;">
-      <task-toast v-for="task in tasks" :key="task.id" :task-info="task"></task-toast>
-    </div>
-  </div>
+  {{ render_toast_parent(toast_app_id) }}
 </div>
 <div class="modal fade" id="finalizeModal" tabindex="-1" role="dialog" aria-labelledby="finalizeModalLabel" aria-hidden="true">
   <div class="modal-dialog">
@@ -156,164 +153,22 @@ <h5 class="modal-title" id="finalizeModalLabel">{{ _('Import Locations') }}</h5>
 
 {%- block tail_js -%}
 {{ super() }}
-<template id="task-toast">
-  <div class="toast" style="width: 250px;" role="alert" aria-live="assertive" aria-atomic="true" data-autohide="false" data-delay="5000">
-    <div class="toast-header">
-      <strong class="mr-auto">{{ '{{' }} taskInfo.status {{ '}}' }}</strong>
-      <button class="ml-2 mb-1 close" data-dismiss="toast" aria-label="Close"><span aria-hidden="true">&times;</span></button>
-    </div>
-    <div class="toast-body">
-      <div class="row">
-        <div class="col">
-          <div class="clearfix"><strong>{{ '{{' }} processedCount {{ '}}' }} / {{ '{{' }} totalCount {{ '}}' }}</strong></div>
-          <div class="progress" style="height: 0.25rem;">
-            <div class="progress-bar" :style="processedStyle"></div>
-          </div>
-        </div>
-      </div>
-      <div class="row">
-        <div class="col">
-          <div class="clearfix"><strong>{{ '{{' }} warningCount {{ '}}' }} / {{ '{{' }} totalCount {{ '}}' }}</strong></div>
-          <div class="progress" style="height: 0.25rem;">
-            <div class="progress-bar bg-warning" :style="warningStyle"></div>
-          </div>
-        </div>
-      </div>
-      <div class="row">
-        <div class="col">
-          <div class="clearfix"><strong>{{ '{{' }} errorCount {{ '}}' }} / {{ '{{' }} totalCount {{ '}}' }}</strong></div>
-          <div class="progress" style="height: 0.25rem;">
-            <div class="progress-bar bg-danger" :style="errorStyle"></div>
-          </div>
-        </div>
-      </div>
-    </div>
-  </div>
-</template>
+{{ render_toast_template() }}
 <script type="text/javascript" src="{{ url_for('static', filename='js/bootstrap-wizard.min.js') }}"></script>
 <script type="text/javascript" src="{{ url_for('static', filename='js/jquery.form.js') }}"></script>
 <script src="{{ url_for('static', filename='js/vue.min.js') }}"></script>
 <script src="{{ url_for('static', filename='js/EventSource.js') }}"></script>
 <script src="{{ url_for('static', filename='js/promise-polyfill.min.js') }}"></script>
 <script src="{{ url_for('static', filename='js/fetch.umd.js') }}"></script>
+<script src="{{ url_for('static', filename='js/task-toasts.js') }}"></script>
 <script type="text/javascript">
 $(function(){
-  var roundTo = function(num) {
-    return Math.round((num + 0.00001) * 100) / 100;
-  };
+  var taskAppSelector = '#{{ toast_app_id }}';
+  var taskName = 'import_locations';
+  var taskListUrl = "{{ url_for('users.task_list') }}";
+  var eventStreamUrl = "{{ url_for('sse.stream', channel=channel) }}";
 
-  Vue.component('task-toast', {
-    updated: function() {
-      // clear completed tasks
-      if (this.taskInfo.quit == true)
-        this.clear();
-    },
-    template: '#task-toast',
-    props: {
-      taskInfo: {
-        id: String,
-        status: String,
-        quit: Boolean,
-        progress: Object,
-        description: String,
-        name: String
-      }
-    },
-    methods: {
-      clear: function() {
-        $(this.$el).toast('hide');
-      }
-    },
-    computed: {
-      processedCount: function() {
-        return this.taskInfo.progress.processed_records;
-      },
-      warningCount: function() {
-        return this.taskInfo.progress.warning_records;
-      },
-      errorCount: function() {
-        return this.taskInfo.progress.error_records;
-      },
-      totalCount: function() {
-        return this.taskInfo.progress.total_records;
-      },
-      processedStyle: function() {
-        return {width: roundTo(100 * this.taskInfo.progress.processed_records / this.taskInfo.progress.total_records) + '%'};
-      },
-      warningStyle: function() {
-        return {width: roundTo(100 * this.taskInfo.progress.warning_records / this.taskInfo.progress.total_records) + '%'};
-      },
-      errorStyle: function() {
-        return {width: roundTo(100 * this.taskInfo.progress.error_records / this.taskInfo.progress.total_records) + '%'};
-      }
-    },
-    mounted: function() {
-      $(this.$el).toast('show');
-      var self = this;
-      if (this.taskInfo.quit == true) {
-        // clear already completed tasks after 5 seconds
-        window.setTimeout(function() {
-          self.clear();
-        }, 5000);
-      }
-    },
-    destroyed: function() {
-      $(this.el).toast('dispose');
-    }
-  });
-
-  var vm = new Vue({
-    el: '#app',
-    data: {
-      tasks: []
-    },
-    methods: {
-      addTask: function(taskInfo) {
-        if (taskInfo.name !== 'import_locations')
-          return;
-        var self = this;
-        var index = self.tasks.findIndex(function(task) {
-          return task.id == taskInfo.id;
-        });
-        if (index == -1)
-          self.tasks.unshift(taskInfo);
-        else
-          self.tasks.splice(index, 1, taskInfo);
-      },
-      loadCompletedTasks: function() {
-        var self = this;
-        fetch("{{ url_for('users.task_list') }}")
-        .then(function(response) {
-          return response.json();
-        }).then(function(data) {
-          if (data.results.length > 0) {
-            data.results.forEach(function(taskInfo) {
-              self.addTask(taskInfo);
-            });
-          }
-
-        }).catch(function(err) {
-          console.error(err);
-        });
-      },
-      loadRunningTasks: function() {
-        var self = this;
-        if (window.EventSource) {
-          var es = new EventSource("{{ url_for('sse.stream', channel=channel) }}");
-          es.onmessage = function (ev) {
-            let data = JSON.parse(ev.data);
-            if (data.id !== undefined) {
-              self.addTask(data);
-            }
-          };
-        }
-      }
-    },
-    mounted: function() {
-      this.loadCompletedTasks();
-      this.loadRunningTasks();
-    }
-  });
+  var vm = setupTaskToasts(taskAppSelector, taskName, taskListUrl, eventStreamUrl);
 
     $('#filter_reset').on('click', function() {
       var $form = $(this).parents('form').first();
diff --git a/apollo/templates/admin/participant_list.html b/apollo/templates/admin/participant_list.html
index 630424ff3..4efd89f77 100644
--- a/apollo/templates/admin/participant_list.html
+++ b/apollo/templates/admin/participant_list.html
@@ -2,6 +2,8 @@
 {%- from 'frontend/macros/participant_list_filter.html' import render_filter_form -%}
 {%- from 'frontend/macros/pagination.html' import render_pager -%}
 {%- from 'frontend/macros/send_message.html' import send_message_modal -%}
+{%- from 'admin/task_toast.html' import render_toast_parent, render_toast_template -%}
+{%- set toast_app_id = 'app' -%}
 
 {% block head_css %}
 {{ super() }}
@@ -209,31 +211,26 @@
   {{ render_pager(participants, 'participants.participant_list', args) }}
   {%- endif %}
 </div>
-<div aria-live="polite" aria-atomic="true" id="app">
-  <div style="position: absolute; bottom: 2rem; right: 2rem;">
-    <task-toast v-for="task in tasks" :key="task.id" :task-info="task"></task-toast>
-  </div>
-</div>
 
 <div class="wizard" id="import-wizard" data-title="{{ _('Import Participants') }}">
   <div class="wizard-card" data-cardname="uploadFile">
     <h3>{{ _('Upload File') }}</h3>
     <div class="wizard-input-section">
-    <form enctype="multipart/form-data" method="POST" id="upload-form" action="{{ url_for('participantset.participants_import', participant_set_id=participant_set_id) }}"><input type="hidden" name="csrf_token" value="{{ csrf_token() }}" />
-      <div class="custom-file">
-        <input type="file" class="custom-file-input upload" id="uploadFile" name="spreadsheet">
-        <label for="uploadFile" class="custom-file-label" data-browse="{{ _('Browse') }}">{{ _('Choose file') }}</label>
-        <small class="form-text text-muted" id="uploadFileHelptext">{{ _('Only .csv, .xls and .xlsx files') }}</small>
-      </div>
-    </form>
+      <form enctype="multipart/form-data" method="POST" id="upload-form" action="{{ url_for('participantset.participants_import', participant_set_id=participant_set_id) }}"><input type="hidden" name="csrf_token" value="{{ csrf_token() }}" />
+        <div class="custom-file">
+          <input type="file" class="custom-file-input upload" id="uploadFile" name="spreadsheet">
+          <label for="uploadFile" class="custom-file-label" data-browse="{{ _('Browse') }}">{{ _('Choose file') }}</label>
+          <small class="form-text text-muted" id="uploadFileHelptext">{{ _('Only .csv, .xls and .xlsx files') }}</small>
+        </div>
+      </form>
     </div>
   </div>
-
+  
   <div class="wizard-card pr-0" data-cardname="mapFields">
     <h3>{{ _('Map Fields') }}</h3>
     <div class="wizard-input-section overflow-auto"></div>
   </div>
-
+  
   <div class="wizard-card" data-cardname="finalize">
     <h3>{{ _('Finalize') }}</h3>
     <div class="wizard-input-section">
@@ -241,7 +238,7 @@ <h3>{{ _('Finalize') }}</h3>
         <span class="create-server-name">{% trans %}Click the <strong>Submit</strong> button to begin the import process.{% endtrans %}</span>
       </div>
     </div>
-
+    
     <div class="wizard-failure">
       <div class="alert alert-danger">
         {% trans %}There was a problem submitting the form. Please try again in a minute.{% endtrans %}
@@ -249,168 +246,27 @@ <h3>{{ _('Finalize') }}</h3>
     </div>
   </div>
 </div>
+{{ render_toast_parent(toast_app_id) }}
 {%- endblock -%}
 
 {%- block tail_js -%}
 {{ super() }}
-<template id="task-toast">
-  <div class="toast" style="width: 250px;" role="alert" aria-live="assertive" aria-atomic="true" data-autohide="false" data-delay="5000">
-    <div class="toast-header">
-      <strong class="mr-auto">{{ '{{' }} taskInfo.status {{ '}}' }}</strong>
-      <button class="ml-2 mb-1 close" data-dismiss="toast" aria-label="Close"><span aria-hidden="true">&times;</span></button>
-    </div>
-    <div class="toast-body">
-      <div class="row">
-        <div class="col">
-          <div class="clearfix"><strong>{{ '{{' }} processedCount {{ '}}' }} / {{ '{{' }} totalCount {{ '}}' }}</strong></div>
-          <div class="progress" style="height: 0.25rem;">
-            <div class="progress-bar" :style="processedStyle"></div>
-          </div>
-        </div>
-      </div>
-      <div class="row">
-        <div class="col">
-          <div class="clearfix"><strong>{{ '{{' }} warningCount {{ '}}' }} / {{ '{{' }} totalCount {{ '}}' }}</strong></div>
-          <div class="progress" style="height: 0.25rem;">
-            <div class="progress-bar bg-warning" :style="warningStyle"></div>
-          </div>
-        </div>
-      </div>
-      <div class="row">
-        <div class="col">
-          <div class="clearfix"><strong>{{ '{{' }} errorCount {{ '}}' }} / {{ '{{' }} totalCount {{ '}}' }}</strong></div>
-          <div class="progress" style="height: 0.25rem;">
-            <div class="progress-bar bg-danger" :style="errorStyle"></div>
-          </div>
-        </div>
-      </div>
-    </div>
-  </div>
-</template>
+{{ render_toast_template() }}
 <script type="text/javascript" src="{{ url_for('static', filename='js/bootstrap-wizard.min.js') }}"></script>
 <script type="text/javascript" src="{{ url_for('static', filename='js/jquery.form.js') }}"></script>
 <script src="{{ url_for('static', filename='js/vue.min.js') }}"></script>
 <script src="{{ url_for('static', filename='js/EventSource.js') }}"></script>
 <script src="{{ url_for('static', filename='js/promise-polyfill.min.js') }}"></script>
 <script src="{{ url_for('static', filename='js/fetch.umd.js') }}"></script>
+<script src="{{ url_for('static', filename='js/task-toasts.js') }}"></script>
 <script type="text/javascript">
 $(function(){
-  var roundTo = function(num) {
-    return Math.round((num + 0.00001) * 100) / 100;
-  };
+  var taskAppSelector = '#{{ toast_app_id }}';
+  var taskName = 'import_participants';
+  var taskListUrl = "{{ url_for('users.task_list') }}";
+  var eventStreamUrl = "{{ url_for('sse.stream', channel=channel) }}";
 
-  Vue.component('task-toast', {
-    updated: function() {
-      // clear completed tasks
-      if (this.taskInfo.quit == true)
-        this.clear();
-    },
-    template: '#task-toast',
-    props: {
-      taskInfo: {
-        id: String,
-        status: String,
-        quit: Boolean,
-        progress: Object,
-        description: String,
-        name: String
-      }
-    },
-    methods: {
-      clear: function() {
-        $(this.$el).toast('hide');
-      }
-    },
-    computed: {
-      processedCount: function() {
-        return this.taskInfo.progress.processed_records;
-      },
-      warningCount: function() {
-        return this.taskInfo.progress.warning_records;
-      },
-      errorCount: function() {
-        return this.taskInfo.progress.error_records;
-      },
-      totalCount: function() {
-        return this.taskInfo.progress.total_records;
-      },
-      processedStyle: function() {
-        return {width: roundTo(100 * this.taskInfo.progress.processed_records / this.taskInfo.progress.total_records) + '%'};
-      },
-      warningStyle: function() {
-        return {width: roundTo(100 * this.taskInfo.progress.warning_records / this.taskInfo.progress.total_records) + '%'};
-      },
-      errorStyle: function() {
-        return {width: roundTo(100 * this.taskInfo.progress.error_records / this.taskInfo.progress.total_records) + '%'};
-      }
-    },
-    mounted: function() {
-      $(this.$el).toast('show');
-      var self = this;
-      if (this.taskInfo.quit == true) {
-        // clear already completed tasks after 5 seconds
-        window.setTimeout(function() {
-          self.clear();
-        }, 5000);
-      }
-    },
-    destroyed: function() {
-      $(this.el).toast('dispose');
-    }
-  });
-
-  var vm = new Vue({
-    el: '#app',
-    data: {
-      tasks: []
-    },
-    methods: {
-      addTask: function(taskInfo) {
-        if (taskInfo.name !== 'import_participants')
-          return;
-        var self = this;
-        var index = self.tasks.findIndex(function(task) {
-          return task.id == taskInfo.id;
-        });
-        if (index == -1)
-          self.tasks.unshift(taskInfo);
-        else
-          self.tasks.splice(index, 1, taskInfo);
-      },
-      loadCompletedTasks: function() {
-        var self = this;
-        fetch("{{ url_for('users.task_list') }}")
-        .then(function(response) {
-          return response.json();
-        }).then(function(data) {
-          if (data.results.length > 0) {
-            data.results.forEach(function(taskInfo) {
-              self.addTask(taskInfo);
-            });
-          }
-
-        }).catch(function(err) {
-          console.error(err);
-        });
-      },
-      loadRunningTasks: function() {
-        var self = this;
-        if (window.EventSource) {
-          var es = new EventSource("{{ url_for('sse.stream', channel=channel) }}");
-          es.onmessage = function (ev) {
-            let data = JSON.parse(ev.data);
-            if (data.id !== undefined) {
-              self.addTask(data);
-            }
-          };
-        }
-      }
-    },
-    mounted: function() {
-      this.loadCompletedTasks();
-      this.loadRunningTasks();
-    }
-  });
+  var vm = setupTaskToasts(taskAppSelector, taskName, taskListUrl, eventStreamUrl);
 
     $('#filter_reset').on('click', function() {
       var $form = $(this).parents('form').first();
diff --git a/apollo/templates/admin/task_toast.html b/apollo/templates/admin/task_toast.html
new file mode 100644
index 000000000..c3ca19224
--- /dev/null
+++ b/apollo/templates/admin/task_toast.html
@@ -0,0 +1,46 @@
+{% macro render_toast_template() %}
+{% raw %}
+<template id="task-toast">
+  <div class="toast" style="width: 250px;" role="alert" aria-live="assertive" aria-atomic="true" data-autohide="false" data-delay="5000">
+    <div class="toast-header">
+      <strong class="mr-auto">{{ taskInfo.status }}</strong>
+      <button class="ml-2 mb-1 close" data-dismiss="toast" aria-label="Close"><span aria-hidden="true">&times;</span></button>
+    </div>
+    <div class="toast-body">
+      <div class="row">
+        <div class="col">
+          <div class="clearfix"><strong>{{ processedCount }} / {{ totalCount }}</strong></div>
+          <div class="progress" style="height: 0.25rem;">
+            <div class="progress-bar" :style="processedStyle"></div>
+          </div>
+        </div>
+      </div>
+      <div class="row">
+        <div class="col">
+          <div class="clearfix"><strong>{{ warningCount }} / {{ totalCount }}</strong></div>
+          <div class="progress" style="height: 0.25rem;">
+            <div class="progress-bar bg-warning" :style="warningStyle"></div>
+          </div>
+        </div>
+      </div>
+      <div class="row">
+        <div class="col">
+          <div class="clearfix"><strong>{{ errorCount }} / {{ totalCount }}</strong></div>
+          <div class="progress" style="height: 0.25rem;">
+            <div class="progress-bar bg-danger" :style="errorStyle"></div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+{% endraw %}
+{% endmacro %}
+
+{% macro render_toast_parent(toast_app_id) %}
+<div aria-live="polite" aria-atomic="true" id="{{ toast_app_id }}">
+  <div style="position: absolute; bottom: 2rem; right: 2rem;">
+    <task-toast v-for="task in tasks" :key="task.id" :task-info="task"></task-toast>
+  </div>
+</div>
+{% endmacro %}
\ No newline at end of file

From ab0199b5b2bf53e94fb0c3b8238a753f5ba6ea97 Mon Sep 17 00:00:00 2001
From: Odumosu Dipo <ironkyo@gmail.com>
Date: Mon, 28 Oct 2019 12:32:07 +0100
Subject: [PATCH 07/12] feat: add support for multiple task names

---
 apollo/static/js/task-toasts.js | 6 ++++--
 1 file changed, 4 insertions(+), 2 deletions(-)

diff --git a/apollo/static/js/task-toasts.js b/apollo/static/js/task-toasts.js
index 877e63cb2..336cc2cb2 100644
--- a/apollo/static/js/task-toasts.js
+++ b/apollo/static/js/task-toasts.js
@@ -1,4 +1,4 @@
-function setupTaskToasts(appSelector, taskName, taskListUrl, eventStreamUrl) {
+function setupTaskToasts(appSelector, taskNames, taskListUrl, eventStreamUrl) {
   var roundTo = function(num) {
     return Math.round((num + 0.00001) * 100) / 100;
   };
@@ -70,8 +70,10 @@ function setupTaskToasts(appSelector, taskName, taskListUrl, eventStreamUrl) {
     },
     methods: {
       addTask: function(taskInfo) {
-        if (taskInfo.name !== taskName)
+        // skip unregistered tasks
+        if (taskNames.indexOf(taskInfo.name) === -1)
           return;
+
         var self = this;
         var index = self.tasks.findIndex(function(task) {
           return task.id == taskInfo.id;

From 8cd87f5063fe0e152dd8056302248b859c469148 Mon Sep 17 00:00:00 2001
From: Odumosu Dipo <ironkyo@gmail.com>
Date: Mon, 28 Oct 2019 12:38:27 +0100
Subject: [PATCH 08/12] fix: add channel specification for participants

---
 apollo/participants/views_participants.py | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/apollo/participants/views_participants.py b/apollo/participants/views_participants.py
index 98ec88e40..57fcf4d85 100644
--- a/apollo/participants/views_participants.py
+++ b/apollo/participants/views_participants.py
@@ -358,7 +358,8 @@ def participant_list(participant_set_id=0, view=None):
         location_types=helpers.displayable_location_types(
             is_administrative=True, location_set_id=location_set_id),
         participants=queryset_filterset.qs.paginate(
-            page=page, per_page=current_app.config.get('PAGE_SIZE'))
+            page=page, per_page=current_app.config.get('PAGE_SIZE')),
+        channel=session.get('_id'),
     )
 
     if view:

From 18b5052eddc07dd7882b2a3e32d1f568e0cdd10c Mon Sep 17 00:00:00 2001
From: Odumosu Dipo <ironkyo@gmail.com>
Date: Mon, 28 Oct 2019 12:38:56 +0100
Subject: [PATCH 09/12] feat: add support for multiple task names

---
 apollo/templates/admin/form_list.html        | 15 +++++++++++++++
 apollo/templates/admin/locations_list.html   |  4 ++--
 apollo/templates/admin/participant_list.html |  7 ++++---
 3 files changed, 21 insertions(+), 5 deletions(-)

diff --git a/apollo/templates/admin/form_list.html b/apollo/templates/admin/form_list.html
index b7ab85034..22536e59e 100644
--- a/apollo/templates/admin/form_list.html
+++ b/apollo/templates/admin/form_list.html
@@ -1,4 +1,6 @@
 {% extends "admin/base.html" %}
+{%- from 'admin/task_toast.html' import render_toast_parent, render_toast_template -%}
+{%- set toast_app_id = 'toast_app' -%}
 
 {%- block body %}
 <div class="d-flex justify-content-between align-items-md-center flex-row mb-3">
@@ -171,12 +173,25 @@ <h5 id="formImportModalLabel" class="modal-title">{{ _('Import Form') }}</h5>
     </div>
   </div>
 </form>
+{{ render_toast_parent(toast_app_id) }}
 {% endblock %}
 
 {%- block tail_js %}
 {{ super() }}
+{{ render_toast_template() }}
 <script src="{{ url_for('static', filename='js/vue.min.js') }}"></script>
+<script src="{{ url_for('static', filename='js/EventSource.js') }}"></script>
+<script src="{{ url_for('static', filename='js/promise-polyfill.min.js') }}"></script>
+<script src="{{ url_for('static', filename='js/fetch.umd.js') }}"></script>
+<script src="{{ url_for('static', filename='js/task-toasts.js') }}"></script>
 <script>
+  var taskAppSelector = '#{{ toast_app_id }}';
+  var taskNames = ['init_submissions', 'init_survey_submissions'];
+  var taskListUrl = "{{ url_for('users.task_list') }}";
+  var eventStreamUrl = "{{ url_for('sse.stream', channel=channel) }}";
+
+  var toastVm = setupTaskToasts(taskAppSelector, taskNames, taskListUrl, eventStreamUrl);
+
   Vue.component('create-checklists-modal-body', {
     template: `
     <div>
diff --git a/apollo/templates/admin/locations_list.html b/apollo/templates/admin/locations_list.html
index 309c52741..a0332253b 100644
--- a/apollo/templates/admin/locations_list.html
+++ b/apollo/templates/admin/locations_list.html
@@ -164,11 +164,11 @@ <h5 class="modal-title" id="finalizeModalLabel">{{ _('Import Locations') }}</h5>
 <script type="text/javascript">
 $(function(){
   var taskAppSelector = '#{{ toast_app_id }}';
-  var taskName = 'import_locations';
+  var taskNames = ['import_locations'];
   var taskListUrl = "{{ url_for('users.task_list') }}";
   var eventStreamUrl = "{{ url_for('sse.stream', channel=channel) }}";
 
-  var vm = setupTaskToasts(taskAppSelector, taskName, taskListUrl, eventStreamUrl);
+  var vm = setupTaskToasts(taskAppSelector, taskNames, taskListUrl, eventStreamUrl);
 
     $('#filter_reset').on('click', function() {
       var $form = $(this).parents('form').first();
diff --git a/apollo/templates/admin/participant_list.html b/apollo/templates/admin/participant_list.html
index 4efd89f77..ba71d6c6b 100644
--- a/apollo/templates/admin/participant_list.html
+++ b/apollo/templates/admin/participant_list.html
@@ -211,6 +211,7 @@
   {{ render_pager(participants, 'participants.participant_list', args) }}
   {%- endif %}
 </div>
+{{ render_toast_parent(toast_app_id) }}
 
 <div class="wizard" id="import-wizard" data-title="{{ _('Import Participants') }}">
   <div class="wizard-card" data-cardname="uploadFile">
@@ -246,7 +247,6 @@ <h3>{{ _('Finalize') }}</h3>
     </div>
   </div>
 </div>
-{{ render_toast_parent(toast_app_id) }}
 {%- endblock -%}
 
 {%- block tail_js -%}
@@ -262,11 +262,11 @@ <h3>{{ _('Finalize') }}</h3>
 <script type="text/javascript">
 $(function(){
   var taskAppSelector = '#{{ toast_app_id }}';
-  var taskName = 'import_participants';
+  var taskNames = ['import_participants'];
   var taskListUrl = "{{ url_for('users.task_list') }}";
   var eventStreamUrl = "{{ url_for('sse.stream', channel=channel) }}";
 
-  var vm = setupTaskToasts(taskAppSelector, taskName, taskListUrl, eventStreamUrl);
+  var vm = setupTaskToasts(taskAppSelector, taskNames, taskListUrl, eventStreamUrl);
 
     $('#filter_reset').on('click', function() {
       var $form = $(this).parents('form').first();
@@ -349,6 +349,7 @@ <h3>{{ _('Finalize') }}</h3>
             wizard.submitSuccess();
             wizard.updateProgressBar(0);
             wizard.close();
+            vm.loadRunningTasks();
         }).fail(function () {
           wizard.submitFailure();
           wizard.showButtons();

From 9bcec60b4d4162a1fe86d1e64c3631f25294c4fe Mon Sep 17 00:00:00 2001
From: Odumosu Dipo <ironkyo@gmail.com>
Date: Mon, 28 Oct 2019 12:40:49 +0100
Subject: [PATCH 10/12] fix: add channel specification for forms

---
 apollo/formsframework/views_forms.py | 1 +
 1 file changed, 1 insertion(+)

diff --git a/apollo/formsframework/views_forms.py b/apollo/formsframework/views_forms.py
index dd5631ca1..94ce50dfb 100644
--- a/apollo/formsframework/views_forms.py
+++ b/apollo/formsframework/views_forms.py
@@ -234,6 +234,7 @@ def forms_list(view):
         'breadcrumbs': breadcrumbs,
         'init_form': checklist_init_form,
         'form_import_form': form_import_form,
+        'channel': session.get('_id'),
     }
 
     return view.render(template_name, **context)

From 7aa4c4ff249a95f92b2008f3b197f71cf1120eca Mon Sep 17 00:00:00 2001
From: Odumosu Dipo <ironkyo@gmail.com>
Date: Sat, 2 Nov 2019 10:53:02 +0100
Subject: [PATCH 11/12] feat: move toast parent into footer

---
 apollo/templates/admin/form_list.html        | 5 +++--
 apollo/templates/admin/locations_list.html   | 4 +++-
 apollo/templates/admin/participant_list.html | 5 ++++-
 apollo/templates/admin/task_toast.html       | 2 +-
 4 files changed, 11 insertions(+), 5 deletions(-)

diff --git a/apollo/templates/admin/form_list.html b/apollo/templates/admin/form_list.html
index 22536e59e..e3606f335 100644
--- a/apollo/templates/admin/form_list.html
+++ b/apollo/templates/admin/form_list.html
@@ -173,9 +173,10 @@ <h5 id="formImportModalLabel" class="modal-title">{{ _('Import Form') }}</h5>
     </div>
   </div>
 </form>
-{{ render_toast_parent(toast_app_id) }}
 {% endblock %}
-
+{% block footer %}
+{{ render_toast_parent(toast_app_id) }}
+{% endblock footer %}
 {%- block tail_js %}
 {{ super() }}
 {{ render_toast_template() }}
diff --git a/apollo/templates/admin/locations_list.html b/apollo/templates/admin/locations_list.html
index a0332253b..73202570a 100644
--- a/apollo/templates/admin/locations_list.html
+++ b/apollo/templates/admin/locations_list.html
@@ -128,7 +128,6 @@ <h3>{{ _('Finalize') }}</h3>
   <div class="card-footer">
     {{ render_pager(locations, 'locationset.locations_list', args) }}
   </div>
-  {{ render_toast_parent(toast_app_id) }}
 </div>
 <div class="modal fade" id="finalizeModal" tabindex="-1" role="dialog" aria-labelledby="finalizeModalLabel" aria-hidden="true">
   <div class="modal-dialog">
@@ -150,6 +149,9 @@ <h5 class="modal-title" id="finalizeModalLabel">{{ _('Import Locations') }}</h5>
 </div>
 {% endblock %}
 
+{% block footer %}
+{{ render_toast_parent(toast_app_id) }}
+{% endblock footer %}
 
 {%- block tail_js -%}
 {{ super() }}
diff --git a/apollo/templates/admin/participant_list.html b/apollo/templates/admin/participant_list.html
index ba71d6c6b..c7f8a39cf 100644
--- a/apollo/templates/admin/participant_list.html
+++ b/apollo/templates/admin/participant_list.html
@@ -211,7 +211,6 @@
   {{ render_pager(participants, 'participants.participant_list', args) }}
   {%- endif %}
 </div>
-{{ render_toast_parent(toast_app_id) }}
 
 <div class="wizard" id="import-wizard" data-title="{{ _('Import Participants') }}">
   <div class="wizard-card" data-cardname="uploadFile">
@@ -249,6 +248,10 @@ <h3>{{ _('Finalize') }}</h3>
 </div>
 {%- endblock -%}
 
+{% block footer %}
+{{ render_toast_parent(toast_app_id) }}
+{% endblock footer %}
+
 {%- block tail_js -%}
 {{ super() }}
 {{ render_toast_template() }}
diff --git a/apollo/templates/admin/task_toast.html b/apollo/templates/admin/task_toast.html
index c3ca19224..4d1bf02a4 100644
--- a/apollo/templates/admin/task_toast.html
+++ b/apollo/templates/admin/task_toast.html
@@ -39,7 +39,7 @@
 
 {% macro render_toast_parent(toast_app_id) %}
 <div aria-live="polite" aria-atomic="true" id="{{ toast_app_id }}">
-  <div style="position: absolute; bottom: 2rem; right: 2rem;">
+  <div style="position: relative; margin-bottom: 2rem; margin-right: 2rem;">
     <task-toast v-for="task in tasks" :key="task.id" :task-info="task"></task-toast>
   </div>
 </div>

From baf59d69b6e9bca89c00d17d2d6d9c3730287292 Mon Sep 17 00:00:00 2001
From: Odumosu 'Dipo <dodumosu@timbaobjects.com>
Date: Tue, 19 Dec 2023 08:27:38 +0100
Subject: [PATCH 12/12] fix: add comma

---
 apollo/factory.py | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/apollo/factory.py b/apollo/factory.py
index 18f17f110..c5af551a3 100644
--- a/apollo/factory.py
+++ b/apollo/factory.py
@@ -229,7 +229,7 @@ def update_task_info(self, **kwargs):
                 'id': request.id,
                 'status': _('RUNNING'),
                 'progress': task_metadata.get('result'),
-                'description': TASK_DESCRIPTIONS.get(self.request.task, _('Task'))
+                'description': TASK_DESCRIPTIONS.get(self.request.task, _('Task')),
                 'name': self.request.task.split('.')[-1],
                 'quit': False,
             }