Merge pull request #2289 from antgonza/jobs-list-as-modal

Jobs list as modal

Author: josenavas

qiita_pet/static/css/style.css

@@ -3,13 +3,6 @@
   height: 100%;
   width: 100%;
 }
-#qiita-processing {
-  position: absolute;
-  height: 100%;
-  width: 0%;
-  right: 0;
-  top: 0;
-}
 #template-content{
   padding: 10px;
   height: 100%;

qiita_pet/static/js/qiita.js

@@ -118,28 +118,6 @@ function delete_analysis(aname, analysis_id) {
   }
 }
 
-/*
- * show_hide_process_list will toggle the process/job listing visibility
- */
-
-function show_hide_process_list() {
-  if ($("#qiita-main").width() == $("#qiita-main").parent().width()) {
-    // let's update the job list
-    processing_jobs_vue.update_processing_job_data();
-    $("#qiita-main").width("76%");
-    $("#user-studies-table").width("76%");
-    $("#studies-table").width("76%");
-    $("#qiita-processing").width("24%");
-    $("#qiita-processing").show();
-  } else {
-    $("#qiita-main").width("100%");
-    $("#user-studies-table").width("100%");
-    $("#studies-table").width("100%");
-    $("#qiita-processing").width("0%");
-    $("#qiita-processing").hide();
-  }
-}
-
 /*
  * send_samples_to_analysis send the selected samples for the given artifact ids to analysis
  *

qiita_pet/templates/sitebase.html

@@ -367,13 +367,15 @@
         mounted() {
           let vm = this;
           setInterval(function (){
-            // the div is hidden
-            if ($("#qiita-main").width() != $("#qiita-main").parent().width()) {
+            // if modal is shown, https://stackoverflow.com/a/3282893
+            if (($('#qiita-processing').data('bs.modal') || {}).isShown){
               vm.update_processing_job_data();
             }
           }, 30000);
         }
       });
+
+      $('#qiita-processing').on('shown.bs.modal', processing_jobs_vue.update_processing_job_data);
     });
 
     </script>
@@ -476,7 +478,7 @@
                 </ul>
               </li>
               <li class="dropdown">
-                <a href="#" onClick="show_hide_process_list()" id="dflt-sel-info"><span class="glyphicon glyphicon-tasks"></span></a>
+                <a href="#" data-toggle='modal' data-target='#qiita-processing' id="dflt-sel-info"><span class="glyphicon glyphicon-tasks"></span></a>
               </li>
             </ul>
             <!-- otherwise show the login form -->
@@ -606,15 +608,28 @@ <h1>This site only works with the following browsers</h1>
       </div>
     </div>
 
-    <div id="qiita-processing" class="pre-scrollable" style="max-height: 100%">
-      <div id="processing-jobs-table" style="padding: 5px 5px;">
-        <h3>
-            Processing Jobs <br/>
-            <small>(skipping successful jobs)</small>
-        </h3>
-        Search: <input v-model="search">
-        <hr>
-        <data-table-processing-jobs :jobs="filteredJobs"></data-table-processing-jobs>
+    <!-- the jobs list is shown as a modal view -->
+    <div id="qiita-processing" class="modal fade" role="dialog">
+      <div class="modal-dialog">
+
+        <div class="modal-content">
+          <div class="modal-header">
+            <button type="button" class="close" data-dismiss="modal">&times;</button>
+            <h4 class="modal-title">Active Jobs</h4>
+            <h6 class="modal-title">succesful jobs are not shown</h6>
+          </div>
+
+          <div id='processing-jobs-table' class="modal-body">
+              Search: <input v-model="search">
+              <hr>
+              <data-table-processing-jobs :jobs="filteredJobs"></data-table-processing-jobs>
+          </div>
+
+          <div class="modal-footer">
+            <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
+          </div>
+        </div>
+
       </div>
     </div>