Display more information on Users page

[pichalite]

@KasparTr @KasparTr users route does not have user signature.

The path points to the user profile page.

To see what user information is available on the users route just change the url in your browser to point to api

This is the users route on this community
https://community.nodebb.org/users

To see the data... change it to
https://community.nodebb.org/api/users

[KasparTr]

@pichalite said:

https://community.nodebb.org/api/users

Thank you for a quick reply.
Any way I can access more information (signature, email, wepage, etc) on that route?

I am ready to play with the javascript if nessecary.
Looking into the user.js file but it is build in a way thats pretty difficult to add something new to the table, if it is even done in that file.

[pichalite]

@KasparTr It's actually easy to get the fields you need.

Just change this line and add the fields you want, restart NodeBB... that's it
https://github.com/NodeBB/NodeBB/blob/master/src/user.js#L91

[KasparTr]

Got it.
To change the API I needed to add the needed fields to the file src/user.js
User.getUsers = function(uids, uid, callback) {
var fields = ['uid', 'username', 'userslug', 'picture', 'status', 'banned', 'joindate', 'postcount', 'reputation', 'email:confirmed', <ADD NEEDED FIELDS>];

To do this cleanly one should write a plugin that will add those fields so it is separated from the code. Working on it...

[pichalite]

@KasparTr not sure if writing a plugin is worth the effort. You will have to modify the theme anyway to display the fields.

It will be interesting to see how you change the UI and display these fields. Can you post a screen shot after you change the UI?

[KasparTr]

@pichalite
Thanks a lot for the info.
You are correct, we are working on the UI at this moment.
The plugin wasn't that hard to make, here it is:
https://github.com/andres-liiver/nodebb-plugin-additional-user-fields
Credits to Andres Liiver!

I will post a reply here when the user page is done.

[KasparTr]

So I finished the UI part as well.
Added the chat option to the Users page.
Working on the plugin for the chat.

Chat will appear on hover.

Currently having some trouble when dynamically loading new users (missing some and some are loaded double) and it is happening randomly.
Can't understand why thou. I only changed the inside struckture of the <li> tags in the partials/users_list.tpl.
If someone has ideas why changing templates inside structure screws with new users loading then let me know

Thanks

[pichalite]

@KasparTr post your code from users_list.tpl. Will see if I can identify the issue.

[KasparTr]

This post is deleted!

[KasparTr]

@pichalite

Thanks for offering help!
Here is the users_list.tpl content.

I did change users.js

 <!-- BEGIN users -->
<li class="users-box registered-user" data-uid="{users.uid}">
<div class="user-data-container">
	<div class="user-media">
		<a href="{config.relative_path}/user/{users.userslug}">
			<div class="user-picture">
				<img src="{users.picture}" />
			</div>
		</a>
		<div class="user-info">
			<span>
				<i component="user/status" class="fa fa-circle status {users.status}" title="[[global:{users.status}]]"></i>
				
			</span>
			<br/>
			<!-- IF route_users:joindate -->
			<div title="joindate" class="joindate">
				<i class='fa fa-clock'></i>
				<span class='timeago' title="{users.joindateISO}"></span>
			</div>
			<!-- ENDIF route_users:joindate -->

			<!-- IF route_users:reputation -->
			<div title="reputation" class="reputation">
				<i class='fa fa-star'></i>
				<span class='formatted-number'>{users.reputation}</span>
			</div>
			<!-- ENDIF route_users:reputation -->

			<!-- IF route_users:postcount -->
			<div title="post count" class="post-count">
				<i class='fa fa-pencil'></i>
				<span class='formatted-number'>{users.postcount}</span>
			</div>
			<!-- ENDIF route_users:postcount -->
		</div>
	</div>
	<div class="user-info-extended">
		<a href="{config.relative_path}/user/{users.userslug}"  class="uie-username"><h4>{users.username}</h4></a>
		<p>{users.signature}</p>
		<p id="uie-location">{users.location}</p>
		<a>{users.website}</a>
	</div>
</div>
<div class="user-interaction">
		<!-- IF !config.disableChat -->
		<a href="#" class="btn btn-primary btn-sm chat-btn-users" data-uid='{users.uid}' data-username='{users.username}'>[[user:chat]]</a>
		<!-- ENDIF !config.disableChat -->
</div>
<hr>

</li>
<!-- END users -->

I alse changed the /srv/<url>/www/public/src/client/users.js file content to handle the chat button. That should not alter the new user load but here is the content I added to the end of Users.init = function(){... function.

    /*--- eRes change: added users button listener*/
	/* note: delegated event handling*/
	$('#users-container').on('click', '.chat-btn-users', function() {
		app.openChat($(this).data('username'), $(this).data('uid'));
	});

	/*note: hide user interaction div */
	$('#users-container').on("mouseenter", '.users-box', function(){
		$(this).children(".user-interaction").css('visibility','visible');
	});
	$('#users-container').on("mouseleave", '.users-box', function(){
		$(this).children(".user-interaction").css('visibility','hidden');
	});
	/*--END-- eRes change: added users button listener */

Thanks again!