fixup! VersionEntry Updated

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

apps/files_versions/src/components/VersionEntry.vue

@@ -1,5 +1,5 @@
 <!--
- - @copyright Copyright (c) 2021 Enoch <enoch@nextcloud.com>
+  - @copyright Copyright (c) 2021 Enoch <enoch@nextcloud.com>
   -
   - @author Enoch <enoch@nextcloud.com>
   -
@@ -19,35 +19,45 @@
   -->
 
 <template>
-	<ul>
+	<li>
 		<ListItemIcon
-			:title="version.lastmod"
+			v-if="!isLatestChange"
-			:subtitle="version.size">
+			:title="relativeDate"
-			<Actions
+			:subtitle="formattedSize"
-				menu-align="right"
+			:url="iconUrl"
-				class="version-entry__actions">
+			class="version-entry">
-				<ActionButton icon="icon-history" @click="alert('Edit')">
+			<Actions class="version-entry__actions">
+				<ActionButton v-if="canRevert" icon="icon-history" @click="restoreVersion">
 					{{ t('files_versions','Restore') }}
 				</ActionButton>
+				<ActionLink icon="icon-download" :href="versionUrl">
+					{{ t('files_versions','Download') }}
+				</ActionLink>
 			</Actions>
 		</ListItemIcon>
-	</ul>
+	</li>
 </template>
 
 <script>
-import Avatar from '@nextcloud/vue/dist/Components/Avatar'
+import moment from '@nextcloud/moment'
+
 import Actions from '@nextcloud/vue/dist/Components/Actions'
+import ActionButton from '@nextcloud/vue/dist/Components/ActionButton'
+import ActionLink from '@nextcloud/vue/dist/Components/ActionLink'
 import Tooltip from '@nextcloud/vue/dist/Directives/Tooltip'
 import ListItemIcon from '@nextcloud/vue/dist/Components/ListItemIcon'
