fixup! fixup! fixup! Add template picker

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

apps/files/appinfo/routes.php

@@ -153,11 +153,6 @@
 				'url' => '/api/v1/templates/path',
 				'verb' => 'POST'
 			],
-			[
-				'name' => 'Template#initializeTemplateDirectory',
-				'url' => '/api/v1/templates/init',
-				'verb' => 'POST'
-			],
 			[
 				'name' => 'TransferOwnership#transfer',
 				'url' => '/api/v1/transferownership',

apps/files/src/components/TemplatePreview.vue

@@ -30,17 +30,17 @@
 			@change="onCheck">
 
 		<label :for="id" class="template-picker__label">
-			<div class="template-picker__preview">
+			<div class="template-picker__preview"
+				:class="failedPreview ? 'template-picker__preview--failed' : ''">
 				<img class="template-picker__image"
-					:class="failedPreview ? 'template-picker__image--failed' : ''"
 					:src="realPreviewUrl"
 					alt=""
 					draggable="false"
 					@error="onFailure">
 			</div>
 
 			<span class="template-picker__title">
-				{{ basename }}
+				{{ nameWithoutExt }}
 			</span>
 		</label>
 	</li>
@@ -50,6 +50,7 @@
 import { generateUrl } from '@nextcloud/router'
 import { encodeFilePath } from '../utils/fileUtils'
 import { getToken, isPublic } from '../utils/davUtils'
+import path from 'path'
 
 // preview width generation
 const previewWidth = 256
@@ -100,6 +101,14 @@ export default {
 	},
 
 	computed: {
+		/**
+		 * Strip away extension from name
+		 * @returns {string}
+		 */
+		nameWithoutExt() {
+			return path.parse(this.basename).name
+		},
+
 		id() {
 			return `template-picker-${this.fileid}`
 		},
@@ -161,32 +170,42 @@ export default {
 	}
 
 	&__preview {
-		display: flex;
+		display: block;
 		overflow: hidden;
 		// Stretch so all entries are the same width
 		flex: 1 1;
 		width: var(--width);
-		min-height: var(--width);
+		min-height: var(--height);
 		max-height: var(--height);
-		padding: var(--margin);
+		padding: 0;
 		border: var(--border) solid var(--color-border);
 		border-radius: var(--border-radius-large);
 
 		input:checked + label > & {
 			border-color: var(--color-primary);
 		}
+
+		&--failed {
+			// Make sure to properly center fallback icon
+			display: flex;
+		}
 	}
 
 	&__image {
 		max-width: 100%;
 		background-color: var(--color-main-background);
 
-		&--failed {
-			width: calc(var(--margin) * 8);
-			// Center mime icon
-			margin: auto;
-			background-color: transparent !important;
-		}
+		object-fit: cover;
+	}
+
+	// Failed preview, fallback to mime icon
+	&__preview--failed &__image {
+		width: calc(var(--margin) * 8);
+		// Center mime icon
+		margin: auto;
+		background-color: transparent !important;
+
+		object-fit: initial;
 	}
 
 	&__title {

apps/files/src/services/Templates.js

@@ -0,0 +1,29 @@
+/**
+ * @copyright Copyright (c) 2021 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/>.
+ *
+ */
+
+import { generateOcsUrl } from '@nextcloud/router';
+import axios from '@nextcloud/axios'
+
+export const getTemplates = async function() {
+	const response = await axios.post(generateOcsUrl('apps/files/api/v1', 2) + 'templates')
+	console.debug(response)
+}

apps/files/src/templates.js

@@ -30,6 +30,7 @@ import Vue from 'vue'
 
 import TemplatePickerView from './views/TemplatePicker'
 import { getCurrentUser } from '@nextcloud/auth'
+import { showError } from '@nextcloud/dialogs'
 
 // Set up logger
 const logger = getLoggerBuilder()
@@ -54,7 +55,7 @@ document.body.appendChild(TemplatePickerRoot)
 const templates = loadState('files', 'templates', [])
 const templatesPath = loadState('files', 'templates_path', false)
 logger.debug('Templates providers', templates)
-logger.debug('Templates folder', templatesPath)
+logger.debug('Templates folder', { templatesPath })
 
 // Init vue app
 const View = Vue.extend(TemplatePickerView)
@@ -122,12 +123,18 @@ templates.forEach((provider, index) => {
  * @param {string} name the templates folder name
  */
 const initTemplatesFolder = async function(name) {
+	const templatePath = (getCurrentDirectory() + `/${name}`).replace('//', '/')
 	try {
-		await axios.post(generateOcsUrl('apps/files/api/v1/templates', 2) + 'init', {
-			path: getCurrentDirectory(),
-			userId: getCurrentUser().uid,
+		logger.debug('Initializing the templates directory', { templatePath })
+		await axios.post(generateOcsUrl('apps/files/api/v1/templates', 2) + 'path', {
+			templatePath,
+			copySystemTemplates: true,
 		})
+
+		// Go to template directory
+		OCA.Files.App.currentFileList.changeDirectory(templatePath, true, true)
 	} catch (error) {
-		logger.error('Unable to initialize templates directory')
+		logger.error('Unable to initialize the templates directory')
+		showError(t('files', 'Unable to initialize the templates directory'))
 	}
 }

apps/files/src/views/TemplatePicker.vue

@@ -29,7 +29,7 @@
 		<form class="templates-picker__form"
 			:style="style"
 			@submit.prevent.stop="onSubmit">
-			<h2>{{ t('files', 'Pick a template') }}</h2>
+			<h2>{{ t('files', 'Pick a template for {name}', { name: nameWithoutExt }) }}</h2>
 
 			<!-- Templates list -->
 			<ul class="templates-picker__list">
@@ -59,7 +59,7 @@
 			</div>
 		</form>
 
-		<EmptyContent class="templates-picker__loading" v-if="loading" icon="icon-loading">
+		<EmptyContent v-if="loading" class="templates-picker__loading" icon="icon-loading">
 			{{ t('files', 'Creating file') }}
 		</EmptyContent>
 	</Modal>
@@ -68,12 +68,13 @@
 <script>
 import { generateOcsUrl } from '@nextcloud/router'
 import { showError } from '@nextcloud/dialogs'
-import { getCurrentDirectory } from '../utils/davUtils'
-
 import axios from '@nextcloud/axios'
 import EmptyContent from '@nextcloud/vue/dist/Components/EmptyContent'
 import Modal from '@nextcloud/vue/dist/Components/Modal'
+import path from 'path'
 
+import { getCurrentDirectory } from '../utils/davUtils'
+import { getTemplates } from '../services/Templates'
 import TemplatePreview from '../components/TemplatePreview'
 
 const border = 2
@@ -108,6 +109,14 @@ export default {
 	},
 
 	computed: {
+		/**
+		 * Strip away extension from name
+		 * @returns {string}
+		 */
+		nameWithoutExt() {
+			return path.parse(this.name).name
+		},
+
 		emptyTemplate() {
 			return {
 				basename: t('files', 'Blank'),
@@ -132,7 +141,7 @@ export default {
 				'--width': width + 'px',
 				'--border': border + 'px',
 				'--fullwidth': width + 2 * margin + 2 * border + 'px',
-				'--height': this.ratio ? width * this.ratio + 'px' : null,
+				'--height': this.provider.ratio ? Math.round(width / this.provider.ratio) + 'px' : null,
 			}
 		},
 	},
@@ -157,6 +166,8 @@ export default {
 
 			// Else, open the picker
 			this.opened = true
+
+			getTemplates()
 		},
 
 		/**
@@ -207,7 +218,8 @@ export default {
 
 				this.close()
 			} catch (error) {
-				this.logger.error('Error while creating the new file from template', 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