changes + saved search
This commit is contained in:
Arnaud Delcasse
@@ -21,7 +21,30 @@
|
||||
<div class="bg-white shadow sm:rounded-2xl">
|
||||
<h2 id="timeline-title" class="text-lg font-medium text-gray-900 p-4 sm:px-6">Chercher une solution</h2>
|
||||
<div class="border-t border-gray-200 px-4 py-5 sm:px-6">
|
||||
<form method="GET">
|
||||
<form method="GET" x-data="journeySearch()">
|
||||
|
||||
<div class="py-4">
|
||||
<label for="beneficiary" class="block text-sm font-medium text-gray-700">Bénéficiaire (optionnel)</label>
|
||||
<div class="mt-1 relative" x-data="beneficiaryAutocomplete()">
|
||||
<input type="text"
|
||||
x-model="input"
|
||||
@input="onInput()"
|
||||
@focus="showResults = true"
|
||||
@blur="setTimeout(() => showResults = false, 200)"
|
||||
class="p-2 shadow-sm focus:ring-co-blue focus:border-co-blue block w-full sm:text-sm border-gray-300 rounded-2xl">
|
||||
|
||||
<ul x-show="showResults && filteredBeneficiaries.length > 0"
|
||||
class="absolute z-10 mt-1 w-full bg-white shadow-lg max-h-60 rounded-xl py-1 text-base overflow-auto focus:outline-none sm:text-sm border border-gray-300"
|
||||
tabindex="-1" role="listbox">
|
||||
<template x-for="beneficiary in filteredBeneficiaries" :key="beneficiary.id">
|
||||
<li class="text-gray-900 hover:bg-gray-200 cursor-default select-none relative py-2 pl-3 pr-9"
|
||||
@click="selectBeneficiary(beneficiary)">
|
||||
<span class="font-normal block truncate" x-text="beneficiary.name"></span>
|
||||
</li>
|
||||
</template>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{{ $departureField := "departure" }}
|
||||
{{ $departureLabel := "Départ" }}
|
||||
@@ -33,9 +56,7 @@
|
||||
{{ $destination := .ViewState.destination }}
|
||||
{{ template "address_autocomplete" dict "FieldName" $destinationField "FieldLabel" $destinationLabel "Address" $destination }}
|
||||
|
||||
{{if ne .ViewState.passengerid "" }}
|
||||
<input type="hidden" value="{{.ViewState.passengerid}}" name="passengerid" />
|
||||
{{end}}
|
||||
<input type="hidden" name="passengerid" value="{{.ViewState.passengerid}}" />
|
||||
|
||||
<div class="py-4 grid grid-cols-2">
|
||||
<div class="lg:col-span-1">
|
||||
@@ -55,11 +76,100 @@
|
||||
|
||||
</div>
|
||||
|
||||
<button type="submit"
|
||||
class="rounded-2xl border border-transparent bg-co-blue px-4 py-2 my-4 mt-8 w-full text-sm font-medium text-white shadow-sm focus:outline-none focus:ring-2 focus:ring-co-blue focus:ring-offset-2 sm:w-auto">
|
||||
Chercher
|
||||
</button>
|
||||
<div class="flex gap-2 mt-8">
|
||||
<button type="submit"
|
||||
class="rounded-2xl border border-transparent bg-co-blue px-4 py-2 my-4 text-sm font-medium text-white shadow-sm focus:outline-none focus:ring-2 focus:ring-co-blue focus:ring-offset-2 sm:w-auto">
|
||||
Chercher
|
||||
</button>
|
||||
{{if .ViewState.searched}}
|
||||
<a href="/app/journeys/save?departure={{json .ViewState.departure}}&destination={{ json .ViewState.destination }}&departuredate={{.ViewState.departuredate}}&departuretime={{.ViewState.departuretime}}&passengerid={{.ViewState.passengerid}}"
|
||||
class="rounded-2xl border border-gray-300 bg-white px-4 py-2 my-4 text-sm font-medium text-gray-700 shadow-sm hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-co-blue focus:ring-offset-2 sm:w-auto inline-flex items-center">
|
||||
Enregistrer pour plus tard
|
||||
</a>
|
||||
{{end}}
|
||||
</div>
|
||||
</form>
|
||||
|
||||
<script>
|
||||
function journeySearch() {
|
||||
return {
|
||||
selectedBeneficiaryId: '{{.ViewState.passengerid}}',
|
||||
}
|
||||
}
|
||||
|
||||
function beneficiaryAutocomplete() {
|
||||
const beneficiaries = [
|
||||
{{range .ViewState.beneficiaries_list}}
|
||||
{
|
||||
id: '{{.ID}}',
|
||||
name: '{{.Data.first_name}} {{.Data.last_name}}',
|
||||
address: {{json .Data.address}}
|
||||
},
|
||||
{{end}}
|
||||
];
|
||||
|
||||
return {
|
||||
input: '',
|
||||
showResults: false,
|
||||
filteredBeneficiaries: [],
|
||||
selectedBeneficiary: null,
|
||||
|
||||
init() {
|
||||
// Set initial value if passengerid is set
|
||||
const currentPassengerId = '{{.ViewState.passengerid}}';
|
||||
if (currentPassengerId) {
|
||||
const beneficiary = beneficiaries.find(b => b.id === currentPassengerId);
|
||||
if (beneficiary) {
|
||||
this.input = beneficiary.name;
|
||||
this.selectedBeneficiary = beneficiary;
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
onInput() {
|
||||
if (this.input.length === 0) {
|
||||
this.filteredBeneficiaries = [];
|
||||
this.selectedBeneficiary = null;
|
||||
this.updatePassengerId('');
|
||||
return;
|
||||
}
|
||||
|
||||
this.filteredBeneficiaries = beneficiaries.filter(beneficiary =>
|
||||
beneficiary.name.toLowerCase().includes(this.input.toLowerCase())
|
||||
).slice(0, 10); // Limit to 10 results
|
||||
},
|
||||
|
||||
selectBeneficiary(beneficiary) {
|
||||
this.input = beneficiary.name;
|
||||
this.selectedBeneficiary = beneficiary;
|
||||
this.showResults = false;
|
||||
this.updatePassengerId(beneficiary.id);
|
||||
this.setDepartureAddress(beneficiary.address);
|
||||
},
|
||||
|
||||
updatePassengerId(id) {
|
||||
const passengerInput = document.querySelector('input[name="passengerid"]');
|
||||
if (passengerInput) {
|
||||
passengerInput.value = id;
|
||||
}
|
||||
},
|
||||
|
||||
setDepartureAddress(address) {
|
||||
if (address) {
|
||||
// Find the departure address autocomplete container
|
||||
const departureContainer = document.querySelector('input[name="departure"]').closest('[x-data]');
|
||||
if (departureContainer && departureContainer._x_dataStack && departureContainer._x_dataStack[0]) {
|
||||
const addressAutocomplete = departureContainer._x_dataStack[0];
|
||||
// Update the address autocomplete component directly
|
||||
addressAutocomplete.address = JSON.stringify(address);
|
||||
addressAutocomplete.addressObject = address;
|
||||
addressAutocomplete.input = address.properties.label;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -113,6 +223,8 @@
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
{{else}}
|
||||
{{template "saved_searches" .}}
|
||||
{{end}}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user