diff --git a/src/App.vue b/src/App.vue index d3bfc9490..21cad506a 100644 --- a/src/App.vue +++ b/src/App.vue @@ -11,11 +11,8 @@ @@ -39,7 +36,7 @@

{{ t('notes', 'Please see Nextcloud server log for details.') }}

- + @@ -61,7 +58,7 @@ import PlusIcon from 'vue-material-design-icons/Plus.vue' import CogIcon from 'vue-material-design-icons/Cog.vue' import AppSettings from './components/AppSettings.vue' -import NavigationList from './components/NavigationList.vue' +import CategoriesList from './components/CategoriesList.vue' import EditorHint from './components/Modal/EditorHint.vue' import { config } from './config.js' @@ -73,14 +70,14 @@ export default { components: { AppSettings, + CategoriesList, + CogIcon, EditorHint, - NavigationList, NcAppContent, NcAppNavigation, NcAppNavigationNew, NcAppNavigationItem, NcContent, - CogIcon, PlusIcon, }, @@ -104,37 +101,16 @@ export default { }, computed: { + numNotes() { + return store.getters.numNotes() + }, + notes() { return store.state.notes.notes }, filteredNotes() { - const notes = this.notes.filter(note => { - if (this.filter.category !== null - && this.filter.category !== note.category - && !note.category.startsWith(this.filter.category + '/')) { - return false - } - return true - }) - - function cmpRecent(a, b) { - if (a.favorite && !b.favorite) return -1 - if (!a.favorite && b.favorite) return 1 - return b.modified - a.modified - } - - function cmpCategory(a, b) { - const cmpCat = a.category.localeCompare(b.category) - if (cmpCat !== 0) return cmpCat - if (a.favorite && !b.favorite) return -1 - if (!a.favorite && b.favorite) return 1 - return a.title.localeCompare(b.title) - } - - notes.sort(this.filter.category === null ? cmpRecent : cmpCategory) - - return notes + return store.getters.getFilteredNotes() }, }, @@ -255,7 +231,7 @@ export default { return } this.loading.create = true - createNote(this.filter.category) + createNote(store.getters.getSelectedCategory()) .then(note => { this.routeToNote(note.id, { new: null }) }) @@ -266,15 +242,6 @@ export default { }) }, - onSelectCategory(category) { - this.filter.category = category - - const appNavigation = document.querySelector('#app-navigation > ul') - if (appNavigation) { - appNavigation.scrollTop = 0 - } - }, - onNoteDeleted(note) { this.deletedNotes.push(note) this.clearUndoTimer() diff --git a/src/components/NavigationCategoriesItem.vue b/src/components/CategoriesList.vue similarity index 67% rename from src/components/NavigationCategoriesItem.vue rename to src/components/CategoriesList.vue index ab324a6a1..58ef9ecd6 100644 --- a/src/components/NavigationCategoriesItem.vue +++ b/src/components/CategoriesList.vue @@ -1,15 +1,8 @@ diff --git a/src/components/EditorEasyMDE.vue b/src/components/EditorEasyMDE.vue index e1dc35690..bb3b55f49 100644 --- a/src/components/EditorEasyMDE.vue +++ b/src/components/EditorEasyMDE.vue @@ -374,5 +374,6 @@ export default { z-index: 10; height: 40px; margin-right: 5px; + top: 65px; } diff --git a/src/components/HelpMobile.vue b/src/components/HelpMobile.vue index 79d015c12..057138688 100644 --- a/src/components/HelpMobile.vue +++ b/src/components/HelpMobile.vue @@ -4,8 +4,8 @@ {{ t('notes', 'Install the app for your mobile phone in order to access your notes from everywhere.') }}
- - {{ t('notes', 'Android app: {notes} by {company}', {notes: 'Nextcloud Notes', company: 'Niedermann IT-Dienstleistungen'}) }} + + {{ t('notes', 'Android app: {notes}', {notes: 'Nextcloud Notes'}) }}
@@ -22,11 +22,11 @@
- {{ t('notes', 'iOS app: {notes} by {company}', {notes: 'CloudNotes - Nextcloud Notes', company: 'Peter Hedlund'}) }} + {{ t('notes', 'iOS app: {notes}', {notes: 'Nextcloud Notes'}) }}
- +
diff --git a/src/components/NavigationList.vue b/src/components/NavigationList.vue deleted file mode 100644 index 9862aa984..000000000 --- a/src/components/NavigationList.vue +++ /dev/null @@ -1,179 +0,0 @@ - - - diff --git a/src/components/Note.vue b/src/components/Note.vue index d74ad9ef5..a1e035791 100644 --- a/src/components/Note.vue +++ b/src/components/Note.vue @@ -1,6 +1,6 @@ diff --git a/src/components/NavigationNoteItem.vue b/src/components/NoteItem.vue similarity index 71% rename from src/components/NavigationNoteItem.vue rename to src/components/NoteItem.vue index e222d64cc..56ab9cb48 100644 --- a/src/components/NavigationNoteItem.vue +++ b/src/components/NoteItem.vue @@ -1,21 +1,35 @@ + diff --git a/src/components/NoteRich.vue b/src/components/NoteRich.vue index 210c51c95..305c06097 100644 --- a/src/components/NoteRich.vue +++ b/src/components/NoteRich.vue @@ -1,12 +1,11 @@ diff --git a/src/components/NotesList.vue b/src/components/NotesList.vue new file mode 100644 index 000000000..5b7124b5f --- /dev/null +++ b/src/components/NotesList.vue @@ -0,0 +1,34 @@ + + + diff --git a/src/components/NotesView.vue b/src/components/NotesView.vue new file mode 100644 index 000000000..96eef2595 --- /dev/null +++ b/src/components/NotesView.vue @@ -0,0 +1,270 @@ + + + + diff --git a/src/components/Sidebar.vue b/src/components/Sidebar.vue index a894b1493..742d7746e 100644 --- a/src/components/Sidebar.vue +++ b/src/components/Sidebar.vue @@ -4,7 +4,11 @@ :subtitle="subtitle" :star-loading="loading.favorite" :starred="note.favorite" + :title-editable.sync="titleEditable" + :title-tooltip="titleTooltip" @update:starred="onSetFavorite" + @update:title="onUpdateTitle" + @submit-title="onRenameTitle" @close="onCloseSidebar" >
@@ -62,7 +66,7 @@ import moment from '@nextcloud/moment' import InfoIcon from 'vue-material-design-icons/Information.vue' -import { getCategories, setFavorite, setCategory, saveNoteManually } from '../NotesService.js' +import { getCategories, setFavorite, setTitle, setCategory, saveNoteManually } from '../NotesService.js' import { categoryLabel } from '../Util.js' import store from '../store.js' @@ -98,8 +102,11 @@ export default { loading: { category: false, favorite: false, + title: false, // TODO reflect this state in the UI }, categoryInput: null, + titleEditableInternal: false, + newTitle: '', } }, @@ -107,11 +114,26 @@ export default { note() { return store.getters.getNote(parseInt(this.noteId)) }, + titleEditable: { + get() { + return this.titleEditableInternal && !this.note.readonly + }, + set(newValue) { + if (newValue) { + this.newTitle = this.title + } + this.titleEditableInternal = newValue + }, + }, title() { - return this.note ? this.note.title : '' + if (!this.titleEditable) { + return this.note?.title || '' + } else { + return this.newTitle || '' + } }, category() { - return this.note ? this.note.category : '' + return this.note?.category || '' }, formattedDate() { return moment(this.note.modified * 1000).format('LLL') @@ -143,6 +165,9 @@ export default { sidebarOpen() { return store.state.app.sidebarOpen }, + titleTooltip() { + return t('notes', 'Click to edit title') + }, }, methods: { @@ -170,6 +195,22 @@ export default { }) }, + onUpdateTitle(newTitle) { + this.newTitle = newTitle + }, + + onRenameTitle() { + if (this.title !== this.newTitle) { + this.loading.title = true + setTitle(this.note.id, this.newTitle) + .catch(() => { + }) + .finally(() => { + this.loading.title = false + }) + } + }, + onSaveCategory(category) { this.categoryInput = null if (category !== null && this.note.category !== category) { diff --git a/src/router.js b/src/router.js index 1233057da..1e63d22d6 100644 --- a/src/router.js +++ b/src/router.js @@ -4,7 +4,7 @@ import { generateUrl } from '@nextcloud/router' import Loading from './components/Loading.vue' import Welcome from './components/Welcome.vue' -import Note from './components/Note.vue' +import NotesView from './components/NotesView.vue' import Sidebar from './components/Sidebar.vue' Vue.use(Router) @@ -28,7 +28,7 @@ export default new Router({ path: '/note/:noteId', name: 'note', components: { - default: Note, + default: NotesView, sidebar: Sidebar, }, props: { diff --git a/src/store/app.js b/src/store/app.js index 3ddc20d63..f7efb464a 100644 --- a/src/store/app.js +++ b/src/store/app.js @@ -6,6 +6,7 @@ const state = { isManualSave: false, documentTitle: null, sidebarOpen: false, + searchText: '', } const getters = { @@ -35,6 +36,10 @@ const mutations = { setSidebarOpen(state, open) { state.sidebarOpen = open }, + + updateSearchText(state, searchText) { + state.searchText = searchText + }, } const actions = { diff --git a/src/store/notes.js b/src/store/notes.js index d00581c0b..8e3603f83 100644 --- a/src/store/notes.js +++ b/src/store/notes.js @@ -5,6 +5,9 @@ const state = { categories: [], notes: [], notesIds: {}, + selectedCategory: null, + selectedNote: null, + filterString: '', } const getters = { @@ -70,6 +73,70 @@ const getters = { } return result }, + + getFilteredNotes: (state, getters, rootState, rootGetters) => () => { + const searchText = rootState.app.searchText.toLowerCase() + const notes = state.notes.filter(note => { + if (state.selectedCategory !== null + && state.selectedCategory !== note.category + && !note.category.startsWith(state.selectedCategory + '/')) { + return false + } + + if (searchText !== '' && note.title.toLowerCase().indexOf(searchText) === -1) { + return false + } + + return true + }) + + function cmpRecent(a, b) { + if (a.favorite && !b.favorite) return -1 + if (!a.favorite && b.favorite) return 1 + return b.modified - a.modified + } + + function cmpCategory(a, b) { + const cmpCat = a.category.localeCompare(b.category) + if (cmpCat !== 0) return cmpCat + if (a.favorite && !b.favorite) return -1 + if (!a.favorite && b.favorite) return 1 + return a.title.localeCompare(b.title) + } + + notes.sort(state.selectedCategory === null ? cmpRecent : cmpCategory) + + return notes + }, + + getFilteredTotalCount: (state, getters, rootState, rootGetters) => () => { + const searchText = rootState.app.searchText.toLowerCase() + + if (state.selectedCategory === null || searchText === '') { + return 0 + } + + const notes = state.notes.filter(note => { + if (state.selectedCategory === note.category || note.category.startsWith(state.selectedCategory + '/')) { + return false + } + + if (note.title.toLowerCase().indexOf(searchText) === -1) { + return false + } + + return true + }) + return notes.length + }, + + getSelectedCategory: (state) => () => { + return state.selectedCategory + }, + + getSelectedNote: (state) => () => { + return state.selectedNote + }, } const mutations = { @@ -111,6 +178,14 @@ const mutations = { setCategories(state, categories) { state.categories = categories }, + + setSelectedCategory(state, category) { + state.selectedCategory = category + }, + + setSelectedNote(state, note) { + state.selectedNote = note + }, } const actions = {