78 lines
2.3 KiB
TypeScript
78 lines
2.3 KiB
TypeScript
import { useEffect } from "preact/hooks";
|
|
|
|
export default function TenantMessageSelection() {
|
|
useEffect(() => {
|
|
const container = document.querySelector<HTMLElement>(
|
|
"[data-message-form]",
|
|
);
|
|
if (!container) return;
|
|
|
|
const selectAll = container.querySelector<HTMLInputElement>(
|
|
"[data-select-all]",
|
|
);
|
|
const deleteButton = container.querySelector<HTMLButtonElement>(
|
|
"[data-delete-button]",
|
|
);
|
|
const markReadButton = container.querySelector<HTMLButtonElement>(
|
|
"[data-mark-read-button]",
|
|
);
|
|
const checkboxes = Array.from(
|
|
container.querySelectorAll<HTMLInputElement>("[data-message-checkbox]"),
|
|
);
|
|
const deleteLabelBase = "Delete selected";
|
|
const markReadLabelBase = "Mark selected as read";
|
|
|
|
const updateState = () => {
|
|
const checkedCount = checkboxes.filter((box) => box.checked).length;
|
|
const totalCount = checkboxes.length;
|
|
|
|
if (selectAll) {
|
|
selectAll.indeterminate = checkedCount > 0 &&
|
|
checkedCount < totalCount;
|
|
selectAll.checked = totalCount > 0 && checkedCount === totalCount;
|
|
}
|
|
|
|
if (deleteButton) {
|
|
deleteButton.disabled = checkedCount === 0;
|
|
deleteButton.textContent = checkedCount > 0
|
|
? `${deleteLabelBase} (${checkedCount})`
|
|
: deleteLabelBase;
|
|
}
|
|
|
|
if (markReadButton) {
|
|
markReadButton.disabled = checkedCount === 0;
|
|
markReadButton.textContent = checkedCount > 0
|
|
? `${markReadLabelBase} (${checkedCount})`
|
|
: markReadLabelBase;
|
|
}
|
|
};
|
|
|
|
const handleSelectAllChange = (event: Event) => {
|
|
const target = event.target as HTMLInputElement | null;
|
|
const nextChecked = Boolean(target?.checked);
|
|
checkboxes.forEach((box) => {
|
|
box.checked = nextChecked;
|
|
});
|
|
updateState();
|
|
};
|
|
|
|
const handleCheckboxChange = () => updateState();
|
|
|
|
selectAll?.addEventListener("change", handleSelectAllChange);
|
|
checkboxes.forEach((box) =>
|
|
box.addEventListener("change", handleCheckboxChange)
|
|
);
|
|
|
|
updateState();
|
|
|
|
return () => {
|
|
selectAll?.removeEventListener("change", handleSelectAllChange);
|
|
checkboxes.forEach((box) =>
|
|
box.removeEventListener("change", handleCheckboxChange)
|
|
);
|
|
};
|
|
}, []);
|
|
|
|
return <span class="hidden" data-message-selection aria-hidden="true" />;
|
|
}
|