enh(files): Add modal to set filename before creating new files in the fileslist

* Reactive `openfile` query

Signed-off-by: Ferdinand Thiessen <opensource@fthiessen.de>

3 files changed, 210 insertions, 18 deletions

diff --git a/apps/files/src/newMenu/newFolder.ts b/apps/files/src/newMenu/newFolder.ts
index 37dcf6d3d89..64ab8004e78 100644
--- a/apps/files/src/newMenu/newFolder.ts
+++ b/apps/files/src/newMenu/newFolder.ts
@@ -31,7 +31,7 @@ import axios from '@nextcloud/axios'
 
 import FolderPlusSvg from '@mdi/svg/svg/folder-plus.svg?raw'
 
-import { getUniqueName } from '../utils/fileUtils.ts'
+import { newNodeName } from '../utils/newNodeDialog'
 import logger from '../logger'
 
 type createFolderResponse = {
@@ -63,23 +63,27 @@ export const entry = {
 	iconSvgInline: FolderPlusSvg,
 	order: 0,
 	async handler(context: Folder, content: Node[]) {
-		const contentNames = content.map((node: Node) => node.basename)
-		const name = getUniqueName(t('files', 'New folder'), contentNames)
-		const { fileid, source } = await createNewFolder(context, name)
+		const name = await newNodeName(t('files', 'New folder'), content)
+		if (name !== null) {
+			const { fileid, source } = await createNewFolder(context, name)
+			// Create the folder in the store
+			const folder = new Folder({
+				source,
+				id: fileid,
+				mtime: new Date(),
+				owner: getCurrentUser()?.uid || null,
+				permissions: Permission.ALL,
+				root: context?.root || '/files/' + getCurrentUser()?.uid,
+			})
 
-		// Create the folder in the store
-		const folder = new Folder({
-			source,
-			id: fileid,
-			mtime: new Date(),
-			owner: getCurrentUser()?.uid || null,
-			permissions: Permission.ALL,
-			root: context?.root || '/files/' + getCurrentUser()?.uid,
-		})
-
-		showSuccess(t('files', 'Created new folder "{name}"', { name: basename(source) }))
-		logger.debug('Created new folder', { folder, source })
-		emit('files:node:created', folder)
-		emit('files:node:rename', folder)
+			showSuccess(t('files', 'Created new folder "{name}"', { name: basename(source) }))
+			logger.debug('Created new folder', { folder, source })
+			emit('files:node:created', folder)
+			window.OCP.Files.Router.goToRoute(
+				null, // use default route
+				{ view: 'files', fileid: folder.fileid },
+				{ dir: context.path },
+			)
+		}
 	},
 } as Entry
diff --git a/apps/files/src/newMenu/newFromTemplate.ts b/apps/files/src/newMenu/newFromTemplate.ts
new file mode 100644
index 00000000000..5e69181995e
--- /dev/null
+++ b/apps/files/src/newMenu/newFromTemplate.ts
@@ -0,0 +1,88 @@
+/**
+ * @copyright Copyright (c) 2020 John Molakvoæ <skjnldsv@protonmail.com>
+ *
+ * @author John Molakvoæ <skjnldsv@protonmail.com>
+ * @author Julius Härtl <jus@bitgrid.net>
+ * @author Ferdinand Thiessen <opensource@fthiessen.de>
+ *
+ * @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 type { Entry } from '@nextcloud/files'
+import type { ComponentInstance } from 'vue'
+import type { TemplateFile } from '../types.ts'
+
+import { Folder, Node, Permission, addNewFileMenuEntry } from '@nextcloud/files'
+import { loadState } from '@nextcloud/initial-state'
+import { newNodeName } from '../utils/newNodeDialog'
+import { translate as t } from '@nextcloud/l10n'
+import Vue, { defineAsyncComponent } from 'vue'
+
+// async to reduce bundle size
+const TemplatePickerVue = defineAsyncComponent(() => import('../views/TemplatePicker.vue'))
+let TemplatePicker: ComponentInstance & { open: (n: string, t: TemplateFile) => void } | null = null
+
+const getTemplatePicker = async () => {
+	if (TemplatePicker === null) {
+		// Create document root
+		const mountingPoint = document.createElement('div')
+		mountingPoint.id = 'template-picker'
+		document.body.appendChild(mountingPoint)
+
+		// Init vue app
+		TemplatePicker = new Vue({
+			render: (h) => h(TemplatePickerVue, { ref: 'picker' }),
+			methods: { open(...args) { this.$refs.picker.open(...args) } },
+			el: mountingPoint,
+		})
+	}
+	return TemplatePicker
+}
+
+/**
+ * Register all new-file-menu entries for all template providers
+ */
+export function registerTemplateEntries() {
+	const templates = loadState<TemplateFile[]>('files', 'templates', [])
+
+	// Init template files menu
+	templates.forEach((provider, index) => {
+		addNewFileMenuEntry({
+			id: `template-new-${provider.app}-${index}`,
+			displayName: provider.label,
+			// TODO: migrate to inline svg
+			iconClass: provider.iconClass || 'icon-file',
+			enabled(context: Folder): boolean {
+				return (context.permissions & Permission.CREATE) !== 0
+			},
+			order: 11,
+			async handler(context: Folder, content: Node[]) {
+				const templatePicker = getTemplatePicker()
+				const name = await newNodeName(`${provider.label}${provider.extension}`, content, {
+					label: t('files', 'Filename'),
+					name: provider.label,
+				})
+
+				if (name !== null) {
+					// Create the file
+					const picker = await templatePicker
+					picker.open(name, provider)
+				}
+			},
+		} as Entry)
+	})
+}
diff --git a/apps/files/src/newMenu/newTemplatesFolder.ts b/apps/files/src/newMenu/newTemplatesFolder.ts
new file mode 100644
index 00000000000..fafee553a10
--- /dev/null
+++ b/apps/files/src/newMenu/newTemplatesFolder.ts
@@ -0,0 +1,100 @@
+/**
+ * @copyright Copyright (c) 2020 John Molakvoæ <skjnldsv@protonmail.com>
+ *
+ * @author John Molakvoæ <skjnldsv@protonmail.com>
+ * @author Julius Härtl <jus@bitgrid.net>
+ * @author Ferdinand Thiessen <opensource@fthiessen.de>
+ *
+ * @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 type { Entry, Folder, Node } from '@nextcloud/files'
+
+import { getCurrentUser } from '@nextcloud/auth'
+import { showError } from '@nextcloud/dialogs'
+import { Permission, removeNewFileMenuEntry } from '@nextcloud/files'
+import { loadState } from '@nextcloud/initial-state'
+import { translate as t } from '@nextcloud/l10n'
+import { generateOcsUrl } from '@nextcloud/router'
+import { join } from 'path'
+import { newNodeName } from '../utils/newNodeDialog'
+
+import PlusSvg from '@mdi/svg/svg/plus.svg?raw'
+import axios from '@nextcloud/axios'
+import logger from '../logger.js'
+
+let templatesPath = loadState<string|false>('files', 'templates_path', false)
+logger.debug('Initial templates folder', { templatesPath })
+
+/**
+ * Init template folder
+ * @param directory Folder where to create the templates folder
+ * @param name Name to use or the templates folder
+ */
+const initTemplatesFolder = async function(directory: Folder, name: string) {
+	const templatePath = join(directory.path, name)
+	try {
+		logger.debug('Initializing the templates directory', { templatePath })
+		const { data } = await axios.post(generateOcsUrl('apps/files/api/v1/templates/path'), {
+			templatePath,
+			copySystemTemplates: true,
+		})
+
+		// Go to template directory
+		window.OCP.Files.Router.goToRoute(
+			null, // use default route
+			{ view: 'files', fileid: undefined },
+			{ dir: templatePath },
+		)
+
+		logger.info('Created new templates folder', {
+			...data.ocs.data,
+		})
+		templatesPath = data.ocs.data.templates_path as string
+	} catch (error) {
+		logger.error('Unable to initialize the templates directory')
+		showError(t('files', 'Unable to initialize the templates directory'))
+	}
+}
+
+export const entry = {
+	id: 'template-picker',
+	displayName: t('files', 'Create new templates folder'),
+	iconSvgInline: PlusSvg,
+	order: 10,
+	enabled(context: Folder): boolean {
+		// Templates folder already initialized
+		if (templatesPath) {
+			return false
+		}
+		// Allow creation on your own folders only
+		if (context.owner !== getCurrentUser()?.uid) {
+			return false
+		}
+		return (context.permissions & Permission.CREATE) !== 0
+	},
+	async handler(context: Folder, content: Node[]) {
+		const name = await newNodeName(t('files', 'Templates'), content, { name: t('files', 'New template folder') })
+
+		if (name !== null) {
+			// Create the template folder
+			initTemplatesFolder(context, name)
+
+			// Remove the menu entry
+			removeNewFileMenuEntry('template-picker')
+		}
+	},
+} as Entry