diff --git a/lib/Service/SettingsService.php b/lib/Service/SettingsService.php
index 22b341ee4..41ce2c8d6 100644
--- a/lib/Service/SettingsService.php
+++ b/lib/Service/SettingsService.php
@@ -69,6 +69,7 @@ public function __construct(
return '.' . $out;
},
],
+ 'sortMode' => $this->getListAttrs('sortMode', ['modified', 'title']),
];
}
diff --git a/src/components/NotesView.vue b/src/components/NotesView.vue
index f9a93235b..3d52aa76e 100644
--- a/src/components/NotesView.vue
+++ b/src/components/NotesView.vue
@@ -14,22 +14,40 @@
{{ t('notes', 'New note') }}
-
+
+
+
+
-
-
+
+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,7 +99,9 @@ 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'
@@ -87,6 +109,8 @@ 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;
diff --git a/src/store/notes.js b/src/store/notes.js
index d9001c133..c33b77b75 100644
--- a/src/store/notes.js
+++ b/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
},