FEATURE: Improve User sorting behavior in user management backend module

[crydotsnake]

Review instructions

Improves the behavior for the sorting functionality in the user management module. I got the inspiration from the redirects module and kinda liked how it is there.

Video

after.mov

Checklist

• Code follows the PSR-2 coding style
• Tests have been created, run and adjusted as needed
• The PR is created against the [lowest maintained branch](https://www.neos.io/features/release-roadmap.html)
• Reviewer - PR Title is brief but complete and starts with FEATURE|TASK|BUGFIX
• Reviewer - The first section explains the change briefly for change-logs
• Reviewer - Breaking Changes are marked with !!! and have upgrade-instructions

[crydotsnake]

Are you also fine with the Icon? or would you say the icon that we use in the redirecthandler-ui would fit better?:

RedirechthandlerUI:

User Management Module:

[MarcoPNS]

Don't know if this is the right place to discuss this but if you already start to make the user area better sortable, maybe a sorting by role would be helpful too 👍

[crydotsnake]

Don't know if this is the right place to discuss this but if you already start to make the user area better sortable, maybe a sorting by role would be helpful too +1

Hello Marco,

Feel free to put this in a new issue 🙂

[ahaeslich]

@crydotsnake thx for this PR and looking at the video I have to ask:

• Is there any default sorting that could be made visible for the user? Naturally only if the property is displayed in the table.
• What do you think of indicating to the user that the table is sortable by not just relying on a hover effect?
• And as addition to my second question: Would you like this change to also include accessbility concerns? For example the link doesn't give an indication that it behaves like a button and is triggering a sorting of the table.

[crydotsnake]

@crydotsnake thx for this PR and looking at the video I have to ask:

• Is there any default sorting that could be made visible for the user? Naturally only if the property is displayed in the table.

By default not. It gets only visible, when you click on the specific filter option in the table.

• What do you think of indicating to the user that the table is sortable by not just relying on a hover effect?

Tbh. I dont have an idea at the moment how this could be more visible for the user. The only thing i could imagine is, that when you hover over one of the links, you get like a hover title that says: "Sort by user" for example. What would you think about this?

• And as addition to my second question: Would you like this change to also include accessbility concerns? For example the link doesn't give an indication that it behaves like a button and is triggering a sorting of the table.

Same as above. I'm a bit clueless at this point how it could be more improved for the user. But if you think it could still be improved, maybe we can have a catch up in slack too discuss this if you want :)

Hope i understood all your questions as good as possible.

[crydotsnake]

Edit:

By default not. It gets only visible, when you click on the specific filter option in the table.

I just checked it. If you switch too the user managment module, the filter option by default is on Account and roles.

But i assume this was not what you mean in your question.

[crydotsnake]

Hm. I added a title so when you hover it says: "Sort by last login" for example. But for some reason the translation for sorting the name, is the same as for the last login date which i dont really understand.

Demo

Code

<f:section name="headerLabel">
	<f:if condition="{sortBy} === {sortingField}">
		<f:then>
			<f:if condition="{sortDirection} === 'ASC'">
				<f:then>
					<f:link.action title="{neos:backend.translate(source: 'Modules', id: 'users.sortBy.AccountsAndRoles')}" action="index" data="{neos-toggle: 'tooltip'}" arguments="{sortDirection: 'DESC', sortBy: sortingField}" addQueryString="TRUE">
						<neos:backend.translate id="{labelIdentifier}" source="Modules" package="Neos.Neos"/>
						<i class="fas fa-caret-up"></i>
					</f:link.action>
				</f:then>
				<f:else>
					<f:link.action title="{neos:backend.translate(source: 'Modules', id: 'users.sortBy.Name')}" action="index" data="{neos-toggle: 'tooltip'}" arguments="{sortDirection: 'ASC', sortBy: sortingField}" addQueryString="TRUE">
						<neos:backend.translate id="{labelIdentifier}" source="Modules" package="Neos.Neos"/>
						<i class="fas fa-caret-down"></i>
					</f:link.action>
				</f:else>
			</f:if>
		</f:then>
		<f:else>
			<f:link.action title="{neos:backend.translate(source: 'Modules', id: 'users.sortBy.LastLogin')}" action="index" data="{neos-toggle: 'tooltip'}" arguments="{sortBy: sortingField}" addQueryString="TRUE">
				<neos:backend.translate id="{labelIdentifier}" source="Modules" package="Neos.Neos"/>
			</f:link.action>
		</f:else>
	</f:if>
</f:section>

What could cause this?

[crydotsnake]

Hm. I added a title so when you hover it says: "Sort by last login" for example. But for some reason the translation for sorting the name, is the same as for the last login date which i dont really understand.

Demo

Code

<f:section name="headerLabel">
	<f:if condition="{sortBy} === {sortingField}">
		<f:then>
			<f:if condition="{sortDirection} === 'ASC'">
				<f:then>
					<f:link.action title="{neos:backend.translate(source: 'Modules', id: 'users.sortBy.AccountsAndRoles')}" action="index" data="{neos-toggle: 'tooltip'}" arguments="{sortDirection: 'DESC', sortBy: sortingField}" addQueryString="TRUE">
						<neos:backend.translate id="{labelIdentifier}" source="Modules" package="Neos.Neos"/>
						<i class="fas fa-caret-up"></i>
					</f:link.action>
				</f:then>
				<f:else>
					<f:link.action title="{neos:backend.translate(source: 'Modules', id: 'users.sortBy.Name')}" action="index" data="{neos-toggle: 'tooltip'}" arguments="{sortDirection: 'ASC', sortBy: sortingField}" addQueryString="TRUE">
						<neos:backend.translate id="{labelIdentifier}" source="Modules" package="Neos.Neos"/>
						<i class="fas fa-caret-down"></i>
					</f:link.action>
				</f:else>
			</f:if>
		</f:then>
		<f:else>
			<f:link.action title="{neos:backend.translate(source: 'Modules', id: 'users.sortBy.LastLogin')}" action="index" data="{neos-toggle: 'tooltip'}" arguments="{sortBy: sortingField}" addQueryString="TRUE">
				<neos:backend.translate id="{labelIdentifier}" source="Modules" package="Neos.Neos"/>
			</f:link.action>
		</f:else>
	</f:if>
</f:section>

What could cause this?

Now i see why its not working 🤦🏽‍♂️ I will find another way too add this.

[crydotsnake]

Have you maybe an idea? @ahaeslich

[crydotsnake]

Will try to continue working on that..

[crydotsnake]

I have adjusted the behavior so that it is easier for the user in the backend to see that they can click on something here. And when I move the mouse over the table header labels, I also see a title that describes the functionality.

[dlubitz]

@crydotsnake Thanks for this PR. Could you please remove the german translations in this PR? Our translation workflow should be: add keys and defaults (EN) in XLIFF file and add translations afterwards with weblate. Weblate will create the corresponding xliff files for the languages. (See https://www.neos.io/de/community/participate/translating-neos.html)

Rest looks fine for me. 👍

[crydotsnake]

Done @dlubitz

[dlubitz]

Thank you. But you need to remove all changes if the de/Modules.xlf. Sorry for the misleading statement.

[bwaidelich]

+1 by reading, thanks!

[mhsdesign]

That doesnt seem right 😅
May it be that the css build is not minified?

NODE_ENV=production might do the trick.

[crydotsnake]

That doesnt seem right 😅 May it be that the css build is not minified?

NODE_ENV=production might do the trick.

Oops. Yes

There is a command for building the files for production:

build:styles:prod

Now it should look fine.

[mhsdesign]

As unminifed stylesheets are always quite big, i would suggest to squash the previous both commits ;) So they dont appear in the history ^^