Port settings to Modal

Signed-off-by: John Molakvoæ <skjnldsv@protonmail.com>

6 files changed, 149 insertions, 78 deletions

diff --git a/apps/files/src/components/Setting.vue b/apps/files/src/components/Setting.vue
index b50a938cb52..c55a2841517 100644
--- a/apps/files/src/components/Setting.vue
+++ b/apps/files/src/components/Setting.vue
@@ -37,5 +37,3 @@ export default {
 	},
 }
 </script>
-<style>
-</style>
diff --git a/apps/files/src/files-app-settings.js b/apps/files/src/files-app-settings.js
deleted file mode 100644
index 491ea127ccd..00000000000
--- a/apps/files/src/files-app-settings.js
+++ /dev/null
@@ -1,57 +0,0 @@
-/**
- * @copyright Copyright (c) 2019 Gary Kim <gary@garykim.dev>
- * @copyright Copyright (c) 2019 John Molakvoæ <skjnldsv@protonmail.com>
- *
- * @author Gary Kim <gary@garykim.dev>
- * @author John Molakvoæ <skjnldsv@protonmail.com>
- *
- * @license AGPL-3.0-or-later
- *
- * This program is free software: you can redistribute it and/or modify
- * it under the terms of the GNU Affero General Public License as
- * published by the Free Software Foundation, either version 3 of the
- * License, or (at your option) any later version.
- *
- * This program is distributed in the hope that it will be useful,
- * but WITHOUT ANY WARRANTY; without even the implied warranty of
- * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
- * GNU Affero General Public License for more details.
- *
- * You should have received a copy of the GNU Affero General Public License
- * along with this program. If not, see <http://www.gnu.org/licenses/>.
- *
- */
-
-import Vue from 'vue'
-import Settings from './services/Settings'
-import SettingsView from './views/Settings'
-import Setting from './models/Setting'
-
-Vue.prototype.t = t
-
-// Init Files App Settings Service
-if (!window.OCA.Files) {
-	window.OCA.Files = {}
-}
-Object.assign(window.OCA.Files, { Settings: new Settings() })
-Object.assign(window.OCA.Files.Settings, { Setting })
-
-window.addEventListener('DOMContentLoaded', function() {
-	if (window.TESTING) {
-		return
-	}
-	// Init Vue app
-	// eslint-disable-next-line
-	new Vue({
-		el: '#files-app-settings',
-		render: h => h(SettingsView),
-	})
-
-	const appSettingsHeader = document.getElementById('app-settings-header')
-	if (appSettingsHeader) {
-		appSettingsHeader.addEventListener('click', e => {
-			const opened = e.currentTarget.children[0].classList.contains('opened')
-			OCA.Files.Settings.settings.forEach(e => opened ? e.close() : e.open())
-		})
-	}
-})
diff --git a/apps/files/src/main.js b/apps/files/src/main.js
index 948e1b68aca..3099a4c619c 100644
--- a/apps/files/src/main.js
+++ b/apps/files/src/main.js
@@ -1,4 +1,3 @@
-import './files-app-settings.js'
 import './templates.js'
 import './legacy/filelistSearch.js'
 import processLegacyFilesViews from './legacy/navigationMapper.js'
@@ -7,15 +6,24 @@ import Vue from 'vue'
 import NavigationService from './services/Navigation.ts'
 import NavigationView from './views/Navigation.vue'
 
-import router from './router/router.js'
+import SettingsService from './services/Settings.js'
+import SettingsModel from './models/Setting.js'
 
-// Init Files App Navigation Service
-const Navigation = new NavigationService()
+import router from './router/router.js'
 
-// Assign Navigation Service to the global OCP.Files
+// Init private and public Files namespace
+window.OCA.Files = window.OCA.Files ?? {}
 window.OCP.Files = window.OCP.Files ?? {}
+
+// Init Navigation Service
+const Navigation = new NavigationService()
 Object.assign(window.OCP.Files, { Navigation })
 
