strprfcrm/resources/views/partials/table.blade.php

<div class="table-responsive js-main-table-scroll">


    <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-heart @if(request()->has('s')) text-danger @endif"></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 @if(request()->has('filters')) text-danger @endif"></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>
    <table class="table table-interactive table-initial-hidden" id="tbl" data-table-name="{{ $id }}">
        <thead class="table-head-shadow">
        <tr>
            @foreach($header as $headerName => $headerTitle)
                <th scope="col" class="bg-primary-subtle column_{{ $headerName }}">
                    <div class="d-flex align-items-center justify-content-between">

                        <div class="@if($headerName !== 'actions') cursor-pointer sort-by-column @endif" data-name="{{ $headerName }}">
                            {{ $headerTitle }}
                        </div>
                        <div class="text-center mx-1 @if($headerName !== 'actions') cursor-pointer @endif" data-name="{{ $headerName }}">
                            @if($headerName !== 'actions' && ($headerName== $sortBy))
                                @if($orderBy === 'asc')
                                    <i class="bi bi-arrow-down-square-fill text-primary"></i>
                                @else
                                    <i class="bi bi-arrow-up-square-fill text-primary"></i>
                                @endif
                            @endif
                        </div>
                        @if(($enableColumnFilters ?? true) && $headerName !== 'image' && $headerName !== 'actions')
                            @php
                                $type = null;
                                $data = (array_merge($filters, $ranges, $dates))[$headerName] ?? null;

                                if (isset($filters[$headerName])) {
                                    $type = 'filters';
                                } elseif (isset($ranges[$headerName])) {
                                    // Для dropdown фильтров вместо диапазона используем список всех вариантов
                                    $type = 'filters';
                                } elseif (isset($dates[$headerName])) {
                                    $type = 'dates';
                                }
                            @endphp
                            <div class="text-end cursor-pointer dropdown" data-bs-auto-close="outside" aria-expanded="false">
                                <i
                                        data-bs-auto-close="outside"
                                        aria-expanded="false"
                                        data-bs-toggle="dropdown"
                                        class="dropdown-toggle bi
                                @if(isset(request()->filters[$headerName]) ||
                                    isset(request()->filters[str_replace('_txt', '', $headerName) . '_from']) ||
                                    isset(request()->filters[str_replace('_txt', '', $headerName) . '_to'])
                                    )
                                    bi-funnel-fill text-danger
                                    @else
                                    bi-funnel
                                @endif
                                " id="{{$headerName}}"></i>
                                @include('partials.newFilterElement', ['id' => $headerName, 'data' => $data, 'type' => $type, 'table' => $id, 'isSort' => $headerName == $sortBy, '$orderBy' => $orderBy])
                            </div>
                        @endif
                    </div>

                </th>
            @endforeach

        </tr>
        </thead>
        <tbody>
        @foreach($strings as $string)
            @php
                $rowId = $string->id ?? null;
                $rowAnchor = $rowId ? 'row-' . $rowId : null;
                $rowHref = null;
                if (isset($routeName) && $rowId) {
                    $rowHref = route($routeName, [$string->id, 'previous_url' => request()->fullUrl() . '#' . $rowAnchor]);
                }
            @endphp
            <tr
                @if($rowAnchor) id="{{ $rowAnchor }}" data-row-id="{{ $rowId }}" @endif
                @if($rowHref) data-row-href="{{ $rowHref }}" @endif
                @if($id === 'reclamations') data-open-target="_blank" @endif
            >
                @foreach($header as $headerName => $headerTitle)
                    <td class="column_{{$headerName}}"
                    >
                        @if(str_contains($headerName, '-'))
                            @php
                                list($rel, $field) = explode('-', $headerName);
                            @endphp
                            @if(isset($string->$rel->$field))
                                @if(str_ends_with($field, '_id'))
                                    @php
                                        $relation = \Illuminate\Support\Str::camel(str_replace('_id', '', $field));
                                    @endphp
                                    {!! $string->$rel->$relation?->name; !!}
                                @else
                                    @if(str_contains($field, 'image') && $string->$rel->$field)
                                        <a href="{{ $string->$rel->$field }}" data-toggle="lightbox"
                                           data-gallery="photos" data-size="fullscreen">
                                            <img src="{{ $string->$rel->$field }}" alt="" class="img-thumbnail maf-img">
                                        </a>
                                    @else
                                        {!! $string->$rel->$field !!}
                                    @endif
                                @endif
                            @else

                                <ul class="small mb-0 list-group list-group-flush bg-secondary">
                                    @foreach($string->$rel ?? [] as $item)
                                        <li class="list-group-item py-0 bg-body-secondary">
                                            {!! $item->$field !!}
                                        </li>
                                    @endforeach
                                </ul>
                            @endif
                        @elseif(str_ends_with($headerName, '_id'))
                            @php
                                $relation = \Illuminate\Support\Str::camel(str_replace('_id', '', $headerName));
                            @endphp
                            @if($headerName == 'order_status_id')
                                <div class="badge fs-5 text-bg-{{ App\Models\Order::STATUS_COLOR[$string->order_status_id] }}">{{ $string->$relation?->name }}</div>
                            @else
                                {!! $string->$relation?->name; !!}
                            @endif
                        @elseif(str_ends_with($headerName, '_date') && ($string->$headerName))
                            {{ \App\Helpers\DateHelper::getHumanDate($string->$headerName, true) }}
                        @elseif(str_contains($headerName, 'image') && $string->$headerName)
                            <a href="{{ $string->$headerName }}" data-toggle="lightbox" data-gallery="photos"
                               data-size="fullscreen">
                                <img src="{{ $string->$headerName }}" alt="" class="img-thumbnail maf-img">
                            </a>
                        @elseif(str_contains($headerName, 'order_status_name'))
                            <select name="order_status_name" data-order-id="{{ $string->id }}" @disabled(!hasRole('admin,manager')) class="change-order-status form-control form-control-sm" >
                                @foreach($statuses as $statusId => $statusName)
                                    <option value="{{ $statusId }}" @selected($statusName == $string->$headerName)>{{ $statusName }}</option>
                                @endforeach
                            </select>
                        @elseif($id === 'reclamations' && $headerName === 'status_name')
                            <select name="status_id"
                                    data-reclamation-id="{{ $string->id }}"
                                    data-url="{{ route('reclamations.update-status', $string->id) }}"
                                    @disabled(!hasRole('admin,manager'))
                                    class="change-reclamation-status form-control form-control-sm">
                                @foreach($statuses as $statusId => $statusName)
                                    <option value="{{ $statusId }}" @selected($statusId == $string->status_id)>{{ $statusName }}</option>
                                @endforeach
                            </select>
                        @elseif($headerName === 'tsn_number' && $string->$headerName)
                            <span data-bs-toggle="tooltip"
                                  data-bs-placement="top"
                                  title="{{ $string->tsn_number_description ?? 'Нет расшифровки' }}"
                                  class="tooltip-help">
                                {{ $string->$headerName }}
                            </span>
                        @elseif($headerName === 'pricing_code' && $string->$headerName)
                            <span data-bs-toggle="tooltip"
                                  data-bs-placement="top"
                                  title="{{ $string->pricing_code_description ?? 'Нет расшифровки' }}"
                                  class="tooltip-help">
                                {{ $string->$headerName }}
                            </span>
                        @elseif($headerName === 'pricing_codes_list' && $string->pricingCodes->count() > 0)
                            @foreach($string->pricingCodes as $pricingCode)
                                <span data-bs-toggle="tooltip"
                                      data-bs-placement="top"
                                      title="{{ $pricingCode->description ?? 'Нет расшифровки' }}"
                                      class="tooltip-help">
                                    {{ $pricingCode->code }}
                                </span>@if(!$loop->last)<br>@endif
                            @endforeach
                        @elseif($id === 'pricing_codes' && $headerName === 'type')
                            @if($string->type === 'tsn_number')
                                <span class="badge bg-info">№ по ТСН</span>
                            @else
                                <span class="badge bg-primary">Шифр расценки</span>
                            @endif
                        @elseif($id === 'pricing_codes' && $headerName === 'description')
                            <div class="d-flex justify-content-between align-items-center">
                                <span class="description-text-{{ $string->id }}">{{ $string->description }}</span>
                                <button type="button" class="btn btn-sm btn-link edit-description"
                                        data-id="{{ $string->id }}"
                                        data-description="{{ $string->description }}">
                                    <i class="bi bi-pencil"></i>
                                </button>
                            </div>
                            <form action="{{ route('pricing_codes.update', $string) }}" method="POST" class="edit-form-{{ $string->id }} is-hidden">
                                @csrf
                                @method('PUT')
                                <div class="input-group input-group-sm">
                                    <input type="text" name="description" class="form-control" value="{{ $string->description }}">
                                    <button type="submit" class="btn btn-success">Сохранить</button>
                                    <button type="button" class="btn btn-secondary cancel-edit" data-id="{{ $string->id }}">Отмена</button>
                                </div>
                            </form>
                        @elseif($id === 'pricing_codes' && $headerName === 'actions')
                            <form action="{{ route('pricing_codes.destroy', $string) }}" method="POST" class="d-inline js-confirm-submit"
                                  data-confirm-message="Удалить код {{ $string->code }}?">
                                @csrf
                                @method('DELETE')
                                <button type="submit" class="btn btn-sm btn-danger">Удалить</button>
                            </form>
                        @elseif($headerName === 'actions' && isset($routeName) && isset($string->id))
                            <a href="{{ route($routeName, $string->id) }}" class="btn btn-sm btn-outline-primary">
                                Редактировать
                            </a>
                        @else
                            <p title="{!! $string->$headerName !!}">
                                {!! \Illuminate\Support\Str::words($string->$headerName, config('app.words_in_table_cell_limit'), ' ...') !!}
                            </p>
                        @endif
                    </td>
                @endforeach
            </tr>
        @endforeach
        </tbody>
    </table>
