From b2a782b5a033da94dc84e8c06e5055b01866321d Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?John=20Molakvo=C3=A6?= <skjnldsv@protonmail.com>
Date: Thu, 1 Sep 2022 19:17:12 +0200
Subject: [PATCH] Fix sidebar toggle
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Signed-off-by: John Molakvoæ <skjnldsv@protonmail.com>
---
 apps/files/src/views/Sidebar.vue              |   6 +-
 .../views/TemplatePicker_BACKUP_2240643.vue   | 308 ++++++++++++++++++
 .../src/views/TemplatePicker_BASE_2240643.vue | 288 ++++++++++++++++
 .../views/TemplatePicker_LOCAL_2240643.vue    | 287 ++++++++++++++++
 .../views/TemplatePicker_REMOTE_2240643.vue   | 303 +++++++++++++++++
 5 files changed, 1190 insertions(+), 2 deletions(-)
 create mode 100644 apps/files/src/views/TemplatePicker_BACKUP_2240643.vue
 create mode 100644 apps/files/src/views/TemplatePicker_BASE_2240643.vue
 create mode 100644 apps/files/src/views/TemplatePicker_LOCAL_2240643.vue
 create mode 100644 apps/files/src/views/TemplatePicker_REMOTE_2240643.vue

diff --git a/apps/files/src/views/Sidebar.vue b/apps/files/src/views/Sidebar.vue
index 88c4fda4f5dc3..78713bdd5c609 100644
--- a/apps/files/src/views/Sidebar.vue
+++ b/apps/files/src/views/Sidebar.vue
@@ -461,9 +461,11 @@ export default {
 		setFullScreenMode(isFullScreen) {
 			this.isFullScreen = isFullScreen
 			if (isFullScreen) {
-				document.querySelector('#content').classList.add('with-sidebar--full')
+				document.querySelector('#content')?.classList.add('with-sidebar--full')
+					|| document.querySelector('#content-vue')?.classList.add('with-sidebar--full')
 			} else {
-				document.querySelector('#content').classList.remove('with-sidebar--full')
+				document.querySelector('#content')?.classList.remove('with-sidebar--full')
+					|| document.querySelector('#content-vue')?.classList.remove('with-sidebar--full')
 			}
 		},
 
diff --git a/apps/files/src/views/TemplatePicker_BACKUP_2240643.vue b/apps/files/src/views/TemplatePicker_BACKUP_2240643.vue
new file mode 100644
index 0000000000000..4580f0b42f01f
--- /dev/null
+++ b/apps/files/src/views/TemplatePicker_BACKUP_2240643.vue
@@ -0,0 +1,308 @@
+<!--
+  - @copyright Copyright (c) 2020 John Molakvoæ <skjnldsv@protonmail.com>
+  -
+  - @author John Molakvoæ <skjnldsv@protonmail.com>
+  -
+  - @license GNU AGPL version 3 or any later version
+  -
+  - 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/>.
+  -
+  -->
+
+<template>
+	<Modal v-if="opened"
+		:clear-view-delay="-1"
+		class="templates-picker"
+		size="normal"
+		@close="close">
+		<form class="templates-picker__form"
+			:style="style"
+			@submit.prevent.stop="onSubmit">
+			<h2>{{ t('files', 'Pick a template for {name}', { name: nameWithoutExt }) }}</h2>
+
+			<!-- Templates list -->
+			<ul class="templates-picker__list">
+				<TemplatePreview v-bind="emptyTemplate"
+					:checked="checked === emptyTemplate.fileid"
+					@check="onCheck" />
+
+				<TemplatePreview v-for="template in provider.templates"
+					:key="template.fileid"
+					v-bind="template"
+					:checked="checked === template.fileid"
+					:ratio="provider.ratio"
+					@check="onCheck" />
+			</ul>
+
+			<!-- Cancel and submit -->
+			<div class="templates-picker__buttons">
+				<button @click="close">
+					{{ t('files', 'Cancel') }}
+				</button>
+				<input type="submit"
+					class="primary"
+					:value="t('files', 'Create')"
+					:aria-label="t('files', 'Create a new file with the selected template')">
+			</div>
+		</form>
+
+		<EmptyContent v-if="loading" class="templates-picker__loading" icon="icon-loading">
+			{{ t('files', 'Creating file') }}
+		</EmptyContent>
+	</Modal>
+</template>
+
+<script>
+import { showError } from '@nextcloud/dialogs'
+import { generateOcsUrl } from '@nextcloud/router'
+import axios from '@nextcloud/axios'
+import EmptyContent from '@nextcloud/vue/dist/Components/EmptyContent'
+import Modal from '@nextcloud/vue/dist/Components/Modal'
+
+import { getCurrentDirectory } from '../utils/davUtils'
+import { getTemplates } from '../services/Templates'
+import TemplatePreview from '../components/TemplatePreview'
+
+const border = 2
+const margin = 8
+const width = margin * 18
+
+export default {
+	name: 'TemplatePicker',
+
+	components: {
+		EmptyContent,
+		Modal,
+		TemplatePreview,
+	},
+
+	props: {
+		logger: {
+			type: Object,
+			required: true,
+		},
+	},
+
+	data() {
+		return {
+			// Check empty template by default
+			checked: -1,
+			loading: false,
+			name: null,
+			opened: false,
+			provider: null,
+		}
+	},
+
+	computed: {
+		/**
+		 * Strip away extension from name
+		 *
+		 * @return {string}
+		 */
+		nameWithoutExt() {
+			return this.name.indexOf('.') > -1
+				? this.name.split('.').slice(0, -1).join('.')
+				: this.name
+		},
+
+		emptyTemplate() {
+			return {
+				basename: t('files', 'Blank'),
+				fileid: -1,
+				filename: this.t('files', 'Blank'),
+				hasPreview: false,
+				mime: this.provider?.mimetypes[0] || this.provider?.mimetypes,
+			}
+		},
+
+		selectedTemplate() {
+			return this.provider.templates.find(template => template.fileid === this.checked)
+		},
+
+		/**
+		 * Style css vars bin,d
+		 *
+		 * @return {object}
+		 */
+		style() {
+			return {
+				'--margin': margin + 'px',
+				'--width': width + 'px',
+				'--border': border + 'px',
+				'--fullwidth': width + 2 * margin + 2 * border + 'px',
+				'--height': this.provider.ratio ? Math.round(width / this.provider.ratio) + 'px' : null,
+			}
+		},
+	},
+
+	methods: {
+		/**
+		 * Open the picker
+		 *
+		 * @param {string} name the file name to create
+		 * @param {object} provider the template provider picked
+		 */
+		async open(name, provider) {
+
+			this.checked = this.emptyTemplate.fileid
+			this.name = name
+			this.provider = provider
+
+			const templates = await getTemplates()
+			const fetchedProvider = templates.find((fetchedProvider) => fetchedProvider.app === provider.app && fetchedProvider.label === provider.label)
+			if (fetchedProvider === null) {
+				throw new Error('Failed to match provider in results')
+			}
+			this.provider = fetchedProvider
+
+			// If there is no templates available, just create an empty file
+			if (fetchedProvider.templates.length === 0) {
+				this.onSubmit()
+				return
+			}
+
+			// Else, open the picker
+			this.opened = true
+		},
+
+		/**
+		 * Close the picker and reset variables
+		 */
+		close() {
+			this.checked = this.emptyTemplate.fileid
+			this.loading = false
+			this.name = null
+			this.opened = false
+			this.provider = null
+		},
+
+		/**
+		 * Manages the radio template picker change
+		 *
+		 * @param {number} fileid the selected template file id
+		 */
+		onCheck(fileid) {
+			this.checked = fileid
+		},
+
+		async onSubmit() {
+			this.loading = true
+			const currentDirectory = getCurrentDirectory()
+			const fileList = OCA?.Files?.App?.currentFileList
+
+			try {
+				const response = await axios.post(generateOcsUrl('apps/files/api/v1/templates/create'), {
+					filePath: `${currentDirectory}/${this.name}`,
+					templatePath: this.selectedTemplate?.filename,
+					templateType: this.selectedTemplate?.templateType,
+				})
+
+				const fileInfo = response.data.ocs.data
+				this.logger.debug('Created new file', fileInfo)
+
+				const options = _.extend({ scrollTo: true }, { showDetailsView: false } || {})
+				await fileList?.addAndFetchFileInfo(this.name, undefined, options)
+				fileList.rename(this.name)
+
+				this.close()
+			} catch (error) {
+				this.logger.error('Error while creating the new file from template')
+				console.error(error)
+				showError(this.t('files', 'Unable to create new file from template'))
+			} finally {
+				this.loading = false
+			}
+		},
+	},
+}
+</script>
+
+<style lang="scss" scoped>
+.templates-picker {
+	&__form {
+		padding: calc(var(--margin) * 2);
+		// Will be handled by the buttons
+		padding-bottom: 0;
+		// Dynamix height content
+		display: flex;
+		flex-direction: column;
+		height: 100%;
+		box-sizing: border-box;
+
+		h2 {
+			text-align: center;
+			font-weight: bold;
+			margin: var(--margin) 0 calc(var(--margin) * 2);
+		}
+	}
+
+	&__list {
+		display: grid;
+		grid-gap: calc(var(--margin) * 2);
+		grid-auto-columns: 1fr;
+		// We want maximum 5 columns. Putting 6 as we don't count the grid gap. So it will always be lower than 6
+		max-width: calc(var(--fullwidth) * 6);
+		grid-template-columns: repeat(auto-fit, var(--fullwidth));
+		// Make sure all rows are the same height
+		grid-auto-rows: 1fr;
+		// Center the columns set
+		justify-content: center;
+		// Fit max size and grow, scroll if necessary
+		flex: 1 1 100%;
+		height: 100%;
+		min-height: 0;
+		overflow-y: auto;
+	}
+
+	&__buttons {
+		display: flex;
+		justify-content: space-between;
+		padding: calc(var(--margin) * 2) var(--margin);
+		position: sticky;
+		bottom: 0;
+		background-image: linear-gradient(0, var(--gradient-main-background));
+
+		button, input[type='submit'] {
+			height: 44px;
+		}
+	}
+
+	// Make sure we're relative for the loading emptycontent on top
+<<<<<<< HEAD
+	::v-deep .modal-container {
+		position: relative;
+=======
+	// use Modal breakpoint + 1px to not target the mobile query
+	@media only screen and (min-width: calc(1024px / 2 + 1px)) {
+		::v-deep .modal-container {
+			position: relative;
+			height: fit-content !important;
+		}
+>>>>>>> aad295621d (Fix template picker styling with new Modal size)
+	}
+
+	&__loading {
+		position: absolute;
+		top: 0;
+		left: 0;
+		justify-content: center;
+		width: 100%;
+		height: 100%;
+		margin: 0 !important;
+		background-color: var(--color-main-background-translucent);
+	}
+}
+
+</style>
diff --git a/apps/files/src/views/TemplatePicker_BASE_2240643.vue b/apps/files/src/views/TemplatePicker_BASE_2240643.vue
new file mode 100644
index 0000000000000..76a81dd81b24f
--- /dev/null
+++ b/apps/files/src/views/TemplatePicker_BASE_2240643.vue
@@ -0,0 +1,288 @@
+<!--
+  - @copyright Copyright (c) 2020 John Molakvoæ <skjnldsv@protonmail.com>
+  -
+  - @author John Molakvoæ <skjnldsv@protonmail.com>
+  -
+  - @license GNU AGPL version 3 or any later version
+  -
+  - 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/>.
+  -
+  -->
+
+<template>
+	<Modal v-if="opened"
+		:clear-view-delay="-1"
+		class="templates-picker"
+		size="large"
+		@close="close">
+		<form class="templates-picker__form"
+			:style="style"
+			@submit.prevent.stop="onSubmit">
+			<h2>{{ t('files', 'Pick a template for {name}', { name: nameWithoutExt }) }}</h2>
+
+			<!-- Templates list -->
+			<ul class="templates-picker__list">
+				<TemplatePreview v-bind="emptyTemplate"
+					:checked="checked === emptyTemplate.fileid"
+					@check="onCheck" />
+
+				<TemplatePreview v-for="template in provider.templates"
+					:key="template.fileid"
+					v-bind="template"
+					:checked="checked === template.fileid"
+					:ratio="provider.ratio"
+					@check="onCheck" />
+			</ul>
+
+			<!-- Cancel and submit -->
+			<div class="templates-picker__buttons">
+				<button @click="close">
+					{{ t('files', 'Cancel') }}
+				</button>
+				<input type="submit"
+					class="primary"
+					:value="t('files', 'Create')"
+					:aria-label="t('files', 'Create a new file with the selected template')">
+			</div>
+		</form>
+
+		<EmptyContent v-if="loading" class="templates-picker__loading" icon="icon-loading">
+			{{ t('files', 'Creating file') }}
+		</EmptyContent>
+	</Modal>
+</template>
+
+<script>
+import { normalize } from 'path'
+import { showError } from '@nextcloud/dialogs'
+import EmptyContent from '@nextcloud/vue/dist/Components/EmptyContent'
+import Modal from '@nextcloud/vue/dist/Components/Modal'
+
+import { getCurrentDirectory } from '../utils/davUtils'
+import { createFromTemplate, getTemplates } from '../services/Templates'
+import TemplatePreview from '../components/TemplatePreview'
+
+const border = 2
+const margin = 8
+const width = margin * 20
+
+export default {
+	name: 'TemplatePicker',
+
+	components: {
+		EmptyContent,
+		Modal,
+		TemplatePreview,
+	},
+
+	props: {
+		logger: {
+			type: Object,
+			required: true,
+		},
+	},
+
+	data() {
+		return {
+			// Check empty template by default
+			checked: -1,
+			loading: false,
+			name: null,
+			opened: false,
+			provider: null,
+		}
+	},
+
+	computed: {
+		/**
+		 * Strip away extension from name
+		 *
+		 * @return {string}
+		 */
+		nameWithoutExt() {
+			return this.name.indexOf('.') > -1
+				? this.name.split('.').slice(0, -1).join('.')
+				: this.name
+		},
+
+		emptyTemplate() {
+			return {
+				basename: t('files', 'Blank'),
+				fileid: -1,
+				filename: this.t('files', 'Blank'),
+				hasPreview: false,
+				mime: this.provider?.mimetypes[0] || this.provider?.mimetypes,
+			}
+		},
+
+		selectedTemplate() {
+			return this.provider.templates.find(template => template.fileid === this.checked)
+		},
+
+		/**
+		 * Style css vars bin,d
+		 *
+		 * @return {object}
+		 */
+		style() {
+			return {
+				'--margin': margin + 'px',
+				'--width': width + 'px',
+				'--border': border + 'px',
+				'--fullwidth': width + 2 * margin + 2 * border + 'px',
+				'--height': this.provider.ratio ? Math.round(width / this.provider.ratio) + 'px' : null,
+			}
+		},
+	},
+
+	methods: {
+		/**
+		 * Open the picker
+		 *
+		 * @param {string} name the file name to create
+		 * @param {object} provider the template provider picked
+		 */
+		async open(name, provider) {
+
+			this.checked = this.emptyTemplate.fileid
+			this.name = name
+			this.provider = provider
+
+			const templates = await getTemplates()
+			const fetchedProvider = templates.find((fetchedProvider) => fetchedProvider.app === provider.app && fetchedProvider.label === provider.label)
+			if (fetchedProvider === null) {
+				throw new Error('Failed to match provider in results')
+			}
+			this.provider = fetchedProvider
+
+			// If there is no templates available, just create an empty file
+			if (fetchedProvider.templates.length === 0) {
+				this.onSubmit()
+				return
+			}
+
+			// Else, open the picker
+			this.opened = true
+		},
+
+		/**
+		 * Close the picker and reset variables
+		 */
+		close() {
+			this.checked = this.emptyTemplate.fileid
+			this.loading = false
+			this.name = null
+			this.opened = false
+			this.provider = null
+		},
+
+		/**
+		 * Manages the radio template picker change
+		 *
+		 * @param {number} fileid the selected template file id
+		 */
+		onCheck(fileid) {
+			this.checked = fileid
+		},
+
+		async onSubmit() {
+			this.loading = true
+			const currentDirectory = getCurrentDirectory()
+			const fileList = OCA?.Files?.App?.currentFileList
+
+			try {
+				const response = await axios.post(generateOcsUrl('apps/files/api/v1/templates/create'), {
+					filePath: `${currentDirectory}/${this.name}`,
+					templatePath: this.selectedTemplate?.filename,
+					templateType: this.selectedTemplate?.templateType,
+				})
+
+				const fileInfo = response.data.ocs.data
+				this.logger.debug('Created new file', fileInfo)
+
+				const options = _.extend({ scrollTo: true }, { showDetailsView: false } || {})
+				await fileList?.addAndFetchFileInfo(this.name, undefined, options)
+				fileList.rename(this.name)
+				this.close()
+			} catch (error) {
+				this.logger.error('Error while creating the new file from template')
+				console.error(error)
+				showError(this.t('files', 'Unable to create new file from template'))
+			} finally {
+				this.loading = false
+			}
+		},
+	},
+}
+</script>
+
+<style lang="scss" scoped>
+.templates-picker {
+	&__form {
+		padding: calc(var(--margin) * 2);
+		// Will be handled by the buttons
+		padding-bottom: 0;
+
+		h2 {
+			text-align: center;
+			font-weight: bold;
+			margin: var(--margin) 0 calc(var(--margin) * 2);
+		}
+	}
+
+	&__list {
+		display: grid;
+		grid-gap: calc(var(--margin) * 2);
+		grid-auto-columns: 1fr;
+		// We want maximum 5 columns. Putting 6 as we don't count the grid gap. So it will always be lower than 6
+		max-width: calc(var(--fullwidth) * 6);
+		grid-template-columns: repeat(auto-fit, var(--fullwidth));
+		// Make sure all rows are the same height
+		grid-auto-rows: 1fr;
+		// Center the columns set
+		justify-content: center;
+	}
+
+	&__buttons {
+		display: flex;
+		justify-content: space-between;
+		padding: calc(var(--margin) * 2) var(--margin);
+		position: sticky;
+		bottom: 0;
+		background-image: linear-gradient(0, var(--gradient-main-background));
+
+		button, input[type='submit'] {
+			height: 44px;
+		}
+	}
+
+	// Make sure we're relative for the loading emptycontent on top
+	::v-deep .modal-container {
+		position: relative;
+		height: fit-content;
+	}
+
+	&__loading {
+		position: absolute;
+		top: 0;
+		left: 0;
+		justify-content: center;
+		width: 100%;
+		height: 100%;
+		margin: 0;
+		background-color: var(--color-main-background-translucent);
+	}
+}
+
+</style>
diff --git a/apps/files/src/views/TemplatePicker_LOCAL_2240643.vue b/apps/files/src/views/TemplatePicker_LOCAL_2240643.vue
new file mode 100644
index 0000000000000..19a54f52621da
--- /dev/null
+++ b/apps/files/src/views/TemplatePicker_LOCAL_2240643.vue
@@ -0,0 +1,287 @@
+<!--
+  - @copyright Copyright (c) 2020 John Molakvoæ <skjnldsv@protonmail.com>
+  -
+  - @author John Molakvoæ <skjnldsv@protonmail.com>
+  -
+  - @license GNU AGPL version 3 or any later version
+  -
+  - 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/>.
+  -
+  -->
+
+<template>
+	<Modal v-if="opened"
+		:clear-view-delay="-1"
+		class="templates-picker"
+		size="normal"
+		@close="close">
+		<form class="templates-picker__form"
+			:style="style"
+			@submit.prevent.stop="onSubmit">
+			<h2>{{ t('files', 'Pick a template for {name}', { name: nameWithoutExt }) }}</h2>
+
+			<!-- Templates list -->
+			<ul class="templates-picker__list">
+				<TemplatePreview v-bind="emptyTemplate"
+					:checked="checked === emptyTemplate.fileid"
+					@check="onCheck" />
+
+				<TemplatePreview v-for="template in provider.templates"
+					:key="template.fileid"
+					v-bind="template"
+					:checked="checked === template.fileid"
+					:ratio="provider.ratio"
+					@check="onCheck" />
+			</ul>
+
+			<!-- Cancel and submit -->
+			<div class="templates-picker__buttons">
+				<button @click="close">
+					{{ t('files', 'Cancel') }}
+				</button>
+				<input type="submit"
+					class="primary"
+					:value="t('files', 'Create')"
+					:aria-label="t('files', 'Create a new file with the selected template')">
+			</div>
+		</form>
+
+		<EmptyContent v-if="loading" class="templates-picker__loading" icon="icon-loading">
+			{{ t('files', 'Creating file') }}
+		</EmptyContent>
+	</Modal>
+</template>
+
+<script>
+import { normalize } from 'path'
+import { showError } from '@nextcloud/dialogs'
+import EmptyContent from '@nextcloud/vue/dist/Components/EmptyContent'
+import Modal from '@nextcloud/vue/dist/Components/Modal'
+
+import { getCurrentDirectory } from '../utils/davUtils'
+import { createFromTemplate, getTemplates } from '../services/Templates'
+import TemplatePreview from '../components/TemplatePreview'
+
+const border = 2
+const margin = 8
+const width = margin * 20
+
+export default {
+	name: 'TemplatePicker',
+
+	components: {
+		EmptyContent,
+		Modal,
+		TemplatePreview,
+	},
+
+	props: {
+		logger: {
+			type: Object,
+			required: true,
+		},
+	},
+
+	data() {
+		return {
+			// Check empty template by default
+			checked: -1,
+			loading: false,
+			name: null,
+			opened: false,
+			provider: null,
+		}
+	},
+
+	computed: {
+		/**
+		 * Strip away extension from name
+		 *
+		 * @return {string}
+		 */
+		nameWithoutExt() {
+			return this.name.indexOf('.') > -1
+				? this.name.split('.').slice(0, -1).join('.')
+				: this.name
+		},
+
+		emptyTemplate() {
+			return {
+				basename: t('files', 'Blank'),
+				fileid: -1,
+				filename: this.t('files', 'Blank'),
+				hasPreview: false,
+				mime: this.provider?.mimetypes[0] || this.provider?.mimetypes,
+			}
+		},
+
+		selectedTemplate() {
+			return this.provider.templates.find(template => template.fileid === this.checked)
+		},
+
+		/**
+		 * Style css vars bin,d
+		 *
+		 * @return {object}
+		 */
+		style() {
+			return {
+				'--margin': margin + 'px',
+				'--width': width + 'px',
+				'--border': border + 'px',
+				'--fullwidth': width + 2 * margin + 2 * border + 'px',
+				'--height': this.provider.ratio ? Math.round(width / this.provider.ratio) + 'px' : null,
+			}
+		},
+	},
+
+	methods: {
+		/**
+		 * Open the picker
+		 *
+		 * @param {string} name the file name to create
+		 * @param {object} provider the template provider picked
+		 */
+		async open(name, provider) {
+
+			this.checked = this.emptyTemplate.fileid
+			this.name = name
+			this.provider = provider
+
+			const templates = await getTemplates()
+			const fetchedProvider = templates.find((fetchedProvider) => fetchedProvider.app === provider.app && fetchedProvider.label === provider.label)
+			if (fetchedProvider === null) {
+				throw new Error('Failed to match provider in results')
+			}
+			this.provider = fetchedProvider
+
+			// If there is no templates available, just create an empty file
+			if (fetchedProvider.templates.length === 0) {
+				this.onSubmit()
+				return
+			}
+
+			// Else, open the picker
+			this.opened = true
+		},
+
+		/**
+		 * Close the picker and reset variables
+		 */
+		close() {
+			this.checked = this.emptyTemplate.fileid
+			this.loading = false
+			this.name = null
+			this.opened = false
+			this.provider = null
+		},
+
+		/**
+		 * Manages the radio template picker change
+		 *
+		 * @param {number} fileid the selected template file id
+		 */
+		onCheck(fileid) {
+			this.checked = fileid
+		},
+
+		async onSubmit() {
+			this.loading = true
+			const currentDirectory = getCurrentDirectory()
+			const fileList = OCA?.Files?.App?.currentFileList
+
+			try {
+				const response = await axios.post(generateOcsUrl('apps/files/api/v1/templates/create'), {
+					filePath: `${currentDirectory}/${this.name}`,
+					templatePath: this.selectedTemplate?.filename,
+					templateType: this.selectedTemplate?.templateType,
+				})
+
+				const fileInfo = response.data.ocs.data
+				this.logger.debug('Created new file', fileInfo)
+
+				const options = _.extend({ scrollTo: true }, { showDetailsView: false } || {})
+				await fileList?.addAndFetchFileInfo(this.name, undefined, options)
+				fileList.rename(this.name)
+				this.close()
+			} catch (error) {
+				this.logger.error('Error while creating the new file from template')
+				console.error(error)
+				showError(this.t('files', 'Unable to create new file from template'))
+			} finally {
+				this.loading = false
+			}
+		},
+	},
+}
+</script>
+
+<style lang="scss" scoped>
+.templates-picker {
+	&__form {
+		padding: calc(var(--margin) * 2);
+		// Will be handled by the buttons
+		padding-bottom: 0;
+
+		h2 {
+			text-align: center;
+			font-weight: bold;
+			margin: var(--margin) 0 calc(var(--margin) * 2);
+		}
+	}
+
+	&__list {
+		display: grid;
+		grid-gap: calc(var(--margin) * 2);
+		grid-auto-columns: 1fr;
+		// We want maximum 5 columns. Putting 6 as we don't count the grid gap. So it will always be lower than 6
+		max-width: calc(var(--fullwidth) * 6);
+		grid-template-columns: repeat(auto-fit, var(--fullwidth));
+		// Make sure all rows are the same height
+		grid-auto-rows: 1fr;
+		// Center the columns set
+		justify-content: center;
+	}
+
+	&__buttons {
+		display: flex;
+		justify-content: space-between;
+		padding: calc(var(--margin) * 2) var(--margin);
+		position: sticky;
+		bottom: 0;
+		background-image: linear-gradient(0, var(--gradient-main-background));
+
+		button, input[type='submit'] {
+			height: 44px;
+		}
+	}
+
+	// Make sure we're relative for the loading emptycontent on top
+	::v-deep .modal-container {
+		position: relative;
+	}
+
+	&__loading {
+		position: absolute;
+		top: 0;
+		left: 0;
+		justify-content: center;
+		width: 100%;
+		height: 100%;
+		margin: 0;
+		background-color: var(--color-main-background-translucent);
+	}
+}
+
+</style>
diff --git a/apps/files/src/views/TemplatePicker_REMOTE_2240643.vue b/apps/files/src/views/TemplatePicker_REMOTE_2240643.vue
new file mode 100644
index 0000000000000..6a8d7ce160a4e
--- /dev/null
+++ b/apps/files/src/views/TemplatePicker_REMOTE_2240643.vue
@@ -0,0 +1,303 @@
+<!--
+  - @copyright Copyright (c) 2020 John Molakvoæ <skjnldsv@protonmail.com>
+  -
+  - @author John Molakvoæ <skjnldsv@protonmail.com>
+  -
+  - @license GNU AGPL version 3 or any later version
+  -
+  - 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/>.
+  -
+  -->
+
+<template>
+	<Modal v-if="opened"
+		:clear-view-delay="-1"
+		class="templates-picker"
+		size="normal"
+		@close="close">
+		<form class="templates-picker__form"
+			:style="style"
+			@submit.prevent.stop="onSubmit">
+			<h2>{{ t('files', 'Pick a template for {name}', { name: nameWithoutExt }) }}</h2>
+
+			<!-- Templates list -->
+			<ul class="templates-picker__list">
+				<TemplatePreview v-bind="emptyTemplate"
+					:checked="checked === emptyTemplate.fileid"
+					@check="onCheck" />
+
+				<TemplatePreview v-for="template in provider.templates"
+					:key="template.fileid"
+					v-bind="template"
+					:checked="checked === template.fileid"
+					:ratio="provider.ratio"
+					@check="onCheck" />
+			</ul>
+
+			<!-- Cancel and submit -->
+			<div class="templates-picker__buttons">
+				<button @click="close">
+					{{ t('files', 'Cancel') }}
+				</button>
+				<input type="submit"
+					class="primary"
+					:value="t('files', 'Create')"
+					:aria-label="t('files', 'Create a new file with the selected template')">
+			</div>
+		</form>
+
+		<EmptyContent v-if="loading" class="templates-picker__loading" icon="icon-loading">
+			{{ t('files', 'Creating file') }}
+		</EmptyContent>
+	</Modal>
+</template>
+
+<script>
+import { showError } from '@nextcloud/dialogs'
+import { generateOcsUrl } from '@nextcloud/router'
+import axios from '@nextcloud/axios'
+import EmptyContent from '@nextcloud/vue/dist/Components/EmptyContent'
+import Modal from '@nextcloud/vue/dist/Components/Modal'
+
+import { getCurrentDirectory } from '../utils/davUtils'
+import { getTemplates } from '../services/Templates'
+import TemplatePreview from '../components/TemplatePreview'
+
+const border = 2
+const margin = 8
+const width = margin * 18
+
+export default {
+	name: 'TemplatePicker',
+
+	components: {
+		EmptyContent,
+		Modal,
+		TemplatePreview,
+	},
+
+	props: {
+		logger: {
+			type: Object,
+			required: true,
+		},
+	},
+
+	data() {
+		return {
+			// Check empty template by default
+			checked: -1,
+			loading: false,
+			name: null,
+			opened: false,
+			provider: null,
+		}
+	},
+
+	computed: {
+		/**
+		 * Strip away extension from name
+		 *
+		 * @return {string}
+		 */
+		nameWithoutExt() {
+			return this.name.indexOf('.') > -1
+				? this.name.split('.').slice(0, -1).join('.')
+				: this.name
+		},
+
+		emptyTemplate() {
+			return {
+				basename: t('files', 'Blank'),
+				fileid: -1,
+				filename: this.t('files', 'Blank'),
+				hasPreview: false,
+				mime: this.provider?.mimetypes[0] || this.provider?.mimetypes,
+			}
+		},
+
+		selectedTemplate() {
+			return this.provider.templates.find(template => template.fileid === this.checked)
+		},
+
+		/**
+		 * Style css vars bin,d
+		 *
+		 * @return {object}
+		 */
+		style() {
+			return {
+				'--margin': margin + 'px',
+				'--width': width + 'px',
+				'--border': border + 'px',
+				'--fullwidth': width + 2 * margin + 2 * border + 'px',
+				'--height': this.provider.ratio ? Math.round(width / this.provider.ratio) + 'px' : null,
+			}
+		},
+	},
+
+	methods: {
+		/**
+		 * Open the picker
+		 *
+		 * @param {string} name the file name to create
+		 * @param {object} provider the template provider picked
+		 */
+		async open(name, provider) {
+
+			this.checked = this.emptyTemplate.fileid
+			this.name = name
+			this.provider = provider
+
+			const templates = await getTemplates()
+			const fetchedProvider = templates.find((fetchedProvider) => fetchedProvider.app === provider.app && fetchedProvider.label === provider.label)
+			if (fetchedProvider === null) {
+				throw new Error('Failed to match provider in results')
+			}
+			this.provider = fetchedProvider
+
+			// If there is no templates available, just create an empty file
+			if (fetchedProvider.templates.length === 0) {
+				this.onSubmit()
+				return
+			}
+
+			// Else, open the picker
+			this.opened = true
+		},
+
+		/**
+		 * Close the picker and reset variables
+		 */
+		close() {
+			this.checked = this.emptyTemplate.fileid
+			this.loading = false
+			this.name = null
+			this.opened = false
+			this.provider = null
+		},
+
+		/**
+		 * Manages the radio template picker change
+		 *
+		 * @param {number} fileid the selected template file id
+		 */
+		onCheck(fileid) {
+			this.checked = fileid
+		},
+
+		async onSubmit() {
+			this.loading = true
+			const currentDirectory = getCurrentDirectory()
+			const fileList = OCA?.Files?.App?.currentFileList
+
+			try {
+				const response = await axios.post(generateOcsUrl('apps/files/api/v1/templates/create'), {
+					filePath: `${currentDirectory}/${this.name}`,
+					templatePath: this.selectedTemplate?.filename,
+					templateType: this.selectedTemplate?.templateType,
+				})
+
+				const fileInfo = response.data.ocs.data
+				this.logger.debug('Created new file', fileInfo)
+
+				const options = _.extend({ scrollTo: true }, { showDetailsView: false } || {})
+				await fileList?.addAndFetchFileInfo(this.name, undefined, options)
+				fileList.rename(this.name)
+
+				this.close()
+			} catch (error) {
+				this.logger.error('Error while creating the new file from template')
+				console.error(error)
+				showError(this.t('files', 'Unable to create new file from template'))
+			} finally {
+				this.loading = false
+			}
+		},
+	},
+}
+</script>
+
+<style lang="scss" scoped>
+.templates-picker {
+	&__form {
+		padding: calc(var(--margin) * 2);
+		// Will be handled by the buttons
+		padding-bottom: 0;
+		// Dynamix height content
+		display: flex;
+		flex-direction: column;
+		height: 100%;
+		box-sizing: border-box;
+
+		h2 {
+			text-align: center;
+			font-weight: bold;
+			margin: var(--margin) 0 calc(var(--margin) * 2);
+		}
+	}
+
+	&__list {
+		display: grid;
+		grid-gap: calc(var(--margin) * 2);
+		grid-auto-columns: 1fr;
+		// We want maximum 5 columns. Putting 6 as we don't count the grid gap. So it will always be lower than 6
+		max-width: calc(var(--fullwidth) * 6);
+		grid-template-columns: repeat(auto-fit, var(--fullwidth));
+		// Make sure all rows are the same height
+		grid-auto-rows: 1fr;
+		// Center the columns set
+		justify-content: center;
+		// Fit max size and grow, scroll if necessary
+		flex: 1 1 100%;
+		height: 100%;
+		min-height: 0;
+		overflow-y: auto;
+	}
+
+	&__buttons {
+		display: flex;
+		justify-content: space-between;
+		padding: calc(var(--margin) * 2) var(--margin);
+		position: sticky;
+		bottom: 0;
+		background-image: linear-gradient(0, var(--gradient-main-background));
+
+		button, input[type='submit'] {
+			height: 44px;
+		}
+	}
+
+	// Make sure we're relative for the loading emptycontent on top
+	// use Modal breakpoint + 1px to not target the mobile query
+	@media only screen and (min-width: calc(1024px / 2 + 1px)) {
+		::v-deep .modal-container {
+			position: relative;
+			height: fit-content !important;
+		}
+	}
+
+	&__loading {
+		position: absolute;
+		top: 0;
+		left: 0;
+		justify-content: center;
+		width: 100%;
+		height: 100%;
+		margin: 0 !important;
+		background-color: var(--color-main-background-translucent);
+	}
+}
+
+</style>