Fix: Delete in Viewer removes files from state

Signed-off-by: Juergen Kellerer <[email protected]>

src/store/folders.js

@@ -82,6 +82,25 @@ const mutations = {
 			Vue.set(state.folders, fileid, [...list, ...state.folders[fileid]])
 		}
 	},
+
+	/**
+	 * Remove a fileid from all folders that contain it
+	 *
+	 * @param {object} state vuex state
+	 * @param {object} data destructuring object
+	 * @param {number} data.fileid id of this folder
+	 * @param {Array} data.files list of files to remove
+	 */
+	removeFilesFromFolder(state, { fileid, files }) {
+		const removedIds = files
+			.filter(file => file && file.fileid)
+			.map(file => `${file.fileid}`)
+
+		const folderFileIds = state.folders[fileid]
+		if (folderFileIds) {
+			Vue.set(state.folders, fileid, folderFileIds.filter(id => !removedIds.includes(`${id}`)))
+		}
+	},
 }
 
 const getters = {
@@ -130,6 +149,18 @@ const actions = {
 	addFilesToFolder(context, { fileid, files }) {
 		context.commit('addFilesToFolder', { fileid, files })
 	},
+
+	/**
+	 * Remove a fileid from all folders that contain it
+	 *
+	 * @param {object} context vuex context
+	 * @param {object} data destructuring object
+	 * @param {number} data.fileid id of this folder
+	 * @param {Array} data.files list of files to remove
+	 */
+	removeFilesFromFolder(context, { fileid, files }) {
+		context.commit('removeFilesFromFolder', { fileid, files })
+	},
 }
 
 export default { state, mutations, getters, actions }

src/views/Folders.vue

@@ -65,6 +65,7 @@
 import { mapGetters } from 'vuex'
 import { UploadPicker } from '@nextcloud/upload'
 import { NcEmptyContent } from '@nextcloud/vue'
+import { subscribe, unsubscribe } from '@nextcloud/event-bus'
 import VirtualGrid from 'vue-virtual-grid'
 
 import FileLegacy from '../components/FileLegacy.vue'
@@ -214,6 +215,14 @@ export default {
 		this.fetchFolderContent()
 	},
 
+	created() {
+		subscribe('files:file:deleted', this.onDelete) // listen for delete in Viewer.vue
+	},
+
+	beforeDestroy() {
+		unsubscribe('files:file:deleted', this.onDelete)
+	},
+
 	methods: {
 		onRefresh() {
 			this.fetchFolderContent()
@@ -265,6 +274,12 @@ export default {
 			}
 		},
 
+		onDelete(file) {
+			if (file && file.fileid) {
+				this.$store.dispatch('removeFilesFromFolder', { fileid: this.folderId, files: [file] })
+			}
+		},
+
 		/**
 		 * Fetch file Info and add them into the store
 		 *

src/views/Timeline.vue

@@ -133,6 +133,7 @@ import PlusBoxMultiple from 'vue-material-design-icons/PlusBoxMultiple'
 import Download from 'vue-material-design-icons/Download'
 
 import { NcModal, NcActions, NcActionButton, NcButton, NcEmptyContent, isMobile } from '@nextcloud/vue'
+import { subscribe, unsubscribe } from '@nextcloud/event-bus'
 import moment from '@nextcloud/moment'
 
 import { allMimes } from '../services/AllowedMimes.js'
@@ -231,6 +232,14 @@ export default {
 		]),
 	},
 
+	created() {
+		subscribe('files:file:deleted', this.onDeleteFile) // listen for delete in Viewer.vue
+	},
+
+	beforeDestroy() {
+		unsubscribe('files:file:deleted', this.onDeleteFile)
+	},
+
 	methods: {
 		...mapActions(['deleteFiles', 'addFilesToAlbum']),
 
@@ -262,12 +271,23 @@ export default {
 		},
 
 		async deleteSelection() {
-			// Need to store the file ids so it is not changed before the deleteFiles call.
-			const fileIds = this.selectedFileIds
-			this.onUncheckFiles(fileIds)
-			this.fetchedFileIds = this.fetchedFileIds.filter(fileid => !fileIds.includes(fileid))
+			const fileIds = [...this.selectedFileIds]
+			this.removeFromFetchedFiles(fileIds)
 			await this.deleteFiles(fileIds)
 		},
+
+		onDeleteFile(file) {
+			const fileId = (file && file.fileid && file.fileid.toString())
+			if (fileId) {
+				this.removeFromFetchedFiles([fileId])
+				this.$store.commit('deleteFile', fileId)
+			}
+		},
+
+		removeFromFetchedFiles(fileIds) {
+			this.onUncheckFiles(fileIds)
+			this.fetchedFileIds = this.fetchedFileIds.filter(fileId => !fileIds.includes(fileId))
+		},
 	},
 }
 </script>