feat(notes-list): add sort toggle and improve grouping

lib/Service/SettingsService.php

@@ -69,6 +69,7 @@ public function __construct(
 					return '.' . $out;
 				},
 			],
+			'sortMode' => $this->getListAttrs('sortMode', ['modified', 'title']),
 		];
 	}
 

src/components/NotesView.vue

@@ -14,22 +14,40 @@
 							{{ t('notes', 'New note') }}
 						</NcButton>
 					</div>
-					<NcTextField
-						:value.sync="searchText"
-						:label="t('notes', 'Search for notes')"
-						:show-trailing-button="searchText !== ''"
-						trailing-button-icon="close"
-						:trailing-button-label="t('Clear search')"
-						@trailing-button-click="searchText=''"
-					/>
+					<div class="content-list__filter">
+						<NcTextField
+							:value.sync="searchText"
+							:label="t('notes', 'Search for notes')"
+							:show-trailing-button="searchText !== ''"
+							trailing-button-icon="close"
+							:trailing-button-label="t('Clear search')"
+							@trailing-button-click="searchText=''"
+						/>
+						<NcActions class="sort-menu"
+							:aria-label="t('notes', 'Sort notes')"
+							:force-menu="true"
+						>
+							<template #icon>
+								<SortAlphabeticalAscendingIcon v-if="sortMode === 'title'" :size="20" />
+								<SortClockDescendingOutlineIcon v-else :size="20" />
+							</template>
+							<NcActionButton :close-after-click="true" @click="onSetSortMode('modified')">
+								<template #icon>
+									<SortClockDescendingOutlineIcon :size="20" />
+								</template>
+								{{ t('notes', 'Sort by modification date') }}
+							</NcActionButton>
+							<NcActionButton :close-after-click="true" @click="onSetSortMode('title')">
+								<template #icon>
+									<SortAlphabeticalAscendingIcon :size="20" />
+								</template>
+								{{ t('notes', 'Sort alphabetically') }}
+							</NcActionButton>
+						</NcActions>
+					</div>
 				</div>
 
-				<NotesList v-if="groupedNotes.length === 1"
-					:notes="groupedNotes[0].notes"
-					:show-category-title="category === null"
-					@note-selected="onNoteSelected"
-				/>
-				<template v-for="(group, idx) in groupedNotes" v-else>
+				<template v-for="(group, idx) in groupedNotes">
 					<NotesCaption v-if="group.category && category!==group.category"
 						:key="group.category"
 						:name="categoryToLabel(group.category)"
@@ -68,6 +86,8 @@
 
 <script>
 
+import NcActions from '@nextcloud/vue/components/NcActions'
+import NcActionButton from '@nextcloud/vue/components/NcActionButton'
 import NcAppContent from '@nextcloud/vue/components/NcAppContent'
 import NcAppContentList from '@nextcloud/vue/components/NcAppContentList'
 import NcAppContentDetails from '@nextcloud/vue/components/NcAppContentDetails'
@@ -79,14 +99,18 @@ import NotesCaption from './NotesCaption.vue'
 import store from '../store.js'
 import Note from './Note.vue'
 import PlusIcon from 'vue-material-design-icons/Plus.vue'
-import { createNote } from '../NotesService.js'
+import SortAlphabeticalAscendingIcon from 'vue-material-design-icons/SortAlphabeticalAscending.vue'
+import SortClockDescendingOutlineIcon from 'vue-material-design-icons/SortClockDescendingOutline.vue'
+import { createNote, setSettings } from '../NotesService.js'
 
 import { ObserveVisibility } from 'vue-observe-visibility'
 
 export default {
 	name: 'NotesView',
 
 	components: {
+		NcActions,
+		NcActionButton,
 		NcAppContent,
 		NcAppContentList,
 		NcAppContentDetails,
@@ -96,6 +120,8 @@ export default {
 		NotesList,
 		NotesCaption,
 		PlusIcon,
+		SortAlphabeticalAscendingIcon,
+		SortClockDescendingOutlineIcon,
 	},
 
 	directives: {
@@ -142,9 +168,22 @@ export default {
 			}
 		},
 
-		// group notes by time ("All notes") or by category (if category chosen)
+		sortMode() {
+			return store.state.app.settings.sortMode === 'title' ? 'title' : 'modified'
+		},
+
+		// time grouping applies to "All notes" and to categories without subcategories
+		groupByTime() {
+			return this.category === null || this.filteredNotes.every(note => note.category === this.category)
+		},
+
+		// group notes by time or by category (if category with subcategories chosen);
+		// the alphabetical sort mode uses a single group without captions
 		groupedNotes() {
-			if (this.category === null) {
+			if (this.sortMode === 'title') {
+				return [{ notes: this.displayedNotes }]
+			}
+			if (this.groupByTime) {
 				return this.displayedNotes.reduce((g, note) => {
 					const timeslot = this.getTimeslotFromNote(note)
 					if (g.length === 0 || g[g.length - 1].timeslot !== timeslot) {
@@ -222,6 +261,14 @@ export default {
 			store.commit('setSelectedCategory', category)
 		},
 
+		onSetSortMode(mode) {
+			if (this.sortMode === mode) {
+				return
+			}
+			store.state.app.settings.sortMode = mode
+			setSettings(store.state.app.settings)
+		},
+
 		onNewNote() {
 			if (this.creatingNote) {
 				return
@@ -281,6 +328,16 @@ export default {
 	margin-bottom: 6px;
 }
 
+.content-list__filter {
+	display: flex;
+	align-items: center;
+	gap: var(--default-grid-baseline);
+}
+
+.content-list__filter :deep(.input-field) {
+	flex: 1;
+}
+
 .content-list__actions :deep(.button-vue) {
 	width: 100%;
 	justify-content: center;

src/store/notes.js

@@ -128,7 +128,18 @@ const getters = {
 			return a.title.localeCompare(b.title)
 		}
 
-		notes.sort(state.selectedCategory === null ? cmpRecent : cmpCategory)
+		function cmpTitle(a, b) {
+			return a.title.localeCompare(b.title)
+		}
+
+		if (rootState.app.settings.sortMode === 'title') {
+			notes.sort(cmpTitle)
+			return notes
+		}
+
+		const flatCategory = state.selectedCategory !== null
+			&& notes.every(note => note.category === state.selectedCategory)
+		notes.sort(state.selectedCategory === null || flatCategory ? cmpRecent : cmpCategory)
 
 		return notes
 	},