Fixed Change Avatar. Improved Admin Panel: People columns order, selected tab background color.

Thanks to xet7 !

client/components/settings/peopleBody.jade

@@ -135,16 +135,15 @@ template(name="peopleGeneral")
     thead
       tr
         th
-          +selectAllUser
-        th {{_ 'accounts-lockout-status'}}
-        th {{_ 'admin-people-active-status'}}
+          +newUserRow
         th {{_ 'username'}}
-        th {{_ 'fullname'}}
-        th {{_ 'admin'}}
         th {{_ 'email'}}
+        th {{_ 'admin'}}
+        th {{_ 'admin-people-active-status'}}
+        th {{_ 'accounts-lockout-status'}}
         th {{_ 'createdAt'}}
         th
-          +newUserRow
+          +selectAllUser
     tbody
       tr
       each user in peopleList
@@ -239,22 +238,12 @@ template(name="teamRow")
 
 template(name="peopleRow")
   tr
-    if userData.loginDisabled
-      td
-        input.selectUserChkBox(type="checkbox", disabled="disabled", id="{{userData._id}}")
-    else
-      td
-        input.selectUserChkBox(type="checkbox", id="{{userData._id}}")
-    td.account-status
-      if isUserLocked
-        span.text-red.js-toggle-lock-status.emoji-icon(data-user-id=userData._id, data-is-locked="true", title="{{_ 'accounts-lockout-click-to-unlock'}}") 🔒
-      else
-        span.text-green.js-toggle-lock-status.emoji-icon(data-user-id=userData._id, data-is-locked="false", title="{{_ 'accounts-lockout-user-unlocked'}}") 🔓
-    td.account-active-status
-      if userData.loginDisabled
-        span.text-red.js-toggle-active-status(data-user-id=userData._id, data-is-active="false", title="{{_ 'admin-people-user-inactive'}}") 🚫
-      else
-        span.text-green.js-toggle-active-status(data-user-id=userData._id, data-is-active="true", title="{{_ 'admin-people-user-active'}}") ✅
+    td
+      a.edit-user
+        | ✏️
+        | {{_ 'edit'}}
+      a.more-settings-user
+        | ⋯
     if userData.loginDisabled
       td.username <s>{{ userData.username }}</s>
     else if isUserLocked
@@ -262,9 +251,9 @@ template(name="peopleRow")
     else
       td.username {{ userData.username }}
     if userData.loginDisabled
-      td <s>{{ userData.profile.fullname }}</s>
+      td <s>{{ userData.emails.[0].address }}</s>
     else
-      td {{ userData.profile.fullname }}
+      td {{ userData.emails.[0].address }}
     if userData.loginDisabled
       td
         if userData.isAdmin
@@ -277,20 +266,26 @@ template(name="peopleRow")
           | {{_ 'yes'}}
         else
           | {{_ 'no'}}
-    if userData.loginDisabled
-      td <s>{{ userData.emails.[0].address }}</s>
-    else
-      td {{ userData.emails.[0].address }}
+    td.account-active-status
+      if userData.loginDisabled
+        span.text-red.js-toggle-active-status(data-user-id=userData._id, data-is-active="false", title="{{_ 'admin-people-user-inactive'}}") 🚫
+      else
+        span.text-green.js-toggle-active-status(data-user-id=userData._id, data-is-active="true", title="{{_ 'admin-people-user-active'}}") ✅
+    td.account-status
+      if isUserLocked
+        span.text-red.js-toggle-lock-status.emoji-icon(data-user-id=userData._id, data-is-locked="true", title="{{_ 'accounts-lockout-click-to-unlock'}}") 🔒
+      else
+        span.text-green.js-toggle-lock-status.emoji-icon(data-user-id=userData._id, data-is-locked="false", title="{{_ 'accounts-lockout-user-unlocked'}}") 🔓
     if userData.loginDisabled
       td <s>{{ moment userData.createdAt 'LLL' }}</s>
     else
       td {{ moment userData.createdAt 'LLL' }}
-    td
-      a.edit-user
-        | ✏️
-        | {{_ 'edit'}}
-      a.more-settings-user
-        | ⋯
+    if userData.loginDisabled
+      td
+        input.selectUserChkBox(type="checkbox", disabled="disabled", id="{{userData._id}}")
+    else
+      td
+        input.selectUserChkBox(type="checkbox", id="{{userData._id}}")
 
 template(name="editOrgPopup")
   form

client/components/settings/peopleBody.js

