data is updated in a table after project is saved

frontend-js/src/main/js/gui/admin/MapsAdminPanel.js

@@ -72,6 +72,7 @@ MapsAdminPanel.prototype._createMenuRow = function() {
 };
 
 MapsAdminPanel.prototype._createProjectTableRow = function() {
+  var self = this;
   var projectsRow = Functions.createElement({
     type : "div",
     style : "display:table-row; width:100%",
@@ -86,6 +87,9 @@ MapsAdminPanel.prototype._createProjectTableRow = function() {
   projectsRow.appendChild(projectsTable);
 
   $(projectsTable).DataTable({
+    fnRowCallback : function(nRow, aData, iDisplayIndex) {
+      nRow.setAttribute('id', aData[0]);
+    },
     columns : [ {
       title : 'ProjectId',
     }, {
@@ -102,6 +106,16 @@ MapsAdminPanel.prototype._createProjectTableRow = function() {
       title : 'Remove',
     }, ],
   });
+  $(projectsTable).on("click", "[name='removeProject']", function() {
+    var button = this;
+    return self.removeProject($(button).attr("data")).then(null, GuiConnector.alert);
+  });
+
+  $(projectsTable).on("click", "[name='showEditDialog']", function() {
+    var button = this;
+    return self.showEditDialog($(button).attr("data")).then(null, GuiConnector.alert);
+  });
+
   return projectsRow;
 };
 
@@ -114,19 +128,22 @@ MapsAdminPanel.prototype.init = function() {
   });
 };
 
-MapsAdminPanel.prototype.projectToTableRow = function(project) {
+MapsAdminPanel.prototype.projectToTableRow = function(project, row) {
   var self = this;
   var disease = self.getHtmlStringLink(project.getDisease());
   var organism = self.getHtmlStringLink(project.getOrganism());
 
-  var row = [ project.getProjectId(), // 
-  project.getName(), //
-  disease, // 
-  organism, // 
-  project.getStatus(), //
-  "<button name='showEditDialog' data='" + project.getProjectId() + "'>EDIT</button>", //
-  "<button name='removeProject' data='" + project.getProjectId() + "'>REMOVE</button>", // 
-  ];
+  if (row === undefined) {
+    row = [];
+  }
+  row[0] = project.getProjectId();
+  row[1] = project.getName();
+  row[2] = disease;
+  row[3] = organism;
+  row[4] = project.getStatus();
+  row[5] = "<button name='showEditDialog' data='" + project.getProjectId() + "'>EDIT</button>";
+  row[6] = "<button name='removeProject' data='" + project.getProjectId() + "'>REMOVE</button>";
+
   return row;
 };
 
@@ -148,19 +165,35 @@ MapsAdminPanel.prototype.setProjects = function(projects) {
   var dataTable = $($("[name='projectsTable']", self.getElement())[0]).DataTable();
   var data = [];
   for (var i = 0; i < projects.length; i++) {
-    data.push(self.projectToTableRow(projects[i]));
+    var project = projects[i];
+    var rowData = self.projectToTableRow(project)
+    self.addUpdateListener(project, rowData);
+    data.push(rowData);
   }
   dataTable.clear().rows.add(data).draw();
 
-  $("[name='projectsTable']", self.getElement()).on("click", "[name='removeProject']", function() {
-    var button = this;
-    return self.removeProject($(button).attr("data")).then(null, GuiConnector.alert);
-  });
+};
 
-  $("[name='projectsTable']", self.getElement()).on("click", "[name='showEditDialog']", function() {
-    var button = this;
-    return self.showEditDialog($(button).attr("data")).then(null, GuiConnector.alert);
-  });
+MapsAdminPanel.prototype.addUpdateListener = function(project, dataTableRow) {
+  var self = this;
+
+  var listenerName = "PROJECT_LIST_LISTENER";
+  var listeners = project.getListeners("onreload");
+  for (var i = 0; i < listeners.length; i++) {
+    if (listeners[i].listenerName === listenerName) {
+      project.removeListener("onreload", listeners[i]);
+    }
+  }
+  var listener = function() {
+    self.projectToTableRow(project, dataTableRow);
+    var row = $($("[name='projectsTable']", self.getElement())[0]).DataTable().row("#" + project.getProjectId());
+    if (row.length > 0) {
+      row.data(dataTableRow).draw();
+    }
+
+  };
+  listener.listenerName = listenerName;
+  project.addListener("onreload", listener);
 };
 
 MapsAdminPanel.prototype.onAddClicked = function() {