335 lines
18 KiB
PHP
335 lines
18 KiB
PHP
<div class="modal fade" id="table-settings-modal" tabindex="-1" role="dialog">
|
|
<div class="modal-dialog modal-lg" role="document">
|
|
<div class="modal-content">
|
|
<div class="modal-header">
|
|
<h5 class="modal-title"><i class="fas fa-cog mr-2"></i>Impostazioni Tabella</h5>
|
|
<button type="button" class="close" data-dismiss="modal">
|
|
<span>×</span>
|
|
</button>
|
|
</div>
|
|
<div class="modal-body">
|
|
<ul class="nav nav-tabs" id="settings-tabs" role="tablist">
|
|
<li class="nav-item">
|
|
<a class="nav-link active" id="columns-tab" data-toggle="tab" href="#columns-panel" role="tab">
|
|
<i class="fas fa-columns mr-1"></i> Colonne
|
|
</a>
|
|
</li>
|
|
<li class="nav-item">
|
|
<a class="nav-link" id="vistas-tab" data-toggle="tab" href="#vistas-panel" role="tab">
|
|
<i class="fas fa-save mr-1"></i> Viste
|
|
</a>
|
|
</li>
|
|
<li class="nav-item">
|
|
<a class="nav-link" id="print-tab" data-toggle="tab" href="#print-panel" role="tab">
|
|
<i class="fas fa-print mr-1"></i> Stampa
|
|
</a>
|
|
</li>
|
|
</ul>
|
|
|
|
<div class="tab-content p-3">
|
|
<div class="tab-pane fade show active" id="columns-panel" role="tabpanel">
|
|
<h6 class="mb-3">Seleziona colonne, regola larghezza e riordina:</h6>
|
|
<p class="small text-muted mb-3">
|
|
<i class="fas fa-arrows-alt mr-1"></i> Trascina le intestazioni per riordinare ·
|
|
<i class="fas fa-arrows-alt-h mr-1"></i> Trascina il bordo destro di una cella per ridimensionare
|
|
</p>
|
|
<div id="column-list" class="mb-3">
|
|
@foreach($tableColumns as $col)
|
|
<div class="form-row align-items-center mb-2 column-config-item" data-column="{{ $col['key'] }}">
|
|
<div class="col-auto">
|
|
<i class="fas fa-grip-vertical text-muted" style="cursor:grab;"></i>
|
|
</div>
|
|
<div class="col-auto">
|
|
<div class="custom-control custom-checkbox">
|
|
<input type="checkbox" class="custom-control-input column-toggle"
|
|
id="col-{{ $col['key'] }}" data-column="{{ $col['key'] }}"
|
|
{{ ($col['visible'] ?? true) ? 'checked' : '' }}>
|
|
<label class="custom-control-label" for="col-{{ $col['key'] }}">
|
|
{{ $col['label'] }}
|
|
</label>
|
|
</div>
|
|
</div>
|
|
<div class="col">
|
|
<div class="input-group input-group-sm">
|
|
<input type="number" class="form-control form-control-sm column-width-input"
|
|
data-column="{{ $col['key'] }}"
|
|
value="{{ isset($columnWidths[$col['key']]) ? intval(str_replace('px', '', $columnWidths[$col['key']])) : '' }}"
|
|
placeholder="auto" min="30" style="max-width:80px;">
|
|
<div class="input-group-append">
|
|
<span class="input-group-text">px</span>
|
|
</div>
|
|
<button type="button" class="btn btn-sm btn-outline-secondary ml-1 reset-col-width" data-column="{{ $col['key'] }}"
|
|
title="Reset larghezza">
|
|
<i class="fas fa-undo-alt"></i>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
@endforeach
|
|
</div>
|
|
<button type="button" class="btn btn-sm btn-secondary" onclick="resetAllColumnWidths()">
|
|
<i class="fas fa-undo-alt mr-1"></i> Reset tutte larghezze
|
|
</button>
|
|
</div>
|
|
|
|
<div class="tab-pane fade" id="vistas-panel" role="tabpanel">
|
|
<h6 class="mb-2">Viste salvate</h6>
|
|
<div id="vistas-list" class="mb-3">
|
|
@php
|
|
$entityType = $entityType ?? 'individui';
|
|
$userVistas = $userVistas ?? collect();
|
|
@endphp
|
|
@if($userVistas->count() > 0)
|
|
<div class="list-group mb-3" id="vistas-list-group">
|
|
@foreach($userVistas as $v)
|
|
<div class="list-group-item list-group-item-action d-flex align-items-center py-2 {{ $vista && $vista->id === $v->id ? 'active' : '' }}">
|
|
<div class="mr-auto">
|
|
@if($v->is_default)
|
|
<i class="fas fa-star text-warning mr-1" title="Predefinita"></i>
|
|
@else
|
|
<i class="fas fa-file-alt text-muted mr-1"></i>
|
|
@endif
|
|
<span>{{ $v->nome }}</span>
|
|
@if($v->colonne_visibili)
|
|
<span class="badge badge-light ml-1">{{ count($v->colonne_visibili) }} col.</span>
|
|
@endif
|
|
</div>
|
|
<div class="ml-2">
|
|
<a href="?vista_id={{ $v->id }}" class="btn btn-xs btn-primary" title="Applica vista">
|
|
<i class="fas fa-play"></i>
|
|
</a>
|
|
@if(!$v->is_default)
|
|
<form action="{{ url('/viste/' . $v->id . '/default') }}" method="POST" class="d-inline">
|
|
@csrf @method('PATCH')
|
|
<button type="submit" class="btn btn-xs btn-warning" title="Imposta predefinita">
|
|
<i class="fas fa-star"></i>
|
|
</button>
|
|
</form>
|
|
@endif
|
|
<button type="button" class="btn btn-xs btn-info edit-vista-btn" title="Modifica vista"
|
|
data-vista-id="{{ $v->id }}"
|
|
data-vista-nome="{{ $v->nome }}"
|
|
data-vista-default="{{ $v->is_default ? 'true' : 'false' }}"
|
|
data-vista-colonne="{{ json_encode($v->colonne_visibili ?? []) }}">
|
|
<i class="fas fa-pencil-alt"></i>
|
|
</button>
|
|
<form action="{{ url('/viste/' . $v->id) }}" method="POST" class="d-inline">
|
|
@csrf @method('DELETE')
|
|
<button type="submit" class="btn btn-xs btn-danger" onclick="return confirm('Eliminare questa vista?')" title="Elimina">
|
|
<i class="fas fa-trash"></i>
|
|
</button>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
@endforeach
|
|
</div>
|
|
@else
|
|
<p class="text-muted text-center py-2">Nessuna vista salvata</p>
|
|
@endif
|
|
</div>
|
|
|
|
<hr>
|
|
<h6 class="mb-2">Salva vista corrente</h6>
|
|
<div class="form-row align-items-end">
|
|
<div class="col">
|
|
<input type="text" id="vista-nome" class="form-control" placeholder="Nome vista...">
|
|
</div>
|
|
<div class="col-auto">
|
|
<div class="custom-control custom-checkbox">
|
|
<input type="checkbox" class="custom-control-input" id="vista-default" value="true">
|
|
<label class="custom-control-label" for="vista-default">Predefinita</label>
|
|
</div>
|
|
</div>
|
|
<div class="col-auto">
|
|
<button type="button" class="btn btn-primary" id="save-vista-btn">
|
|
<i class="fas fa-save mr-1"></i> Salva
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="tab-pane fade" id="print-panel" role="tabpanel">
|
|
<h6 class="mb-3">Stampa con impostazioni correnti</h6>
|
|
<p>La stampa rispetterà le colonne visibili, la larghezza e l'ordine impostati.</p>
|
|
<button type="button" class="btn btn-primary btn-lg" onclick="window.printWithCurrentSettings ? window.printWithCurrentSettings() : alert('ColumnManager non inizializzato'); return false;">
|
|
<i class="fas fa-print mr-2"></i> Stampa
|
|
</button>
|
|
<hr>
|
|
<h6 class="mb-2">Opzioni aggiuntive</h6>
|
|
<div class="custom-control custom-checkbox mb-2">
|
|
<input type="checkbox" class="custom-control-input" id="print-page-breaks" checked>
|
|
<label class="custom-control-label" for="print-page-breaks">Interruzione di pagina tra gli elementi</label>
|
|
</div>
|
|
<div class="custom-control custom-checkbox">
|
|
<input type="checkbox" class="custom-control-input" id="print-background">
|
|
<label class="custom-control-label" for="print-background">Stampa sfondi e colori</label>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="modal-footer">
|
|
<button type="button" class="btn btn-secondary" data-dismiss="modal">Chiudi</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<script>
|
|
function resetAllColumnWidths() {
|
|
document.querySelectorAll('.column-width-input').forEach(inp => { inp.value = ''; });
|
|
document.querySelectorAll('.column-config-item').forEach(item => {
|
|
const th = document.querySelector(`th[data-column="${item.dataset.column}"]`);
|
|
if (th) th.style.width = '';
|
|
});
|
|
if (window.columnManager) {
|
|
window.columnManager.columnWidths = {};
|
|
window.columnManager.persistState();
|
|
}
|
|
}
|
|
|
|
function syncColumnListToTable() {
|
|
const items = document.querySelectorAll('#column-list .column-config-item');
|
|
const keys = Array.from(items).map(i => i.dataset.column);
|
|
if (window.columnManager && keys.length > 0) {
|
|
window.columnManager.reorderColumns(keys);
|
|
}
|
|
}
|
|
|
|
let editingVistaId = null;
|
|
|
|
function editVista(id, nome, isDefault, colonneVisibili) {
|
|
editingVistaId = id;
|
|
document.getElementById('vista-nome').value = nome;
|
|
document.getElementById('vista-default').checked = isDefault;
|
|
document.querySelectorAll('.column-toggle').forEach(cb => {
|
|
cb.checked = colonneVisibili.includes(cb.dataset.column);
|
|
if (window.columnManager) window.columnManager.setVisible(cb.dataset.column, cb.checked);
|
|
});
|
|
document.getElementById('save-vista-btn').innerHTML = '<i class="fas fa-save mr-1"></i> Aggiorna';
|
|
document.getElementById('vistas-tab').click();
|
|
}
|
|
|
|
function initTableSettings() {
|
|
const columnList = document.getElementById('column-list');
|
|
if (!columnList) return;
|
|
|
|
let dragItem = null;
|
|
|
|
columnList.querySelectorAll('.column-config-item').forEach(item => {
|
|
const grip = item.querySelector('.fa-grip-vertical');
|
|
if (!grip) return;
|
|
grip.addEventListener('mousedown', function () { item.draggable = true; });
|
|
item.addEventListener('dragstart', function (e) {
|
|
dragItem = this; e.dataTransfer.effectAllowed = 'move'; this.classList.add('dragging');
|
|
});
|
|
item.addEventListener('dragend', function () {
|
|
this.classList.remove('dragging'); this.draggable = false; dragItem = null;
|
|
});
|
|
item.addEventListener('dragover', function (e) {
|
|
e.preventDefault();
|
|
if (!dragItem || dragItem === this) return;
|
|
const rect = this.getBoundingClientRect();
|
|
const midY = rect.top + rect.height / 2;
|
|
if (e.clientY < midY) columnList.insertBefore(dragItem, this);
|
|
else columnList.insertBefore(dragItem, this.nextSibling);
|
|
});
|
|
});
|
|
|
|
columnList.addEventListener('drop', function () {
|
|
const items = Array.from(columnList.querySelectorAll('.column-config-item'));
|
|
const newOrder = items.map(i => i.dataset.column);
|
|
if (window.columnManager && newOrder.length > 0) window.columnManager.reorderColumns(newOrder);
|
|
syncColumnListToTable();
|
|
});
|
|
|
|
columnList.querySelectorAll('.column-toggle').forEach(cb => {
|
|
cb.addEventListener('change', function () {
|
|
if (window.columnManager) window.columnManager.setVisible(this.dataset.column, this.checked);
|
|
});
|
|
});
|
|
|
|
columnList.querySelectorAll('.column-width-input').forEach(inp => {
|
|
inp.addEventListener('change', function () {
|
|
const key = this.dataset.column;
|
|
const val = parseInt(this.value);
|
|
const th = document.querySelector(`th[data-column="${key}"]`);
|
|
if (th) {
|
|
if (val && val >= 30) {
|
|
th.style.width = val + 'px';
|
|
if (window.columnManager) {
|
|
window.columnManager.columnWidths[key] = val + 'px';
|
|
window.columnManager.persistState();
|
|
}
|
|
} else {
|
|
th.style.width = '';
|
|
if (window.columnManager) {
|
|
delete window.columnManager.columnWidths[key];
|
|
window.columnManager.persistState();
|
|
}
|
|
}
|
|
}
|
|
});
|
|
});
|
|
|
|
columnList.querySelectorAll('.reset-col-width').forEach(btn => {
|
|
btn.addEventListener('click', function () {
|
|
const key = this.dataset.column;
|
|
const inp = document.querySelector(`.column-width-input[data-column="${key}"]`);
|
|
if (inp) inp.value = '';
|
|
const th = document.querySelector(`th[data-column="${key}"]`);
|
|
if (th) th.style.width = '';
|
|
if (window.columnManager) {
|
|
delete window.columnManager.columnWidths[key];
|
|
window.columnManager.persistState();
|
|
}
|
|
});
|
|
});
|
|
|
|
document.querySelectorAll('.edit-vista-btn').forEach(btn => {
|
|
btn.addEventListener('click', function () {
|
|
editVista(
|
|
this.dataset.vistaId,
|
|
this.dataset.vistaNome,
|
|
this.dataset.vistaDefault === 'true',
|
|
JSON.parse(this.dataset.vistaColonne)
|
|
);
|
|
});
|
|
});
|
|
|
|
document.getElementById('save-vista-btn')?.addEventListener('click', function() {
|
|
const nome = document.getElementById('vista-nome').value.trim();
|
|
if (!nome) { alert('Inserisci un nome per la vista'); return; }
|
|
|
|
const colonneVisibili = Array.from(document.querySelectorAll('.column-toggle:checked')).map(cb => cb.dataset.column);
|
|
const larghezze = {};
|
|
document.querySelectorAll('.column-width-input').forEach(inp => {
|
|
const val = parseInt(inp.value);
|
|
if (val && val >= 30) larghezze[inp.dataset.column] = val + 'px';
|
|
});
|
|
const ordine = Array.from(document.querySelectorAll('#column-list .column-config-item')).map(i => i.dataset.column);
|
|
const isDefault = document.getElementById('vista-default')?.checked || false;
|
|
const entityType = '{{ $entityType ?? 'individui' }}';
|
|
|
|
const isEditing = editingVistaId !== null;
|
|
const url = isEditing ? '/viste/' + editingVistaId : '/viste';
|
|
const method = isEditing ? 'PUT' : 'POST';
|
|
|
|
fetch(url, {
|
|
method: method,
|
|
headers: {
|
|
'Content-Type': 'application/json',
|
|
'Accept': 'application/json',
|
|
'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]')?.content || ''
|
|
},
|
|
body: JSON.stringify({
|
|
nome, tipo: entityType, colonne_visibili: colonneVisibili,
|
|
colonne_larghezze: larghezze, colonne_ordine: ordine,
|
|
colonne_ordinamento: [], is_default: isDefault,
|
|
})
|
|
})
|
|
.then(response => response.ok ? (alert(isEditing ? 'Vista aggiornata!' : 'Vista salvata!'), window.location.reload()) : response.text().then(t => { throw new Error(t); }))
|
|
.catch(err => alert('Errore salvataggio vista: ' + err.message));
|
|
});
|
|
}
|
|
</script>
|