Files
timebank-cc-public/resources/views/livewire/main-search-bar.blade.php
Ronald Huynen 2547717edb Initial commit
2026-03-23 21:37:59 +01:00

99 lines
5.9 KiB
PHP

<div x-data="{ open: false }" class="w-fit lg:w-50 flex-shrink min-w-0 flex items-center" x-on:click.away="open = false">
<div class="relative text-theme-secondary w-full">
<div class="flex rounded-md border border-theme-primary bg-theme-background placeholder-theme-light transition duration-150 ease-in-out focus-within:border-theme-accent focus-within:ring-1 focus-within:ring-theme-accent focus:placeholder-gray-600 sm:text-sm w-full">
<input
@if (timebank_config('main_search_bar.suggestions') === 0)
wire:model="search"
@else
wire:model.live.debounce="search"
@endif
wire:keydown.enter="showSearchResults"
x-on:focus="open = true"
x-on:input="open = true"
x-on:keydown.enter="open = false"
type="search"
placeholder="{{ __('Search') . '...' }}"
class="w-full border-none focus:border-none focus:outline-none focus:ring-0 mx-2 leading-5 text-sm"
placeholder="{{ __('Search name, skill or keyword') }}"
autocomplete="off"
/>
<x-mini-button style="background-color:none" onmouseover="this.style.backgroundColor='transparent'" onmouseout="this.style.backgroundColor='none'" class="!cursor-default focus:ring-offset-0 focus:ring-offset-transparent border-none focus:border-none hover:text-transparent hover:bg-none hover:-bg-transparent focus:outline-hidden focus:ring-transparent focus:outline-none focus:ring-0 hover:border-none hover:outline-none hover:ring-0" flat icon="" spinner />
<button wire:click="showSearchResults()"
class="px-2 placeholder-theme-light transition duration-150 ease-in-out focus:outline-none sm:text-sm"
placeholder="{{ __('Search name, skill or keyword') }}">
<svg class="h-5 w-5 text-theme-light" fill="currentColor" viewBox="0 0 20 20">
<path fill-rule="evenodd"
d="M8 4a4 4 0 100 8 4 4 0 000-8zM2 8a6 6 0 1110.89 3.476l4.817 4.817a1 1 0 01-1.414 1.414l-4.816-4.816A6 6 0 012 8z"
clip-rule="evenodd" />
</svg>
</button>
</div>
@if (strlen($search) > 3 && timebank_config('main_search_bar.suggestions') > 0 && !empty($suggestions) && count($suggestions) > 0)
<div class="absolute z-[9999] mt-2 w-full">
<ul class="cursor-pointer rounded-lg border border-theme-primary bg-theme-background text-sm text-theme-primary shadow-md">
@foreach($suggestions as $suggestion)
@if ($suggestion)
<li class="suggestion-item block px-4 py-2 text-sm leading-5 text-theme-primary hover:bg-theme-surface transition cursor-pointer"
onclick="Livewire.find('{{ $_instance->getId() }}').call('selectSuggestion', {{ $suggestion['index'] }})">
{{ $suggestion['text'] }}
</li>
@endif
@endforeach
</ul>
</div>
@endif
@if ($showResults && timebank_config('main_search_bar.suggestions') > 0)
<!-- Display search results here -->
<label for="mainSearchBar" class="my-2 block text-sm font-medium text-theme-primary">
{{ count($results) . ' ' . __('results') }}
</label>
<table>
<thead>
<tr>
<th>#</th>
<th>Model</th>
<th>ID</th>
<th>Score</th>
<th>Highlight</th>
</tr>
</thead>
<tbody>
@foreach ($results as $result)
<tr>
<td></td>
<td>
@if ($result['model'] === 'App\Models\User')
<a
href="{{ route('user.show', ['userId' => $result['id']]) }}">{{ $result['model'] }}</a>
@elseif($result['model'] === 'App\Models\Organization')
<a
href="{{ route('org.show', ['orgId' => $result['id']]) }}">{{ $result['model'] }}</a>
@elseif($result['model'] === 'App\Models\Post')
<a
href="{{ route('post.show_by_id', ['postId' => $result['id']]) }}">{{ $result['model'] }}</a>
@else
{{ $result['model'] }}
@endif
</td>
<td>{{ $result['id'] }}</td>
<td>{{ $result['score'] }}</td>
<td>
{{-- XSS SECURITY: Highlights are sanitized in MainSearchBar::sanitizeHighlights() --}}
{{-- DO NOT change {!! !!} to {{ }} - highlights contain safe HTML <span> tags for styling --}}
{{-- DO NOT bypass sanitization - user content from profiles could contain malicious code --}}
{{-- If you modify highlight handling, review MainSearchBar.php lines 1107-1180 for security notes --}}
@foreach (collect($result['highlight'])->unique()->toArray() as $highlight)
{!! $highlight !!} <br>
@endforeach
</td>
</tr>
@endforeach
</tbody>
</table>
@endif
</div>
</div>