feat: 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
 4b55594 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.

Resolve : #43365

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

apps/files/src/init.ts

@@ -41,7 +41,6 @@ import registerPersonalFilesView from './views/personal-files'
 import registerFilesView from './views/files'
 import registerPreviewServiceWorker from './services/ServiceWorker.js'
 
-
 import { initLivePhotos } from './services/LivePhotos'
 
 // Register file actions

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,16 @@ export default defineComponent({
 				return []
 			}
 
+			let filteredDirContent = [...this.dirContents]
+			// Filter based on the provided filterText
+			if (this.filterText) {
+				filteredDirContent = filteredDirContent.filter(content => {
+					// Adjust this condition based on your specific filtering criteria
+					return content.attributes[this.sortingMode].toLowerCase().includes(this.filterText.toLowerCase())
+				})
+				console.debug('Files view filtered', filteredDirContent)
+			}
+
 			const customColumn = (this.currentView?.columns || [])
 				.find(column => column.id === this.sortingMode)
 
@@ -304,7 +315,7 @@ export default defineComponent({
 			}
 
 			return orderBy(
-				[...this.dirContents],
+				filteredDirContent,
 				...this.sortingParameters,
 			)
 		},
@@ -348,7 +359,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 +375,7 @@ export default defineComponent({
 			}
 			return this.t('files', 'Shared')
 		},
-		shareButtonType(): Type|null {
+		shareButtonType(): Type | null {
 			if (!this.shareAttributes) {
 				return null
 			}
@@ -440,6 +451,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 +569,7 @@ export default defineComponent({
 					showError(this.t('files', 'Error during upload: {message}', { message }))
 					return
 				}
-			} catch (error) {}
+			} catch (error) { }
 
 			// Finally, check the status code if we have one
 			if (status !== 0) {
@@ -577,7 +590,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 +610,6 @@ export default defineComponent({
 			}
 			sidebarAction.exec(this.currentFolder, this.currentView, this.currentFolder.path)
 		},
-
 		toggleGridView() {
 			this.userConfigStore.update('grid_view', !this.userConfig.grid_view)
 		},
@@ -622,14 +642,16 @@ $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;
 		}
 
 		&-share-button {
 			color: var(--color-text-maxcontrast) !important;
+
 			&--shared {
 				color: var(--color-main-text) !important;
 			}
@@ -646,5 +668,4 @@ $navigationToggleSize: 50px;
 		margin: auto;
 	}
 }
-
 </style>

core/src/views/UnifiedSearchModal.vue

@@ -237,6 +237,13 @@ export default {
 	},
 	watch: {
 		isVisible(value) {
+			if (value) {
+			// Before setting search ui to visisble, reset search previous search event emissions
+			// This would allow apps to restore defaults after "Filter in current view"
+			//  if the user opens the search interface once more.
+			// Also, it's a new search better to reset all previous events emitted
+				emit('nextcloud:unified-search.reset', { query: '' })
+			}
 			this.internalIsVisible = value
 		},
 		internalIsVisible(value) {
@@ -265,9 +272,9 @@ export default {
 			if (query.length === 0) {
 				this.results = []
 				this.searching = false
+				emit('nextcloud:unified-search.reset', { query })
 				return
 			}
-			// Event should probably be refactored at some point to used nextcloud:unified-search.search
 			emit('nextcloud:unified-search.search', { query })
 			const newResults = []
 			const providersToSearch = this.filteredProviders.length > 0 ? this.filteredProviders : this.providers