WIP: Language sortorder

[bjarnef]

Prerequisites

• I have added steps to test this contribution in the description below

Discussed in #18098

Description

Initial PR to add sort order on language similar to e.g. Domain. The migration will most likely be moved to v17 (or later).
I noticed the model for domain if named UmbracoDomain and DomaintDto, but for language just Language and LanguageDto.

Domain would probably better align unless it collide with another model and since it is public a rename would be a breaking change.

[github-actions]

Hi there @bjarnef, thank you for this contribution! 👍

While we wait for one of the Core Collaborators team to have a look at your work, we wanted to let you know about that we have a checklist for some of the things we will consider during review:

• It's clear what problem this is solving, there's a connected issue or a description of what the changes do and how to test them
• The automated tests all pass (see "Checks" tab on this PR)
• The level of security for this contribution is the same or improved
• The level of performance for this contribution is the same or improved
• Avoids creating breaking changes; note that behavioral changes might also be perceived as breaking
• If this is a new feature, Umbraco HQ provided guidance on the implementation beforehand
• 💡 The contribution looks original and the contributor is presumably allowed to share it

Don't worry if you got something wrong. We like to think of a pull request as the start of a conversation, we're happy to provide guidance on improving your contribution.

If you realize that you might want to make some changes then you can do that by adding new commits to the branch you created for this work and pushing new commits. They should then automatically show up as updates to this pull request.

Thanks, from your friendly Umbraco GitHub bot 🤖 🙂

[bjarnef]

@iOvergaard @nielslyngsoe @leekelleher do we have any concept to update sorting in a collection?

Currently I think we only a have sorting of children in context menu (not sure if it consider paged items), simple collections/lists like domains and approved colors .. and furthermore properties like here (+ tabs):

Umbraco-CMS/src/Umbraco.Web.UI.Client/src/packages/content/content-type/workspace/views/design/content-type-design-editor-property.element.ts

Line 194 in 89b2120

return this.renderSortableProperty();

How would we handle this in a collection?

Umbraco-CMS/src/Umbraco.Web.UI.Client/src/packages/language/collection/views/table/language-table-collection-view.element.ts

Line 113 in 89b2120

<umb-table .config=${this._tableConfig} .columns=${this._tableColumns} .items=${this._tableItems}></umb-table>

Most projects we probably only have a few language, but some has 20+ languages.
It can of course have a sort order property on language detail page, but in most use-cases a sorting from collection would be sufficient.

Currently I think child nodes in a collection/list view is only sortable from tree context actions - could we integrate this in someway in a collection itself?

Something I considered: If sortable mode is enabled, can the checkbox in table be replaced with the draggable handle instead? But it would of course only be sortable within the same page something similar to this https://dev.to/gaisinskii/draggable-table-row-with-vuejs-vuetify-and-sortablejs-1o7l

Perhaps a entity action to move position as suggested here: https://ux.stackexchange.com/a/111996

[emmagarland]

@bjarnef hi! Thanks very much for your PR to start sorting languages as per the issue link #18098.

It looks like one you will want HQ input on as you have requested. In terms of the actual code change, I'll check with HQ if they have initial feedback. We might want to consider the additional points as separate tasks to keep this one tightly focused.

Once confirmed, if the code is ready for review myself or one of the Core Collaborators team can check and validate it.

Cheers,

Emma

[emmagarland]

@bjarnef actually, just spotted this is in draft - I'll wait on this to be moved from draft to ready to review if that works, but in the meantime, if there is anything you need to help please let us know. Thanks :)

[bjarnef]

@emmagarland thanks for following up on this :)
Yes, I see languages may work much as domains (which "recently" got sort order added - in v10 I think). For domains I don't think there are paged results and regarding language in most cases not. Some projects may have 20 language (perhaps 50), but in that case a single page may be okay. I am actually not sure if the language table is paged a some point.

We have sortable feature on simple lists like domains and approved colors.
I can also work in this case within the page itself.

My suggestion is that we can have a button to enable sortable similar to properties in content type or in block grid.
When sortable is enabled we can show a draggable handle on the left in table as suggested here:
#19515 (comment)

@madsrasmussen recently added some changes here, but I still we may need a way to sort table rows inside <uui-table>:
#18519

To simplify this, I think this would be useful: umbraco/Umbraco.UI#1118

