tiennm99/coolify
1
0
Fork 0
mirror of https://github.com/tiennm99/coolify.git synced 2026-05-12 18:57:54 +00:00
Code Issues Packages Projects Releases Wiki Activity

feat(global-search): add navigation routes and enhance search functionality

Browse Source 
- Introduced a comprehensive set of navigation routes for quick access to key sections such as Dashboard, Servers, Projects, and more.
- Enhanced the search functionality to include a 'new' prefix for creating resources directly from the search input.
- Improved UI elements for search results, ensuring better visibility and interaction.
This commit is contained in:
Andras Bacsai
2025-10-08 19:50:30 +02:00
parent 640f753aae
commit c548013e2d
2 changed files with 156 additions and 9 deletions
Download Patch File Download Diff File Expand all files Collapse all files
resources/views/livewire/global-search.blade.php
+27 -8
View File
@@ -36,6 +36,12 @@
return this.creatableItems.filter(item => {
const searchText = `${item.name} ${item.description} ${item.type} ${item.category}`.toLowerCase();
if (query.startsWith('new ')) {
const queryWithoutNew = query.substring(4);
return searchText.includes(queryWithoutNew) || searchText.includes(query);
}
return searchText.includes(query);
});
},
@@ -339,8 +345,8 @@
@foreach ($availableServers as $index => $server)
<button type="button"
wire:click="selectServer({{ $server['id'] }}, true)"
class="search-result-item w-full text-left block px-4 py-3 hover:bg-yellow-50 dark:hover:bg-yellow-900/20 transition-colors focus:outline-none focus:bg-yellow-100 dark:focus:bg-yellow-900/30">
<div class="flex items-center justify-between gap-3">
class="search-result-item w-full text-left block px-4 py-3 min-h-[4rem] hover:bg-yellow-50 dark:hover:bg-yellow-900/20 transition-colors focus:outline-none focus:bg-yellow-100 dark:focus:bg-yellow-900/30 border-b border-neutral-100 dark:border-coolgray-300 last:border-0">
<div class="flex items-center justify-between gap-3 min-h-[2.5rem]">
<div class="flex-1 min-w-0">
<div class="font-medium text-neutral-900 dark:text-white">
{{ $server['name'] }}
@@ -350,6 +356,10 @@
class="text-xs text-neutral-500 dark:text-neutral-400">
{{ $server['description'] }}
</div>
@else
<div class="text-xs text-transparent select-none">
&nbsp;
</div>
@endif
</div>
<svg xmlns="http://www.w3.org/2000/svg"
@@ -414,8 +424,8 @@
@foreach ($availableDestinations as $index => $destination)
<button type="button"
wire:click="selectDestination('{{ $destination['uuid'] }}', true)"
class="search-result-item w-full text-left block px-4 py-3 hover:bg-yellow-50 dark:hover:bg-yellow-900/20 transition-colors focus:outline-none focus:bg-yellow-100 dark:focus:bg-yellow-900/30">
<div class="flex items-center justify-between gap-3">
class="search-result-item w-full text-left block px-4 py-3 min-h-[4rem] hover:bg-yellow-50 dark:hover:bg-yellow-900/20 transition-colors focus:outline-none focus:bg-yellow-100 dark:focus:bg-yellow-900/30 border-b border-neutral-100 dark:border-coolgray-300 last:border-0">
<div class="flex items-center justify-between gap-3 min-h-[2.5rem]">
<div class="flex-1 min-w-0">
<div class="font-medium text-neutral-900 dark:text-white">
{{ $destination['name'] }}
@@ -487,8 +497,8 @@
@foreach ($availableProjects as $index => $project)
<button type="button"
wire:click="selectProject('{{ $project['uuid'] }}', true)"
class="search-result-item w-full text-left block px-4 py-3 hover:bg-yellow-50 dark:hover:bg-yellow-900/20 transition-colors focus:outline-none focus:bg-yellow-100 dark:focus:bg-yellow-900/30">
<div class="flex items-center justify-between gap-3">
class="search-result-item w-full text-left block px-4 py-3 min-h-[4rem] hover:bg-yellow-50 dark:hover:bg-yellow-900/20 transition-colors focus:outline-none focus:bg-yellow-100 dark:focus:bg-yellow-900/30 border-b border-neutral-100 dark:border-coolgray-300 last:border-0">
<div class="flex items-center justify-between gap-3 min-h-[2.5rem]">
<div class="flex-1 min-w-0">
<div class="font-medium text-neutral-900 dark:text-white">
{{ $project['name'] }}
@@ -498,6 +508,10 @@
class="text-xs text-neutral-500 dark:text-neutral-400">
{{ $project['description'] }}
</div>
@else
<div class="text-xs text-transparent select-none">
&nbsp;
</div>
@endif
</div>
<svg xmlns="http://www.w3.org/2000/svg"
@@ -562,8 +576,8 @@
@foreach ($availableEnvironments as $index => $environment)
<button type="button"
wire:click="selectEnvironment('{{ $environment['uuid'] }}', true)"
class="search-result-item w-full text-left block px-4 py-3 hover:bg-yellow-50 dark:hover:bg-yellow-900/20 transition-colors focus:outline-none focus:bg-yellow-100 dark:focus:bg-yellow-900/30">
<div class="flex items-center justify-between gap-3">
class="search-result-item w-full text-left block px-4 py-3 min-h-[4rem] hover:bg-yellow-50 dark:hover:bg-yellow-900/20 transition-colors focus:outline-none focus:bg-yellow-100 dark:focus:bg-yellow-900/30 border-b border-neutral-100 dark:border-coolgray-300 last:border-0">
<div class="flex items-center justify-between gap-3 min-h-[2.5rem]">
<div class="flex-1 min-w-0">
<div class="font-medium text-neutral-900 dark:text-white">
{{ $environment['name'] }}
@@ -573,6 +587,10 @@
class="text-xs text-neutral-500 dark:text-neutral-400">
{{ $environment['description'] }}
</div>
@else
<div class="text-xs text-transparent select-none">
&nbsp;
</div>
@endif
</div>
<svg xmlns="http://www.w3.org/2000/svg"
@@ -745,6 +763,7 @@
</span>
<span
class="px-2 py-0.5 text-xs rounded-full bg-neutral-100 dark:bg-coolgray-300 text-neutral-700 dark:text-neutral-300 shrink-0">
<span x-show="result.type === 'navigation'">Navigation</span>
<span x-show="result.type === 'application'">Application</span>
<span x-show="result.type === 'service'">Service</span>
<span x-show="result.type === 'database'"