</div>

<!-- Модальное окно настроек таблицы -->
<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">
                <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">
                @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>
                @endforeach
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Закрыть</button>
            </div>
        </div>
    </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">
                    @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
                    @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>
            </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>

<!-- Модальное окно поиска -->
<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-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">
                <div>
                    Поиск ведётся по следующим колонкам:
                    <span class="fst-italic">
                        @foreach($searchFields as $searchField)
                            {{ $header[$searchField] }}
                            @if(!$loop->last)
                                ,
                            @endif
                        @endforeach
                    </span>
                </div>
                <form class="search-form">
                    @include('partials.input', [
                        'name'  => 's',
                        'title' => 'Поиск',
                        'placeholder' => 'что ищем?',
                        'value' => request()->s ?? '',
                    ])
                </form>

            </div>
            <div class="modal-footer">
                <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>
            </div>
        </div>
    </div>
</div>

@push('scripts')
    <script type="module">
        // Ждём загрузки jQuery через Vite
        function waitForJQuery(callback) {
            if (typeof window.$ !== 'undefined') {
                callback();
            } else {
                setTimeout(() => waitForJQuery(callback), 50);
            }
        }

        waitForJQuery(function () {
        // on page load set column visible
        let tbl = $('#tbl');
        let tableName = tbl.attr('data-table-name');
        let tables = JSON.parse(localStorage.getItem('table_' + tableName));

        // on first load create tables object
        if (!tables) {
            tables = {};
        }

        // hide disabled columns
        $.each(tables, function (colName, colStatus) {
            if (!colStatus) {
                $('.checkbox-' + colName).attr('checked', false);
                $('.column_' + colName).hide();
            }
        });

        // highlight search text
        let searchText = $('.search-form input').val();
        if (searchText !== '') {
            let innerHTML = tbl.html();
            let index = innerHTML.indexOf(searchText);
            if (index >= 0) {
                innerHTML = innerHTML.substring(0, index) + "<span class='highlight'>" + innerHTML.substring(index, index + searchText.length) + "</span>" + innerHTML.substring(index + searchText.length);
                tbl.html(innerHTML);
            }
        }

        $('.table').fadeIn();

        function isRowActionTarget(target) {
            return $(target).closest('a, button, input, select, textarea, label, .dropdown, [data-bs-toggle], [data-no-row-select]').length > 0;
        }

        function selectRow($row, updateHash = true) {
            if (!$row || !$row.length) {
                return;
            }
            $row.closest('tbody').find('tr.is-selected').removeClass('is-selected');
            $row.addClass('is-selected');
            if (updateHash) {
                const rowId = $row.data('row-id');
                if (rowId) {
                    const hash = '#row-' + rowId;
                    const newUrl = window.location.pathname + window.location.search + hash;
                    history.replaceState(null, '', newUrl);
                    if (tableName) {
                        localStorage.setItem('table_last_row_' + tableName, String(rowId));
                    }
                }
            }
        }

        $(document).on('click', '.table-interactive tbody tr', function (e) {
            if (isRowActionTarget(e.target)) {
                return;
            }
            selectRow($(this));
        });

        $(document).on('dblclick', '.table-interactive tbody tr', function (e) {
            if (isRowActionTarget(e.target)) {
                return;
            }
            const $row = $(this);
            const href = $row.data('row-href');
            if (!href) {
                return;
            }
            selectRow($row, false);
            const target = $row.data('open-target');
            if (target === '_blank') {
                window.open(href, '_blank');
            } else {
                window.location.href = href;
            }
        });

        $('.toggle-column').on('change', function () {
            let columnName = $(this).attr('data-name');
            let columnStatus = $(this).is(':checked');

            // save column status
            tables[columnName] = columnStatus;
            localStorage.setItem('table_' + tableName, JSON.stringify(tables));

            // show or hide column
            if (columnStatus) {
                $('.column_' + columnName).show('fast');
            } else {
                $('.column_' + columnName).hide('fast');
            }
        });

        $('.sort-by-column').on('click', function () {
            let columnName = $(this).attr('data-name');
            let currentUrl = new URL(document.location.href);
            let currentColumnName = currentUrl.searchParams.get('sortBy');
            currentUrl.searchParams.set('sortBy', columnName);
            if ((currentColumnName !== columnName) || (currentUrl.searchParams.has('order'))) {
                currentUrl.searchParams.delete('order');
            } else {
                currentUrl.searchParams.set('order', 'desc');
            }
            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);
                }
            });
            currentUrl.searchParams.delete('page');
            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);
            });
            currentUrl.searchParams.delete('page');
            document.location.href = currentUrl.href;
        });

        $('.accept-search').on('click', function () {
            let s = $('.search-form input').val();
            let currentUrl = new URL(document.location.href);
            if (s !== '') {
                currentUrl.searchParams.set('s', s);
            } else {
                currentUrl.searchParams.delete('s');
            }
            currentUrl.searchParams.delete('page');
            document.location.href = currentUrl.href;
        });

        $('.reset-search').on('click', function () {
            let currentUrl = new URL(document.location.href);
            currentUrl.searchParams.delete('s');
            currentUrl.searchParams.delete('page');
            document.location.href = currentUrl.href;
        });

        $('.change-order-status').on('change', function () {
            let orderStatusId = $(this).val();
            let orderId = $(this).attr('data-order-id');

            $.post(
                '{{ route('order.update') }}',
                {
                    '_token' : '{{ csrf_token() }}',
                    id: orderId,
                    order_status_id: orderStatusId
                },
                function () {
                    $('.alerts').append(
                        '<div class="main-alert alert alert-success" role="alert">Обновлён статус площадки!</div>'
                    );
                    setTimeout(function () {
                        $('.main-alert').fadeTo(2000, 500).slideUp(500, function () {
                            $(".main-alert").slideUp(500);
                        })
                    }, 3000);
                }
            );
        });

        $('.change-reclamation-status').on('change', function () {
            let statusId = $(this).val();
            let url = $(this).attr('data-url');

            $.post(
                url,
                {
                    '_token' : '{{ csrf_token() }}',
                    status_id: statusId
                },
                function () {
                    $('.alerts').append(
                        '<div class="main-alert alert alert-success" role="alert">Обновлён статус рекламации!</div>'
                    );
                    setTimeout(function () {
                        $('.main-alert').fadeTo(2000, 500).slideUp(500, function () {
                            $(".main-alert").slideUp(500);
                        })
                    }, 3000);
                }
            );
        });

        function updateMainTableScrollHeight() {
            const tableScrollElement = document.querySelector('.js-main-table-scroll');
            if (!tableScrollElement) {
                return;
            }

            const tableTop = tableScrollElement.getBoundingClientRect().top;
            const bottomGap = 16;
            let paginationHeight = 0;

            const paginationRow = document.querySelector('.pagination')?.closest('.row');
            if (paginationRow) {
                paginationHeight = paginationRow.getBoundingClientRect().height + 8;
            }

            const maxHeight = Math.max(180, window.innerHeight - tableTop - paginationHeight - bottomGap);
            tableScrollElement.style.maxHeight = maxHeight + 'px';
        }

        $(document).ready(function () {
            updateMainTableScrollHeight();
            window.addEventListener('resize', updateMainTableScrollHeight);

            // Инициализация tooltips для полей tsn_number и pricing_code
            const tooltipTriggerList = document.querySelectorAll('[data-bs-toggle="tooltip"]');
            const tooltipList = [...tooltipTriggerList].map(tooltipTriggerEl => new bootstrap.Tooltip(tooltipTriggerEl));

            const hash = window.location.hash;
            if (hash && hash.startsWith('#row-')) {
                const $row = $(hash);
                if ($row.length) {
                    selectRow($row, false);
                    $row[0].scrollIntoView({block: 'center'});
                    const rowId = $row.data('row-id');
                    if (rowId && tableName) {
                        localStorage.setItem('table_last_row_' + tableName, String(rowId));
                    }
                    return;
                }
            }

            if (tableName) {
                const storedRowId = localStorage.getItem('table_last_row_' + tableName);
                if (storedRowId) {
                    const $storedRow = $('#row-' + storedRowId);
                    if ($storedRow.length) {
                        selectRow($storedRow, false);
                        $storedRow[0].scrollIntoView({block: 'center'});
                    }
                }
            }
        });
        }); // end waitForJQuery
    </script>
@endpush