-import moment from '@nextcloud/moment'
+
+import { generateUrl } from '@nextcloud/router'
+import { getCurrentUser } from '@nextcloud/auth'
 
 export default {
 	name: 'VersionEntry',
 
 	components: {
 		Actions,
+		ActionButton,
+		ActionLink,
 		ListItemIcon,
-		Avatar,
 	},
 
 	directives: {
@@ -64,55 +74,55 @@ export default {
 			required: true,
 		},
 	},
-	data() {
+
-		return {
-			iconUrl,
-			version: {},
-			moment,
-		}
-	},
 	computed: {
-		iconUrl() {
+		// Does the current user have permissions to revert this file
-			return OC.MimeType.getIconUrl(this.MimeType)
+		canRevert() {
-			console.log(iconUrl)
+			// TODO: implement permission check
+			return true
 		},
+
+		/**
+		 * If the basename is just the file id,
+		 * this is the latest file version entry
+		 * @returns {boolean}
+		 */
+		isLatestChange() {
+			return this.fileInfo.id === this.version.basename
+		},
+
+		versionUrl() {
+			return generateUrl('/remote.php/dav/versions/{user}' + this.version.filename, {
+				user: getCurrentUser().uid,
+			})
+		},
+		iconUrl() {
+			return OC.MimeType.getIconUrl(this.fileInfo.mimetype)
+		},
+
+		formattedSize() {
+			return OC.Util.humanFileSize(this.version.size, true)
+		},
+
 		relativeDate() {
-			return (timestamp) => {
+			return moment(this.version.lastmod).fromNow()
-				const diff = moment(this.$root.time).diff(moment(timestamp))
+		},
-				if (diff >= 0 && diff < 45000) {
+	},
-					return t('core', 'seconds ago')
+
-				}
+	methods: {
-				return moment(timestamp).fromNow()
+		restoreVersion() {
-			}
+			// TODO: implement restore request and loading
 		},
 	},
 }
 
 </script>
 
-	<style lang="scss" scoped>
+<style lang="scss" scoped>
-	.version-entry {
+.version-entry {
-		display: flex;
+	// Remove avatar border-radius around file type icon
-		align-items: center;
+	::v-deep .avatardiv img {
-		min-height: 44px;
+		border-radius: 0;
-		&__desc {
-			padding: 8px;
-			line-height: 1.2em;
-			position: relative;
-			flex: 1 1;
-			min-width: 0;
-			h5 {
-				white-space: nowrap;
-				text-overflow: ellipsis;
-				overflow: hidden;
-				max-width: inherit;
-			}
-			p {
-				color: var(--color-text-maxcontrast);
-			}
-		}
-		&__actions {
-			margin-left: auto !important;
-		}
 	}
-	</style>
+}
+</style>

apps/files_versions/src/files_versions_tab.js

@@ -40,6 +40,7 @@ window.addEventListener('DOMContentLoaded', function() {
 			id: 'version_new',
 			name: t('files_versions', 'VueVersions'),
 			icon: 'icon-version',
+
 			async mount(el, fileInfo, context) {
 				if (TabInstance) {
 					TabInstance.$destroy()
@@ -52,6 +53,7 @@ window.addEventListener('DOMContentLoaded', function() {
 				await TabInstance.update(fileInfo)
 				TabInstance.$mount(el)
 			},
+
 			update(fileInfo) {
 				TabInstance.update(fileInfo)
 			},

apps/files_versions/src/services/FileVersion.js

@@ -1,7 +1,9 @@
 /**
  * @copyright Copyright (c) 2019 John Molakvoæ <skjnldsv@protonmail.com>
+ *
  * @author Enoch <enoch@nextcloud.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
@@ -22,32 +24,22 @@
 import client from './DavClient'
 import { genFileInfo } from '../utils/fileUtils'
 
-const FileVersion = async function(fileId) {
+export const fetchFileVersions = async function(fileId) {
 
 	// init params
 	const VersionsUrl = '/versions/' + fileId
 	const response = await client.getDirectoryContents(VersionsUrl, {
 		data: `<?xml version="1.0"?>
-<d:propfind  xmlns:d="DAV:" xmlns:oc="http://owncloud.org/ns">
+			<d:propfind  xmlns:d="DAV:" xmlns:oc="http://owncloud.org/ns">
-  <d:prop>
+			<d:prop>
-    <d:getcontentlength />
+				<d:getcontentlength />
-    <d:getcontenttype />
+				<d:getcontenttype />
-    <d:getlastmodified />
+				<d:getlastmodified />
-  </d:prop>
+			</d:prop>
-</d:propfind>`,
+			</d:propfind>`,
 		details: true,
 	})
 
 	/** return response.data.map(FileVersion); */
-
 	return response.data.map(genFileInfo)
-
 }
-/**
- * Retrieve the files list
- *
- * @param {String} path the path relative to the user root
- * @param {Object} [options] optional options for axios
- * @returns {Array} the file list
- */
-export default FileVersion

apps/files_versions/src/views/VersionTab.vue

@@ -23,26 +23,35 @@
 <template>
 	<div :class="{ 'icon-loading': loading }">
 		<!-- error message -->
-		<div v-if="error" class="emptycontent">
+		<EmptyContent v-if="error" icon="icon-error">
-			<div class="icon icon-error" />
+			{{ t('files_versions', 'Cannot load versions list') }}
-			<h2>{{ error }}</h2>
+			<template #desc>
-		</div>
+				{{ error }}
+			</template>
+		</EmptyContent>
+
+		<!-- Versions list  -->
 		<ul>
-			<!-- Version information  -->
+			<VersionEntry v-for="version in versionsList"
-			<VersionEntry v-for="version in versionsList" :file-info="_fileInfo" :version="version" />
+				:key="version.basename"
+				:file-info="fileInfo"
+				:version="version" />
 		</ul>
 	</div>
 </template>
 
 <script>
+import { showError } from '@nextcloud/dialogs'
+import EmptyContent from '@nextcloud/vue/dist/Components/EmptyContent'
 
 import VersionEntry from '../components/VersionEntry'
-import fetchFileVersions from '../services/FileVersion'
+import { fetchFileVersions } from '../services/FileVersion'
 
 export default {
 	name: 'VersionTab',
 
 	components: {
+		EmptyContent,
 		VersionEntry,
 	},
 
@@ -50,48 +59,43 @@ export default {
 		return {
 			error: '',
 			loading: true,
-			client: null,
+			fileInfo: null,
-			_fileInfo: null,
 
 			// version object
 			versionsList: [],
 		}
 	},
-		  mounted() {
+
+	beforeMount() {
 		this.getVersions()
 	},
 
 	methods: {
-		setFileInfo(fileInfo) {
-			this._fileInfo = fileInfo
-		},
-		getFileInfo() {
-			return this._fileInfo
-		},
-		setClient(client) {
-			this._client = client
-		},
 		/**
-				 * Update current fileInfo and fetch new data
+		 * Update current fileInfo and fetch new data
-				 * @param {Object} fileInfo the current file FileInfo
+		 * @param {Object} fileInfo the current file FileInfo
-				 */
+		 */
 		async update(fileInfo) {
-			this._fileInfo = fileInfo
+			this.fileInfo = fileInfo
-			/** 	name = this._fileInfo.get('name') */
 		},
 
 		async getVersions() {
-			try {
+			this.loading = true
-				this.loading = true
-				const fetchVersions = await fetchFileVersions(this._fileInfo.get('id'))
-				this.versionsList = fetchVersions
-				console.log(fetchVersions)
-			} catch (e) {
-				console.log(error)
-			}
-			this.loading = false
-		},
 
+			try {
+				const fetchVersions = await fetchFileVersions(this.fileInfo.id)
+				this.versionsList = fetchVersions
+				console.debug(fetchVersions)
+			} catch (error) {
+				this.error = t('files_versions', 'There was an error fetching the list of versions for the file {file}', {
+					file: this.fileInfo.basename,
+				})
+				showError(this.error)
+				console.error(error)
+			} finally {
+				this.loading = false
+			}
+		},
 	},
 }
 </script>