Sorting of rows within a single page in table may not be too complicated.
In combination with that perhaps we could have an entity action to update sort order as shown in the wireframes here: https://ux.stackexchange.com/questions/111989/best-practice-for-draggable-sortable-with-paging-records/111996#111996

So the questions are mainly about the UX/UI part to update sort order via <uui-table> / collection. In most cases languages would only have a single page, but I also consider if it may be useful for other entities like content node or other custom data (e.g. in Umbraco UI Builder). Currently from backoffice UI I think it is only possible to sort e.g. content nodes via context menu and not via table/collection.

[AndyButland]

Just a quick thought on this before you go too far - would it be enough, or even better, here to just ensure the languages are ordered alphabetically? I completely agree that created order which seems to be the current behaviour isn't very useful. But it would seem that alphabetical would be quite reasonable, and maybe even easier for editors than some custom order that the administrator thought would be best. Also less work for the administrator in that without doing anything the editor will get a good experience when selecting languages.

If so, that could be implemented more straightforwardly without any UI updates or additional fields; nor updates to downstream packages like Deploy and uSync.

[andersburla]

Sorting by name is not what editors want. They most of the time have a main language or a specific order they would like the languages to show up in the dropdown when working multi lingual sites. So I think a user specific sort order is best - in my opinion :)

[bjarnef]

I agree alphabetically may not always be the best option (and also mean it would sorted differently depending on backoffice language - I think is still an issue in Settings section, because the tree group headers are not sorted identical in Danish and English, which is confusing if one if use to the order: content types, templates, third party in tree, see this old issue #4285).

E.g. for dictionary items some may prefer field for German is sorted first, but if sorted alphabetically it would be sorted as (D)eutch 🇩🇪, (G)erman 🇬🇧 or (T)ysk 🇩🇰 (so it may not always appear first - or in same order).

The regular sort action on tree nodes has the options to drag nodes in custom sort order and a trick, which sometimes is overlooked, is that the nodes can be sorted alphabetically by clicking the table header.

Perhaps we need a bulk action as well on collections which support sortOrder (and consider the custom sort order field may be different for custom data, e.g. in Umbraco UI Builder repositories).

For example something like this:

[bjarnef]

Do we want to order language by SortOrder in PerformGetAll() similar to in DomainRepository?

Umbraco-CMS/src/Umbraco.Infrastructure/Persistence/Repositories/Implement/DomainRepository.cs

Line 48 in 9cb0557

sql.OrderBy<DomainDto>(dto => dto.SortOrder);

Or would it be considered as a breaking change?

[bjarnef]

Currently sortable on umb-table use uui-table-row as handle:

Umbraco-CMS/src/Umbraco.Web.UI.Client/src/packages/core/components/table/table.element.ts

Line 168 in c432f5a

itemSelector: 'uui-table-row',

Should it allow using a custom handle in row instead or not only row? At the moment I can only drag row via entity actions (in this case just the trash icon/button).

It probably need a placeholder or similar styling when dragging row similar to properties on content type.

Should we as on content type have a button to enable sorting? e.g. if we want bulk selecting on languages, e.g. to delete multiple languages at once.

In this case it may be useful to restrict dragging within container, e.g. table or table body.

The migration currently set sort order to zero, but it can iterate to original items and set sorting in the original order the languages were created.

chrome_zEnpRkSGOj.mp4

Perhaps the concept can be implemented in collections making it simple to sort items, when collection/table only has a single page.

and streamlined with sorting of groups/properties in content types:

[bjarnef]

@emmagarland before continue working on this, it would be great with some feedback from HQ.

E.g.

• Should the sorting be enabled via a button like and properties in content type (the properties are actually draggable anyway).
• Considering a collection can be sortable and selectable perhaps it may be best sorting or explicit enabled so checkboxes/drag handle are not shown at the same time?
• Should it be possible to move/update sorting from an item from Page X to Page Y? Probably not crucial in this case.
• We should probably have a save button here, but if sorting is enabled via a button, it can be shown conditionally.
• Migration set sortorder to 0 but it can use order of original items (in SQLite). It should possibly be handled in MSSQL migration as well besides adding the column.
• Changing sorting should in this case update sortOrder property, but it would be great to consider collections/repositories in Umbraco UI builder or custom collection where sortable field may be something different.