edit filter via modal

This commit is contained in:
Corban-Lee Jones 2025-03-04 23:59:04 +00:00
parent 9fc386a973
commit e032c51185
3 changed files with 58 additions and 8 deletions

View File

@ -12,7 +12,7 @@ const emptyTableHtml = `
</p>
<div class="mt-5 flex flex-col sm:flex-row gap-2">
<button type="button" class="openfilterModal-js py-2 px-3 inline-flex justify-center items-center gap-x-2 text-sm font-medium rounded-lg border border-transparent bg-blue-600 text-white hover:bg-blue-700 focus:outline-none focus:bg-blue-700 disabled:opacity-50 disabled:pointer-events-none" data-hs-overlay="#subModal">
<button type="button" class="openFilterModal-js py-2 px-3 inline-flex justify-center items-center gap-x-2 text-sm font-medium rounded-lg border border-transparent bg-blue-600 text-white hover:bg-blue-700 focus:outline-none focus:bg-blue-700 disabled:opacity-50 disabled:pointer-events-none" data-hs-overlay="#filterModal">
<svg class="shrink-0 size-4" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12h14"/><path d="M12 5v14"/></svg>
Create a filter
</button>
@ -87,12 +87,12 @@ const defineTable = () => {
data: "name",
orderable: true,
searchable: true,
render: data => {
render: (data, _type, row) => {
return `
<td class="size-px whitespace-nowrap align-top">
<a href="#" class="block px-6 py-4 text-blue-500 hover:text-blue-600 focus:text-blue-600 dark:text-blue-400 dark:hover:text-blue-500 dark:focus:text-blue-500 text-nowrap">
<span class="openFilterModal-js block px-6 py-4 text-blue-500 hover:text-blue-600 focus:text-blue-600 dark:text-blue-400 dark:hover:text-blue-500 dark:focus:text-blue-500 text-nowrap cursor-pointer" data-id="${row.id}">
${data}
</a>
</sp>
</td>
`;
}
@ -210,8 +210,31 @@ $("input[name='filterType']").on("change", () => {
table.dataTable.draw();
});
const openFilterForm = () => {
const openFilterForm = async id => {
$("#filterForm").removeClass("submitted");
HSSelect.getInstance("#formAlgorithm", true).element.setValue([]);
if (id === -1) {
$("#formName").val("");
$("#formMatch").val("");
$("#formWhitelist").prop("checked", false);
$("#formInsensitive").prop("checked", false);
}
else {
const data = await $.ajax({
url: `/guild/${guildId}/filters/api?id=${id}`,
method: "get"
});
$("#formName").val(data.name);
$("#formMatch").val(data.match);
$("#formWhitelist").prop("checked", data.is_whitelist);
$("#formInsensitive").prop("checked", data.is_insensitive);
HSSelect.getInstance("#formAlgorithm", true) //setValue(data.algorithm);
}
HSOverlay.open($("#filterModal").get(0));
}
@ -220,7 +243,9 @@ const closeFilterForm = () => {
HSOverlay.close($("#filterModal").get(0));
}
$(document).on("click", ".openfilterModal-js", openFilterForm);
$(document).on("click", ".openFilterModal-js", event => {
openFilterForm($(event.target).data("id") || -1);
});
const submitForm = async event => {
event.preventDefault();

View File

@ -29,6 +29,31 @@ export const datatable = async (request: Request, response: Response) => {
}
}
export const get = async (request: Request, response: Response) => {
try {
if (!request.query.id) {
response.status(400).json({ error: "missing 'id' query" });
return;
}
const data = await db("filters")
.select("filters.*")
.where({ "filters.id": request.query.id })
.first();
if (!data) {
response.status(404).json({ message: "no result found" });
return;
}
response.json(data);
}
catch (error) {
console.error(error);
response.status(500).json({ error: "Failed to fetch filter" });
}
}
export const post = async (request: Request, response: Response) => {
try {
console.debug(JSON.stringify(request.body, null, 4));
@ -60,4 +85,4 @@ export const post = async (request: Request, response: Response) => {
}
}
export default { datatable, post }
export default { datatable, get, post }

View File

@ -11,7 +11,7 @@ router.post("/:guildId/subscriptions/api", subApiController.post);
router.delete("/:guildId/subscriptions/api", subApiController.del);
router.get("/:guildId/filters/api/datatable", filterApiController.datatable);
// router.get("/:guildId/filters/api", filterApiController.get);
router.get("/:guildId/filters/api", filterApiController.get);
router.post("/:guildId/filters/api", filterApiController.post);
// router.delete("/:guildId/filters/api", filterApiController.del);