AppSettings: Add FilePicker for notesPath

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

Author: theatischbein

src/components/AppSettings.vue

@@ -10,8 +10,8 @@
 					type="text"
 					name="notesPath"
 					:placeholder="t('notes', 'Root directory')"
-					@change="onChangeSettingsReload"
-				><input type="submit" class="icon-confirm" value="">
+					@click="onChangeNotePath"
+				>
 			</form>
 		</div>
 		<div class="settings-block">
@@ -51,6 +51,7 @@ import {
 } from '@nextcloud/vue'
 
 import { setSettings } from '../NotesService.js'
+import { FilePicker, FilePickerType } from '@nextcloud/dialogs'
 import store from '../store.js'
 
 export default {
@@ -89,6 +90,25 @@ export default {
 	},
 
 	methods: {
+		onChangeNotePath(input) {	
+			// 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
+				[], // mime filter
+				true, // modal
+				FilePickerType.Choose, // type
+				true, // directories
+				'/' // 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)