On my forum we’re starting to have moderators grant custom badges for exceptional behaviour on the forum. For example, a “Community Spirit” badge is awarded to members who freely offer time or resources to local community projects via the forum.
The workflow to grant badges in this instance is very fiddly and I think this puts mods off using it:
Current Workflow (“Community Spirit” badge)
Click sharing button on post
Right-click link
Click “copy”
Click user’s avatar
Click user’s avatar on user card to open profile page
Click “Admin”
Click “Edit badges”
Search for “Community Spirit” Badge (fiddly as not ordered by recently used)
Paste the previously-copied URL into the “Reason” box
Click “Grant”
Proposed Workflow (“Community Spirit” badge)
Click “…” on post
Click spanner icon
Click “Grant Community Spirit Badge”
Proposed Workflow (Other Badges)
Click “…” on post
Click spanner icon
Click “Grant Other Badge” (this opens the existing “Grant badge” UI, with the “Reason” field pre-populated)
Select badge (badges listed in popularity order)
Click “Grant”
Notes
In the proposed solution, the post “spanner menu” would show two options: “Grant [most commonly-awarded badge]” and “Grant Other Badge”
I like the idea of this as we use custom badges quite a bit and a Grant Badge button direct from the post would make a big difference to our workflow and speed things up massively.
I’ve done a bit of traversing through the code and found that the post admin menu is handled in post-admin-menu.js.es6.
to add the badge granting button, I’d just have to do a check over the permission and follow the same style as the other actions. like so:
(the button is only there to show how it would look like. )
But now I’m confused on how to approach it, there’s 3 that I could think of:
to make Grant Badge a modal like Change Ownership.
to make a new widget appear like so:
(quick mockup in paint)
to open the normal badge granting page in /admin/users/[:id]/[:username]/badges and fill in the reason automatically with where we first click the Grant Badge button
that’s all so far.
If I were a user, I’d rather have 2 though as I don’t have to move to another page and make it flows smoother.
Any opinions? or a different direction I should aim for?
I think you could probably omit the “Reason” field on this dialog (it should always be set to the post that you clicked on, and I can’t think of a use case where it would need to be changed).
Also, badges should be sorted in order of popularity (of granting), IMO.
well yes they’re pretty similar. They will both be on page. Option 2 would pop up a small widget like the admin menu while option 1 would result in a full screen pop up like change ownership. Personally I don’t mind either but I’d rather follow current convention. What do you think @sam?
I agree. If we’re already granting the badge from the post we prob don’t need to change the link.
as for this, I was thinking it would follow the way it’s listed on the normal badge granting workflow. So I think if you want badge to be sorted on popularity, that would be a separate topic in itself.
I agree with the omitting of the reason - the post that you trigger the badge from should be the reason.
Also I agree that the badges should be as per current workflow and not as popularity. I tend to use the filter for the badge I want so for example typing 15 would return all badges with 15 on it so if that is possible to implement that would be great.
Completely understand that certainly one of the downfalls on mobile I find also as on desktop it’s much easier.
Personally I prefer in alphabetical order as have about 60 odd badges half of which are used quite a bit so having it in popular order I think for us would be confusing to find the one we want. I do however understand why you want it if there is only a couple you use all the time.
in my opinion, it would be great to have a setting for sorting(e.g. most used, alphabetical, recently used, etc by default) which can be configured but I’m digressing here and I feel that would be a topic on its own.
and I admit I don’t really open discourse on phone but I can think how it would be trouble some to keep searching but for now, having badge granting be on the same page either option 1 or 2 seem to be a big step up in terms of user experience regardless of the device you’re on
Hi, I decided to go forward with option 2 and mock up how it would look like.
It ain’t finished yet but you should be able to roughly see how the workflow will go. The code is still very much band aid programming
Desktop:
Mobile (Nexus 6P using google developer mode):
some questions for the more senior developer,
Right now, the widget is linked to post_menu.js.es6 treated like post-admin-menu. Is it okay to do that?
I didn’t add the action to the handle bar in topic.hbs. Do I need to add it?
To add the grant badge command itself, where do I look? I was thinking of searching from here
and for the user, what do you think so far?
also I don’t think I can proceed faster as I’m busy with day job but at the same time I’d like to finish this so I can get the hang of developing in discourse and apply for GSoC
Sorry for no news for quite some time, I was kinda busy with work and all.
So far I’ve went through the code implementing the badge granting on the current workflow.
Some thing’s I’ve encountered:
The old workflow was on it’s own page /admin/users/[:user_id]/[:username]/badges which have a controller and model(connected to the user).
The controller will calculate which badge can be granted (ones that haven’t been granted or can be granted multiple times)
At that page you can grant multiple badge without refreshing (the controller will handle the removal of badge from grantable badge if it can only be granted once).
it’s shown using the Ember component combo-box
from this, several problem that I’m facing would be:
First of all, I want the widget to have the same look and feel as the old one and that requires me to connect the component to widget as shown below and I’m not sure yet on how to do that.
Every time we open the grant badge widget, we have to get the badges that the user already have, get ones that we can grant, and show them. Right now I’m doing this via UserBadge.findByUsername(attrs.username) and Badge.findAll(). Instead of doing Badge.findAll() again and again, I can probably keep this somewhere. Any suggestion on how to get the grantableBadge in a better way?
The 2 function I mentioned above are async call and I’m not sure how to populate the widget with data after async call. There’s probably a question in dev somewhere but I haven’t found it yet
Oh and looking at modals in a glance, it seems they have template and controller? Would I be able to use the combo-box component there and would that be a better choice instead of widget?
p.s. does onebox-ing between list in markdown breaks it? I like to onebox between list sometimes and my list starts over from 1.
p.p.s. I always feel like my reply become a long essay hope it’s not too troublesome to read
Hi everyone! I am working on this topic as my first contribution for the Outreachy Program. I am right now trying to understand the whole code and managed to:
add a button to the post/admin/menu.js6 to grant a badge
create a modal that asks the user for the grant they want to grant the user
obviously these are not that difficult tasks but I am trying my best ^^
I have one first question (more to come, for sure): I created a Model and a Controller for the Modal. I would like to import all grantable Badges for the user to the Model, do you know where could I import them from? Or should I redefine the grantable Badges again?
I have not looked at this carefully, but I am not sure that we carry that list around, it is ok to make an extra ajax call when you open the modal to get the list.
I agree. If we’re already granting the badge from the post we prob don’t need to change the link.