@@ -839,16 +839,7 @@ Template.editUserPopup.events({
         ? user.emails[0].address.toLowerCase()
         : false);
 
-    Users.update(this.userId, {
-      $set: {
-        'profile.fullname': fullname,
-        isAdmin: isAdmin === 'true',
-        loginDisabled: isActive === 'true',
-        authenticationMethod: authentication,
-        importUsernames: Users.parseImportUsernames(importUsernames),
-      },
-    });
-
+    // Build user teams list
     let userTeamsList = userTeams.split(",");
     let userTeamsIdsList = userTeamsIds.split(",");
     let userTms = [];
@@ -861,12 +852,7 @@ Template.editUserPopup.events({
       }
     }
 
-    Users.update(this.userId, {
-      $set:{
-        teams: userTms
-      }
-    });
-
+    // Build user orgs list
     let userOrgsList = userOrgs.split(",");
     let userOrgsIdsList = userOrgsIds.split(",");
     let userOrganizations = [];
@@ -879,9 +865,20 @@ Template.editUserPopup.events({
       }
     }
 
-    Users.update(this.userId, {
-      $set:{
-        orgs: userOrganizations
+    // Update user via Meteor method (for admin to edit other users)
+    const updateData = {
+      fullname: fullname,
+      isAdmin: isAdmin === 'true',
+      loginDisabled: isActive === 'true',
+      authenticationMethod: authentication,
+      importUsernames: Users.parseImportUsernames(importUsernames),
+      teams: userTms,
+      orgs: userOrganizations,
+    };
+
+    Meteor.call('editUser', this.userId, updateData, (error) => {
+      if (error) {
+        console.error('Error updating user:', error);
       }
     });
 

client/components/settings/settingHeader.css

@@ -1,4 +1,5 @@
 #header #header-main-bar .setting-header-btn {
+  border-radius: 3px;
   color: #f2f2f2;
   margin-left: 20px;
   padding-right: 10px;

client/components/settings/settingHeader.jade

@@ -4,27 +4,27 @@ template(name="settingHeaderBar")
 
   .setting-header-btns.left
     if currentUser
-      a.setting-header-btn.settings(href="{{pathFor 'setting'}}")
+      a.setting-header-btn.settings(class=isSettingsActive href="{{pathFor 'setting'}}")
         span.emoji-icon ⚙️
         span {{_ 'settings'}}
 
-      a.setting-header-btn.people(href="{{pathFor 'people'}}")
+      a.setting-header-btn.people(class=isPeopleActive href="{{pathFor 'people'}}")
         span.emoji-icon 👥
         span {{_ 'people'}}
 
-      a.setting-header-btn.informations(href="{{pathFor 'admin-reports'}}")
+      a.setting-header-btn.informations(class=isAdminReportsActive href="{{pathFor 'admin-reports'}}")
         span.emoji-icon 📋
         span {{_ 'reports'}}
 
-      a.setting-header-btn.informations(href="{{pathFor 'attachments'}}")
+      a.setting-header-btn.informations(class=isAttachmentsActive href="{{pathFor 'attachments'}}")
         span.emoji-icon 📎
         span {{_ 'attachments'}}
 
-      a.setting-header-btn.informations(href="{{pathFor 'translation'}}")
+      a.setting-header-btn.informations(class=isTranslationActive href="{{pathFor 'translation'}}")
         span.emoji-icon 🔤
         span {{_ 'translation'}}
 
-      a.setting-header-btn.informations(href="{{pathFor 'information'}}")
+      a.setting-header-btn.informations(class=isInformationActive href="{{pathFor 'information'}}")
         span.emoji-icon ℹ️
         span {{_ 'info'}}
 

client/components/settings/settingHeader.js

@@ -0,0 +1,20 @@
+Template.settingHeaderBar.helpers({
+  isSettingsActive() {
+    return FlowRouter.getRouteName() === 'setting' ? 'active' : '';
+  },
+  isPeopleActive() {
+    return FlowRouter.getRouteName() === 'people' ? 'active' : '';
+  },
+  isAdminReportsActive() {
+    return FlowRouter.getRouteName() === 'admin-reports' ? 'active' : '';
+  },
+  isAttachmentsActive() {
+    return FlowRouter.getRouteName() === 'attachments' ? 'active' : '';
+  },
+  isTranslationActive() {
+    return FlowRouter.getRouteName() === 'translation' ? 'active' : '';
+  },
+  isInformationActive() {
+    return FlowRouter.getRouteName() === 'information' ? 'active' : '';
+  },
+});