├── .gitignore
├── GlobalSearchModule.gif
├── src
    ├── shims.d.ts
    ├── index.ts
    ├── config.js
    ├── CollectionResults.vue
    ├── adjustFieldsForDisplays.ts
    └── module.vue
├── package.json
├── tsconfig.json
├── LICENSE
└── README.md


/.gitignore:
--------------------------------------------------------------------------------
1 | node_modules
2 | .DS_Store
3 | dist
4 | *.local
5 | .env
6 | .env.development
7 | 
8 | .idea


--------------------------------------------------------------------------------
/GlobalSearchModule.gif:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/u12206050/directus-extension-global-search/HEAD/GlobalSearchModule.gif


--------------------------------------------------------------------------------
/src/shims.d.ts:
--------------------------------------------------------------------------------
1 | declare module '*.vue' {
2 | 	import { DefineComponent } from 'vue';
3 | 	const component: DefineComponent<{}, {}, any>;
4 | 	export default component;
5 | }
6 | 


--------------------------------------------------------------------------------
/src/index.ts:
--------------------------------------------------------------------------------
 1 | import { defineModule } from '@directus/extensions-sdk';
 2 | import ModuleComponent from './module.vue';
 3 | 
 4 | export default defineModule({
 5 | 	id: 'global-search',
 6 | 	name: 'Global Search',
 7 | 	icon: 'search',
 8 | 	routes: [
 9 | 		{
10 | 			path: '',
11 | 			component: ModuleComponent,
12 | 		},
13 | 	],
14 | });
15 | 


--------------------------------------------------------------------------------
/src/config.js:
--------------------------------------------------------------------------------
 1 | export default {
 2 | 	things: {
 3 | 		collection: 'things',
 4 | 		limit: 10,
 5 | 		display: 'The {{title}} in {{topic.name}}',
 6 | 		fields: ['title', 'topic.name'],
 7 | 		filter: {
 8 | 			_and: [
 9 | 				{ topic: { _exists: true } },
10 | 			]
11 | 		},
12 | 		sort: 'name',
13 | 	},
14 | 	topics: {
15 | 		collection: 'topics',
16 | 		limit: 5,
17 | 		display: '{{name}}',
18 | 		fields: ['name'],
19 | 	},
20 | 	happenings: {
21 | 		collection: 'happenings',
22 | 		limit: 5,
23 | 		display: '{{label}} [{{status}}]',
24 | 		fields: ['topic.name', 'label'],
25 | 	},
26 | }


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 | 	"name": "directus-extension-global-search",
 3 | 	"version": "2.0.0",
 4 | 	"keywords": [
 5 | 		"directus",
 6 | 		"directus-extension",
 7 | 		"directus-custom-module"
 8 | 	],
 9 | 	"directus:extension": {
10 | 		"type": "module",
11 | 		"path": "dist/index.js",
12 | 		"source": "src/index.ts",
13 | 		"host": "^10.0.0"
14 | 	},
15 | 	"scripts": {
16 | 		"dev": "directus-extension build -w --no-minify",
17 | 		"build": "directus-extension build"
18 | 	},
19 | 	"devDependencies": {
20 | 		"@directus/extensions-sdk": "^11.0.2",
21 | 		"typescript": "^5.4.4",
22 | 		"vue": "^3.4.21"
23 | 	},
24 | 	"dependencies": {
25 | 		"@directus/utils": "^11.0.7"
26 | 	}
27 | }
28 | 


--------------------------------------------------------------------------------
/tsconfig.json:
--------------------------------------------------------------------------------
 1 | {
 2 | 	"compilerOptions": {
 3 | 		"target": "ES2019",
 4 | 		"lib": ["ES2019", "DOM"],
 5 | 		"moduleResolution": "node",
 6 | 		"strict": true,
 7 | 		"noFallthroughCasesInSwitch": true,
 8 | 		"esModuleInterop": true,
 9 | 		"noImplicitAny": true,
10 | 		"noImplicitThis": true,
11 | 		"noImplicitReturns": true,
12 | 		"noUnusedLocals": true,
13 | 		"noUncheckedIndexedAccess": true,
14 | 		"noUnusedParameters": true,
15 | 		"alwaysStrict": true,
16 | 		"strictNullChecks": true,
17 | 		"strictFunctionTypes": true,
18 | 		"strictBindCallApply": true,
19 | 		"strictPropertyInitialization": true,
20 | 		"resolveJsonModule": false,
21 | 		"skipLibCheck": true,
22 | 		"forceConsistentCasingInFileNames": true,
23 | 		"allowSyntheticDefaultImports": true,
24 | 		"isolatedModules": true,
25 | 		"rootDir": "./src"
26 | 	},
27 | 	"include": ["./src/**/*.ts"]
28 | }
29 | 


