Move modal outside of the Version component.

This is for accessibility, to have the NcListItem (<li>) as a direct child of the <ul>

Signed-off-by: Louis Chemineau <louis@chmn.me>

1 files changed, 72 insertions, 45 deletions

diff --git a/apps/files_versions/src/views/VersionTab.vue b/apps/files_versions/src/views/VersionTab.vue
index c039e4a6c3a..745b9d0f58e 100644
--- a/apps/files_versions/src/views/VersionTab.vue
+++ b/apps/files_versions/src/views/VersionTab.vue
@@ -16,30 +16,37 @@
  - along with this program. If not, see <http://www.gnu.org/licenses/>.
  -->
 <template>
-	<VirtualScrolling :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="handleLabelUpdate"
-						@delete="handleDelete" />
-				</template>
-			</ul>
-		</template>
-		<NcLoadingIcon v-if="loading" slot="loader" class="files-list-viewer__loader" />
-	</VirtualScrolling>
+	<div class="versions-tab__container">
+		<VirtualScrolling :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>
+			<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>
+	</div>
 </template>
 
 <script>
@@ -49,18 +56,22 @@ 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'
+import NcLoadingIcon from '@nextcloud/vue/dist/Components/NcLoadingIcon.js'
+import NcModal from '@nextcloud/vue/dist/Components/NcModal.js'
 
-import { fetchVersions, deleteVersion, restoreVersion, setVersionLabel } from '../utils/versions.js'
+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'
 
 export default {
 	name: 'VersionTab',
 	components: {
 		Version,
 		VirtualScrolling,
+		VersionLabelForm,
 		NcLoadingIcon,
+		NcModal,
 	},
 	mixins: [
 		isMobile,
@@ -69,17 +80,12 @@ export default {
 		return {
 			fileInfo: null,
 			isActive: false,
-			/** @type {import('../utils/versions.js').Version[]} */
+			/** @type {import('../utils/versions.ts').Version[]} */
 			versions: [],
 			loading: false,
+			showVersionLabelForm: false,
 		}
 	},
-	mounted() {
-		subscribe('files_versions:restore:restored', this.fetchVersions)
-	},
-	beforeUnmount() {
-		unsubscribe('files_versions:restore:restored', this.fetchVersions)
-	},
 	computed: {
 		sections() {
 			const rows = this.orderedVersions.map(version => ({ key: version.mtime, height: 68, sectionKey: 'versions', items: [version] }))
@@ -90,7 +96,7 @@ export default {
 		 * Order versions by mtime.
 		 * Put the current version at the top.
 		 *
-		 * @return {import('../utils/versions.js').Version[]}
+		 * @return {import('../utils/versions.ts').Version[]}
 		 */
 		orderedVersions() {
 			return [...this.versions].sort((a, b) => {
@@ -146,6 +152,12 @@ export default {
 			return !this.isMobile
 		},
 	},
+	mounted() {
+		subscribe('files_versions:restore:restored', this.fetchVersions)
+	},
+	beforeUnmount() {
+		unsubscribe('files_versions:restore:restored', this.fetchVersions)
+	},
 	methods: {
 		/**
 		 * Update current fileInfo and fetch new data
@@ -180,7 +192,7 @@ export default {
 		/**
 		 * Handle restored event from Version.vue
 		 *
-		 * @param {import('../utils/versions.js').Version} version
+		 * @param {import('../utils/versions.ts').Version} version
 		 */
 		async handleRestore(version) {
 			// Update local copy of fileInfo as rendering depends on it.
@@ -220,26 +232,36 @@ export default {
 
 		/**
 		 * Handle label-updated event from Version.vue
-		 *
-		 * @param {import('../utils/versions.js').Version} version
-		 * @param {string} newName
+		 * @param {import('../utils/versions.ts').Version} version
+		 */
+		handleLabelUpdateRequest(version) {
+			this.showVersionLabelForm = true
+			this.editedVersion = version
+		},
+
+		/**
+		 * Handle label-updated event from Version.vue
+		 * @param {string} newLabel
 		 */
-		async handleLabelUpdate(version, newName) {
-			const oldLabel = version.label
-			version.label = newName
+		async handleLabelUpdate(newLabel) {
+			const oldLabel = this.editedVersion.label
+			this.editedVersion.label = newLabel
+			this.showVersionLabelForm = false
 
 			try {
-				await setVersionLabel(version, newName)
+				await setVersionLabel(this.editedVersion, newLabel)
+				this.editedVersion = null
 			} catch (exception) {
-				version.label = oldLabel
-				showError(t('files_versions', 'Could not set version name'))
+				this.editedVersion.label = oldLabel
+				showError(this.t('files_versions', 'Could not set version label'))
+				logger.error('Could not set version label', { exception })
 			}
 		},
 
 		/**
 		 * Handle deleted event from Version.vue
 		 *
-		 * @param {import('../utils/versions.js').Version} version
+		 * @param {import('../utils/versions.ts').Version} version
 		 * @param {string} newName
 		 */
 		async handleDelete(version) {
@@ -292,3 +314,8 @@ export default {
 	},
 }
 </script>
+<style lang="scss">
+.versions-tab__container {
+	height: 100%;
+}
+</style>