Handle case with empty version list

Signed-off-by: Carl Schwan <[email protected]>

apps/files_versions/src/views/VersionTab.vue

@@ -18,7 +18,7 @@
 <template>
 	<div>
 		<ul>
-			<li v-for="version in versions" class="version">
+			<li v-for="version in versions" class="version" key="version.url">
 				<img lazy="true"
 					:src="version.preview"
 					height="256"
@@ -50,25 +50,30 @@
 				</NcButton>
 			</li>
 		</ul>
+		<NcEmptyContent v-if="!loading && versions.length === 0"
+			:title="t('files_version', 'No versions yet')">
+			<template #icon>
+				<BackupRestore />
+			</template>
+		</NcEmptyContent>
 	</div>
 </template>
 
 <script>
 import { createClient, getPatcher } from 'webdav'
 import axios from '@nextcloud/axios'
-import parseUrl from 'url-parse'
 import { generateRemoteUrl, generateUrl } from '@nextcloud/router'
 import { getCurrentUser } from '@nextcloud/auth'
-import { translate } from '@nextcloud/l10n'
 import BackupRestore from 'vue-material-design-icons/BackupRestore.vue'
 import Download from 'vue-material-design-icons/Download.vue'
 import NcButton from '@nextcloud/vue/dist/Components/NcButton.js'
+import NcEmptyContent from '@nextcloud/vue/dist/Components/NcEmptyContent.js'
 import { showError, showSuccess } from '@nextcloud/dialogs'
 import moment from '@nextcloud/moment'
 import { basename, joinPaths } from '@nextcloud/paths'
 
 /**
- *
+ * Get WebDAV request body for version list
  */
 function getDavRequest() {
 	return `<?xml version="1.0"?>
@@ -85,9 +90,7 @@ function getDavRequest() {
 }
 
 /**
- *
- * @param version
- * @param fileInfo
+ * Format version
  */
 function formatVersion(version, fileInfo) {
 	const fileVersion = basename(version.filename)
@@ -115,6 +118,7 @@ export default {
 	name: 'VersionTab',
 	components: {
 		NcButton,
+		NcEmptyContent,
 		BackupRestore,
 		Download,
 	},
@@ -134,6 +138,7 @@ export default {
 			versions: [],
 			client,
 			remote,
+			loading: true,
 		}
 	},
 	methods: {
@@ -153,13 +158,18 @@ export default {
 		 */
 		async fetchVersions() {
 			const path = `/versions/${getCurrentUser().uid}/versions/${this.fileInfo.id}`
-			const remotePath = parseUrl(this.remote).pathname
 
-			const response = await this.client.getDirectoryContents(path, {
-				data: getDavRequest(),
-			})
-			this.versions = response.filter(version => version.mime !== '')
-				.map(version => formatVersion(version, this.fileInfo))
+			try {
+				const response = await this.client.getDirectoryContents(path, {
+					data: getDavRequest(),
+				})
+				this.versions = response.filter(version => version.mime !== '')
+					.map(version => formatVersion(version, this.fileInfo))
+				this.loading = false
+			} catch (exception) {
+				console.error('Could not fetch version', exception)
+				this.loading = false
+			}
 		},
 
 		/**
@@ -169,7 +179,7 @@ export default {
 		 */
 		async restoreVersion(version) {
 			try {
-				console.debug('restore version', version.url)
+				console.debug('restoring version', version.url)
 				const response = await this.client.moveFile(
 					`/versions/${getCurrentUser().uid}/versions/${this.fileInfo.id}/${version.fileVersion}`,
 					`/versions/${getCurrentUser().uid}/restore/target`
@@ -206,7 +216,7 @@ export default {
 	&-image {
 		width: 3rem;
 		height: 3rem;
-		filter: drop-shadow(0 1px 2px var(--color-box-shadow));
+		border: 1px solid var(--color-border);
 		margin-right: 1rem;
 		border-radius: var(--border-radius);
 	}