Merge pull request #43665 from nextcloud/43365-unified-search-filter-view-fix

apps/files/src/legacy/filelistSearch.js

@@ -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)
-
-})()

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>

core/src/views/UnifiedSearchModal.vue

@@ -237,6 +237,14 @@ export default {
 	},
 	watch: {
 		isVisible(value) {
+			if (value) {
+				/*
+				 * Before setting the search UI to visible, reset previous search event emissions.
+				 * This allows apps to restore defaults after "Filter in current view" if the user opens the search interface once more.
+				 * Additionally, it's a new search, so it's better to reset all previous events emitted.
+				 */
+				emit('nextcloud:unified-search.reset', { query: '' })
+			}
 			this.internalIsVisible = value
 		},
 		internalIsVisible(value) {
@@ -265,9 +273,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