|
@@ -1,25 +1,27 @@
|
|
|
-
|
|
|
|
|
<div class="table-responsive">
|
|
<div class="table-responsive">
|
|
|
|
|
|
|
|
|
|
|
|
|
<div class="table-buttons py-2 bg-primary rounded-start d-flex flex-column ">
|
|
<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">
|
|
|
|
|
|
|
+ <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>
|
|
<i class="bi bi-search"></i>
|
|
|
</button>
|
|
</button>
|
|
|
|
|
|
|
|
- <button type="button" class="btn btn-sm text-white " data-bs-toggle="modal" data-bs-target="#table_{{ $id }}_modal_filters">
|
|
|
|
|
|
|
+ <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>
|
|
<i class="bi bi-funnel-fill"></i>
|
|
|
</button>
|
|
</button>
|
|
|
|
|
|
|
|
- <button type="button" class="btn btn-sm text-white " data-bs-toggle="modal" data-bs-target="#table_{{ $id }}_modal_settings">
|
|
|
|
|
|
|
+ <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>
|
|
<i class="bi bi-gear-fill"></i>
|
|
|
</button>
|
|
</button>
|
|
|
</div>
|
|
</div>
|
|
|
<table class="table" id="tbl" data-table-name="{{ $id }}" style="display: none;">
|
|
<table class="table" id="tbl" data-table-name="{{ $id }}" style="display: none;">
|
|
|
<thead>
|
|
<thead>
|
|
|
- <tr>
|
|
|
|
|
- @foreach($header as $headerName => $headerTitle)
|
|
|
|
|
- <th scope="col" class="bg-primary-subtle column_{{ $headerName }}">
|
|
|
|
|
|
|
+ <tr>
|
|
|
|
|
+ @foreach($header as $headerName => $headerTitle)
|
|
|
|
|
+ <th scope="col" class="bg-primary-subtle column_{{ $headerName }}">
|
|
|
<span class="cursor-pointer sort-by-column" data-name="{{ $headerName }}">
|
|
<span class="cursor-pointer sort-by-column" data-name="{{ $headerName }}">
|
|
|
{{ $headerTitle }}
|
|
{{ $headerTitle }}
|
|
|
@if(str_starts_with($headerName, $sortBy))
|
|
@if(str_starts_with($headerName, $sortBy))
|
|
@@ -37,16 +39,17 @@
|
|
|
<i class="bi bi-funnel"></i>
|
|
<i class="bi bi-funnel"></i>
|
|
|
@endif
|
|
@endif
|
|
|
</span>
|
|
</span>
|
|
|
- </th>
|
|
|
|
|
- @endforeach
|
|
|
|
|
|
|
+ </th>
|
|
|
|
|
+ @endforeach
|
|
|
|
|
|
|
|
- </tr>
|
|
|
|
|
|
|
+ </tr>
|
|
|
</thead>
|
|
</thead>
|
|
|
<tbody>
|
|
<tbody>
|
|
|
@foreach($strings as $string)
|
|
@foreach($strings as $string)
|
|
|
<tr>
|
|
<tr>
|
|
|
@foreach($header as $headerName => $headerTitle)
|
|
@foreach($header as $headerName => $headerTitle)
|
|
|
- <td class="column_{{$headerName}}" @isset($routeName) onclick="location.href='{{ route($routeName, $string->id) }}'" @endisset>
|
|
|
|
|
|
|
+ <td class="column_{{$headerName}}"
|
|
|
|
|
+ @isset($routeName) onclick="location.href='{{ route($routeName, $string->id) }}'" @endisset>
|
|
|
@if(str_contains($headerName, '-'))
|
|
@if(str_contains($headerName, '-'))
|
|
|
@php
|
|
@php
|
|
|
list($rel, $field) = explode('-', $headerName);
|
|
list($rel, $field) = explode('-', $headerName);
|
|
@@ -80,7 +83,8 @@
|
|
|
</div>
|
|
</div>
|
|
|
|
|
|
|
|
<!-- Модальное окно настроек таблицы -->
|
|
<!-- Модальное окно настроек таблицы -->
|
|
|
-<div class="modal fade" id="table_{{ $id }}_modal_settings" 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-dialog modal-fullscreen-sm-down">
|
|
|
<div class="modal-content">
|
|
<div class="modal-content">
|
|
|
<div class="modal-header">
|
|
<div class="modal-header">
|
|
@@ -89,9 +93,11 @@
|
|
|
</div>
|
|
</div>
|
|
|
<div class="modal-body">
|
|
<div class="modal-body">
|
|
|
@foreach($header as $headerName => $headerTitle)
|
|
@foreach($header as $headerName => $headerTitle)
|
|
|
- <div>
|
|
|
|
|
- <label class="me-3"><input type="checkbox" checked="checked" data-name="{{ $headerName }}" class="toggle-column checkbox-{{ $headerName }}"> {{ $headerTitle }}</label>
|
|
|
|
|
- </div>
|
|
|
|
|
|
|
+ <div>
|
|
|
|
|
+ <label class="me-3"><input type="checkbox" checked="checked" data-name="{{ $headerName }}"
|
|
|
|
|
+ class="toggle-column checkbox-{{ $headerName }}"> {{ $headerTitle }}
|
|
|
|
|
+ </label>
|
|
|
|
|
+ </div>
|
|
|
@endforeach
|
|
@endforeach
|
|
|
</div>
|
|
</div>
|
|
|
<div class="modal-footer">
|
|
<div class="modal-footer">
|
|
@@ -102,7 +108,8 @@
|
|
|
</div>
|
|
</div>
|
|
|
|
|
|
|
|
<!-- Модальное окно фильтров -->
|
|
<!-- Модальное окно фильтров -->
|
|
|
-<div class="modal fade" id="table_{{ $id }}_modal_filters" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
|
|
|
|
|
|
|
+<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-dialog modal-fullscreen-sm-down modal-lg">
|
|
|
<div class="modal-content">
|
|
<div class="modal-content">
|
|
|
<div class="modal-header">
|
|
<div class="modal-header">
|
|
@@ -111,64 +118,75 @@
|
|
|
</div>
|
|
</div>
|
|
|
<div class="modal-body">
|
|
<div class="modal-body">
|
|
|
<form class="filters">
|
|
<form class="filters">
|
|
|
- @foreach($filters as $filterName => $filter)
|
|
|
|
|
- @php $filter['values'] = ['' => ''] + $filter['values'] @endphp
|
|
|
|
|
- @include('partials.select', [
|
|
|
|
|
- 'name' => 'filters[' . $filterName . ']',
|
|
|
|
|
- 'title' => $filter['title'],
|
|
|
|
|
- 'options' => $filter['values'],
|
|
|
|
|
- 'value' => request()->filters[$filterName] ?? '',
|
|
|
|
|
- ])
|
|
|
|
|
- @endforeach
|
|
|
|
|
- @foreach($ranges as $rangeName => $range)
|
|
|
|
|
|
|
+ @if(isset($filters) && is_array($filters))
|
|
|
|
|
+ @foreach($filters as $filterName => $filter)
|
|
|
|
|
+ @php $filter['values'] = ['' => ''] + $filter['values'] @endphp
|
|
|
|
|
+ @include('partials.select', [
|
|
|
|
|
+ 'name' => 'filters[' . $filterName . ']',
|
|
|
|
|
+ 'title' => $filter['title'],
|
|
|
|
|
+ 'options' => $filter['values'],
|
|
|
|
|
+ 'value' => request()->filters[$filterName] ?? '',
|
|
|
|
|
+ ])
|
|
|
|
|
+ @endforeach
|
|
|
|
|
+ @endif
|
|
|
|
|
+
|
|
|
|
|
+ @if(isset($ranges) && is_array($ranges))
|
|
|
|
|
+
|
|
|
|
|
+ @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
|
|
|
|
|
|
|
+ @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
|
|
|
|
|
+ @endif
|
|
|
|
|
+ @if(isset($dates) && is_array($dates))
|
|
|
|
|
+
|
|
|
|
|
+ @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
|
|
|
|
|
+ @endif
|
|
|
</form>
|
|
</form>
|
|
|
</div>
|
|
</div>
|
|
|
<div class="modal-footer">
|
|
<div class="modal-footer">
|
|
|
<button type="button" class="btn btn-primary accept-filters" data-bs-dismiss="modal">Применить</button>
|
|
<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>
|
|
|
|
|
|
|
+ <button type="button" class="btn btn-outline-secondary reset-filters" data-bs-dismiss="modal">Сбросить
|
|
|
|
|
+ </button>
|
|
|
</div>
|
|
</div>
|
|
|
</div>
|
|
</div>
|
|
|
</div>
|
|
</div>
|
|
|
</div>
|
|
</div>
|
|
|
|
|
|
|
|
<!-- Модальное окно поиска -->
|
|
<!-- Модальное окно поиска -->
|
|
|
-<div class="modal fade" id="table_{{ $id }}_modal_search" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
|
|
|
|
|
|
|
+<div class="modal fade" id="table_{{ $id }}_modal_search" tabindex="-1" aria-labelledby="exampleModalLabel"
|
|
|
|
|
+ aria-hidden="true">
|
|
|
<div class="modal-dialog modal-fullscreen-sm-down modal-lg">
|
|
<div class="modal-dialog modal-fullscreen-sm-down modal-lg">
|
|
|
<div class="modal-content">
|
|
<div class="modal-content">
|
|
|
<div class="modal-header">
|
|
<div class="modal-header">
|
|
@@ -181,7 +199,9 @@
|
|
|
<span class="fst-italic">
|
|
<span class="fst-italic">
|
|
|
@foreach($searchFields as $searchField)
|
|
@foreach($searchFields as $searchField)
|
|
|
{{ $header[$searchField] }}
|
|
{{ $header[$searchField] }}
|
|
|
- @if(!$loop->last),@endif
|
|
|
|
|
|
|
+ @if(!$loop->last)
|
|
|
|
|
+ ,
|
|
|
|
|
+ @endif
|
|
|
@endforeach
|
|
@endforeach
|
|
|
</span>
|
|
</span>
|
|
|
</div>
|
|
</div>
|
|
@@ -197,7 +217,8 @@
|
|
|
</div>
|
|
</div>
|
|
|
<div class="modal-footer">
|
|
<div class="modal-footer">
|
|
|
<button type="button" class="btn btn-primary accept-search" data-bs-dismiss="modal">Найти</button>
|
|
<button type="button" class="btn btn-primary accept-search" data-bs-dismiss="modal">Найти</button>
|
|
|
- <button type="button" class="btn btn-outline-secondary reset-search" data-bs-dismiss="modal">Сбросить</button>
|
|
|
|
|
|
|
+ <button type="button" class="btn btn-outline-secondary reset-search" data-bs-dismiss="modal">Сбросить
|
|
|
|
|
+ </button>
|
|
|
</div>
|
|
</div>
|
|
|
</div>
|
|
</div>
|
|
|
</div>
|
|
</div>
|
|
@@ -208,26 +229,28 @@
|
|
|
// on page load set column visible
|
|
// on page load set column visible
|
|
|
let tbl = $('#tbl');
|
|
let tbl = $('#tbl');
|
|
|
let tableName = tbl.attr('data-table-name');
|
|
let tableName = tbl.attr('data-table-name');
|
|
|
- let tables = JSON.parse(localStorage.getItem('table_'+tableName));
|
|
|
|
|
|
|
+ let tables = JSON.parse(localStorage.getItem('table_' + tableName));
|
|
|
|
|
|
|
|
// on first load create tables object
|
|
// on first load create tables object
|
|
|
- if(!tables) { tables = {}; }
|
|
|
|
|
|
|
+ if (!tables) {
|
|
|
|
|
+ tables = {};
|
|
|
|
|
+ }
|
|
|
|
|
|
|
|
// hide disabled columns
|
|
// hide disabled columns
|
|
|
$.each(tables, function (colName, colStatus) {
|
|
$.each(tables, function (colName, colStatus) {
|
|
|
- if(!colStatus) {
|
|
|
|
|
- $('.checkbox-'+colName).attr('checked', false);
|
|
|
|
|
- $('.column_'+colName).hide();
|
|
|
|
|
|
|
+ if (!colStatus) {
|
|
|
|
|
+ $('.checkbox-' + colName).attr('checked', false);
|
|
|
|
|
+ $('.column_' + colName).hide();
|
|
|
}
|
|
}
|
|
|
});
|
|
});
|
|
|
|
|
|
|
|
// highlight search text
|
|
// highlight search text
|
|
|
let searchText = $('.search-form input').val();
|
|
let searchText = $('.search-form input').val();
|
|
|
- if(searchText !== '') {
|
|
|
|
|
|
|
+ if (searchText !== '') {
|
|
|
let innerHTML = tbl.html();
|
|
let innerHTML = tbl.html();
|
|
|
let index = innerHTML.indexOf(searchText);
|
|
let index = innerHTML.indexOf(searchText);
|
|
|
if (index >= 0) {
|
|
if (index >= 0) {
|
|
|
- innerHTML = innerHTML.substring(0,index) + "<span class='highlight'>" + innerHTML.substring(index,index+searchText.length) + "</span>" + innerHTML.substring(index + searchText.length);
|
|
|
|
|
|
|
+ innerHTML = innerHTML.substring(0, index) + "<span class='highlight'>" + innerHTML.substring(index, index + searchText.length) + "</span>" + innerHTML.substring(index + searchText.length);
|
|
|
tbl.html(innerHTML);
|
|
tbl.html(innerHTML);
|
|
|
}
|
|
}
|
|
|
}
|
|
}
|
|
@@ -240,13 +263,13 @@
|
|
|
|
|
|
|
|
// save column status
|
|
// save column status
|
|
|
tables[columnName] = columnStatus;
|
|
tables[columnName] = columnStatus;
|
|
|
- localStorage.setItem('table_'+tableName, JSON.stringify(tables));
|
|
|
|
|
|
|
+ localStorage.setItem('table_' + tableName, JSON.stringify(tables));
|
|
|
|
|
|
|
|
// show or hide column
|
|
// show or hide column
|
|
|
- if(columnStatus) {
|
|
|
|
|
- $('.column_'+columnName).show('fast');
|
|
|
|
|
|
|
+ if (columnStatus) {
|
|
|
|
|
+ $('.column_' + columnName).show('fast');
|
|
|
} else {
|
|
} else {
|
|
|
- $('.column_'+columnName).hide('fast');
|
|
|
|
|
|
|
+ $('.column_' + columnName).hide('fast');
|
|
|
}
|
|
}
|
|
|
});
|
|
});
|
|
|
|
|
|
|
@@ -255,7 +278,7 @@
|
|
|
let currentUrl = new URL(document.location.href);
|
|
let currentUrl = new URL(document.location.href);
|
|
|
let currentColumnName = currentUrl.searchParams.get('sortBy');
|
|
let currentColumnName = currentUrl.searchParams.get('sortBy');
|
|
|
currentUrl.searchParams.set('sortBy', columnName);
|
|
currentUrl.searchParams.set('sortBy', columnName);
|
|
|
- if((currentColumnName !== columnName) || (currentUrl.searchParams.has('order'))) {
|
|
|
|
|
|
|
+ if ((currentColumnName !== columnName) || (currentUrl.searchParams.has('order'))) {
|
|
|
currentUrl.searchParams.delete('order');
|
|
currentUrl.searchParams.delete('order');
|
|
|
} else {
|
|
} else {
|
|
|
currentUrl.searchParams.set('order', 'desc');
|
|
currentUrl.searchParams.set('order', 'desc');
|
|
@@ -267,7 +290,7 @@
|
|
|
let filters = $('.filters').serializeArray();
|
|
let filters = $('.filters').serializeArray();
|
|
|
let currentUrl = new URL(document.location.href);
|
|
let currentUrl = new URL(document.location.href);
|
|
|
$.each(filters, function (id, filter) {
|
|
$.each(filters, function (id, filter) {
|
|
|
- if(filter.value !== '') {
|
|
|
|
|
|
|
+ if (filter.value !== '') {
|
|
|
currentUrl.searchParams.set(filter.name, filter.value);
|
|
currentUrl.searchParams.set(filter.name, filter.value);
|
|
|
} else {
|
|
} else {
|
|
|
currentUrl.searchParams.delete(filter.name);
|
|
currentUrl.searchParams.delete(filter.name);
|
|
@@ -290,11 +313,11 @@
|
|
|
$('.accept-search').on('click', function () {
|
|
$('.accept-search').on('click', function () {
|
|
|
let s = $('.search-form input').val();
|
|
let s = $('.search-form input').val();
|
|
|
let currentUrl = new URL(document.location.href);
|
|
let currentUrl = new URL(document.location.href);
|
|
|
- if(s !== '') {
|
|
|
|
|
- currentUrl.searchParams.set('s', s);
|
|
|
|
|
- } else {
|
|
|
|
|
- currentUrl.searchParams.delete('s');
|
|
|
|
|
- }
|
|
|
|
|
|
|
+ if (s !== '') {
|
|
|
|
|
+ currentUrl.searchParams.set('s', s);
|
|
|
|
|
+ } else {
|
|
|
|
|
+ currentUrl.searchParams.delete('s');
|
|
|
|
|
+ }
|
|
|
currentUrl.searchParams.delete('page');
|
|
currentUrl.searchParams.delete('page');
|
|
|
document.location.href = currentUrl.href;
|
|
document.location.href = currentUrl.href;
|
|
|
});
|
|
});
|