fixup! VersionEntry Updated
Signed-off-by: John Molakvoæ (skjnldsv) <skjnldsv@protonmail.com>
This commit is contained in:
John Molakvoæ (skjnldsv)
parent
aeddbb6869
commit
1ebb04dc53
|
|
@ -19,35 +19,45 @@
|
|||
-->
|
||||
|
||||
<template>
|
||||
<ul>
|
||||
<li>
|
||||
<ListItemIcon
|
||||
:title="version.lastmod"
|
||||
:subtitle="version.size">
|
||||
<Actions
|
||||
menu-align="right"
|
||||
class="version-entry__actions">
|
||||
<ActionButton icon="icon-history" @click="alert('Edit')">
|
||||
v-if="!isLatestChange"
|
||||
:title="relativeDate"
|
||||
:subtitle="formattedSize"
|
||||
:url="iconUrl"
|
||||
class="version-entry">
|
||||
<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,26 +74,44 @@ export default {
|
|||
required: true,
|
||||
},
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
iconUrl,
|
||||
version: {},
|
||||
moment,
|
||||
}
|
||||
},
|
||||
|
||||
computed: {
|
||||
iconUrl() {
|
||||
return OC.MimeType.getIconUrl(this.MimeType)
|
||||
console.log(iconUrl)
|
||||
// Does the current user have permissions to revert this file
|
||||
canRevert() {
|
||||
// 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) => {
|
||||
const diff = moment(this.$root.time).diff(moment(timestamp))
|
||||
if (diff >= 0 && diff < 45000) {
|
||||
return t('core', 'seconds ago')
|
||||
}
|
||||
return moment(timestamp).fromNow()
|
||||
}
|
||||
return moment(this.version.lastmod).fromNow()
|
||||
},
|
||||
},
|
||||
|
||||
methods: {
|
||||
restoreVersion() {
|
||||
// TODO: implement restore request and loading
|
||||
},
|
||||
},
|
||||
}
|
||||
|
|
@ -92,27 +120,9 @@ export default {
|
|||
|
||||
<style lang="scss" scoped>
|
||||
.version-entry {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
min-height: 44px;
|
||||
&__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;
|
||||
// Remove avatar border-radius around file type icon
|
||||
::v-deep .avatardiv img {
|
||||
border-radius: 0;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -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)
|
||||
},
|
||||
|
|
|
|||
|
|
@ -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,7 +24,7 @@
|
|||
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
|
||||
|
|
@ -39,15 +41,5 @@ const FileVersion = async function(fileId) {
|
|||
})
|
||||
|
||||
/** 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
|
||||
|
|
|
|||
|
|
@ -23,26 +23,35 @@
|
|||
<template>
|
||||
<div :class="{ 'icon-loading': loading }">
|
||||
<!-- error message -->
|
||||
<div v-if="error" class="emptycontent">
|
||||
<div class="icon icon-error" />
|
||||
<h2>{{ error }}</h2>
|
||||
</div>
|
||||
<EmptyContent v-if="error" icon="icon-error">
|
||||
{{ t('files_versions', 'Cannot load versions list') }}
|
||||
<template #desc>
|
||||
{{ error }}
|
||||
</template>
|
||||
</EmptyContent>
|
||||
|
||||
<!-- Versions list -->
|
||||
<ul>
|
||||
<!-- Version information -->
|
||||
<VersionEntry v-for="version in versionsList" :file-info="_fileInfo" :version="version" />
|
||||
<VersionEntry v-for="version in versionsList"
|
||||
: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
|
||||
* @param {Object} fileInfo the current file FileInfo
|
||||
*/
|
||||
async update(fileInfo) {
|
||||
this._fileInfo = fileInfo
|
||||
/** name = this._fileInfo.get('name') */
|
||||
this.fileInfo = fileInfo
|
||||
},
|
||||
|
||||
async getVersions() {
|
||||
try {
|
||||
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>
|
||||
|
|
|
|||
Loading…
Reference in New Issue