mirror/Part-DB.Part-DB-server
1
0
Fork 1
mirror of https://github.com/Part-DB/Part-DB-server.git synced 2025-06-21 09:35:49 +02:00
Code Issues Projects Releases Packages Wiki Activity Actions

Added checkbox in parts table header to quickly select/unselect all parts

Browse source
This commit is contained in:
Jan Böhmer 2023-02-19 23:04:51 +01:00
parent 9d1cd0477a
commit c39a9a4da7
2 changed files with 63 additions and 2 deletions
Download patch file Download diff file Expand all files Collapse all files

21
assets/controllers/elements/datatables/datatables_controller.js
View file

@ -137,6 +137,27 @@ export default class extends Controller {
dt.fixedHeader.headerOffset($("#navbar").outerHeight());
});
//Register event handler to selectAllRows checkbox if available
if (this.isSelectable()) {
promise.then((dt) => {
const selectAllCheckbox = this.element.querySelector('thead th.select-checkbox');
selectAllCheckbox.addEventListener('click', () => {
if(selectAllCheckbox.parentElement.classList.contains('selected')) {
dt.rows().deselect();
selectAllCheckbox.parentElement.classList.remove('selected');
} else {
dt.rows().select();
selectAllCheckbox.parentElement.classList.add('selected');
}
});
//When any row is deselected, also deselect the selectAll checkbox
dt.on('deselect.dt', () => {
selectAllCheckbox.parentElement.classList.remove('selected');
});
});
}
//Allow to further configure the datatable
promise.then(this._afterLoaded.bind(this));

42
assets/css/app/tables.css
View file

@ -89,7 +89,8 @@ th.select-checkbox {
}
/** Fix datatables select-checkbox position */
table.dataTable tr.selected td.select-checkbox:after, table.dataTable tr.selected th.select-checkbox:after {
table.dataTable tr.selected td.select-checkbox:after
{
margin-top: -28px !important;
}
@ -103,3 +104,42 @@ Classes for Datatables export
.export-helper{
display: none;
}
/******************************************************
* Styling for the select all checkbox in the parts table
* Should match the styling of the select checkbox
******************************************************/
table.dataTable > thead > tr > th.select-checkbox {
position: relative;
}
table.dataTable > thead > tr > th.select-checkbox:before,
table.dataTable > thead > tr > th.select-checkbox:after {
display: block;
position: absolute;
top: 1.2em;
left: 50%;
width: 12px;
height: 12px;
box-sizing: border-box;
}
table.dataTable > thead > tr > th.select-checkbox:before {
content: " ";
margin-top: -5px;
margin-left: -6px;
border: 1px solid black;
border-radius: 3px;
}
table.dataTable > thead > tr.selected > th.select-checkbox:after {
content: "✓";
font-size: 20px;
margin-top: -23px;
margin-left: -6px;
text-align: center;
/*text-shadow: 1px 1px #B0BED9, -1px -1px #B0BED9, 1px -1px #B0BED9, -1px 1px #B0BED9; */
}
table.dataTable.compact > thead > tr > th.select-checkbox:before {
margin-top: -12px;
}
table.dataTable.compact > thead > tr.selected > th.select-checkbox:after {
margin-top: -16px;
}