wip: modernized edit flow
This commit is contained in:
Björn Fromme
@@ -1,6 +1,48 @@
|
||||
<div class="booking-summary p-8 bg-gray-50 rounded-lg border sticky top-4">
|
||||
<h3 class="font-bold text-xl mb-6 text-gray-800">Buchungsübersicht</h3>
|
||||
|
||||
{# Mutability information (edit mode only) #}
|
||||
{% if mutableData is defined %}
|
||||
<div class="mb-6 pb-4 border-b border-gray-200">
|
||||
<h4 class="font-semibold text-lg mb-3 text-gray-800">Aktualisierung möglich bis</h4>
|
||||
<ul class="space-y-1 text-sm text-gray-600">
|
||||
<li class="flex items-start">
|
||||
<span class="mr-2">•</span>
|
||||
<span>
|
||||
<span class="font-medium">Zusatzleistungen:</span>
|
||||
{% if mutableData.items['additional_services'].mutable %}
|
||||
{{ mutableData.items['additional_services'].mutableBefore|date('d.m.Y') }}
|
||||
{% else %}
|
||||
<span class="text-red-600">nicht mehr möglich</span>
|
||||
{% endif %}
|
||||
</span>
|
||||
</li>
|
||||
<li class="flex items-start">
|
||||
<span class="mr-2">•</span>
|
||||
<span>
|
||||
<span class="font-medium">Beförderung:</span>
|
||||
{% if mutableData.items['transportation'].mutable %}
|
||||
{{ mutableData.items['transportation'].mutableBefore|date('d.m.Y') }}
|
||||
{% else %}
|
||||
<span class="text-red-600">nicht mehr möglich</span>
|
||||
{% endif %}
|
||||
</span>
|
||||
</li>
|
||||
<li class="flex items-start">
|
||||
<span class="mr-2">•</span>
|
||||
<span>
|
||||
<span class="font-medium">Zustiege:</span>
|
||||
{% if mutableData.items['pickup'].mutable %}
|
||||
{{ mutableData.items['pickup'].mutableBefore|date('d.m.Y') }}
|
||||
{% else %}
|
||||
<span class="text-red-600">nicht mehr möglich</span>
|
||||
{% endif %}
|
||||
</span>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
{% endif %}
|
||||
|
||||
{# Travel Information #}
|
||||
<div class="mb-6 pb-4 border-b border-gray-200">
|
||||
<h4 class="font-semibold text-lg mb-3 text-gray-800">Reiseinformationen</h4>
|
||||
|
||||
@@ -71,7 +71,7 @@
|
||||
<fieldset>
|
||||
<legend class="w-full flex items-center justify-between">
|
||||
<div class="flex items-center gap-3">
|
||||
<span class="font-bold text-xl">Teilnehmer:in {{ loop.index }}</span>
|
||||
<span class="font-bold text-xl">{{ loop.index == 1 ? 'Anmelder:in' : 'Teilnehmer:in ' ~ loop.index }}</span>
|
||||
{% if isEligible and participantPrices is defined and participantPrices[loop.index0] is defined and participantPrices[loop.index0] > 0.0 %}
|
||||
<span class="text-sm font-medium text-gray-600 bg-gray-100 px-2 py-1 rounded">
|
||||
€{{ participantPrices[loop.index0]|number_format(2, ',', '.') }}
|
||||
@@ -213,10 +213,12 @@
|
||||
<fieldset class="mb-1">
|
||||
<legend class="font-semibold mb-1">Reiseversicherung</legend>
|
||||
<div class="text-sm text-gray-600">
|
||||
{% if participantData.insurance %}
|
||||
{{ participantData.insurance.label }}
|
||||
{% if participantData.insurance.price and participantData.insurance.price > 0 %}
|
||||
<span class="text-gray-500">(€{{ participantData.insurance.price|number_format(2, ',', '.') }})</span>
|
||||
{% set applicantInsurance = form.vars.data.participants[0].insurance %}
|
||||
{% if applicantInsurance %}
|
||||
{{ applicantInsurance.label }}
|
||||
{% set participantPrice = participantPrices[loop.index0] %}
|
||||
{% if participantPrice.insurance and participantPrice.insurance > 0 %}
|
||||
<span class="text-gray-500">(€{{ participantPrice.insurance|number_format(2, ',', '.') }})</span>
|
||||
{% endif %}
|
||||
<span class="italic text-gray-500 ml-2">– wie Anmelder</span>
|
||||
{% else %}
|
||||
|
||||
@@ -53,104 +53,7 @@
|
||||
{% block content %}
|
||||
{% include '_partials/_flashes.html.twig' %}
|
||||
<div {{ stimulus_controller('toast') }}></div>
|
||||
<h1 class="text-3xl font-semibold pb-2">Buchung bearbeiten</h1>
|
||||
|
||||
{# Booking metadata section #}
|
||||
<div class="flex flex-col space-y-8 pb-8">
|
||||
<div class="p-8 border border-gray-300 rounded-md"
|
||||
{{ stimulus_controller('toggle', { 'open': true }, { 'closed': 'hidden' }) }}>
|
||||
<div role="button" tabindex="0" class="flex items-center justify-between focus:outline-2 focus:outline-offset-2 focus:outline-primary-light" {{ stimulus_action('toggle', 'toggle', 'click') | stimulus_action('toggle', 'toggle', 'keydown.space') }}>
|
||||
<span class="block text-2xl font-semibold">Reisedaten</span>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6" {{ stimulus_target('toggle', 'icon') }}>
|
||||
<path stroke-linecap="round" stroke-linejoin="round" d="M8.25 4.5l7.5 7.5-7.5 7.5" />
|
||||
</svg>
|
||||
</div>
|
||||
<div class="grid grid-cols-1 md:grid-cols-3 lg:grid-cols-3 gap-x-8 gap-y-4 pt-4" {{ stimulus_target('toggle', 'toggle') }}>
|
||||
<div>
|
||||
<h2 class="text-lg font-semibold">
|
||||
Reise
|
||||
</h2>
|
||||
{{ bookingData.travelName }}
|
||||
</div>
|
||||
<div>
|
||||
<h3 class="text-lg font-semibold">
|
||||
Reisezeitraum
|
||||
</h3>
|
||||
{{ travelData.dateFrom|date('d.m.Y') }} - {{ travelData.dateTo|date('d.m.Y') }}
|
||||
</div>
|
||||
<div>
|
||||
<h3 class="text-lg font-semibold">
|
||||
Buchungsdatum
|
||||
</h3>
|
||||
{{ bookingData.bookingDate|date('d.m.Y') }}
|
||||
</div>
|
||||
<div>
|
||||
<h3 class="text-lg font-semibold">
|
||||
Vorgangsnummer
|
||||
</h3>
|
||||
{{ bookingData.bookingNumber }}
|
||||
</div>
|
||||
<div>
|
||||
<h3 class="text-lg font-semibold">
|
||||
Rechnungsnummer
|
||||
</h3>
|
||||
{{ bookingData.invoiceNumber }}
|
||||
</div>
|
||||
<div>
|
||||
<h3 class="text-lg font-semibold">
|
||||
Anmelder:in
|
||||
</h3>
|
||||
{{ bookingData.applicant.firstName }} {{ bookingData.applicant.name }}
|
||||
</div>
|
||||
<div>
|
||||
<h3 class="text-lg font-semibold">
|
||||
Anzahl Teilnehmer:innen
|
||||
</h3>
|
||||
{{ bookingData.participants|length }}
|
||||
</div>
|
||||
<div>
|
||||
<h3 class="text-lg font-semibold">
|
||||
Gesamtpreis
|
||||
</h3>
|
||||
{{ bookingData.calculatedTotalPrice|format_currency('EUR') }}
|
||||
</div>
|
||||
<div>
|
||||
<h3 class="text-lg font-semibold">
|
||||
Inklusivleistungen
|
||||
</h3>
|
||||
{% if travelData.includedServices | length == 0 %}
|
||||
-
|
||||
{% else %}
|
||||
<ul class="list-disc pl-4">
|
||||
{% for selectionGroup in travelData.includedServices %}
|
||||
{% for service in selectionGroup.selections %}
|
||||
<li>
|
||||
{{ service.label }}
|
||||
</li>
|
||||
{% endfor %}
|
||||
{% endfor %}
|
||||
</ul>
|
||||
{% endif %}
|
||||
</div>
|
||||
<div>
|
||||
<h3 class="text-lg font-semibold">
|
||||
Aktualisierung möglich bis
|
||||
</h3>
|
||||
<ul class="list-disc pl-4">
|
||||
<li>
|
||||
Zusatzleistungen: {% if mutableData.items['additional_services'].mutable %}{{ mutableData.items['additional_services'].mutableBefore|date('d.m.Y') }}{% else %}nicht mehr möglich{% endif %}
|
||||
</li>
|
||||
<li>
|
||||
Beförderung: {% if mutableData.items['transportation'].mutable %}{{ mutableData.items['transportation'].mutableBefore|date('d.m.Y') }}{% else %}nicht mehr möglich{% endif %}
|
||||
</li>
|
||||
<li>
|
||||
Zustiege: {% if mutableData.items['pickup'].mutable %}{{ mutableData.items['pickup'].mutableBefore|date('d.m.Y') }}{% else %}nicht mehr möglich{% endif %}
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<h1 class="text-3xl font-semibold pb-8">Buchung bearbeiten</h1>
|
||||
|
||||
{# Grid layout with 2/3 form + 1/3 summary #}
|
||||
<div class="grid grid-cols-3 gap-8">
|
||||
@@ -172,7 +75,7 @@
|
||||
<fieldset>
|
||||
<legend class="w-full flex items-center justify-between">
|
||||
<div class="flex items-center gap-3">
|
||||
<span class="font-bold text-xl">Teilnehmer:in {{ loop.index }}</span>
|
||||
<span class="font-bold text-xl">{{ loop.index == 1 ? 'Anmelder:in' : 'Teilnehmer:in ' ~ loop.index }}</span>
|
||||
{% if isCanceled %}
|
||||
<span class="inline-block px-2 py-1 text-xs bg-red-700 text-white rounded">storniert</span>
|
||||
{% endif %}
|
||||
@@ -207,7 +110,7 @@
|
||||
</div>
|
||||
{% endif %}
|
||||
{% else %}
|
||||
{# Personal data section #}
|
||||
{# Personal data section - readonly for applicant (edited via profile settings) #}
|
||||
<div class="grid grid-cols-2 gap-4 pb-4">
|
||||
{{ form_row(participant.firstName) }}
|
||||
{{ form_row(participant.lastName) }}
|
||||
@@ -223,8 +126,29 @@
|
||||
</div>
|
||||
<div class="grid grid-cols-2 gap-4">
|
||||
{{ form_row(participant.email) }}
|
||||
{{ form_row(participant.mobile) }}
|
||||
{% if loop.index0 == 0 and bookingData.applicant.communication and bookingData.applicant.communication.mobile %}
|
||||
{# First participant: use applicant's mobile as placeholder #}
|
||||
{{ form_row(participant.mobile, {'attr': {'placeholder': bookingData.applicant.communication.mobile}}) }}
|
||||
{% else %}
|
||||
{{ form_row(participant.mobile) }}
|
||||
{% endif %}
|
||||
</div>
|
||||
{% if participant.address is defined %}
|
||||
<div class="grid grid-cols-2 gap-4">
|
||||
{% if loop.index0 == 0 and bookingData.applicant.address %}
|
||||
{# First participant: use applicant's address as placeholder #}
|
||||
{{ form_row(participant.address.street, {'attr': {'placeholder': bookingData.applicant.address.street}}) }}
|
||||
{{ form_row(participant.address.postCode, {'attr': {'placeholder': bookingData.applicant.address.postCode}}) }}
|
||||
{{ form_row(participant.address.city, {'attr': {'placeholder': bookingData.applicant.address.city}}) }}
|
||||
{{ form_row(participant.address.country, {'attr': {'placeholder': bookingData.applicant.address.country}}) }}
|
||||
{% else %}
|
||||
{{ form_row(participant.address.street) }}
|
||||
{{ form_row(participant.address.postCode) }}
|
||||
{{ form_row(participant.address.city) }}
|
||||
{{ form_row(participant.address.country) }}
|
||||
{% endif %}
|
||||
</div>
|
||||
{% endif %}
|
||||
{% if participant.bodyDimensions is defined %}
|
||||
<div class="grid grid-cols-2 gap-4">
|
||||
{{ form_row(participant.bodyDimensions.height) }}
|
||||
@@ -317,6 +241,54 @@
|
||||
}
|
||||
}) }}
|
||||
|
||||
<div class="col-span-2">
|
||||
{# Insurance field OR assigned insurance display for dependent participants #}
|
||||
{% set participantData = participant.vars.data %}
|
||||
{% set showBulkInsurance = loop.index > 1 and form.vars.data.participants[0].bulkInsuranceBooking %}
|
||||
|
||||
{% if showBulkInsurance %}
|
||||
<fieldset class="mb-1">
|
||||
<legend class="font-semibold mb-1">Reiseversicherung</legend>
|
||||
<div class="text-sm text-gray-600">
|
||||
{% set applicantInsurance = form.vars.data.participants[0].insurance %}
|
||||
{% if applicantInsurance %}
|
||||
<span class="italic text-gray-500">wie Anmelder: {{ applicantInsurance.label }}</span>
|
||||
{% else %}
|
||||
<span class="italic text-gray-500">wie Anmelder</span>
|
||||
{% endif %}
|
||||
</div>
|
||||
</fieldset>
|
||||
{% else %}
|
||||
<fieldset class="mb-1">
|
||||
<legend class="font-semibold mb-1">Reiseversicherung</legend>
|
||||
|
||||
{# Bulk insurance booking checkbox (applicant only) #}
|
||||
{% if participant.bulkInsuranceBooking is defined %}
|
||||
{{ form_row(participant.bulkInsuranceBooking, {
|
||||
'attr': {
|
||||
'hx-trigger': 'change',
|
||||
'hx-post': path('app_booking_edit_refresh', {'id': bookingData.id}),
|
||||
'hx-swap': 'none'
|
||||
}
|
||||
}) }}
|
||||
{% endif %}
|
||||
|
||||
{% if participant.insurance is defined %}
|
||||
{{ form_row(participant.insurance, {
|
||||
'attr': {
|
||||
'hx-trigger': 'change',
|
||||
'hx-post': path('app_booking_edit_refresh', {'id': bookingData.id}),
|
||||
'hx-swap': 'none'
|
||||
},
|
||||
'label': false
|
||||
}) }}
|
||||
{% else %}
|
||||
<div class="text-sm text-gray-500">Nicht wählbar</div>
|
||||
{% endif %}
|
||||
</fieldset>
|
||||
{% endif %}
|
||||
</div>
|
||||
|
||||
<div class="col-span-2">
|
||||
<h3 class="text-xl font-semibold mb-4">Hin-/Rückreise</h3>
|
||||
<div class="grid grid-cols-2 gap-4">
|
||||
@@ -401,7 +373,8 @@
|
||||
'bookingCreateDto': bookingEditDto,
|
||||
'participantCount': participantCount,
|
||||
'groupedSelectedRooms': groupedSelectedRooms,
|
||||
'assignmentCounts': assignmentCounts
|
||||
'assignmentCounts': assignmentCounts,
|
||||
'mutableData': mutableData|default(null)
|
||||
} %}
|
||||
</div>
|
||||
{% endblock %}
|
||||
|
||||
Reference in New Issue
Block a user