Search input (#473)

* Add search-input component

* Add searchquery support to tabular view

* Add search bar on collections browse

* Debounce input values

* Handle searchQuery in collection preset composition

* Handle searchquery in use-items composition

* Support search query in cards layout

* Add search-input to files/users

src/modules/collections/routes/browse/browse.vue

@@ -14,6 +14,8 @@
 		</template>
 
 		<template #actions>
+			<search-input v-model="searchQuery" />
+
 			<v-dialog v-model="confirmDelete">
 				<template #activator="{ on }">
 					<v-button
@@ -63,6 +65,7 @@
 			:view-options.sync="viewOptions"
 			:view-query.sync="viewQuery"
 			:filters.sync="filters"
+			:search-query.sync="searchQuery"
 		/>
 	</private-view>
 </template>
@@ -81,6 +84,7 @@ import useCollection from '@/compositions/use-collection';
 import useCollectionPreset from '@/compositions/use-collection-preset';
 import FilterDrawerDetail from '@/views/private/components/filter-drawer-detail';
 import LayoutDrawerDetail from '@/views/private/components/layout-drawer-detail';
+import SearchInput from '@/views/private/components/search-input';
 
 const redirectIfNeeded: NavigationGuard = async (to, from, next) => {
 	const collectionsStore = useCollectionsStore();
@@ -123,6 +127,7 @@ export default defineComponent({
 		CollectionsNotFound,
 		FilterDrawerDetail,
 		LayoutDrawerDetail,
+		SearchInput,
 	},
 	props: {
 		collection: {
@@ -140,7 +145,9 @@ export default defineComponent({
 		const { selection } = useSelection();
 		const { info: currentCollection, primaryKeyField } = useCollection(collection);
 		const { addNewLink, batchLink, collectionsLink } = useLinks();
-		const { viewType, viewOptions, viewQuery, filters } = useCollectionPreset(collection);
+		const { viewType, viewOptions, viewQuery, filters, searchQuery } = useCollectionPreset(
+			collection
+		);
 		const { confirmDelete, deleting, batchDelete } = useBatchDelete();
 
 		return {
@@ -157,6 +164,7 @@ export default defineComponent({
 			viewOptions,
 			viewQuery,
 			viewType,
+			searchQuery,
 		};
 
 		function useSelection() {

src/modules/files/routes/browse/browse.vue

@@ -13,6 +13,8 @@
 		</template>
 
 		<template #actions>
+			<search-input v-model="searchQuery" />
+
 			<v-dialog v-model="confirmDelete">
 				<template #activator="{ on }">
 					<v-button
@@ -64,6 +66,7 @@
 			:view-options.sync="viewOptions"
 			:view-query.sync="viewQuery"
 			:filters="filtersWithFolderAndType"
+			:search-query="searchQuery"
 			@update:filters="filters = $event"
 			:detail-route="'/{{project}}/files/{{primaryKey}}'"
 		/>
@@ -81,6 +84,7 @@ import useCollectionPreset from '@/compositions/use-collection-preset';
 import FilterDrawerDetail from '@/views/private/components/filter-drawer-detail';
 import LayoutDrawerDetail from '@/views/private/components/layout-drawer-detail';
 import AddFolder from '../../components/add-folder';
+import SearchInput from '@/views/private/components/search-input';
 
 type Item = {
 	// eslint-disable-next-line @typescript-eslint/no-explicit-any
@@ -89,7 +93,7 @@ type Item = {
 
 export default defineComponent({
 	name: 'files-browse',
-	components: { FilesNavigation, FilterDrawerDetail, LayoutDrawerDetail, AddFolder },
+	components: { FilesNavigation, FilterDrawerDetail, LayoutDrawerDetail, AddFolder, SearchInput },
 	props: {},
 	setup() {
 		const layout = ref<LayoutComponent>(null);
@@ -97,7 +101,7 @@ export default defineComponent({
 
 		const selection = ref<Item[]>([]);
 
-		const { viewType, viewOptions, viewQuery, filters } = useCollectionPreset(
+		const { viewType, viewOptions, viewQuery, filters, searchQuery } = useCollectionPreset(
 			ref('directus_files')
 		);
 		const { addNewLink, batchLink } = useLinks();
@@ -164,6 +168,7 @@ export default defineComponent({
 			viewType,
 			currentFolder,
 			filtersWithFolderAndType,
+			searchQuery,
 		};
 
 		function useBatchDelete() {

src/modules/users/routes/browse/browse.vue

@@ -13,6 +13,8 @@
 		</template>
 
 		<template #actions>
+			<search-input v-model="searchQuery" />
+
 			<v-dialog v-model="confirmDelete">
 				<template #activator="{ on }">
 					<v-button
@@ -63,6 +65,7 @@
 			:view-query.sync="viewQuery"
 			:detail-route="'/{{project}}/users/{{item.role}}/{{primaryKey}}'"
 			:filters="_filters"
+			:search-query="searchQuery"
 			@update:filters="filters = $event"
 		/>
 	</private-view>
@@ -78,6 +81,7 @@ import { LayoutComponent } from '@/layouts/types';
 import useCollectionPreset from '@/compositions/use-collection-preset';
 import FilterDrawerDetail from '@/views/private/components/filter-drawer-detail';
 import LayoutDrawerDetail from '@/views/private/components/layout-drawer-detail';
+import SearchInput from '@/views/private/components/search-input';
 
 type Item = {
 	// eslint-disable-next-line @typescript-eslint/no-explicit-any
@@ -86,7 +90,7 @@ type Item = {
 
 export default defineComponent({
 	name: 'users-browse',
-	components: { UsersNavigation, FilterDrawerDetail, LayoutDrawerDetail },
+	components: { UsersNavigation, FilterDrawerDetail, LayoutDrawerDetail, SearchInput },
 	props: {
 		role: {
 			type: String,
@@ -99,7 +103,7 @@ export default defineComponent({
 
 		const selection = ref<Item[]>([]);
 
-		const { viewType, viewOptions, viewQuery, filters } = useCollectionPreset(
+		const { viewType, viewOptions, viewQuery, filters, searchQuery } = useCollectionPreset(
 			ref('directus_users')
 		);
 		const { addNewLink, batchLink } = useLinks();
@@ -161,6 +165,7 @@ export default defineComponent({
 			viewOptions,
 			viewQuery,
 			viewType,
+			searchQuery,
 		};
 
 		function useBatchDelete() {