More group badges

[labaguette]

Hi, I'm writing a custom theme and am struggling to display all user's groups next to their username in the partials/topic/badge.tpl template using this code:

<!-- IF posts.user.groups.length -->
	<div class="text-center">
	<!-- BEGIN groups -->
		<span class="label group-label inline-block" style="background-color: {posts.user.groups.labelColor};"><!-- IF posts.user.groups.icon --><i class="fa {posts.user.groups.icon}"></i> <!-- ENDIF posts.user.groups.icon -->{posts.user.groups.userTitle}</span><br/>
	<!-- END groups -->
	</div>
<!-- ENDIF posts.user.groups.length -->

but nothing actually works. How do I access the posted user's groups in templates?

[baris]

You will want to write a plugin that uses filter:posts.modifyUserInfo and add that data in.

[labaguette]

I got it working. If anyone wants all groups to be shown infront of the user's name then:

Hook

Add { "hook": "filter:posts.modifyUserInfo", "method": "modifyUserInfo" } to plugin.json.

Method

Add the following to your library .js file:

library.modifyUserInfo = function(userData, callback)
{
	var groupsData;
	async.waterfall([
		function (next) {
			groups.getUserGroups([userData.uid], next);
		},
		function (_groupsData, next) {
			groupsData = _groupsData[0];
			var groupNames = groupsData.filter(Boolean).map(function(group) {
				return group.name;
			});

			groups.getMemberUsers(groupNames, 0, 3, next);
		},
		function (members, next) {
			groupsData.forEach(function(group, index) {
				group.members = members[index];
			});
			
			next();
		}
	], function(err) {
		if (err) {
			return callback(err);
		}

		userData.groups = groupsData;
		
		callback(null, userData);
	});
}

Template

Template example code:

<!-- BEGIN posts.user.groups -->
	<a href="{config.relative_path}/groups/{posts.user.groups.slug}">
		<small class="label group-label inline-block" style="background-color: {posts.user.groups.labelColor};">
			<!-- IF posts.user.groups.icon -->
				<i class="fa {posts.user.groups.icon}"></i>
			<!-- ENDIF posts.user.groups.icon -->
			
			{posts.user.groups.userTitle}
		</small>
	</a>
<!-- END posts.user.groups -->

Thanks @baris for the tip!

[danlong]

@labaguette This looks perfect for what I need, however, this part is giving an error:

function (next) {
	groups.getUserGroups([userData.uid], next);
},

ReferenceError: groups is not defined

Do you know what I need to use instead?

I'm wondering if there's a missing function that I need getUserGroups?

Thanks!

[baris]

Should be groups.getUsersGroups I think.

[baris]

@baris said in More group badges:

getUsersGroups

Nevermind it's groups.getUserGroups check if your copy of nodebb has that function.

[baris]

If groups is undefined then in your plugin you need to require that from core nodebb with const groups = require.main.require('./src/groups');

[danlong]

@baris Yes, thanks.

I had to include this line, the function is in there:

var groups = require.main.require('./src/groups');

[baris]

For anyone looking at this, there is no need to load the members of the groups so this code should work fine.

library.modifyUserInfo = function(userData, callback)
{
	var groupsData;
	async.waterfall([
		function (next) {
			groups.getUserGroups([userData.uid], next);
		},
		function (_groupsData, next) {
			groupsData = _groupsData[0];
			userData.groups = groupsData.filter(Boolean);
			next(null, userData);
		},
	], callback);
}