Ngrams table: save button has status icon and becomes activated on first change

static/lib/gargantext/NGrams_dyna_chart_and_table.js

@@ -78,6 +78,10 @@ var CurrentGroups = {"links":{}, "subs":{}}
 var MyTable ;
 
 
+// Need Save Flag  (please modify via toggleNeedSave, not directly)
+// ---------------
+var _NeedSave = false ;
+
 //  definition of switching statuses for the 3 lists
 // --------------------------------------------------
 //  mainlist (+ maplist)
@@ -450,6 +454,11 @@ function saveActiveGroup() {
     removeActiveGroupFrameAndUpdate()
 
     // console.log("after changes, GroupsBuffer: ",GroupsBuffer)
+
+    // mark that there was a change
+    if (! _NeedSave) {
+        toggleNeedSave()
+    }
 }
 
 function removeActiveGroupFrameAndUpdate() {
@@ -597,12 +606,12 @@ function drawActiveGroup (tgtElementId, mainformId, linkIdsArray, ngInfos, newFr
     groupHtml += '\n          <p id="activeGroupButtons">';
 
     // Ok - No
-    var cancelGroupButton  = '<button class="btn btn-default" onclick="removeActiveGroupFrameAndUpdate()">' ;
+    var cancelGroupButton  = '<button class="btn btn-danger" onclick="removeActiveGroupFrameAndUpdate()">' ;
         cancelGroupButton +=   'cancel' ;
         cancelGroupButton += '</button>' ;
 
-    var tempoSaveGroupButton  = '<button class="btn btn-warning" onclick="saveActiveGroup()">' ;
-        tempoSaveGroupButton +=   'finish' ;
+    var tempoSaveGroupButton  = '<button class="btn btn-info" onclick="saveActiveGroup()">' ;
+        tempoSaveGroupButton +=   'done' ;
         tempoSaveGroupButton += '</button>' ;
 
     groupHtml += cancelGroupButton
@@ -990,6 +999,11 @@ function clickngram_action ( ngramId ) {
 
     // console.log("click: state after: "+ AjaxRecords[ngramId].state) ;
     MyTable.data('dynatable').dom.update();
+
+    // mark that there was a change
+    if (! _NeedSave) {
+        toggleNeedSave()
+    }
 }
 
 
@@ -1023,6 +1037,11 @@ function checkBox(boxType, ngramId) {
     // replace old state and color
     AjaxRecords[ngramId].state = targetState ;
     MyTable.data('dynatable').dom.update();
+
+    // mark that there was a change
+    if (! _NeedSave) {
+        toggleNeedSave()
+    }
 }
 
 
@@ -1362,6 +1381,11 @@ function SelectPage(boxType, boxElem) {
 
   // and update our own "column situation" storage
   $(boxElem).data('columnSelection', newColumnSelection);
+
+  // mark that there was a change
+  if (! _NeedSave) {
+      toggleNeedSave()
+  }
 }
 
 
@@ -2280,6 +2304,34 @@ function isNumeric(n) {
   return (!isNaN(parseFloat(n)) && isFinite(n))
 }
 
+// this turns ON the NeedSave flag and the corresponding visual
+// (it can only go back OFF with a save action via page reload)
+function toggleNeedSave() {
+
+    // change the status icons
+    $(".needsaveicon").removeClass("glyphicon-floppy-saved");
+    $(".needsaveicon").addClass("glyphicon-floppy-remove");
+    $(".needsaveicon").css("color","red");
+    $(".needsaveicon").css("font-size","120%");
+
+    // save_divs get a new tooltip title
+    $('.savediv').prop('title', "Click to save all changes to DB")
+
+    // activate the buttons
+    $('#Save_All').prop('disabled', false) ;
+    $('#Save_All').removeClass("btn-muted");
+    $('#Save_All').addClass("btn-success");
+
+    $('#Save_All_Bottom').prop('disabled', false) ;
+    $('#Save_All_Bottom').removeClass("btn-muted");
+    $('#Save_All_Bottom').addClass("btn-success");
+
+    // toggle the global var ON
+    _NeedSave = true
+}
+
+
+
 function getCookie(name) {
     var cookieValue = null;
     if (document.cookie && document.cookie != '') {

templates/pages/corpora/terms.html

@@ -64,12 +64,17 @@
                             </button> -->
                         </center>
                       </h2>
-                      <div class="pull-right" style="margin-top:1.7em;padding-left:2em;">
+                      <div class="savediv pull-left" style="margin-top:1.5em;padding-right:1em;" title="No changes to save">
+                          <!-- need save status -->
+                          <span class="needsaveicon glyphicon glyphicon-floppy-saved"></span>
+                          &nbsp;
                           <!-- save button -->
-                          <button id="Save_All" class="btn btn-primary">Save all changes permanently</button>
+                          <button id="Save_All" class="btn btn-muted" disabled style="font-size:120%">
+                              <b>Save all changes</b>
+                          </button>
                       </div>
                         <!-- see in javascript function queries.functions['my_state_filter'] -->
-                        <div class="pull-left" style="margin-top:2.1em;">
+                        <div class="pull-right" style="margin-top:2.1em;padding-left:1em;">
                             Filter:
                             <select id="picklistmenu" name="my_state_filter">
                               <option value='reset'>All terms</option>
@@ -89,9 +94,14 @@
                       </div>
 
                       <!-- copy of save button under the table -->
-                      <p align="right">
-                          <button id="Save_All_Bottom" class="btn btn-primary">Save all changes permanently</button>
-                      </p>
+                      <div align="right" class="savediv"  title="No changes to save">
+                          <!-- need save status -->
+                          <span class="needsaveicon glyphicon glyphicon-floppy-saved"></span>
+                          &nbsp;
+                          <button id="Save_All_Bottom" class="btn btn-muted" disabled>
+                              <b>Save all changes</b>
+                          </button>
+                      </div>
                     </div>
 
                 </div> <!-- /div panel -->