aboutsummaryrefslogtreecommitdiffstats
path: root/apps/files_versions/src/views/VersionTab.vue
diff options
context:
space:
mode:
Diffstat (limited to 'apps/files_versions/src/views/VersionTab.vue')
-rw-r--r--apps/files_versions/src/views/VersionTab.vue89
1 files changed, 44 insertions, 45 deletions
diff --git a/apps/files_versions/src/views/VersionTab.vue b/apps/files_versions/src/views/VersionTab.vue
index b656fc75d4f..a643aef439d 100644
--- a/apps/files_versions/src/views/VersionTab.vue
+++ b/apps/files_versions/src/views/VersionTab.vue
@@ -4,65 +4,65 @@
-->
<template>
<div class="versions-tab__container">
- <VirtualScrolling :sections="sections"
+ <VirtualScrolling v-slot="{ visibleSections }"
+ :sections="sections"
:header-height="0">
- <template slot-scope="{visibleSections}">
- <ul data-files-versions-versions-list>
- <template v-if="visibleSections.length === 1">
- <Version v-for="(row) of visibleSections[0].rows"
- :key="row.items[0].mtime"
- :can-view="canView"
- :can-compare="canCompare"
- :load-preview="isActive"
- :version="row.items[0]"
- :file-info="fileInfo"
- :is-current="row.items[0].mtime === fileInfo.mtime"
- :is-first-version="row.items[0].mtime === initialVersionMtime"
- @click="openVersion"
- @compare="compareVersion"
- @restore="handleRestore"
- @label-update-request="handleLabelUpdateRequest(row.items[0])"
- @delete="handleDelete" />
- </template>
- </ul>
- </template>
+ <ul :aria-label="t('files_versions', 'File versions')" data-files-versions-versions-list>
+ <template v-if="visibleSections.length === 1">
+ <Version v-for="(row) of visibleSections[0].rows"
+ :key="row.items[0].mtime"
+ :can-view="canView"
+ :can-compare="canCompare"
+ :load-preview="isActive"
+ :version="row.items[0]"
+ :file-info="fileInfo"
+ :is-current="row.items[0].mtime === fileInfo.mtime"
+ :is-first-version="row.items[0].mtime === initialVersionMtime"
+ @click="openVersion"
+ @compare="compareVersion"
+ @restore="handleRestore"
+ @label-update-request="handleLabelUpdateRequest(row.items[0])"
+ @delete="handleDelete" />
+ </template>
+ </ul>
<NcLoadingIcon v-if="loading" slot="loader" class="files-list-viewer__loader" />
</VirtualScrolling>
- <NcModal v-if="showVersionLabelForm"
- :title="t('files_versions', 'Name this version')"
- @close="showVersionLabelForm = false">
- <VersionLabelForm :version-label="editedVersion.label" @label-update="handleLabelUpdate" />
- </NcModal>
+ <VersionLabelDialog v-if="editedVersion"
+ :open.sync="showVersionLabelForm"
+ :version-label="editedVersion.label"
+ @label-update="handleLabelUpdate" />
</div>
</template>
<script>
import path from 'path'
+import { getCurrentUser } from '@nextcloud/auth'
import { showError, showSuccess } from '@nextcloud/dialogs'
-import isMobile from '@nextcloud/vue/dist/Mixins/isMobile.js'
import { emit, subscribe, unsubscribe } from '@nextcloud/event-bus'
-import { getCurrentUser } from '@nextcloud/auth'
-import NcLoadingIcon from '@nextcloud/vue/dist/Components/NcLoadingIcon.js'
-import NcModal from '@nextcloud/vue/dist/Components/NcModal.js'
+import { useIsMobile } from '@nextcloud/vue/composables/useIsMobile'
+import NcLoadingIcon from '@nextcloud/vue/components/NcLoadingIcon'
import { fetchVersions, deleteVersion, restoreVersion, setVersionLabel } from '../utils/versions.ts'
import Version from '../components/Version.vue'
import VirtualScrolling from '../components/VirtualScrolling.vue'
-import VersionLabelForm from '../components/VersionLabelForm.vue'
+import VersionLabelDialog from '../components/VersionLabelDialog.vue'
export default {
name: 'VersionTab',
components: {
Version,
VirtualScrolling,
- VersionLabelForm,
+ VersionLabelDialog,
NcLoadingIcon,
- NcModal,
},
- mixins: [
- isMobile,
- ],
+
+ setup() {
+ return {
+ isMobile: useIsMobile(),
+ }
+ },
+
data() {
return {
fileInfo: null,
@@ -71,6 +71,7 @@ export default {
versions: [],
loading: false,
showVersionLabelForm: false,
+ editedVersion: null,
}
},
computed: {
@@ -179,7 +180,7 @@ export default {
/**
* Handle restored event from Version.vue
*
- * @param {import('../utils/versions.ts').Version} version
+ * @param {import('../utils/versions.ts').Version} version The version to restore
*/
async handleRestore(version) {
// Update local copy of fileInfo as rendering depends on it.
@@ -202,7 +203,7 @@ export default {
try {
await restoreVersion(version)
- if (version.label !== '') {
+ if (version.label) {
showSuccess(t('files_versions', `${version.label} restored`))
} else if (version.mtime === this.initialVersionMtime) {
showSuccess(t('files_versions', 'Initial version restored'))
@@ -219,7 +220,7 @@ export default {
/**
* Handle label-updated event from Version.vue
- * @param {import('../utils/versions.ts').Version} version
+ * @param {import('../utils/versions.ts').Version} version The version to update
*/
handleLabelUpdateRequest(version) {
this.showVersionLabelForm = true
@@ -228,7 +229,7 @@ export default {
/**
* Handle label-updated event from Version.vue
- * @param {string} newLabel
+ * @param {string} newLabel The new label
*/
async handleLabelUpdate(newLabel) {
const oldLabel = this.editedVersion.label
@@ -248,8 +249,7 @@ export default {
/**
* Handle deleted event from Version.vue
*
- * @param {import('../utils/versions.ts').Version} version
- * @param {string} newName
+ * @param {import('../utils/versions.ts').Version} version The version to delete
*/
async handleDelete(version) {
const index = this.versions.indexOf(version)
@@ -277,13 +277,12 @@ export default {
return
}
- // Versions previews are too small for our use case, so we override hasPreview and previewUrl
+ // Versions previews are too small for our use case, so we override previewUrl
// which makes the viewer render the original file.
// We also point to the original filename if the version is the current one.
const versions = this.versions.map(version => ({
...version,
filename: version.mtime === this.fileInfo.mtime ? path.join('files', getCurrentUser()?.uid ?? '', this.fileInfo.path, this.fileInfo.name) : version.filename,
- hasPreview: false,
previewUrl: undefined,
}))
@@ -294,7 +293,7 @@ export default {
},
compareVersion({ version }) {
- const versions = this.versions.map(version => ({ ...version, hasPreview: false, previewUrl: undefined }))
+ const versions = this.versions.map(version => ({ ...version, previewUrl: undefined }))
OCA.Viewer.compare(this.viewerFileInfo, versions.find(v => v.source === version.source))
},