+// Init Files App Settings Service
+const Settings = new SettingsService()
+Object.assign(window.OCA.Files, { Settings })
+Object.assign(window.OCA.Files.Settings, { Setting: SettingsModel })
+
 // Init Navigation View
 const View = Vue.extend(NavigationView)
 const FilesNavigationRoot = new View({
diff --git a/apps/files/src/router/router.js b/apps/files/src/router/router.js
index a2d063a9532..c955cbb2e3e 100644
--- a/apps/files/src/router/router.js
+++ b/apps/files/src/router/router.js
@@ -44,9 +44,5 @@ export default new Router({
 			name: 'filelist',
 			props: true,
 		},
-		{
-			path: '/not-found',
-			name: 'notfound',
-		},
 	],
 })
diff --git a/apps/files/src/views/Navigation.vue b/apps/files/src/views/Navigation.vue
index 50f5e6f5d77..8595c447b57 100644
--- a/apps/files/src/views/Navigation.vue
+++ b/apps/files/src/views/Navigation.vue
@@ -36,6 +36,19 @@
 				:icon="child.iconClass"
 				:title="child.name" />
 		</NcAppNavigationItem>
+
+		<!-- Settings toggle -->
+		<template #footer>
+			<NcAppNavigationItem :pinned="true"
+				:title="t('files', 'Files settings')"
+				@click.prevent.stop="openSettings">
+				<Cog slot="icon" :size="20" />
+			</NcAppNavigationItem>
+		</template>
+
+		<!-- Settings modal-->
+		<SettingsModal :open="settingsOpened"
+			@close="onSettingsClose" />
 	</NcAppNavigation>
 </template>
 
@@ -45,7 +58,9 @@ import { generateUrl } from '@nextcloud/router'
 import axios from '@nextcloud/axios'
 import NcAppNavigation from '@nextcloud/vue/dist/Components/NcAppNavigation.js'
 import NcAppNavigationItem from '@nextcloud/vue/dist/Components/NcAppNavigationItem.js'
+import Cog from 'vue-material-design-icons/Cog.vue'
 
+import SettingsModal from './Settings.vue'
 import Navigation from '../services/Navigation.ts'
 import logger from '../logger.js'
 
