Merge pull request #12488 from nextcloud/backport/12467/stable29

[stable29] fix(viewer): fix creation of file from template

Author: Antreesy

src/components/MessagesList/MessagesGroup/Message/MessagePart/FilePreview.vue

@@ -273,12 +273,11 @@ export default {
 	emits: ['remove-file'],
 
 	setup() {
-		const { openViewer, generateViewerObject } = useViewer()
+		const { openViewer } = useViewer('talk')
 		const sharedItemsStore = useSharedItemsStore()
 
 		return {
 			openViewer,
-			generateViewerObject,
 			sharedItemsStore,
 		}
 	},
@@ -602,11 +601,9 @@ export default {
 			event.stopPropagation()
 			event.preventDefault()
 
-			const fileInfo = this.generateViewerObject(this)
-
 			if (this.itemType === SHARED_ITEM.TYPES.MEDIA) {
 				const getRevertedList = (items) => Object.values(items).reverse()
-					.map(item => this.generateViewerObject(item.messageParameters.file))
+					.map(item => item.messageParameters.file)
 
 				// Get available media files from store and put them to the list to navigate through slides
 				const mediaFiles = this.sharedItemsStore.sharedItems(this.token).media
@@ -616,9 +613,9 @@ export default {
 					return getRevertedList(messages)
 				}
 
-				this.openViewer(this.internalAbsolutePath, list, fileInfo, loadMore)
+				this.openViewer(this.internalAbsolutePath, list, this, loadMore)
 			} else {
-				this.openViewer(this.internalAbsolutePath, [fileInfo], fileInfo)
+				this.openViewer(this.internalAbsolutePath, [this], this)
 
 			}
 		},

src/components/NewMessage/NewMessageNewFileDialog.vue

@@ -58,7 +58,11 @@
 
 				<div class="new-text-file__buttons">
 					<NcButton type="primary"
+						:disabled="loading"
 						@click="handleCreateNewFile">
+						<template v-if="loading" #icon>
+							<NcLoadingIcon />
+						</template>
 						{{ t('spreed', 'Create file') }}
 					</NcButton>
 				</div>
@@ -71,6 +75,7 @@
 import { showError } from '@nextcloud/dialogs'
 
 import NcButton from '@nextcloud/vue/dist/Components/NcButton.js'
+import NcLoadingIcon from '@nextcloud/vue/dist/Components/NcLoadingIcon.js'
 import NcModal from '@nextcloud/vue/dist/Components/NcModal.js'
 import NcTextField from '@nextcloud/vue/dist/Components/NcTextField.js'
 
@@ -84,9 +89,10 @@ export default {
 
 	components: {
 		NcButton,
-		NewMessageTemplatePreview,
+		NcLoadingIcon,
 		NcModal,
 		NcTextField,
+		NewMessageTemplatePreview,
 	},
 
 	props: {
@@ -109,7 +115,7 @@ export default {
 	emits: ['dismiss'],
 
 	setup() {
-		const { openViewer } = useViewer()
+		const { openViewer } = useViewer('files')
 		return { openViewer }
 	},
 
@@ -118,6 +124,7 @@ export default {
 			newFileTitle: t('spreed', 'New file'),
 			newFileError: '',
 			checked: -1,
+			loading: false,
 		}
 	},
 
@@ -201,6 +208,7 @@ export default {
 
 		// Create text file and share it to a conversation
 		async handleCreateNewFile() {
+			this.loading = true
 			this.newFileError = ''
 			let filePath = this.$store.getters.getAttachmentFolder() + '/' + this.newFileTitle.replace('/', '')
 
@@ -226,10 +234,12 @@ export default {
 				} else {
 					showError(t('spreed', 'Error while creating file'))
 				}
+				this.loading = false
 				return
 			}
 
 			await shareFile(filePath, this.token, '', '')
+			this.loading = false
 
 			this.openViewer(filePath, [fileData], fileData)
 

src/composables/useViewer.js

@@ -105,9 +105,10 @@ const isViewerOpen = ref(false)
 /**
  * Composable with OCA.Viewer helpers
  *
+ * @param {'files'|'talk'} fileAPI whether to treat file object as it comes from Files or Talk
  * @return {{ openViewer: OpenViewer, isViewerOpen: import('vue').Ref<boolean> }}
  */
-export function useViewer() {
+export function useViewer(fileAPI) {
 	const store = useStore()
 	const isInCall = useIsInCall()
 	const isFullscreen = computed(() => store.getters.isFullscreen())
@@ -118,15 +119,28 @@ export function useViewer() {
 		}
 	})
 
-	const generateViewerObject = (file) => ({
-		fileid: parseInt(file.id, 10),
-		filename: generateAbsolutePath(file.path),
-		basename: file.name,
-		mime: file.mimetype,
-		hasPreview: file.previewAvailable === 'yes' || file['preview-available'] === 'yes',
-		etag: file.etag,
-		permissions: generatePermissions(file.permissions),
-	})
+	/**
+	 * Map object to be used by Viewer
+	 * @param {object} file file object (from Files API or Talk API)
+	 */
+	function generateViewerObject(file) {
+		switch (fileAPI) {
+		case 'files': return {
+			...file,
+			permissions: generatePermissions(file.permissions), // Viewer expects a String instead of Bitmask
+		}
+		case 'talk':
+		default: return {
+			fileid: parseInt(file.id, 10),
+			filename: generateAbsolutePath(file.path),
+			basename: file.name,
+			mime: file.mimetype,
+			hasPreview: (file.previewAvailable === 'yes' || file['preview-available'] === 'yes'),
+			etag: file.etag,
+			permissions: generatePermissions(file.permissions), // Viewer expects a String instead of Bitmask
+		}
+		}
+	}
 
 	/**
 	 * @type {OpenViewer}
@@ -147,8 +161,8 @@ export function useViewer() {
 
 		OCA.Viewer.open({
 			path,
-			list,
-			fileInfo,
+			list: list.map(generateViewerObject),
+			fileInfo: generateViewerObject(fileInfo),
 			onClose: () => {
 				isViewerOpen.value = false
 				store.dispatch('setCallViewMode', { isViewerOverlay: false })
@@ -170,6 +184,5 @@ export function useViewer() {
 	return {
 		isViewerOpen,
 		openViewer,
-		generateViewerObject,
 	}
 }