Merge pull request #44024 from nextcloud/backport/43665/stable28

[stable28] feat: Restore unified search filtering in files view 

1 files changed, 33 insertions, 11 deletions

diff --git a/apps/files/src/views/FilesList.vue b/apps/files/src/views/FilesList.vue
index 641dcf78c54..d6e1e26a4e8 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>