@@ -53,8 +68,10 @@ export default {
 	name: 'Navigation',
 
 	components: {
+		Cog,
 		NcAppNavigation,
 		NcAppNavigationItem,
+		SettingsModal,
 	},
 
 	props: {
@@ -67,7 +84,7 @@ export default {
 
 	data() {
 		return {
-			key: 'value',
+			settingsOpened: false,
 		}
 	},
 
@@ -110,7 +127,7 @@ export default {
 
 	watch: {
 		currentView(view, oldView) {
-			logger.debug('View changed', { view })
+			logger.debug('View changed', { id: view.id, view })
 			this.showView(view, oldView)
 		},
 	},
@@ -128,21 +145,57 @@ export default {
 		 * @param {Navigation} oldView the old active view
 		 */
 		showView(view, oldView) {
+			// Closing any opened sidebar
+			OCA.Files?.Sidebar?.close?.()
+
 			if (view.legacy) {
+				const newAppContent = document.querySelector('#app-content #app-content-' + this.currentView.id + '.viewcontainer')
 				document.querySelectorAll('#app-content .viewcontainer').forEach(el => {
 					el.classList.add('hidden')
 				})
-				document.querySelector('#app-content #app-content-' + this.currentView.id + '.viewcontainer').classList.remove('hidden')
+				newAppContent.classList.remove('hidden')
+
+				// Legacy event
+				console.debug('F2V', jQuery(newAppContent))
+
+				// previousItemId: oldItemId,
+				// dir: itemDir,
+				// view: itemView
+				$(newAppContent).trigger(new $.Event('show', { itemId: view.id, dir: '/' }))
+				$(newAppContent).trigger(new $.Event('urlChanged', { itemId: view.id, dir: '/' }))
 			}
+
 			this.Navigation.setActive(view)
-			emit('files:view:changed', view)
+			emit('files:navigation:changed', view)
 		},
 
+		/**
+		 * Expand/collapse a a view with children and permanently
+		 * save this setting in the server.
+		 *
+		 * @param {Navigation} view the view to toggle
+		 */
 		onToggleExpand(view) {
 			// Invert state
 			view.expanded = !view.expanded
 			axios.post(generateUrl(`/apps/files/api/v1/toggleShowFolder/${view.id}`), { show: view.expanded })
 		},
+
+		/**
+		 * Open the settings modal and update the settings API entries
+		 */
+		openSettings() {
+			this.settingsOpened = true
+			OCA.Files.Settings.settings.forEach(setting => setting.open())
+		},
+
+		/**
+		 * Close the settings modal and update the settings API entries
+		 */
+		onSettingsClose() {
+			this.settingsOpened = false
+			OCA.Files.Settings.settings.forEach(setting => setting.close())
+		},
 	},
 }
 </script>
diff --git a/apps/files/src/views/Settings.vue b/apps/files/src/views/Settings.vue
index 5d2aff2f49a..e1c7d8b42bf 100644
--- a/apps/files/src/views/Settings.vue
+++ b/apps/files/src/views/Settings.vue
@@ -20,26 +20,99 @@
   -
   -->
 <template>
-	<div id="files-app-extra-settings">
-		<template v-for="setting in settings">
-			<Setting :key="setting.name" :el="setting.el" />
-		</template>
-	</div>
+	<NcAppSettingsDialog :open="open"
+		:show-navigation="true"
+		:title="t('files', 'Files settings')"
+		@update:open="onClose">
+		<!-- Settings API-->
+		<NcAppSettingsSection id="settings" :title="t('files', 'Files settings')">
+			<NcCheckboxRadioSwitch :checked.sync="show_hidden"
+				@update:checked="setConfig('show_hidden', $event)">
+				{{ t('files', 'Show hidden files') }}
+			</NcCheckboxRadioSwitch>
+			<NcCheckboxRadioSwitch :checked.sync="crop_image_previews"
+				@update:checked="setConfig('crop_image_previews', $event)">
+				{{ t('files', 'Crop image previews') }}
+			</NcCheckboxRadioSwitch>
+		</NcAppSettingsSection>
+
+		<!-- Settings API-->
+		<NcAppSettingsSection id="more-settings" :title="t('files', 'Additional settings')">
+			<template v-for="setting in settings">
+				<Setting :key="setting.name" :el="setting.el" />
+			</template>
+		</NcAppSettingsSection>
+
+		<!-- Webdav URL-->
+		<NcAppSettingsSection id="webdav" :title="t('files', 'Webdav')">
+			<NcInputField type="text" readonly="readonly" :value="webdavUrl" />
+			<em>
+				<a :href="webdavDocs" target="_blank" rel="noreferrer noopener">
+					{{ t('files', 'Use this address to access your Files via WebDAV') }} ↗
+				</a>
+			</em>
+		</NcAppSettingsSection>
+	</NcAppSettingsDialog>
 </template>
 
 <script>
-import Setting from '../components/Setting'
+import NcAppSettingsDialog from '@nextcloud/vue/dist/Components/NcAppSettingsDialog.js'
+import NcAppSettingsSection from '@nextcloud/vue/dist/Components/NcAppSettingsSection.js'
+import NcCheckboxRadioSwitch from '@nextcloud/vue/dist/Components/NcCheckboxRadioSwitch.js'
+import NcInputField from '@nextcloud/vue/dist/Components/NcInputField'
+import Setting from '../components/Setting.vue'
+
+import { generateRemoteUrl, generateUrl } from '@nextcloud/router'
+import { getCurrentUser } from '@nextcloud/auth'
+import { loadState } from '@nextcloud/initial-state'
+import { emit } from '@nextcloud/event-bus'
+import axios from '@nextcloud/axios'
+
+const userConfig = loadState('files', 'config')
 
 export default {
 	name: 'Settings',
 	components: {
+		NcAppSettingsDialog,
+		NcAppSettingsSection,
+		NcCheckboxRadioSwitch,
+		NcInputField,
 		Setting,
 	},
+
+	props: {
+		open: {
+			type: Boolean,
+			default: false,
+		},
+	},
+
 	data() {
 		return {
+
+			...userConfig,
+
+			// Settings API
 			settings: OCA.Files.Settings.settings,
+
+			// Webdav infos
+			webdavUrl: generateRemoteUrl('dav/files/' + getCurrentUser()?.uid),
+			webdavDocs: 'https://docs.nextcloud.com/server/stable/go.php?to=user-webdav',
 		}
 	},
+
+	methods: {
+		onClose() {
+			this.$emit('close')
+		},
+
+		setConfig(key, value) {
+			emit('files:config:updated', { key, value })
+			axios.post(generateUrl('/apps/files/api/v1/config/' + key), {
+				value,
+			})
+		},
+	},
 }
 </script>