isaaccladandCursor
2ac84faf73
Deploy Ladill Care / deploy (push) Successful in 27s
Make appointment/practitioner department (and practitioner) options show branch names so duplicates are distinguishable, and replace the patient select with a searchable dropdown. Co-authored-by: Cursor <cursoragent@cursor.com>
91 lines
3.7 KiB
PHP
91 lines
3.7 KiB
PHP
@props([
|
|
'name',
|
|
'options' => [],
|
|
'selected' => null,
|
|
'placeholder' => 'Search…',
|
|
'required' => false,
|
|
'emptyLabel' => 'Select…',
|
|
])
|
|
|
|
@php
|
|
$optionList = collect($options)->map(function ($option) {
|
|
if (is_array($option)) {
|
|
return [
|
|
'value' => (string) ($option['value'] ?? ''),
|
|
'label' => (string) ($option['label'] ?? ''),
|
|
'search' => (string) ($option['search'] ?? $option['label'] ?? ''),
|
|
];
|
|
}
|
|
|
|
return [
|
|
'value' => (string) data_get($option, 'value', data_get($option, 'id', '')),
|
|
'label' => (string) data_get($option, 'label', data_get($option, 'name', '')),
|
|
'search' => (string) data_get($option, 'search', data_get($option, 'label', data_get($option, 'name', ''))),
|
|
];
|
|
})->values()->all();
|
|
|
|
$selectedValue = old($name, $selected);
|
|
$selectedValue = $selectedValue === null || $selectedValue === '' ? '' : (string) $selectedValue;
|
|
@endphp
|
|
|
|
<div
|
|
class="relative"
|
|
x-data="searchableSelect({
|
|
options: {{ \Illuminate\Support\Js::from($optionList) }},
|
|
selected: {{ \Illuminate\Support\Js::from($selectedValue) }},
|
|
placeholder: {{ \Illuminate\Support\Js::from($placeholder) }},
|
|
emptyLabel: {{ \Illuminate\Support\Js::from($emptyLabel) }},
|
|
})"
|
|
@keydown.escape.window="open = false"
|
|
@click.outside="open = false"
|
|
>
|
|
<input type="hidden" name="{{ $name }}" x-model="selected" @if ($required) required @endif {{ $attributes->except(['class']) }}>
|
|
|
|
<button
|
|
type="button"
|
|
class="mt-1 flex w-full items-center justify-between rounded-lg border border-slate-300 bg-white px-3 py-2 text-left text-sm text-slate-900 shadow-sm hover:border-slate-400 focus:border-indigo-500 focus:outline-none focus:ring-1 focus:ring-indigo-500"
|
|
@click="toggle()"
|
|
:aria-expanded="open.toString()"
|
|
>
|
|
<span class="truncate" x-text="selectedLabel()"></span>
|
|
<svg class="ml-2 h-4 w-4 shrink-0 text-slate-400" fill="none" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="m19.5 8.25-7.5 7.5-7.5-7.5"/></svg>
|
|
</button>
|
|
|
|
<div
|
|
x-show="open"
|
|
x-cloak
|
|
x-transition.opacity
|
|
class="absolute z-30 mt-1 w-full overflow-hidden rounded-xl border border-slate-200 bg-white shadow-lg"
|
|
>
|
|
<div class="border-b border-slate-100 p-2">
|
|
<input
|
|
type="search"
|
|
x-ref="query"
|
|
x-model="query"
|
|
@keydown.enter.prevent="selectFirst()"
|
|
placeholder="{{ $placeholder }}"
|
|
class="w-full rounded-lg border-slate-300 text-sm"
|
|
>
|
|
</div>
|
|
<ul class="max-h-56 overflow-y-auto py-1 text-sm">
|
|
<li>
|
|
<button type="button" class="flex w-full px-3 py-2 text-left text-slate-500 hover:bg-slate-50" @click="choose('')">
|
|
{{ $emptyLabel }}
|
|
</button>
|
|
</li>
|
|
<template x-for="option in filtered" :key="option.value">
|
|
<li>
|
|
<button
|
|
type="button"
|
|
class="flex w-full px-3 py-2 text-left hover:bg-indigo-50"
|
|
:class="selected === option.value ? 'bg-indigo-50 font-medium text-indigo-900' : 'text-slate-800'"
|
|
@click="choose(option.value)"
|
|
x-text="option.label"
|
|
></button>
|
|
</li>
|
|
</template>
|
|
<li x-show="filtered.length === 0" class="px-3 py-2 text-slate-400">No matches</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|