Feat: create toggle for columns
This commit is contained in:
Sallu9007
@@ -7,10 +7,10 @@
|
|||||||
<div class="card shadow-sm">
|
<div class="card shadow-sm">
|
||||||
<div class="card-header d-flex justify-content-between align-items-center">
|
<div class="card-header d-flex justify-content-between align-items-center">
|
||||||
<h3 class="page-title m-0">
|
<h3 class="page-title m-0">
|
||||||
<i class="fas fa-list-alt me-2 text-primary"></i>All Responses
|
<i class="fas fa-list-alt me-2 text-danger"></i>All Responses
|
||||||
</h3>
|
</h3>
|
||||||
@if(auth()->user()->role->name === 'Admin')
|
@if(auth()->user()->role->name === 'Admin')
|
||||||
<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#missingProofsModal">
|
<button type="button" class="btn btn-danger" data-bs-toggle="modal" data-bs-target="#missingProofsModal">
|
||||||
<i class="fas fa-search me-1"></i> Check Missing Proofs
|
<i class="fas fa-search me-1"></i> Check Missing Proofs
|
||||||
</button>
|
</button>
|
||||||
@endif
|
@endif
|
||||||
@@ -49,6 +49,97 @@
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
<!-- Column Selector -->
|
||||||
|
<div class="col-md-12 mt-3 mb-4">
|
||||||
|
<div class="dropdown">
|
||||||
|
<button class="btn btn-danger dropdown-toggle" type="button" id="columnSelectorDropdown" data-bs-toggle="dropdown" aria-expanded="false">
|
||||||
|
<i class="fas fa-columns me-1"></i> Customize Columns
|
||||||
|
</button>
|
||||||
|
<div class="dropdown-menu p-3 shadow-sm" style="width: 320px;">
|
||||||
|
<h6 class="dropdown-header border-bottom pb-2 mb-2">Toggle Columns Visibility</h6>
|
||||||
|
|
||||||
|
<div class="row g-2">
|
||||||
|
<div class="col-6">
|
||||||
|
<div class="form-check form-switch">
|
||||||
|
<input class="form-check-input column-checkbox" type="checkbox" value="1" id="column-title" checked>
|
||||||
|
<label class="form-check-label" for="column-title">Title</label>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="col-6">
|
||||||
|
<div class="form-check form-switch">
|
||||||
|
<input class="form-check-input column-checkbox" type="checkbox" value="2" id="column-institute" checked>
|
||||||
|
<label class="form-check-label" for="column-institute">Organising Institute</label>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="col-6">
|
||||||
|
<div class="form-check form-switch">
|
||||||
|
<input class="form-check-input column-checkbox" type="checkbox" value="3" id="column-address" checked>
|
||||||
|
<label class="form-check-label" for="column-address">Address</label>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="col-6">
|
||||||
|
<div class="form-check form-switch">
|
||||||
|
<input class="form-check-input column-checkbox" type="checkbox" value="4" id="column-department" checked>
|
||||||
|
<label class="form-check-label" for="column-department">Department</label>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="col-6">
|
||||||
|
<div class="form-check form-switch">
|
||||||
|
<input class="form-check-input column-checkbox" type="checkbox" value="5" id="column-faculty" checked>
|
||||||
|
<label class="form-check-label" for="column-faculty">Faculty</label>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="col-6">
|
||||||
|
<div class="form-check form-switch">
|
||||||
|
<input class="form-check-input column-checkbox" type="checkbox" value="6" id="column-start-date" checked>
|
||||||
|
<label class="form-check-label" for="column-start-date">Start Date</label>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="col-6">
|
||||||
|
<div class="form-check form-switch">
|
||||||
|
<input class="form-check-input column-checkbox" type="checkbox" value="7" id="column-end-date" checked>
|
||||||
|
<label class="form-check-label" for="column-end-date">End Date</label>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="col-6">
|
||||||
|
<div class="form-check form-switch">
|
||||||
|
<input class="form-check-input column-checkbox" type="checkbox" value="8" id="column-days" checked>
|
||||||
|
<label class="form-check-label" for="column-days">Days</label>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="col-6">
|
||||||
|
<div class="form-check form-switch">
|
||||||
|
<input class="form-check-input column-checkbox" type="checkbox" value="9" id="column-activity-type" checked>
|
||||||
|
<label class="form-check-label" for="column-activity-type">Activity Type</label>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="col-6">
|
||||||
|
<div class="form-check form-switch">
|
||||||
|
<input class="form-check-input column-checkbox" type="checkbox" value="10" id="column-category" checked>
|
||||||
|
<label class="form-check-label" for="column-category">Category</label>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="col-6">
|
||||||
|
<div class="form-check form-switch">
|
||||||
|
<input class="form-check-input column-checkbox" type="checkbox" value="11" id="column-level" checked>
|
||||||
|
<label class="form-check-label" for="column-level">Level</label>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="dropdown-divider my-2"></div>
|
||||||
|
|
||||||
|
<div class="d-flex justify-content-between">
|
||||||
|
<button id="select-all-columns" class="btn btn-sm btn-outline-danger">
|
||||||
|
<i class="fas fa-check-square me-1"></i> Select All
|
||||||
|
</button>
|
||||||
|
<button id="deselect-all-columns" class="btn btn-sm btn-outline-secondary">
|
||||||
|
<i class="fas fa-square me-1"></i> Deselect All
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
<!-- Table -->
|
<!-- Table -->
|
||||||
<div class="table-responsive">
|
<div class="table-responsive">
|
||||||
<table id="responses-table" class="table table-striped table-hover">
|
<table id="responses-table" class="table table-striped table-hover">
|
||||||
@@ -87,7 +178,7 @@
|
|||||||
<div class="modal-content">
|
<div class="modal-content">
|
||||||
<div class="modal-header bg-light">
|
<div class="modal-header bg-light">
|
||||||
<h5 class="modal-title" id="missingProofsModalLabel">
|
<h5 class="modal-title" id="missingProofsModalLabel">
|
||||||
<i class="fas fa-check-square me-2 text-primary"></i>Select Categories to Check
|
<i class="fas fa-check-square me-2 text-danger"></i>Select Categories to Check
|
||||||
</h5>
|
</h5>
|
||||||
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
|
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
|
||||||
</div>
|
</div>
|
||||||
@@ -159,7 +250,7 @@
|
|||||||
<button type="button" class="btn btn-outline-secondary" data-bs-dismiss="modal">
|
<button type="button" class="btn btn-outline-secondary" data-bs-dismiss="modal">
|
||||||
<i class="fas fa-times me-1"></i>Close
|
<i class="fas fa-times me-1"></i>Close
|
||||||
</button>
|
</button>
|
||||||
<button type="submit" class="btn btn-primary">
|
<button type="submit" class="btn btn-danger">
|
||||||
<i class="fas fa-paper-plane me-1"></i>Send Email
|
<i class="fas fa-paper-plane me-1"></i>Send Email
|
||||||
</button>
|
</button>
|
||||||
</div>
|
</div>
|
||||||
@@ -448,6 +539,144 @@
|
|||||||
|
|
||||||
// Initialize the data table
|
// Initialize the data table
|
||||||
initAjaxRoute(dataRoute);
|
initAjaxRoute(dataRoute);
|
||||||
|
|
||||||
|
// Function to toggle column visibility
|
||||||
|
function toggleColumnVisibility() {
|
||||||
|
$('.column-checkbox').each(function() {
|
||||||
|
const columnIndex = $(this).val();
|
||||||
|
const isChecked = $(this).is(':checked');
|
||||||
|
|
||||||
|
// Show or hide the column based on checkbox state
|
||||||
|
table.column(columnIndex).visible(isChecked);
|
||||||
|
});
|
||||||
|
|
||||||
|
// Adjust table layout to prevent horizontal scrolling
|
||||||
|
table.columns.adjust().responsive.recalc();
|
||||||
|
}
|
||||||
|
|
||||||
|
// Attach change event listener to checkboxes
|
||||||
|
$('.column-checkbox').off('change').on('change', function() {
|
||||||
|
toggleColumnVisibility();
|
||||||
|
});
|
||||||
|
|
||||||
|
// Ensure "Actions" column is always visible
|
||||||
|
$('#column-actions').prop('disabled', true);
|
||||||
|
|
||||||
|
// Initial call to set column visibility
|
||||||
|
toggleColumnVisibility();
|
||||||
});
|
});
|
||||||
</script>
|
</script>
|
||||||
|
<script>
|
||||||
|
$(document).ready(function() {
|
||||||
|
// Select all columns button
|
||||||
|
$('#select-all-columns').click(function() {
|
||||||
|
$('.column-checkbox').prop('checked', true).trigger('change');
|
||||||
|
});
|
||||||
|
|
||||||
|
// Deselect all columns button
|
||||||
|
$('#deselect-all-columns').click(function() {
|
||||||
|
$('.column-checkbox').prop('checked', false).trigger('change');
|
||||||
|
});
|
||||||
|
|
||||||
|
// Prevent dropdown from closing when clicking inside it
|
||||||
|
$('.dropdown-menu').on('click', function(e) {
|
||||||
|
e.stopPropagation();
|
||||||
|
});
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
<style>
|
||||||
|
.form-check-input:checked {
|
||||||
|
background-color: #b7202e;
|
||||||
|
border-color: #ed1c24;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
.dropdown-menu {
|
||||||
|
background-color: #fff;
|
||||||
|
border-radius: 0.5rem;
|
||||||
|
box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
|
||||||
|
}
|
||||||
|
.dropdown-menu .form-check-input:checked {
|
||||||
|
background-color: #b7202e;
|
||||||
|
border-color: #ed1c24;
|
||||||
|
}
|
||||||
|
.dropdown-menu .form-check-input:focus {
|
||||||
|
box-shadow: 0 0 0 0.2rem rgba(189, 72, 46, 0.25);
|
||||||
|
}
|
||||||
|
.dropdown-menu .form-check-input:checked:focus {
|
||||||
|
box-shadow: 0 0 0 0.2rem rgba(189, 72, 46, 0.25);
|
||||||
|
}
|
||||||
|
.dropdown-menu .form-check-input:focus-visible {
|
||||||
|
outline: none;
|
||||||
|
box-shadow: 0 0 0 0.2rem rgba(189, 72, 46, 0.25);
|
||||||
|
}
|
||||||
|
.dropdown-menu .form-check-input:checked:focus-visible {
|
||||||
|
box-shadow: 0 0 0 0.2rem rgba(189, 72, 46, 0.25);
|
||||||
|
}
|
||||||
|
.dropdown-menu .form-check-input:focus-visible:checked {
|
||||||
|
box-shadow: 0 0 0 0.2rem rgba(189, 72, 46, 0.25);
|
||||||
|
}
|
||||||
|
.dropdown-menu .form-check-input:focus-visible:not(:checked) {
|
||||||
|
box-shadow: 0 0 0 0.2rem rgba(189, 72, 46, 0.25);
|
||||||
|
}
|
||||||
|
.dropdown-menu .form-check-input:focus-visible:not(:checked):checked {
|
||||||
|
box-shadow: 0 0 0 0.2rem rgba(189, 72, 46, 0.25);
|
||||||
|
}
|
||||||
|
.dropdown-menu .form-check-input:focus-visible:not(:checked):not(:checked) {
|
||||||
|
box-shadow: 0 0 0 0.2rem rgba(189, 72, 46, 0.25);
|
||||||
|
}
|
||||||
|
.dropdown-menu .form-check-input:focus-visible:not(:checked):not(:checked):checked {
|
||||||
|
box-shadow: 0 0 0 0.2rem rgba(189, 72, 46, 0.25);
|
||||||
|
}
|
||||||
|
.dropdown-menu .form-check-input:focus-visible:not(:checked):not(:checked):not(:checked) {
|
||||||
|
box-shadow: 0 0 0 0.2rem rgba(189, 72, 46, 0.25);
|
||||||
|
}
|
||||||
|
.dropdown-menu .form-check-input:focus-visible:not(:checked):not(:checked):not(:checked):checked {
|
||||||
|
box-shadow: 0 0 0 0.2rem rgba(189, 72, 46, 0.25);
|
||||||
|
}
|
||||||
|
.dropdown-menu .form-check-input:focus-visible:not(:checked):not(:checked):not(:checked):not(:checked) {
|
||||||
|
box-shadow: 0 0 0 0.2rem rgba(189, 72, 46, 0.25);
|
||||||
|
}
|
||||||
|
|
||||||
|
.form-switch .form-check-input {
|
||||||
|
width: 2.5em;
|
||||||
|
margin-left: -2.8em;
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
|
||||||
|
.form-switch .form-check-input:focus {
|
||||||
|
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='rgba%280, 0, 0, 0.25%29'/%3e%3c/svg%3e");
|
||||||
|
}
|
||||||
|
|
||||||
|
.form-switch .form-check-input:checked {
|
||||||
|
background-position: right center;
|
||||||
|
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23fff'/%3e%3c/svg%3e");
|
||||||
|
transition: background-position 0.15s ease-in-out;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Enhance the toggle appearance */
|
||||||
|
.form-switch .form-check-input {
|
||||||
|
background-size: contain;
|
||||||
|
transition: 0.2s;
|
||||||
|
}
|
||||||
|
|
||||||
|
.dropdown-menu {
|
||||||
|
max-height: 400px;
|
||||||
|
overflow-y: auto;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
||||||
|
|
||||||
|
<style>
|
||||||
|
/* Ensure the table container is responsive */
|
||||||
|
.table-responsive {
|
||||||
|
overflow-x: auto;
|
||||||
|
white-space: nowrap;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Ensure the table fits within the container */
|
||||||
|
#responses-table {
|
||||||
|
width: 100% !important;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
@endsection
|
@endsection
|
||||||
Reference in New Issue
Block a user