137 lines
4.3 KiB
PHP
137 lines
4.3 KiB
PHP
@php
|
|
$dtColumns = collect($columns)->map(function ($c, $index) {
|
|
return [
|
|
'data' => $c['key'],
|
|
'name' => $c['key'],
|
|
'orderable' => $c['orderable'] ?? true,
|
|
'searchable' => $c['searchable'] ?? true,
|
|
'visible' => $c['visible'] ?? true,
|
|
'key' => $c['key'],
|
|
'label' => $c['label'],
|
|
];
|
|
})->values();
|
|
@endphp
|
|
|
|
<div class="d-flex justify-content-end align-items-center mb-3">
|
|
<button class="btn btn-outline-secondary btn-sm" type="button" data-bs-toggle="offcanvas" data-bs-target="#{{ $id }}-column-offcanvas">
|
|
<i class="ti ti-columns"></i> Columns
|
|
</button>
|
|
</div>
|
|
|
|
<div class="table-responsive">
|
|
<table id="{{ $id }}" class="table table-striped w-100">
|
|
<thead>
|
|
<tr>
|
|
@foreach($columns as $col)
|
|
<th>{{ $col['label'] }}</th>
|
|
@endforeach
|
|
</tr>
|
|
</thead>
|
|
</table>
|
|
</div>
|
|
|
|
<div class="offcanvas offcanvas-end" tabindex="-1" id="{{ $id }}-column-offcanvas">
|
|
<div class="offcanvas-header border-bottom">
|
|
<h5 class="offcanvas-title">Column Visibility</h5>
|
|
<button type="button" class="btn-close" data-bs-dismiss="offcanvas"></button>
|
|
</div>
|
|
<div class="offcanvas-body">
|
|
<p class="text-muted small mb-3"><i class="ti ti-arrows-sort me-1"></i> Drag to reorder columns</p>
|
|
<div id="{{ $id }}-column-list">
|
|
@foreach($columns as $index => $col)
|
|
@if((!isset($col['visibility']) || $col['visibility'] !== false) && $col['key'] !== 'checkbox')
|
|
<div class="form-check form-switch mb-2 p-2 rounded cursor-move column-item" data-column-key="{{ $col['key'] }}" data-column-index="{{ $index }}">
|
|
<input type="checkbox" class="form-check-input column-toggle"
|
|
data-column-key="{{ $col['key'] }}"
|
|
data-column-index="{{ $index }}"
|
|
id="{{ $id }}-col-{{ $index }}"
|
|
{{ !isset($col['visible']) || $col['visible'] !== false ? 'checked' : '' }}>
|
|
<label class="form-check-label user-select-none" for="{{ $id }}-col-{{ $index }}">{{ $col['label'] }}</label>
|
|
</div>
|
|
@endif
|
|
@endforeach
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
@push('custom-scripts')
|
|
<script src="{{ asset('build/plugins/sortablejs/Sortable.min.js') }}"></script>
|
|
<script>
|
|
document.addEventListener('DOMContentLoaded', function () {
|
|
var dtColumns = @json($dtColumns);
|
|
var table = $('#{{ $id }}').DataTable({
|
|
processing: true,
|
|
serverSide: true,
|
|
ajax: '{{ $ajax }}',
|
|
columns: dtColumns,
|
|
colReorder: true,
|
|
});
|
|
|
|
$('#{{ $id }}-column-offcanvas').on('change', '.column-toggle', function () {
|
|
var columnKey = $(this).data('column-key');
|
|
var colIdx = -1;
|
|
dtColumns.forEach(function(col, idx) {
|
|
if (col.key === columnKey) {
|
|
colIdx = idx;
|
|
return;
|
|
}
|
|
});
|
|
if (colIdx >= 0) {
|
|
var column = table.column(colIdx);
|
|
column.visible($(this).is(':checked'));
|
|
}
|
|
});
|
|
|
|
var sortableInstance = null;
|
|
|
|
function initSortable() {
|
|
var sortableList = document.getElementById('{{ $id }}-column-list');
|
|
if (!sortableList) {
|
|
console.log('Sortable list not found');
|
|
return;
|
|
}
|
|
|
|
if (sortableInstance) {
|
|
sortableInstance.destroy();
|
|
}
|
|
|
|
console.log('Initializing Sortable');
|
|
sortableInstance = new Sortable(sortableList, {
|
|
animation: 150,
|
|
ghostClass: 'bg-light',
|
|
onEnd: function (evt) {
|
|
var items = sortableList.querySelectorAll('.column-item');
|
|
var newOrder = [];
|
|
items.forEach(function(item) {
|
|
newOrder.push(parseInt(item.dataset.columnIndex));
|
|
});
|
|
console.log('New order:', newOrder);
|
|
table.colReorder.order(newOrder);
|
|
}
|
|
});
|
|
}
|
|
|
|
var offcanvasEl = document.getElementById('{{ $id }}-column-offcanvas');
|
|
if (offcanvasEl) {
|
|
offcanvasEl.addEventListener('shown.bs.offcanvas', function() {
|
|
console.log('Offcanvas shown, initializing sortable');
|
|
initSortable();
|
|
});
|
|
}
|
|
});
|
|
</script>
|
|
<style>
|
|
.column-item {
|
|
cursor: move;
|
|
transition: background-color 0.15s;
|
|
}
|
|
.column-item:hover {
|
|
background-color: #f8f9fa;
|
|
}
|
|
.column-item:active {
|
|
cursor: moving;
|
|
background-color: #e9ecef;
|
|
}
|
|
</style>
|
|
@endpush
|