Display more information on Users page



  • I am trying to display more information on Users page than just the username and registration time.
    I found these lines in the user_list.tpl template.
    <i component="user/status" class="fa fa-circle status {users.status}" title="[[global:{users.status}]]"></i>
    <a href="{config.relative_path}/user/{users.userslug}">{users.username}</a>

    My question is where does the path "{config.relative_path}/user/{users.userslug}" point to and how can I access more information.
    I tried to add the same line but with content {users.signature} but no luck. The js does not find the information.

    Thanks


  • Plugin & Theme Dev

    @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



  • @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.


  • Plugin & Theme Dev

    @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



  • 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...


  • Plugin & Theme Dev

    @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?



  • @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.



  • So I finished the UI part as well.
    Added the chat option to the Users page.
    Working on the plugin for the chat.
    0_1453481244492_users_page_new.png
    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


  • Plugin & Theme Dev

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



  • This post is deleted!


  • @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!


Log in to reply
 


Star

Looks like your connection to NodeBB was lost, please wait while we try to reconnect.