[fix] projects and corpora views: add some waiting images to all delete/update actions (bug-33)

static/lib/gargantext/garganrest_projects.js

@@ -200,8 +200,34 @@ function getRessources(){
 //// POST TO API
 
 
+
 //// PUT AND PATCH TO API
-function deleteOne(url){
+function deleteOne(url, thatButton){
+
+
+  // we just show wait image before ajax
+  var $thatButton = $(thatButton)
+  var alreadyWaiting = $thatButton.has($('.wait-img-active')).length
+
+  if (! alreadyWaiting) {
+    var previousButtonContent = $thatButton.html()
+    var availableWidth = $thatButton.width()
+    var $myWaitImg = $('#wait-img').clone()
+    $myWaitImg.attr("id", null)
+              .attr("class","wait-img-active pull-right")
+              .width(availableWidth)
+              .css("display", "block") ;
+    $thatButton.append($myWaitImg)
+  }
+  else {
+    // uncomment if user should stop clicking ;)
+    // $thatButton.addClass("btn-danger")
+
+    // uncomment to prevent a 2nd ajax
+    return false
+  }
+
+  // now the real ajax
   $.ajax({
     url: '/api'+url,
     type: 'delete',
@@ -306,7 +332,7 @@ $(document).on('change', 'input[type=checkbox]', function() {
 $(document).on("click","#delete", function(){
       var selected = selectedUrls();
       selected.forEach(function(url) {
-        deleteOne(url);
+        deleteOne(url, this);
       });
     //window.location.reload();
   });
@@ -336,7 +362,7 @@ $(document).on("click","#recalculate", function(){
 // UNIQUE DELETION
 $(document).on("click", ".delete", function() {
       var url = $( this ).data("url");
-      deleteOne(url);
+      deleteOne(url, this);
       //window.location.reload();
 });
 

templates/pages/projects/overview.html

@@ -18,6 +18,11 @@
     .ui-autocomplete .ui-menu-item {
         font-size:x-small;
     }
+
+    /* for wait gif in buttons */
+    .wait-img-active {
+        margin-left: .5em;
+    }
 </style>
 
 {% endblock %}
@@ -97,6 +102,7 @@
             <!--here loading projectlist from GET /projects-->
     </div>
 
+    <img id="wait-img" width="90%" style="display:none" src="{% static "img/ajax-loader.gif"%}"></img>
 
 </div>
 
@@ -116,10 +122,10 @@
 
             <!-- DELETE PROJECT -->
             <button type="button" class="btn btn-default delete pull-right" data-url="{url}" >
-              <span class="glyphicon glyphicon-trash pull-right" aria-hidden="true"></span>
+              <span class="glyphicon glyphicon-trash" aria-hidden="true"></span>
             </button>
-            <!-- EDIT PROJECT-->
 
+            <!-- EDIT PROJECT-->
             <button class="btn btn-default edit pull-right" data-id="{id}" data-url="{url}" data-toggle="collapse">
               <span class="glyphicon glyphicon-pencil" aria-hidden="true"></span>
             </button>

templates/pages/projects/project.html

@@ -23,6 +23,11 @@
         margin-top: .3em;
         color: grey ;
     }
+
+    ul.inside-popover {
+      padding: .5em ;
+      list-style-type: none ;
+    }
 </style>
 {% endblock %}
 
@@ -111,9 +116,9 @@
 
                                                     <button type="button" class="btn btn-default {% if not state.complete %}hidden{% endif %}" data-container="body" data-toggle="popover" data-placement="bottom"  data-trigger="focus"
                                                         data-content="
-                                                        <ul>
+                                                        <ul class=&quot;inside-popover&quot;>
                                                             <li
-                                                            onclick=&quot;updateCorpus({{corpus.id}})&quot;>
+                                                            onclick=&quot;updateCorpus(event, {{corpus.id}})&quot;>
                                                                 <a href='#'>Recalculate ngram metrics</a> <br/> (can take a little while)
                                                             </li>
                                                         </ul>
@@ -125,19 +130,9 @@
                                                     <!-- TODO: delete non seulement si state.complete mais aussi si state.error -->
                                                     <button type="button" class="btn btn-default" data-container="body" data-toggle="popover" data-placement="bottom"
                                                         data-content="
-                                                        <ul>
+                                                        <ul id=&quot;{{corpus.id}}_trash_msg&quot; class=&quot;inside-popover&quot;>
                                                             <li
-                                                            onclick=&quot;
-                                                                    trashedIds[{{corpus.id}}] = true ;
-                                                                    garganrest.nodes.delete(
-                                                                        {{corpus.id}},
-                                                                        function(){
-                                                                            $('#corpus_'+{{corpus.id}}).remove()
-                                                                            delete trashedIds[{{corpus.id}}]
-                                                                          }
-                                                                        );
-                                                                    $(this).parent().parent().remove();
-                                                                &quot;>
+                                                            onclick=&quot;deleteCorpus(event, {{corpus.id}})&quot;>
                                                                 <a href='#'>Delete this</a>
                                                             </li>
                                                         </ul>
@@ -798,7 +793,36 @@
                                 });
                             }
 
-                        function updateCorpus(corpusId) {
+                        function deleteCorpus(e, corpusId) {
+                          // prevents scroll back to top of page
+                          e.preventDefault()
+
+                          // register pending operation
+                          trashedIds[corpusId] = true ;
+
+                          // visual loader wheel
+                          var statusDiv = document.getElementById("corpus_"+corpusId+"_status")
+                          statusDiv.innerHTML = '<img width="10%" src="{% static "img/ajax-loader.gif"%}"></img>'
+                          var trashMsgDiv = document.getElementById(corpusId+"_trash_msg")
+                          trashMsgDiv.innerHTML = '<h5>Deleting corpus, please wait</h5>'
+
+                          // REST and callback
+                          garganrest.nodes.delete(
+                              corpusId,
+                              function(){
+                                  $('#corpus_'+corpusId).remove()
+                                  delete trashedIds[corpusId]
+                                  // remove any popover too
+                                  $('.popover').remove();
+                                }
+                              );
+                        }
+
+
+                        function updateCorpus(e, corpusId) {
+                          // prevents scroll back to top of page
+                          e.preventDefault()
+
                           // show 'waiting'
                           var statusDiv = document.getElementById("corpus_"+corpusId+"_status")
                           var previousStatus = statusDiv.innerHTML