|
|
@@ -1,7 +1,17 @@
|
|
|
|
|
|
<div class="table-responsive">
|
|
|
- <div class="py-2 bg-primary rounded-start" style="position: absolute; right: 0">
|
|
|
- <button type="button" class="btn btn-sm btn-primary " data-bs-toggle="modal" data-bs-target="#table_{{ $id }}_modal">
|
|
|
+
|
|
|
+
|
|
|
+ <div class="table-buttons py-2 bg-primary rounded-start d-flex flex-column ">
|
|
|
+ <button type="button" class="btn btn-sm text-white" data-bs-toggle="modal" data-bs-target="#table_{{ $id }}_modal_search">
|
|
|
+ <i class="bi bi-search"></i>
|
|
|
+ </button>
|
|
|
+
|
|
|
+ <button type="button" class="btn btn-sm text-white " data-bs-toggle="modal" data-bs-target="#table_{{ $id }}_modal_filters">
|
|
|
+ <i class="bi bi-funnel-fill"></i>
|
|
|
+ </button>
|
|
|
+
|
|
|
+ <button type="button" class="btn btn-sm text-white " data-bs-toggle="modal" data-bs-target="#table_{{ $id }}_modal_settings">
|
|
|
<i class="bi bi-gear-fill"></i>
|
|
|
</button>
|
|
|
</div>
|
|
|
@@ -9,7 +19,7 @@
|
|
|
<thead>
|
|
|
<tr>
|
|
|
@foreach($header as $headerName => $headerTitle)
|
|
|
- <th scope="col" class="bg-primary-subtle column_{{ $headerName }} hrader_{{ $headerName }}">
|
|
|
+ <th scope="col" class="bg-primary-subtle column_{{ $headerName }}">
|
|
|
<span class="cursor-pointer sort-by-column" data-name="{{ $headerName }}">
|
|
|
{{ $headerTitle }}
|
|
|
@if(str_starts_with($headerName, $sortBy))
|
|
|
@@ -20,6 +30,12 @@
|
|
|
@endif
|
|
|
@endif
|
|
|
|
|
|
+ @if(isset(request()->filters[$headerName]) ||
|
|
|
+ isset(request()->filters[str_replace('_txt', '', $headerName) . '_from']) ||
|
|
|
+ isset(request()->filters[str_replace('_txt', '', $headerName) . '_to'])
|
|
|
+ )
|
|
|
+ <i class="bi bi-funnel"></i>
|
|
|
+ @endif
|
|
|
</span>
|
|
|
</th>
|
|
|
@endforeach
|
|
|
@@ -39,7 +55,7 @@
|
|
|
</div>
|
|
|
|
|
|
<!-- Модальное окно настроек таблицы -->
|
|
|
-<div class="modal fade" id="table_{{ $id }}_modal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
|
|
|
+<div class="modal fade" id="table_{{ $id }}_modal_settings" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
|
|
|
<div class="modal-dialog modal-fullscreen-sm-down">
|
|
|
<div class="modal-content">
|
|
|
<div class="modal-header">
|
|
|
@@ -60,6 +76,74 @@
|
|
|
</div>
|
|
|
</div>
|
|
|
|
|
|
+<!-- Модальное окно фильтров -->
|
|
|
+<div class="modal fade" id="table_{{ $id }}_modal_filters" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
|
|
|
+ <div class="modal-dialog modal-fullscreen-sm-down modal-lg">
|
|
|
+ <div class="modal-content">
|
|
|
+ <div class="modal-header">
|
|
|
+ <h1 class="modal-title fs-5" id="exampleModalLabel">Фильтры по колонкам таблицы</h1>
|
|
|
+ <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Закрыть"></button>
|
|
|
+ </div>
|
|
|
+ <div class="modal-body">
|
|
|
+ <form class="filters">
|
|
|
+ @foreach($filters as $filterName => $filter)
|
|
|
+ @php array_unshift($filter['values'], '') @endphp
|
|
|
+ @include('partials.select', [
|
|
|
+ 'name' => 'filters[' . $filterName . ']',
|
|
|
+ 'title' => $filter['title'],
|
|
|
+ 'options' => $filter['values'],
|
|
|
+ 'value' => request()->filters[$filterName] ?? '',
|
|
|
+ 'key_as_val' => true
|
|
|
+ ])
|
|
|
+ @endforeach
|
|
|
+ @foreach($ranges as $rangeName => $range)
|
|
|
+
|
|
|
+ @include('partials.input', [
|
|
|
+ 'name' => 'filters[' . $rangeName . '_from]',
|
|
|
+ 'type' => 'number',
|
|
|
+ 'title' => $range['title'] . ' с:',
|
|
|
+ 'min' => $range['min'],
|
|
|
+ 'max' => $range['max'],
|
|
|
+ 'value' => request()->filters[$rangeName . '_from'] ?? '', // $range['min']
|
|
|
+ ])
|
|
|
+ @include('partials.input', [
|
|
|
+ 'name' => 'filters[' . $rangeName . '_to]',
|
|
|
+ 'type' => 'number',
|
|
|
+ 'title' => ' по:',
|
|
|
+ 'min' => $range['min'],
|
|
|
+ 'max' => $range['max'],
|
|
|
+ 'value' => request()->filters[$rangeName . '_to'] ?? '', // $range['max']
|
|
|
+ ])
|
|
|
+ @endforeach
|
|
|
+ @foreach($dates as $rangeName => $range)
|
|
|
+ @include('partials.input', [
|
|
|
+ 'name' => 'filters[' . $rangeName . '_from]',
|
|
|
+ 'type' => 'date',
|
|
|
+ 'title' => $range['title'] . ' с:',
|
|
|
+ 'min' => $range['min'],
|
|
|
+ 'max' => $range['max'],
|
|
|
+ 'value' => request()->filters[$rangeName . '_from'] ?? '',
|
|
|
+ ])
|
|
|
+ @include('partials.input', [
|
|
|
+ 'name' => 'filters[' . $rangeName . '_to]',
|
|
|
+ 'type' => 'date',
|
|
|
+ 'title' => $range['title'] . ' по:',
|
|
|
+ 'min' => $range['min'],
|
|
|
+ 'max' => $range['max'],
|
|
|
+ 'value' => request()->filters[$rangeName . '_to'] ?? '',
|
|
|
+ ])
|
|
|
+ @endforeach
|
|
|
+ </form>
|
|
|
+ </div>
|
|
|
+ <div class="modal-footer">
|
|
|
+ <button type="button" class="btn btn-primary accept-filters" data-bs-dismiss="modal">Применить</button>
|
|
|
+ <button type="button" class="btn btn-outline-secondary reset-filters" data-bs-dismiss="modal">Сбросить</button>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+</div>
|
|
|
+
|
|
|
+@dump($filters, $ranges, $dates)
|
|
|
|
|
|
@push('scripts')
|
|
|
<script type="module">
|
|
|
@@ -108,6 +192,28 @@
|
|
|
document.location.href = currentUrl.href;
|
|
|
});
|
|
|
|
|
|
+ $('.accept-filters').on('click', function () {
|
|
|
+ let filters = $('.filters').serializeArray();
|
|
|
+ let currentUrl = new URL(document.location.href);
|
|
|
+ $.each(filters, function (id, filter) {
|
|
|
+ if(filter.value !== '') {
|
|
|
+ currentUrl.searchParams.set(filter.name, filter.value);
|
|
|
+ } else {
|
|
|
+ currentUrl.searchParams.delete(filter.name);
|
|
|
+ }
|
|
|
+ });
|
|
|
+ document.location.href = currentUrl.href;
|
|
|
+ });
|
|
|
+
|
|
|
+ $('.reset-filters').on('click', function () {
|
|
|
+ let filters = $('.filters').serializeArray();
|
|
|
+ let currentUrl = new URL(document.location.href);
|
|
|
+ $.each(filters, function (id, filter) {
|
|
|
+ currentUrl.searchParams.delete(filter.name);
|
|
|
+ });
|
|
|
+ document.location.href = currentUrl.href;
|
|
|
+ });
|
|
|
+
|
|
|
|
|
|
|
|
|
</script>
|