Merge pull request #43175 from nextcloud/backport/43147/stable28

[stable28] fix(files): Consistent sorting for folders before files (user configurable)

apps/files/lib/Service/UserConfig.php

@@ -47,6 +47,12 @@ class UserConfig {
 			'default' => true,
 			'allowed' => [true, false],
 		],
+		[
+			// Whether to sort folders before files in the list or not
+			'key' => 'sort_folders_first',
+			'default' => true,
+			'allowed' => [true, false],
+		],
 		[
 			// Whether to show the files list in grid view or not
 			'key' => 'grid_view',

apps/files/src/store/userconfig.ts

@@ -27,12 +27,13 @@ import { loadState } from '@nextcloud/initial-state'
 import axios from '@nextcloud/axios'
 import Vue from 'vue'
 
-const userConfig = loadState('files', 'config', {
+const userConfig = loadState<UserConfig>('files', 'config', {
 	show_hidden: false,
 	crop_image_previews: true,
 	sort_favorites_first: true,
+	sort_folders_first: true,
 	grid_view: false,
-}) as UserConfig
+})
 
 export const useUserConfigStore = function(...args) {
 	const store = defineStore('userconfig', {

apps/files/src/views/FilesList.vue

@@ -257,7 +257,7 @@ export default defineComponent({
 				// 1: Sort favorites first if enabled
 				...(this.userConfig.sort_favorites_first ? [v => v.attributes?.favorite !== 1] : []),
 				// 2: Sort folders first if sorting by name
-				...(this.sortingMode === 'basename' ? [v => v.type !== 'folder'] : []),
+				...(this.userConfig.sort_folders_first ? [v => v.type !== 'folder'] : []),
 				// 3: Use sorting mode if NOT basename (to be able to use displayName too)
 				...(this.sortingMode !== 'basename' ? [v => v[this.sortingMode]] : []),
 				// 4: Use displayName if available, fallback to name
@@ -269,7 +269,7 @@ export default defineComponent({
 				// (for 1): always sort favorites before normal files
 				...(this.userConfig.sort_favorites_first ? ['asc'] : []),
 				// (for 2): always sort folders before files
-				...(this.sortingMode === 'basename' ? ['asc'] : []),
+				...(this.userConfig.sort_folders_first ? ['asc'] : []),
 				// (for 3): Reverse if sorting by mtime as mtime higher means edited more recent -> lower
 				...(this.sortingMode === 'mtime' ? [this.isAscSorting ? 'desc' : 'asc'] : []),
 				// (also for 3 so make sure not to conflict with 2 and 3)

apps/files/src/views/Settings.vue

@@ -30,6 +30,10 @@
 				@update:checked="setConfig('sort_favorites_first', $event)">
 				{{ t('files', 'Sort favorites first') }}
 			</NcCheckboxRadioSwitch>
+			<NcCheckboxRadioSwitch :checked="userConfig.sort_folders_first"
+				@update:checked="setConfig('sort_folders_first', $event)">
+				{{ t('files', 'Sort folders before files') }}
+			</NcCheckboxRadioSwitch>
 			<NcCheckboxRadioSwitch :checked="userConfig.show_hidden"
 				@update:checked="setConfig('show_hidden', $event)">
 				{{ t('files', 'Show hidden files') }}

cypress/e2e/files/files_sorting.cy.ts

@@ -73,9 +73,9 @@ describe('Files: Sorting the file list', { testIsolation: true }, () => {
 		// Files are sorted
 		cy.get('[data-cy-files-list-row]').each(($row, index) => {
 			switch (index) {
-			case 0: expect($row.attr('data-cy-files-list-row-name')).to.eq('1 tiny.txt')
+			case 0: expect($row.attr('data-cy-files-list-row-name')).to.eq('folder')
 				break
-			case 1: expect($row.attr('data-cy-files-list-row-name')).to.eq('folder')
+			case 1: expect($row.attr('data-cy-files-list-row-name')).to.eq('1 tiny.txt')
 				break
 			case 2: expect($row.attr('data-cy-files-list-row-name')).to.eq('welcome.txt')
 				break
@@ -93,13 +93,13 @@ describe('Files: Sorting the file list', { testIsolation: true }, () => {
 		// Files are sorted
 		cy.get('[data-cy-files-list-row]').each(($row, index) => {
 			switch (index) {
-			case 0: expect($row.attr('data-cy-files-list-row-name')).to.eq('z big.txt')
+			case 0: expect($row.attr('data-cy-files-list-row-name')).to.eq('folder')
 				break
-			case 1: expect($row.attr('data-cy-files-list-row-name')).to.eq('a medium.txt')
+			case 1: expect($row.attr('data-cy-files-list-row-name')).to.eq('z big.txt')
 				break
-			case 2: expect($row.attr('data-cy-files-list-row-name')).to.eq('welcome.txt')
+			case 2: expect($row.attr('data-cy-files-list-row-name')).to.eq('a medium.txt')
 				break
-			case 3: expect($row.attr('data-cy-files-list-row-name')).to.eq('folder')
+			case 3: expect($row.attr('data-cy-files-list-row-name')).to.eq('welcome.txt')
 				break
 			case 4: expect($row.attr('data-cy-files-list-row-name')).to.eq('1 tiny.txt')
 				break