70 lines
3.2 KiB
PHP
70 lines
3.2 KiB
PHP
{{--
|
||
Reporting period selector: quarter presets swap the report body via HTMX (falling back to a
|
||
full page load without JS), the custom range submits a plain GET form.
|
||
|
||
@props
|
||
period: \Leantime\Domain\Reports\Models\ReportPeriod - the active period
|
||
url: string - page URL (fallback links, pushed browser URL, custom-range form action)
|
||
hxUrl: string - HTMX endpoint rendering the report body partial
|
||
target: string - CSS selector of the report body element to swap
|
||
--}}
|
||
@props(['period', 'url', 'hxUrl', 'target' => '#reportBody'])
|
||
|
||
@php
|
||
$presets = [
|
||
\Leantime\Domain\Reports\Models\ReportPeriod::PRESET_LAST_QUARTER => __('label.period_last_quarter'),
|
||
\Leantime\Domain\Reports\Models\ReportPeriod::PRESET_THIS_QUARTER => __('label.period_this_quarter'),
|
||
\Leantime\Domain\Reports\Models\ReportPeriod::PRESET_NEXT_QUARTER => __('label.period_next_quarter'),
|
||
];
|
||
$isCustom = $period->preset === \Leantime\Domain\Reports\Models\ReportPeriod::PRESET_CUSTOM;
|
||
@endphp
|
||
|
||
<div {{ $attributes->merge(['class' => 'periodPicker tw-flex tw-items-center tw-gap-2 tw-flex-wrap']) }}>
|
||
|
||
<div class="btn-group" role="group">
|
||
@foreach ($presets as $presetKey => $presetLabel)
|
||
<a href="{{ $url }}?preset={{ $presetKey }}"
|
||
hx-get="{{ $hxUrl }}?preset={{ $presetKey }}"
|
||
hx-target="{{ $target }}"
|
||
hx-swap="outerHTML"
|
||
hx-push-url="{{ $url }}?preset={{ $presetKey }}"
|
||
class="btn btn-sm btn-secondary @if ($period->preset === $presetKey) active @endif">
|
||
{{ $presetLabel }}
|
||
</a>
|
||
@endforeach
|
||
<button type="button"
|
||
onclick="jQuery(this).closest('.periodPicker').find('.periodPickerCustom').toggle();"
|
||
aria-expanded="{{ $isCustom ? 'true' : 'false' }}"
|
||
class="btn btn-sm btn-secondary @if ($isCustom) active @endif">
|
||
{{ __('label.period_custom') }}
|
||
</button>
|
||
</div>
|
||
|
||
<form method="GET" action="{{ $url }}" class="periodPickerCustom tw-items-center tw-gap-1" style="display: {{ $isCustom ? 'flex' : 'none' }};">
|
||
<input type="hidden" name="preset" value="custom" />
|
||
<input type="text" name="from" class="periodPickerDate" style="width: 110px;"
|
||
placeholder="{{ __('label.period_from') }}"
|
||
value="{{ $isCustom ? $period->from->setToUserTimezone()->formatDateForUser() : '' }}" />
|
||
<span>–</span>
|
||
<input type="text" name="to" class="periodPickerDate" style="width: 110px;"
|
||
placeholder="{{ __('label.period_to') }}"
|
||
value="{{ $isCustom ? $period->to->setToUserTimezone()->formatDateForUser() : '' }}" />
|
||
<button type="submit" class="btn btn-sm btn-primary">{{ __('label.period_apply') }}</button>
|
||
</form>
|
||
|
||
<span class="tw-text-sm tw-opacity-70 periodLabel">{{ $period->label() }}</span>
|
||
|
||
</div>
|
||
|
||
@once
|
||
@push('scripts')
|
||
<script type="text/javascript">
|
||
jQuery(document).ready(function () {
|
||
jQuery('.periodPickerDate').datepicker({
|
||
dateFormat: leantime.dateHelper.getFormatFromSettings('dateformat', 'jquery')
|
||
});
|
||
});
|
||
</script>
|
||
@endpush
|
||
@endonce
|