Merge branch '319-admin-panel-new-user-style' into 'master'

Resolve "Admin panel: new user style"

Closes #319

See merge request piotr.gawron/minerva!251

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

@@ -82,7 +82,7 @@ EditUserDialog.prototype.createGeneralTab = function (tabMenuDiv, tabContentDiv)
   self.addTab({
     tabMenuDiv: tabMenuDiv,
     tabContentDiv: tabContentDiv,
-    name: "GENERAL",
+    name: "Details",
     content: self.createGeneralTabContent()
   });
 
@@ -142,132 +142,22 @@ function getStringIfDefined(value) {
 }
 
 EditUserDialog.prototype.createGeneralTabContent = function () {
+
   var self = this;
-  var user = self.getUser();
 
   var result = new Functions.createElement({
-    type: "div"
+    type: "div",
+    style: "margin-top:10px;"
   });
 
   var table = new Functions.createElement({
-    type: "div",
-    style: "display:table"
+    type: "table",
+    name: "detailsTable",
+    className: "display",
+    style: "width:100%"
   });
   result.appendChild(table);
 
-  var loginRow = new Functions.createElement({
-    type: "div",
-    style: "display:table-row"
-  });
-  table.appendChild(loginRow);
-  loginRow.appendChild(new Functions.createElement({
-    type: "div",
-    style: "display:table-cell",
-    content: "Login"
-  }));
-  if (user.getLogin() === undefined) {
-    loginRow.appendChild(new Functions.createElement({
-      type: "div",
-      style: "display:table-cell",
-      content: "<input name='userLogin' value=''/>",
-      xss: false
-    }));
-  } else {
-    loginRow.appendChild(new Functions.createElement({
-      type: "div",
-      style: "display:table-cell",
-      content: "<input name='userLogin' value='" + getStringIfDefined(user.getLogin()) + "' readonly/>",
-      xss: false
-    }));
-  }
-
-  var passwordRow = new Functions.createElement({
-    type: "div",
-    style: "display:table-row"
-  });
-  table.appendChild(passwordRow);
-  passwordRow.appendChild(new Functions.createElement({
-    type: "div",
-    style: "display:table-cell",
-    content: "Password"
-  }));
-  passwordRow.appendChild(new Functions.createElement({
-    type: "div",
-    style: "display:table-cell",
-    content: "<input type=\"password\" name='userPassword' value=''/>",
-    xss: false
-  }));
-
-  var passwordRow2 = new Functions.createElement({
-    type: "div",
-    style: "display:table-row"
-  });
-  table.appendChild(passwordRow2);
-  passwordRow2.appendChild(new Functions.createElement({
-    type: "div",
-    style: "display:table-cell",
-    content: "Confirm password"
-  }));
-  passwordRow2.appendChild(new Functions.createElement({
-    type: "div",
-    style: "display:table-cell",
-    content: "<input type=\"password\" name='userPassword2' value=''/>",
-    xss: false
-  }));
-
-  var nameRow = new Functions.createElement({
-    type: "div",
-    style: "display:table-row"
-  });
-  table.appendChild(nameRow);
-  nameRow.appendChild(new Functions.createElement({
-    type: "div",
-    style: "display:table-cell",
-    content: "Name"
-  }));
-  nameRow.appendChild(new Functions.createElement({
-    type: "div",
-    style: "display:table-cell",
-    content: "<input name='userName' value='" + getStringIfDefined(user.getName()) + "'/>",
-    xss: false
-  }));
-
-  var surnameRow = new Functions.createElement({
-    type: "div",
-    style: "display:table-row"
-  });
-  table.appendChild(surnameRow);
-  surnameRow.appendChild(new Functions.createElement({
-    type: "div",
-    style: "display:table-cell",
-    content: "Surname"
-  }));
-  surnameRow.appendChild(new Functions.createElement({
-    type: "div",
-    style: "display:table-cell",
-    content: "<input name='userSurname' value='" + getStringIfDefined(user.getSurname()) + "'/>",
-    xss: false
-
-  }));
-
-  var emailRow = new Functions.createElement({
-    type: "div",
-    style: "display:table-row"
-  });
-  table.appendChild(emailRow);
-  emailRow.appendChild(new Functions.createElement({
-    type: "div",
-    style: "display:table-cell",
-    content: "Email"
-  }));
-  emailRow.appendChild(new Functions.createElement({
-    type: "div",
-    style: "display:table-cell",
-    content: "<input name='userEmail' value='" + getStringIfDefined(user.getEmail()) + "'/>",
-    xss: false
-  }));
-
-
   var menuRow = Functions.createElement({
     type: "div",
     className: "minerva-menu-row",
@@ -367,6 +257,37 @@ EditUserDialog.prototype._createProjectsTable = function () {
 
 EditUserDialog.prototype.init = function () {
   var self = this;
+
+  var detailsTable = $("[name=detailsTable]", self.getElement())[0];
+
+  var dataTable = $(detailsTable).DataTable({
+    columns: [{
+      title: "Name"
+    }, {
+      title: "Value"
+    }],
+    paging: false,
+    ordering: false,
+    searching: false,
+    bInfo : false
+  });
+  var data = [];
+
+  var user = self.getUser();
+
+  var readonly = '';
+  if (user.getLogin() !== undefined) {
+    readonly = ' readonly ';
+  }
+  data.push(['Login', '<input name="userLogin" value="' + getStringIfDefined(user.getLogin()) + '" ' + readonly + '/>']);
+  data.push(['Password', '<input type="password" name="userPassword" value=""/>']);
+  data.push(['Confirm password', '<input type="password" name="userPassword2" value=""/>']);
+  data.push(['Name', '<input name="userName" value="' + getStringIfDefined(user.getName()) + '"/>']);
+  data.push(['Surname', '<input name="userSurname" value="' + getStringIfDefined(user.getSurname()) + '"/>']);
+  data.push(['Email', '<input name="userEmail" value="' + getStringIfDefined(user.getEmail()) + '"/>']);
+
+  dataTable.clear().rows.add(data).draw();
+
   return self.initProjectsTab().then(function () {
     return self.refreshProjects();
   }).then(function () {
@@ -521,15 +442,21 @@ EditUserDialog.prototype.projectToTableRow = function (project, columns) {
 EditUserDialog.prototype.destroy = function () {
   var self = this;
   var div = self.getElement();
-  var usersTable = $("[name=projectsTable]", self.getElement())[0];
+  var usersTable = $("[name=projectsTable]", div)[0];
   if ($.fn.DataTable.isDataTable(usersTable)) {
     $(usersTable).DataTable().destroy();
   }
-  var privilegesTable = $("[name=privilegesTable]", self.getElement())[0];
+
+  var privilegesTable = $("[name=privilegesTable]", div)[0];
   if ($.fn.DataTable.isDataTable(privilegesTable)) {
     $(privilegesTable).DataTable().destroy();
   }
 
+  var detailsTable = $("[name=detailsTable]", div)[0];
+  if ($.fn.DataTable.isDataTable(detailsTable)) {
+    $(detailsTable).DataTable().destroy();
+  }
+
 
   if ($(div).hasClass("ui-dialog-content")) {
     $(div).dialog("destroy");