feat(files): restore unified search filtering in files view

The unified search emits, search events that other apps can subscribe to and
 react however they want to search queries, following
 4b55594f55ce4146ed93c50f71e6204a57d29612 and prior updates to migrate the Files
app ui to vue.js that feature was broken.

This commit reintroduces the feature using the current `FileList` implementation.

This commit also adds some logging to an empty exception handler.

Resolve : https://github.com/nextcloud/server/issues/43365

Signed-off-by: fenn-cs <fenn25.fn@gmail.com>

2 files changed, 33 insertions, 53 deletions

diff --git a/apps/files/src/legacy/filelistSearch.js b/apps/files/src/legacy/filelistSearch.js
deleted file mode 100644
index 9512f47eccc..00000000000
--- a/apps/files/src/legacy/filelistSearch.js
+++ /dev/null
@@ -1,42 +0,0 @@
-/*
- * @copyright Copyright (c) 2021 Julius Härtl <jus@bitgrid.net>
- *
- * @author Julius Härtl <jus@bitgrid.net>
- *
- * @license AGPL-3.0-or-later
- *
- * This program is free software: you can redistribute it and/or modify
- * it under the terms of the GNU Affero General Public License as
- * published by the Free Software Foundation, either version 3 of the
- * License, or (at your option) any later version.
- *
- * This program is distributed in the hope that it will be useful,
- * but WITHOUT ANY WARRANTY; without even the implied warranty of
- * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
- * GNU Affero General Public License for more details.
- *
- * You should have received a copy of the GNU Affero General Public License
- * along with this program. If not, see <http://www.gnu.org/licenses/>.
- *
- */
-
-import { subscribe } from '@nextcloud/event-bus'
-
-(function() {
-
-	const FilesPlugin = {
-		attach(fileList) {
-			subscribe('nextcloud:unified-search.search', ({ query }) => {
-				fileList.setFilter(query)
-			})
-			subscribe('nextcloud:unified-search.reset', () => {
-				this.query = null
-				fileList.setFilter('')
-			})
-
-		},
-	}
-
-	window.OC.Plugins.register('OCA.Files.FileList', FilesPlugin)
-
-})()
diff --git a/apps/files/src/views/FilesList.vue b/apps/files/src/views/FilesList.vue
index 79f8a3ee252..bd19fb146a8 100644
--- a/apps/files/src/views/FilesList.vue
+++ b/apps/files/src/views/FilesList.vue
@@ -80,8 +80,7 @@
 		</div>
 
 		<!-- Drag and drop notice -->
-		<DragAndDropNotice v-if="!loading && canUpload"
-			:current-folder="currentFolder" />
+		<DragAndDropNotice v-if="!loading && canUpload" :current-folder="currentFolder" />
 
 		<!-- Initial loading -->
 		<NcLoadingIcon v-if="loading && !isRefreshing"
@@ -159,6 +158,7 @@ import filesListWidthMixin from '../mixins/filesListWidth.ts'
 import filesSortingMixin from '../mixins/filesSorting.ts'
 import logger from '../logger.js'
 import DragAndDropNotice from '../components/DragAndDropNotice.vue'
+import debounce from 'debounce'
 
 const isSharingEnabled = (getCapabilities() as { files_sharing?: boolean })?.files_sharing !== undefined
 
@@ -210,6 +210,7 @@ export default defineComponent({
 
 	data() {
 		return {
+			filterText: '',
 			loading: true,
 			promise: null,
 			Type,
@@ -240,7 +241,7 @@ export default defineComponent({
 		/**
 		 * The current folder.
 		 */
-		currentFolder(): Folder|undefined {
+		currentFolder(): Folder | undefined {
 			if (!this.currentView?.id) {
 				return
 			}
@@ -294,6 +295,15 @@ export default defineComponent({
 				return []
 			}
 
+			let filteredDirContent = [...this.dirContents]
+			// Filter based on the filterText obtained from nextcloud:unified-search.search event.
+			if (this.filterText) {
+				filteredDirContent = filteredDirContent.filter(node => {
+					return node.attributes.basename.toLowerCase().includes(this.filterText.toLowerCase())
+				})
+				console.debug('Files view filtered', filteredDirContent)
+			}
+
 			const customColumn = (this.currentView?.columns || [])
 				.find(column => column.id === this.sortingMode)
 
@@ -304,7 +314,7 @@ export default defineComponent({
 			}
 
 			return orderBy(
-				[...this.dirContents],
+				filteredDirContent,
 				...this.sortingParameters,
 			)
 		},
@@ -348,7 +358,7 @@ export default defineComponent({
 			return { ...this.$route, query: { dir } }
 		},
 
-		shareAttributes(): number[]|undefined {
+		shareAttributes(): number[] | undefined {
 			if (!this.currentFolder?.attributes?.['share-types']) {
 				return undefined
 			}
@@ -364,7 +374,7 @@ export default defineComponent({
 			}
 			return this.t('files', 'Shared')
 		},
-		shareButtonType(): Type|null {
+		shareButtonType(): Type | null {
 			if (!this.shareAttributes) {
 				return null
 			}
@@ -440,6 +450,8 @@ export default defineComponent({
 	mounted() {
 		this.fetchContent()
 		subscribe('files:node:updated', this.onUpdatedNode)
+		subscribe('nextcloud:unified-search.search', this.onSearch)
+		subscribe('nextcloud:unified-search.reset', this.onSearch)
 	},
 
 	unmounted() {
@@ -556,7 +568,9 @@ export default defineComponent({
 					showError(this.t('files', 'Error during upload: {message}', { message }))
 					return
 				}
-			} catch (error) {}
+			} catch (error) {
+				logger.error('Error while parsing', { error })
+			}
 
 			// Finally, check the status code if we have one
 			if (status !== 0) {
@@ -577,7 +591,15 @@ export default defineComponent({
 				this.fetchContent()
 			}
 		},
-
+		/**
+		 * Handle search event from unified search.
+		 *
+		 * @param searchEvent is event object.
+		 */
+		onSearch: debounce(function(searchEvent) {
+			console.debug('Files app handling search event from unified search...', searchEvent)
+			this.filterText = searchEvent.query
+		}, 500),
 		openSharingSidebar() {
 			if (!this.currentFolder) {
 				logger.debug('No current folder found for opening sharing sidebar')
@@ -589,7 +611,6 @@ export default defineComponent({
 			}
 			sidebarAction.exec(this.currentFolder, this.currentView, this.currentFolder.path)
 		},
-
 		toggleGridView() {
 			this.userConfigStore.update('grid_view', !this.userConfig.grid_view)
 		},
@@ -622,7 +643,8 @@ $navigationToggleSize: 50px;
 		// Align with the navigation toggle icon
 		margin: $margin $margin $margin $navigationToggleSize;
 		max-width: 100%;
-		> * {
+
+		>* {
 			// Do not grow or shrink (horizontally)
 			// Only the breadcrumbs shrinks
 			flex: 0 0;
@@ -630,6 +652,7 @@ $navigationToggleSize: 50px;
 
 		&-share-button {
 			color: var(--color-text-maxcontrast) !important;
+
 			&--shared {
 				color: var(--color-main-text) !important;
 			}
@@ -646,5 +669,4 @@ $navigationToggleSize: 50px;
 		margin: auto;
 	}
 }
-
 </style>