AppSettings: Add FilePicker for notesPath including workaround

for NCAppNavigationSettings excludeClickOutsideSelectors

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

Author: theatischbein

src/components/AppSettings.vue

@@ -1,18 +1,16 @@
 <template>
-	<NcAppNavigationSettings :title="t('notes', 'Notes settings')" :class="{ loading: saving }">
+	<NcAppNavigationSettings :title="t('notes', 'Notes settings')" :class="{ loading: saving }" :exclude-click-outside-selectors="['div.oc-dialog']">
 		<div class="settings-block">
 			<p class="settings-hint">
 				<label for="notesPath">{{ t('notes', 'Folder to store your notes') }}</label>
 			</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"
+			>
 		</div>
 		<div class="settings-block">
 			<p class="settings-hint">
@@ -51,8 +49,23 @@ import {
 } from '@nextcloud/vue'
 
 import { setSettings } from '../NotesService.js'
+import { FilePicker, FilePickerType } from '@nextcloud/dialogs'
 import store from '../store.js'
 
+/*
+* Workaround until excludeClickOutsideSelectors will work and does nott close the menu while
+* clicking in the filePicker
+*/
+const callback = (mutationList, observer) => {
+	for (const mutation of mutationList) {
+		if (mutation.target.id === 'app-settings__content' && mutation.type === 'attributes' && mutation.attributeName === 'style') {
+			mutation.target.style = 'display: block;'
+			document.getElementById('app-settings').classList.add('open')
+			observer.disconnect()
+		}
+	}
+}
+
 export default {
 	name: 'AppSettings',
 
@@ -89,6 +102,30 @@ export default {
 	},
 
 	methods: {
+		onChangeNotePath(event) {
+			// Obeserver for the workaround
+			const observer = new MutationObserver(callback)
+			observer.observe(document.querySelector('#app-settings__content'), { attributes: true })
+
+			// 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)