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 01:25:55 +02:00
Code Issues Projects Releases Packages Wiki Activity Actions

Use own-written TriState checkbox library, which makes form submissions a lot easier.

Browse source
This commit is contained in:
Jan Böhmer 2022-08-15 00:55:26 +02:00
parent 8e6bc25d2e
commit ef389dcc15
3 changed files with 225 additions and 243 deletions
Download patch file Download diff file Expand all files Collapse all files

48
assets/js/tristate_checkboxes.js
View file

@ -1,49 +1,37 @@
'use strict';
import "./lib/jquery.tristate"
import TristateCheckbox from "./lib/TristateCheckbox";
class TristateHelper {
constructor() {
this.registerTriStateCheckboxes();
this.registerSubmitHandler();
}
registerSubmitHandler() {
document.addEventListener("turbo:submit-start", (e) => {
var form = e.detail.formSubmission.formElement;
var formData = e.detail.formSubmission.formData;
var $tristate_checkboxes = $('.tristate:checkbox', form);
//Iterate over each tristate checkbox in the form and set formData to the correct value
$tristate_checkboxes.each(function() {
var $checkbox = $(this);
var state = $checkbox.tristate('state');
formData.set($checkbox.attr('name'), state);
});
});
}
registerTriStateCheckboxes() {
//Initialize tristate checkboxes and if needed the multicheckbox functionality
const listener = () => {
$(".tristate").tristate( {
checked: "true",
unchecked: "false",
indeterminate: "indeterminate",
const tristates = document.querySelectorAll("input.tristate");
tristates.forEach(tristate => {
TristateCheckbox.getInstance(tristate);
});
$('.permission_multicheckbox:checkbox').change(function() {
//Find the other checkboxes in this row, and change their value
var $row = $(this).parents('tr');
//@ts-ignore
var new_state = $(this).tristate('state');
//Register multi checkboxes in permission tables
const multicheckboxes = document.querySelectorAll("input.permission_multicheckbox");
multicheckboxes.forEach(multicheckbox => {
multicheckbox.addEventListener("change", (event) => {
const newValue = TristateCheckbox.getInstance(event.target).state;
const row = event.target.closest("tr");
//@ts-ignore
$('.tristate:checkbox', $row).tristate('state', new_state);
//Find all tristate checkboxes in the same row and set their state to the new value
const tristateCheckboxes = row.querySelectorAll("input.tristate");
tristateCheckboxes.forEach(tristateCheckbox => {
TristateCheckbox.getInstance(tristateCheckbox).state = newValue;
});
});
});
}