VersionEntry Updated
This commit is contained in:
parent
ac5e55673a
commit
aeddbb6869
|
@ -31,6 +31,7 @@
|
|||
</div>
|
||||
<Actions v-if="$slots['default']" menu-align="right" class="sharing-entry__actions">
|
||||
<slot />
|
||||
v
|
||||
</Actions>
|
||||
</li>
|
||||
</template>
|
||||
|
|
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
|
@ -19,69 +19,100 @@
|
|||
-->
|
||||
|
||||
<template>
|
||||
<ListItemIcon class="version-entry"
|
||||
icon="icon-text"
|
||||
title="10 days ago"
|
||||
subtitle="< 1KB">
|
||||
<Actions>
|
||||
<ActionButton icon="icon-edit" @click="alert('Edit')">
|
||||
{{ version.timestamp }}Restore
|
||||
</ActionButton>
|
||||
<ActionButton icon="icon-delete" @click="alert('Delete')">
|
||||
Download
|
||||
</ActionButton>
|
||||
</Actions>
|
||||
</ListItemIcon>
|
||||
<ul>
|
||||
<ListItemIcon
|
||||
:title="version.lastmod"
|
||||
:subtitle="version.size">
|
||||
<Actions
|
||||
menu-align="right"
|
||||
class="version-entry__actions">
|
||||
<ActionButton icon="icon-history" @click="alert('Edit')">
|
||||
{{ t('files_versions','Restore') }}
|
||||
</ActionButton>
|
||||
</Actions>
|
||||
</ListItemIcon>
|
||||
</ul>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import Avatar from '@nextcloud/vue/dist/Components/Avatar'
|
||||
import Actions from '@nextcloud/vue/dist/Components/Actions'
|
||||
import Tooltip from '@nextcloud/vue/dist/Directives/Tooltip'
|
||||
import ListItemIcon from '@nextcloud/vue/dist/Components/ListItemIcon'
|
||||
import moment from '@nextcloud/moment'
|
||||
|
||||
export default {
|
||||
name: 'VersionEntry',
|
||||
|
||||
components: {
|
||||
Actions,
|
||||
ListItemIcon
|
||||
|
||||
ListItemIcon,
|
||||
Avatar,
|
||||
},
|
||||
|
||||
directives: {
|
||||
Tooltip,
|
||||
},
|
||||
props: {
|
||||
versions: {
|
||||
|
||||
props: {
|
||||
fileInfo: {
|
||||
type: Object,
|
||||
required: true,
|
||||
},
|
||||
version: {
|
||||
type: Object,
|
||||
required: true,
|
||||
},
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
iconUrl,
|
||||
version: {},
|
||||
moment,
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
iconUrl() {
|
||||
return OC.MimeType.getIconUrl(this.MimeType)
|
||||
console.log(iconUrl)
|
||||
},
|
||||
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()
|
||||
}
|
||||
},
|
||||
},
|
||||
|
||||
}
|
||||
|
||||
</script>
|
||||
|
||||
<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;
|
||||
<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);
|
||||
}
|
||||
}
|
||||
p {
|
||||
color: var(--color-text-maxcontrast);
|
||||
&__actions {
|
||||
margin-left: auto !important;
|
||||
}
|
||||
}
|
||||
&__actions {
|
||||
margin-left: auto !important;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
</style>
|
||||
|
|
|
@ -0,0 +1,116 @@
|
|||
<!--
|
||||
- @copyright Copyright (c) 2019 John Molakvoæ <skjnldsv@protonmail.com>
|
||||
-
|
||||
- @author
|
||||
-
|
||||
- @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>
|
||||
<li class="version-entry">
|
||||
<Avatar class="version-entry__avatar"
|
||||
:url="iconUrl" />
|
||||
<ListItemIcon v-for="version in versions"
|
||||
class="version-entry"
|
||||
:title="version"
|
||||
subtitle="< 1KB">
|
||||
<Actions
|
||||
menu-align="right"
|
||||
class="version-entry__actions">
|
||||
<ActionButton icon="icon-edit" @click="alert('Edit')">
|
||||
{{ t('files_versions','Restore') }}
|
||||
</ActionButton>
|
||||
</Actions>
|
||||
</ListItemIcon>
|
||||
</li>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import Avatar from '@nextcloud/vue/dist/Components/Avatar'
|
||||
import Actions from '@nextcloud/vue/dist/Components/Actions'
|
||||
import ActionButton from '@nextcloud/vue/dist/Components/ActionButton'
|
||||
import Tooltip from '@nextcloud/vue/dist/Directives/Tooltip'
|
||||
import ListItemIcon from '@nextcloud/vue/dist/Components/ListItemIcon'
|
||||
|
||||
import SharesMixin from '../mixins/SharesMixin'
|
||||
|
||||
export default {
|
||||
name: 'VersionListing',
|
||||
|
||||
components: {
|
||||
Actions,
|
||||
ActionButton,
|
||||
ActionCheckbox,
|
||||
ActionInput,
|
||||
ActionTextEditable,
|
||||
Avatar,
|
||||
ListItemIcon,
|
||||
},
|
||||
|
||||
directives: {
|
||||
Tooltip,
|
||||
},
|
||||
|
||||
props: {
|
||||
_fileInfo: {
|
||||
type: Object,
|
||||
required: true,
|
||||
},
|
||||
versions: {
|
||||
type: Object,
|
||||
required: true,
|
||||
},
|
||||
},
|
||||
|
||||
data() {
|
||||
return {
|
||||
|
||||
}
|
||||
},
|
||||
|
||||
computed: {
|
||||
iconUrl() {
|
||||
return OC.MimeType.getIconUrl(this.MimeType)
|
||||
console.log(iconUrl)
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.version-entry {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
height: 44px;
|
||||
&__desc {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
padding: 8px;
|
||||
line-height: 1.2em;
|
||||
p {
|
||||
color: var(--color-text-maxcontrast);
|
||||
}
|
||||
&-unique {
|
||||
color: var(--color-text-maxcontrast);
|
||||
}
|
||||
}
|
||||
&__actions {
|
||||
margin-left: auto;
|
||||
}
|
||||
}
|
||||
</style>
|
|
@ -20,10 +20,10 @@
|
|||
*
|
||||
*/
|
||||
|
||||
import './versionmodel';
|
||||
import './versioncollection';
|
||||
import './versionstabview';
|
||||
import './filesplugin';
|
||||
import './css/versions.css';
|
||||
import './versionmodel'
|
||||
import './versioncollection'
|
||||
import './versionstabview'
|
||||
import './filesplugin'
|
||||
import './css/versions.css'
|
||||
|
||||
window.OCA.Versions = OCA.Versions;
|
||||
window.OCA.Versions = OCA.Versions
|
||||
|
|
|
@ -21,14 +21,12 @@
|
|||
|
||||
import client from './DavClient'
|
||||
import { genFileInfo } from '../utils/fileUtils'
|
||||
import { getCurrentUser } from '@nextcloud/auth'
|
||||
|
||||
let FileVersion = async function(fileId) {
|
||||
|
||||
const FileVersion = async function(fileId) {
|
||||
|
||||
// init params
|
||||
const VersionsUrl = '/versions/' + fileId
|
||||
const response = await client.getDirectoryContents(VersionsUrl,{
|
||||
const response = await client.getDirectoryContents(VersionsUrl, {
|
||||
data: `<?xml version="1.0"?>
|
||||
<d:propfind xmlns:d="DAV:" xmlns:oc="http://owncloud.org/ns">
|
||||
<d:prop>
|
||||
|
@ -39,11 +37,12 @@ let FileVersion = async function(fileId) {
|
|||
</d:propfind>`,
|
||||
details: true,
|
||||
})
|
||||
console.log(response);
|
||||
|
||||
/** return response.data.map(FileVersion); */
|
||||
|
||||
return response.data
|
||||
};
|
||||
return response.data.map(genFileInfo)
|
||||
|
||||
}
|
||||
/**
|
||||
* Retrieve the files list
|
||||
*
|
||||
|
@ -51,4 +50,4 @@ let FileVersion = async function(fileId) {
|
|||
* @param {Object} [options] optional options for axios
|
||||
* @returns {Array} the file list
|
||||
*/
|
||||
export default FileVersion;
|
||||
export default FileVersion
|
||||
|
|
|
@ -27,74 +27,71 @@
|
|||
<div class="icon icon-error" />
|
||||
<h2>{{ error }}</h2>
|
||||
</div>
|
||||
<template>
|
||||
<!-- Version information -->
|
||||
<!-- <VersionEntry :versions="versionsList" /> -->
|
||||
{{versionsList}}
|
||||
</template>
|
||||
</div>
|
||||
</template>
|
||||
<ul>
|
||||
<!-- Version information -->
|
||||
<VersionEntry v-for="version in versionsList" :file-info="_fileInfo" :version="version" />
|
||||
</ul>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
<script>
|
||||
|
||||
import { ListItemIcon } from '@nextcloud/vue'
|
||||
import VersionEntry from '../components/VersionEntry'
|
||||
import fetchFileVersions from "../services/FileVersion";
|
||||
import VersionEntry from '../components/VersionEntry'
|
||||
import fetchFileVersions from '../services/FileVersion'
|
||||
|
||||
export default {
|
||||
name: 'VersionTab',
|
||||
export default {
|
||||
name: 'VersionTab',
|
||||
|
||||
components: {
|
||||
ListItemIcon,
|
||||
VersionEntry,
|
||||
},
|
||||
components: {
|
||||
VersionEntry,
|
||||
},
|
||||
|
||||
data() {
|
||||
return {
|
||||
error: '',
|
||||
loading: true,
|
||||
client: null,
|
||||
_fileInfo: null,
|
||||
data() {
|
||||
return {
|
||||
error: '',
|
||||
loading: true,
|
||||
client: null,
|
||||
_fileInfo: null,
|
||||
|
||||
// version object
|
||||
versionsList: [],
|
||||
}
|
||||
},
|
||||
|
||||
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') */
|
||||
},
|
||||
|
||||
async getVersions() {
|
||||
try {
|
||||
this.loading = true
|
||||
const fetchVersions = await fetchFileVersions(this._fileInfo.get('id'));
|
||||
this.versionsList = fetchVersions;
|
||||
}
|
||||
catch(e){
|
||||
console.log(error);
|
||||
}
|
||||
this.loading = false
|
||||
}
|
||||
|
||||
},
|
||||
mounted() {
|
||||
// version object
|
||||
versionsList: [],
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.getVersions()
|
||||
}
|
||||
}
|
||||
</script>
|
||||
},
|
||||
|
||||
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') */
|
||||
},
|
||||
|
||||
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
|
||||
},
|
||||
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
|
Loading…
Reference in New Issue