AppSettings: Add FilePicker for notesPath like in #990

Signed-off-by: Jonathan Pagel <jonny_tischbein@systemli.org>

src/components/AppSettings.vue

@@ -21,15 +21,13 @@
 			<p class="app-settings-section__desc">
 				{{ t('notes', 'Folder to store your notes') }}
 			</p>
-			<form @submit.prevent="onChangeSettingsReload">
-				<input id="notesPath"
-					v-model="settings.notesPath"
-					type="text"
-					name="notesPath"
-					:placeholder="t('notes', 'Root directory')"
-					@change="onChangeSettingsReload"
-				><input type="submit" class="icon-confirm" value="">
-			</form>
+			<input id="notesPath"
+				v-model="settings.notesPath"
+				type="text"
+				name="notesPath"
+				:placeholder="t('notes', 'Root directory')"
+				@click="onChangeNotePath"
+			>
 		</NcAppSettingsSection>
 		<NcAppSettingsSection id="file-suffix-section" :title="t('notes', 'File extension')">
 			<p class="app-settings-section__desc">
@@ -86,6 +84,8 @@ import {
 	NcAppSettingsSection,
 } from '@nextcloud/vue'
 
+import { FilePicker, FilePickerType } from '@nextcloud/dialogs'
+
 import { setSettings } from '../NotesService.js'
 import store from '../store.js'
 import HelpMobile from './HelpMobile.vue'
@@ -153,6 +153,25 @@ export default {
 	},
 
 	methods: {
+		onChangeNotePath(event) {
+			// Code Example from: https://github.com/nextcloud/text/blob/main/src/components/Menu/ActionInsertLink.vue#L130-L155
+			const filePicker = new FilePicker(
+				t('text', 'Select folder to link to'),
+				false, // multiselect
+				['text/directory'], // mime filter
+				true, // modal
+				FilePickerType.Choose, // type
+				true, // directories
+				event.target.value === '' ? '/' : event.target.value // path
+			)
+			filePicker.pick().then((file) => {
+				const client = OC.Files.getClient()
+				client.getFileInfo(file).then((_status, fileInfo) => {
+					this.settings.notesPath = fileInfo.path === '/' ? `/${fileInfo.name}` : `${fileInfo.path}/${fileInfo.name}`
+					this.onChangeSettingsReload()
+				})
+			})
+		},
 		onChangeSettings() {
 			this.saving = true
 			return setSettings(this.settings)