diff options
Diffstat (limited to 'apps/files_versions/src/views/VersionTab.vue')
-rw-r--r-- | apps/files_versions/src/views/VersionTab.vue | 89 |
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)) }, |