--------------------------------------------------------------------------------
/src/CollectionResults.vue:
--------------------------------------------------------------------------------
 1 | <script lang="ts" setup>
 2 | import { useCollection } from '@directus/extensions-sdk';
 3 | 
 4 | const props = defineProps({
 5 | 	collection: {
 6 | 		type: String,
 7 | 		required: true,
 8 | 	},
 9 | 	display: {
10 | 		type: String,
11 | 		default: null,
12 | 	},
13 | 	hits: {
14 | 		type: Array,
15 | 		required: true,
16 | 		default: () => [],
17 | 	},
18 | });
19 | 
20 | const { info, primaryKeyField } = useCollection(props.collection);
21 | 
22 | const displayTemplate = props.display ?? info.value?.meta?.display_template ?? '{{title}}';
23 | </script>
24 | 
25 | <template>
26 | 	<v-list v-if="info">
27 | 		<v-list-item
28 | 			v-for="hit in hits"
29 | 			:key="`${collection}-${hit[primaryKeyField.field]}`"
30 | 			block
31 | 			clickable
32 | 			:to="`/content/${collection}/${hit[primaryKeyField.field]}`"
33 | 			:title="`${ collection } #${ hit[primaryKeyField.field] }`"
34 | 		>
35 | 			<v-icon :name="info.icon" left />
36 | 			<render-template :collection="info.collection" :item="hit" :template="displayTemplate" />
37 | 		</v-list-item>
38 | 	</v-list>
39 | </template>
40 | 


