86 lines
4.8 KiB
PHP
86 lines
4.8 KiB
PHP
<div x-data class="max-w-md">
|
|
|
|
<label for="selectProfile" class="block text-sm font-medium text-theme-primary"> {{ $label }} </label>
|
|
|
|
<div class="relative">
|
|
<div class="pointer-events-none absolute inset-y-0 left-0 flex pl-3 pt-2">
|
|
<svg class="h-5 w-5 text-theme-muted" 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>
|
|
</div>
|
|
|
|
|
|
<!----- When nothing is selected ---->
|
|
@if (!isset($selected['id']) || $search != '')
|
|
|
|
<input wire:model.live.debounce.300ms="search" x-on:blur="$wire.inputBlur()"
|
|
class="block w-full rounded-md border border-theme-border bg-white py-2 pl-10 pr-3 leading-5 placeholder-gray-400 shadow-sm transition duration-150 ease-in-out focus:border-theme-border focus:placeholder-gray-700 sm:text-sm"
|
|
placeholder="{{ __('Search') . ' (' . $placeholder . ')' }}" type="search" autocomplete="off">
|
|
|
|
@if (strlen($search) > 2)
|
|
<ul
|
|
class="absolute z-[60] mt-0 w-full rounded-md border border-theme-border bg-white text-sm text-theme-primary shadow-lg">
|
|
@forelse ($searchResults as $searchResult)
|
|
<li>
|
|
<a wire:click="selectProfile({{ $searchResult['id'] }})"
|
|
class="flex items-center px-2 py-2 hover:bg-gray-100">
|
|
<img src="{{ $searchResult['profile_photo_path'] }}" class="w-10 rounded-full profile-photo">
|
|
<div class="ml-3 leading-tight">
|
|
<div class="font-semibold text-theme-primary">
|
|
@if (array_key_exists('name', $searchResult))
|
|
{{ $searchResult['name'] }}
|
|
@else
|
|
{{ __('No results found') }}
|
|
@endif
|
|
</div>
|
|
<div class="text-theme-secondary">
|
|
@if (array_key_exists('description', $searchResult))
|
|
{{ $searchResult['description'] }}
|
|
@else
|
|
{{ __('No results found') }}
|
|
@endif
|
|
</div>
|
|
</div>
|
|
</a>
|
|
</li>
|
|
@empty
|
|
<li class="px-4 py-4">{{ __('No results found for') }} "{{ $search }}"</li>
|
|
@endforelse
|
|
</ul>
|
|
@endif
|
|
<div
|
|
class=" focus:shadow-outline-blue my-3 w-full rounded-md border border-theme-border bg-white pl-0 pr-3 leading-5 transition duration-150 ease-in-out focus:border-theme-border focus:outline-none sm:text-sm">
|
|
<div class="flex items-center px-2 py-2">
|
|
<div class="ml-3 h-10">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!----- When selected ---->
|
|
@else
|
|
<input wire:model.live.debounce.300ms="search"
|
|
class="shadow-sm block w-full rounded-md border border-theme-border bg-white py-2 pl-10 pr-3 leading-5 placeholder-gray-400 transition duration-150 ease-in-out focus:border-theme-border focus:placeholder-gray-300 focus:outline-none sm:text-sm"
|
|
placeholder="{{ __('Search again...') }}" type="search" autocomplete="off">
|
|
<div
|
|
class=" focus:shadow-outline-blue my-3 w-full rounded-md border border-theme-border bg-white pl-0 pr-3 leading-5 transition duration-150 ease-in-out focus:border-theme-border focus:outline-none sm:text-sm">
|
|
<div class="flex items-center px-2 py-2">
|
|
<img src="{{ $selected['profile_photo_path'] }}" class="w-10 rounded-full profile-photo">
|
|
<div class="ml-3 leading-tight">
|
|
<div class="font-semibold">
|
|
{{ $selected['name'] }}
|
|
</div>
|
|
<div class="text-theme-secondary">
|
|
{{ $selected['description'] }}
|
|
</div>
|
|
</div>
|
|
<button type="button" class="ml-auto text-theme-secondary hover:text-red-600" wire:click="removeSelectedProfile">
|
|
<x-icon mini name="x-circle" />
|
|
</button>
|
|
</div>
|
|
</div>
|
|
@endif
|
|
|
|
</div>
|
|
</div>
|