--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
 1 | MIT License
 2 | 
 3 | Copyright (c) 2022 Gerard Lamusse
 4 | 
 5 | Permission is hereby granted, free of charge, to any person obtaining a copy
 6 | of this software and associated documentation files (the "Software"), to deal
 7 | in the Software without restriction, including without limitation the rights
 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
 9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 | 
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 | 
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.
22 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # Global Search Module
 2 | 
 3 | ![How it works GIF](https://github.com/u12206050/directus-extension-global-search/blob/main/GlobalSearchModule.gif)
 4 | 
 5 | A module for searching across multiple collections at once and returning results to allow you to navigate directly to the item page.
 6 | 
 7 | ## Install
 8 | 
 9 |  - Copy the `global-search` folder into `your_directus_project/extensions/modules/`
10 |  - Enable the module under Project Settings in the Directus Admin Panel.
11 | 
12 | ## Setup (in admin panel)
13 | 
14 |  - Navigate to the Global Search module and in the side-bar select a collection you wish to search.
15 |  - Fill in the display template: This is how search results will be displayed back to you.
16 |  - Choose the fields that you want to search. The fewer the better.
17 | 
18 | 
19 | ### Development
20 | 
21 | Update the `"directus:extension"."path"` value in `package.json` with the relative path to your Directus Project if you don't want to copy it across everytime.
22 | 
23 |  - `npm install`
24 |  - `npm run dev`
25 | 
26 | ### Build
27 | 
28 |  - `npm run build`
29 | 
30 | 
31 | ## Author and Support
32 | 
33 | Created by Gerard Lamusse (u12206050)
34 | 
35 | If this is helps you in anyway please support me with what you think it is worth via [PayPal.me](https://paypal.me/GerardLamusse)
36 | 


--------------------------------------------------------------------------------
/src/adjustFieldsForDisplays.ts:
--------------------------------------------------------------------------------
 1 | 
 2 | import { Field } from '@directus/shared/types';
 3 | import { computed } from 'vue';
 4 | 
 5 | export function adjustFieldsForDisplays(fields: string[], parentCollection: string, {
 6 |   fieldsStore,
 7 |   useExtension
 8 | }: any): string[] {
 9 | 	const adjustedFields: string[] = fields
10 | 		.map((fieldKey) => {
11 | 			const field: Field | null = fieldsStore.getField(parentCollection, fieldKey);
12 | 
13 | 			if (!field) return fieldKey;
14 | 			if (field.meta?.display === null) return fieldKey;
15 | 
16 | 			const display = useExtension(
17 | 				'display',
18 | 				computed(() => field.meta?.display ?? null)
19 | 			);
20 | 
21 | 			if (!display) return fieldKey;
22 | 			if (!display.value?.fields) return fieldKey;
23 | 
24 | 			let fieldKeys: string[] | null = null;
25 | 
26 | 			if (Array.isArray(display.value.fields)) {
27 | 				fieldKeys = display.value.fields.map((relatedFieldKey: string) => `${fieldKey}.${relatedFieldKey}`);
28 | 			}
29 | 
30 | 			if (typeof display.value.fields === 'function') {
31 | 				fieldKeys = display.value
32 | 					.fields(field.meta?.display_options, {
33 | 						collection: field.collection,
34 | 						field: field.field,
35 | 						type: field.type,
36 | 					})
37 | 					.map((relatedFieldKey: string) => `${fieldKey}.${relatedFieldKey}`);
38 | 			}
39 | 
40 | 			if (fieldKeys) {
41 | 				return fieldKeys.map((fieldKey) => {
42 | 					/**
43 | 					 * This is for the special case where you want to show a thumbnail in a relation to
44 | 					 * directus_files. The thumbnail itself isn't a real field, but shows the thumbnail based
45 | 					 * on the other available fields (like ID, title, and type).
46 | 					 */
47 | 					if (fieldKey.includes('$thumbnail') && field.collection === 'directus_files') {
48 | 						return fieldKey
49 | 							.split('.')
50 | 							.filter((part) => part !== '$thumbnail')
51 | 							.join('.');
52 | 					}
53 | 
54 | 					return fieldKey;
55 | 				});
56 | 			}
57 | 
58 | 			return fieldKey;
59 | 		})
60 | 		.flat();
61 | 
62 | 	return adjustedFields;
63 | }
64 | 


--------------------------------------------------------------------------------
/src/module.vue:
--------------------------------------------------------------------------------
  1 | <script lang="ts" setup>
  2 | import { getFieldsFromTemplate, useApi, useExtensions, useStores } from '@directus/extensions-sdk';
  3 | import { pluralize } from '@directus/utils';
  4 | import { Ref, computed, ref, unref, watch } from 'vue';
  5 | import { useI18n } from 'vue-i18n';
  6 | import { useRouter } from 'vue-router';
  7 | import CollectionResults from './CollectionResults.vue';
  8 | import { adjustFieldsForDisplays } from './adjustFieldsForDisplays';
  9 | 
 10 | /**
 11 |  * Configuration for the module.
 12 |  * 
 13 |  * During development use the import.
 14 |  * For production replace the import with the following:
 15 |  *   const GlobalSearchConfig = {"SEARCH_CONFIG": "TO_BE_REPLACED"};
 16 |  * 
 17 |  * Build and then in the index.js file remove the line and at the top of the index.js file add your config.
 18 |  *   eg. const GlobalSearchConfig = { …Your actual config here… }
 19 |  */
 20 | //import GlobalSearchConfig from './config.js';
 21 | const GlobalSearchConfig = {"SEARCH_CONFIG": "TO_BE_REPLACED"};
 22 | 
 23 | const { useAppStore, useFieldsStore, useUserStore } = useStores();
 24 | const extensions = useExtensions();
 25 | const userStore = useUserStore();
 26 | const fieldsStore = useFieldsStore();
 27 | const appStore = useAppStore();
 28 | 
 29 | const api = useApi();
 30 | const { t } = useI18n();
 31 | const router = useRouter();
 32 | 
 33 | function useExtension(type: string, name: string | Ref<string | null>) {
 34 | 	return computed(() => {
 35 | 		if (unref(name) === null) return null;
 36 | 		return (extensions[pluralize(unref(type))].value as any[]).find(({ id }) => id === unref(name)) ?? null;
 37 | 	});
 38 | }
 39 | 
 40 | type Index = {
 41 | 	collection: string;
 42 | 	display: string;
 43 | 	limit: number;
 44 | 	fields: string[];
 45 | 	filter?: any;
 46 | 	sort?: string;
 47 | };
 48 | 
 49 | const indexes: Ref<Record<string, Index>> = ref((GlobalSearchConfig || {}) as Record<string, Index>);
 50 | const searchValue = ref(decodeURIComponent(router.currentRoute?.value.hash?.replace('#', '') || ''));
 51 | const isSearching = computed(() => searchValue.value?.length >= 3);
 52 | const status = ref({
 53 | 	loading: false,
 54 | 	time: 0,
 55 | 	hits: 0,
 56 | });
 57 | const results: Ref<Record<string, Array<any>>> = ref({});
 58 | 
 59 | /**
 60 |  * Return the deepest object with the given key exploding on dots, and the value assigned to the last key.
 61 |  * Example: ("related.title", { "_contains": "abc" }) returns {"related": {"title": { "_contains": "abc" }}}
 62 |  */
 63 | function createDeepObject(key: string, value: any): Record<string, any> {
 64 | 	const keys = key.split('.');
 65 | 	return keys.reverse().reduce((acc, key) => ({ [key]: acc }), value);
 66 | }
 67 | 
 68 | /**
 69 |  * Search for the given query in all collections as configured
 70 |  */
 71 | async function search(value: string) {
 72 | 	const start = Date.now();
 73 | 	let hits = 0;
 74 | 	results.value = {};
 75 | 
 76 | 	// For each item in indexes, we need to search for the search value in the fields.
 77 | 	const Q = Object.values(indexes.value).map(async (index) => {
 78 | 		const { collection, limit, display, fields, filter, sort } = index;
 79 | 		if (fields.length === 0) {
 80 | 			delete results.value[collection];
 81 | 			return null;
 82 | 		}
 83 | 
 84 | 		results.value[collection] = [];
 85 | 
 86 | 
 87 | 		const displayFields = adjustFieldsForDisplays(getFieldsFromTemplate(display), collection, { 
 88 | 			fieldsStore, useExtension
 89 | 		})
 90 | 
 91 | 		const params = {
 92 | 			limit,
 93 | 			sort: sort || 'id',
 94 | 			filter: {
 95 | 				_and: [
 96 | 					...(filter?._and || []),
 97 | 					{
 98 | 						_or: fields.map((field) =>
 99 | 							createDeepObject(field, {
100 | 								_icontains: value,
101 | 							})
102 | 						),
103 | 					}
104 | 				],
105 | 			},
106 | 			fields: ['id'].concat(displayFields),
107 | 		};
108 | 
109 | 		const url = collection.startsWith('directus_') ? collection.replace('directus_', '') : `/items/${collection}`;
110 | 		const { data } = await api.get(url, { params });
111 | 		results.value[collection] = data.data;
112 | 		hits += data.data.length;
113 | 	});
114 | 
115 | 	await Promise.allSettled(Q);
116 | 	status.value.time = Date.now() - start;
117 | 	status.value.hits = hits;
118 | 	status.value.loading = false;
119 | }
120 | 
121 | let debouncedSearch;
122 | watch(
123 | 	searchValue,
124 | 	(value) => {
125 | 		clearTimeout(debouncedSearch);
126 | 		if (!value || value.length < 3) {
127 | 			status.value.loading = false;
128 | 			router.replace({ hash: '' });
129 | 			return;
130 | 		}
131 | 
132 | 		status.value.loading = true;
133 | 		router.replace({ hash: '#' + value });
134 | 		debouncedSearch = setTimeout(() => search(value), 250);
135 | 	},
136 | 	{ immediate: true }
137 | );
138 | 
139 | const currentCollection = ref('');
140 | const currentIndex = ref<Index | null>(null);
141 | watch(currentCollection, (collection) => {
142 | 	if (!indexes.value[collection]) {
143 | 		indexes.value[collection] = {
144 | 			collection,
145 | 			limit: 5,
146 | 			display: '',
147 | 			fields: [],
148 | 			filter: {},
149 | 		};
150 | 	}
151 | 	currentIndex.value = indexes.value[collection];
152 | });
153 | 
154 | const isAdmin = userStore?.currentUser?.role?.admin_access;
155 | const persistedIndexes = isAdmin
156 | 	? computed(() => {
157 | 			const persist = {};
158 | 			Object.values(indexes.value).forEach((index) => {
159 | 				if (index.fields.length > 0) {
160 | 					persist[index.collection] = index;
161 | 				}
162 | 			});
163 | 			return persist;
164 | 	  })
165 | 	: indexes;
166 | 
167 | appStore.sidebarOpen = false;
168 | 
169 | function updateSearchFields(fields: Array<string>) {
170 | 	if (currentIndex.value) {
171 | 		currentIndex.value.fields = fields;
172 | 	}
173 | }
174 | 
175 | function updateSearchFilter(filter: Record<string, any>) {
176 | 	if (currentIndex.value) {
177 | 		currentIndex.value.filter = filter;
178 | 	}
179 | }
180 | 
181 | async function copyJSON(eve) {
182 | 	await navigator.clipboard.writeText(eve.target.innerText);
183 | 	alert('JSON copied.');
184 | }
185 | </script>
186 | 
187 | <template>
188 | 	<private-view id="global-search" title="Global Search" :class="{'is-admin': isAdmin}">
189 | 		<template #title-outer:prepend>
190 |       <v-button class="header-icon" rounded disabled icon secondary>
191 |         <v-icon name="search" />
192 |       </v-button>
193 |     </template>
194 | 
195 | 		<template #sidebar>
196 | 			<sidebar-detail v-if="isAdmin" icon="settings" :title="t('configure')" close>
197 | 				<fieldset>
198 | 					<label>Select a Collection to configure</label>
199 | 					<interface-system-collection v-model="currentCollection" includeSystem />
200 | 				</fieldset>
201 | 				<div v-if="currentIndex" :key="currentCollection">
202 | 					<fieldset>
203 | 						<label>Display template of search results</label>
204 | 						<v-field-template v-model="currentIndex.display" :collection="currentIndex.collection" />						
205 | 					</fieldset>
206 | 
207 | 					<fieldset>
208 | 						<label>No. of search results {{ currentIndex.limit }}</label>
209 | 						<v-slider v-model="currentIndex.limit" :min="1" :max="100" />
210 | 					</fieldset>
211 | 
212 | 					<fieldset>
213 | 						<label>
214 | 							Search fields
215 | 							<strong>[{{ currentIndex.fields.length }}]</strong>
216 | 						</label>
217 | 						<interface-system-field-tree
218 | 							:value="currentIndex.fields"
219 | 							:collectionName="currentIndex.collection"
220 | 							@input="updateSearchFields"
221 | 						/>
222 | 						<p class="hint">Deselect all fields to remove this collection from being searched</p>
223 | 					</fieldset>
224 | 
225 | 					<fieldset>
226 | 						<label>Additional filter to apply during query</label>
227 | 						<interface-system-filter
228 | 							:value="currentIndex.filter"
229 | 							:collection-name="currentIndex.collection"
230 | 							@input="updateSearchFilter"
231 | 						/>						
232 | 					</fieldset>
233 | 				</div>
234 | 				<v-detail label="JSON">
235 | 					<pre @click="copyJSON">{{ persistedIndexes }}</pre>
236 | 					<p class="hint">Paste this json into the top of the `index.js` file of the global-search module</p>
237 | 				</v-detail>
238 | 			</sidebar-detail>
239 | 		</template>
240 | 
241 | 		<div style="margin: 1rem">
242 | 			<v-sheet>
243 | 				<div style="width: 300px; margin: 1rem auto">
244 | 					<v-input v-model="searchValue" :placeholder="t('search')">
245 | 						<template #prepend>
246 | 							<v-icon name="search" />
247 | 						</template>
248 | 						<template #append>
249 | 							<v-progress-circular v-show="status.loading" indeterminate />
250 | 						</template>
251 | 					</v-input>
252 | 					<p v-show="isSearching && !status.loading" style="color: var(--foreground-subdued)">
253 | 						{{ status.hits }} results returned in {{ status.time }}ms
254 | 					</p>
255 | 				</div>
256 | 
257 | 				<transition>
258 | 					<v-progress-linear v-if="status.loading" indeterminate />
259 | 					<v-sheet v-else-if="isSearching" class="search-results">
260 | 						<template v-for="(hits, collection) in results" :key="collection">
261 | 							<CollectionResults
262 | 								v-if="hits && hits.length"
263 | 								:key="collection"
264 | 								class="search-results-block"
265 | 								:collection="collection"
266 | 								:display="indexes[collection].display"
267 | 								:hits="hits"
268 | 							/>
269 | 						</template>
270 | 						<p v-if="!status.hits" style="width: 100%; text-align: center">
271 | 							{{ t('no_results') }}
272 | 						</p>
273 | 					</v-sheet>
274 | 				</transition>
275 | 			</v-sheet>
276 | 		</div>
277 | 	</private-view>
278 | </template>
279 | 
280 | <style>
281 | #global-search #navigation .module-nav {
282 | 	display: none !important;
283 | }
284 | #global-search.is-admin #sidebar.is-open {
285 | 	flex-basis: 600px !important;
286 | 	width: 600px !important;
287 | 	max-width: 100%;
288 | }
289 | #global-search.is-admin #sidebar.is-open .flex-container {
290 | 	width: 100% !important;
291 | }
292 | 
293 | #global-search .search-results {
294 | 	display: flex;
295 | 	flex-wrap: wrap;
296 | }
297 | 
298 | #global-search .search-results-block {
299 | 	min-width: 300px;
300 | 	width: auto;
301 | 	flex-grow: 1;
302 | 	max-width: 600px;
303 | 	padding: 1rem;
304 | }
305 | 
306 | #global-search p.hint {
307 | 	color: var(--foreground-subdued);
308 | 	font-size: 12px;
309 | }
310 | 
311 | @media (max-width: 600px) {
312 | 	#global-search .search-results-block {
313 | 		width: 100%;
314 | 	}
315 | 	#global-search .header-bar .title-container .title .type-title {
316 | 		font-size: 22px;
317 | 		line-height: 28px;
318 | 	}
319 | }
320 | </style>
321 | 


--------------------------------------------------------------------------------