replace older modal code with new code

This commit is contained in:
Corban-Lee Jones 2024-10-12 13:15:25 +01:00
parent 16e468f2f3
commit 3d4d5733b2
3 changed files with 234 additions and 114 deletions

View File

@ -78,51 +78,88 @@ $(filterModalId).find(".modal-del-btn").on("click", async function() {
const filter = $(filterTableId).DataTable().row((idx, row) => { return row.id === id }).data(); const filter = $(filterTableId).DataTable().row((idx, row) => { return row.id === id }).data();
const name = sanitise(filter.name); const name = sanitise(filter.name);
await confirmationModal( const deleteFilter = async () => {
`Delete a Content Filter`, await ajaxRequest(`/api/filters/${filter.id}/`, "DELETE");
`Do you wish to permanently delete <b>${name}</b>?`, setTimeout(async () => {
"danger", $(filterTableId).trigger("doDataLoad");
"bi-trash3", await loadSubModalOptions(
async () => { $(subModalId).find('[data-field="filters"]'),
await ajaxRequest(`/api/filters/${filter.id}/`, "DELETE"); `/api/filters/?server=${selectedServer.id}`
setTimeout(async () => { );
$(filterTableId).trigger("doDataLoad"); }, 600);
await loadSubModalOptions( }
$(subModalId).find('[data-field="filters"]'),
`/api/filters/?server=${selectedServer.id}` createModal({
); title: "Delete a Content Filter",
}, 600); texts: [
}, {
() => { $(filterModalId).modal("show") } content: `<span>Do you wish to permanently delete <b>${name}</b>?</span>`,
); html: true
}) },
{ content: "This action is irreversible, you will lose this filter forever." }
],
buttons: [
{
className: "btn-danger me-3",
iconClass: "bi-trash3",
closeModal: true,
onClick: deleteFilter,
},
{
className: "btn-secondary px-4",
iconClass: "bi-arrow-return-right",
closeModal: true,
onClick: async () => $(filterModalId).modal("show")
}
]
});
});
getTableFiltersComponent(filterTableId).find(".table-del-btn").on("click", async function() { getTableFiltersComponent(filterTableId).find(".table-del-btn").on("click", async function() {
const rows = getSelectedTableRows(filterTableId); const rows = getSelectedTableRows(filterTableId);
const isMany = rows.length > 1; const isMany = rows.length > 1;
const names = rows.map(row => row.name); const names = rows.map(row => row.name);
const namesString = arrayToHtmlList(names, true).prop("outerHTML");
const deleteFilters = async () => {
await confirmationModal( rows.forEach(async row => {
`Delete ${isMany ? "Many Content Filters" : "a Content Filter"}`, await ajaxRequest(`/api/filters/${row.id}/`, "DELETE");
`Do you wish to permanently delete ${isMany ? "these" : "this"} <b>${names.length}</b> content filter${isMany ? "s" : ""}?<br><br>${namesString}`, });
"danger",
"bi-trash3", setTimeout(async () => {
async () => { $(filterTableId).trigger("doDataLoad");
rows.forEach(async row => { await loadSubModalOptions(
await ajaxRequest(`/api/filters/${row.id}/`, "DELETE"); $(subModalId).find('[data-field="filters"]'),
}); `/api/filters/?server=${selectedServer.id}`
);
setTimeout(async () => { }, 600);
$(filterTableId).trigger("doDataLoad"); }
await loadSubModalOptions(
$(subModalId).find('[data-field="filters"]'), createModal({
`/api/filters/?server=${selectedServer.id}` title: `Delete ${isMany ? "Many Content Filters" : "Content Filter"}`,
); texts: [
}, 600); {
}, content: `<p>Do you wish to permanently delete ${isMany ? "these" : "these"} content filter${isMany ? "s" : ""}?</p>`,
null html: true
) },
{
content: arrayToHtmlList(names, true).prop("outerHTML"),
html: true
}
],
buttons: [
{
className: "btn-danger me-3",
iconClass: "bi-trash3",
closeModal: true,
onClick: deleteFilters
},
{
className: "btn-secondary px-4",
iconClass: "bi-arrow-return-right",
closeModal: true
}
]
});
}); });

View File

@ -123,23 +123,41 @@ $(styleModalId).find(".modal-del-btn").on("click", async function() {
const style = $(styleTableId).DataTable().row((idx, row) => { return row.id === id }).data(); const style = $(styleTableId).DataTable().row((idx, row) => { return row.id === id }).data();
const name = sanitise(style.name); const name = sanitise(style.name);
await confirmationModal( const deleteStyle = async () => {
`Delete a Message Style`, await ajaxRequest(`/api/message-styles/${style.id}/`, "DELETE");
`Do you wish to permanently delete <b>${name}</b>?`, setTimeout(async () => {
"danger", $(styleTableId).trigger("doDataLoad");
"bi-trash3", await loadSubModalOptions(
async () => { $(subModalId).find('[data-field="message_style"]'),
await ajaxRequest(`/api/message-styles/${style.id}/`, "DELETE"); `/api/message-styles/?server=${selectedServer.id}`
setTimeout(async () => { );
$(styleTableId).trigger("doDataLoad"); }, 600);
await loadSubModalOptions( }
$(subModalId).find('[data-field="message_style"]'),
`/api/message-styles/?server=${selectedServer.id}` createModal({
); title: "Delete a Message Style",
}, 600); texts: [
}, {
() => { $(styleModalId).modal("show") } content: `<span>Do you wish to permanently delete <b>${name}</b>?</span>`,
); html: true
},
{ content: "This action is irreversible, you will lose this filter forever." }
],
buttons: [
{
className: "btn-danger me-3",
iconClass: "bi-trash3",
closeModal: true,
onClick: deleteStyle,
},
{
className: "btn-secondary px-4",
iconClass: "bi-arrow-return-right",
closeModal: true,
onClick: async () => $(styleModalId).modal("show")
}
]
});
}); });
getTableFiltersComponent(styleTableId).find(".table-del-btn").on("click", async function() { getTableFiltersComponent(styleTableId).find(".table-del-btn").on("click", async function() {
@ -151,39 +169,68 @@ getTableFiltersComponent(styleTableId).find(".table-del-btn").on("click", async
continue; continue;
} }
await okModal( createModal({
"Cannot Delete Style", title: "Cannot Delete Style",
`<b>${row.name}</b> can't be deleted, as it was created by the system, and thus is immutable.`, texts: [
"warning", {
"bi-arrow-return-right", content: `<p><b>${sanitise(row.name)}</b> can't be deleted, as it was created by the system.</p>`,
null, html: true
); },
{ content: "System-owned styles cannot be modified or deleted." },
],
buttons: [
{
className: "btn-warning px-4",
iconClass: "bi-arrow-return-right",
closeModal: true
}
]
});
return return
} }
const names = rows.map(row => row.name); const names = rows.map(row => row.name);
const namesString = arrayToHtmlList(names, true).prop("outerHTML");
const deleteStyles = async () => {
await confirmationModal( rows.forEach(async row => {
`Delete ${isMany ? "Many Message Styles" : "a Message Style"}`, await ajaxRequest(`/api/message-styles/${row.id}/`, "DELETE");
`Do you wish to permanently delete ${isMany ? "these" : "this"} <b>${names.length}</b> message style${isMany ? "s" : ""}?<br><br>${namesString}`, });
"danger",
"bi-trash3", setTimeout(async () => {
async () => { $(styleTableId).trigger("doDataLoad");
rows.forEach(async row => { await loadSubModalOptions(
await ajaxRequest(`/api/message-styles/${row.id}/`, "DELETE"); $(subModalId).find('[data-field="message_style"]'),
}); `/api/message-styles/?server=${selectedServer.id}`
);
setTimeout(async () => { }, 600);
$(styleTableId).trigger("doDataLoad"); }
await loadSubModalOptions(
$(subModalId).find('[data-field="message_style"]'), createModal({
`/api/message-styles/?server=${selectedServer.id}` title: `Delete ${isMany ? "Many Message Styles" : "Message Style"}`,
); texts: [
}, 600); {
}, content: `<p>Do you wish to permanently delete ${isMany ? "these" : "these"} message style${isMany ? "s" : ""}?</p>`,
null html: true
) },
{
content: arrayToHtmlList(names, true).prop("outerHTML"),
html: true
}
],
buttons: [
{
className: "btn-danger me-3",
iconClass: "bi-trash3",
closeModal: true,
onClick: deleteStyles
},
{
className: "btn-secondary px-4",
iconClass: "bi-arrow-return-right",
closeModal: true
}
]
});
}); });

View File

@ -124,40 +124,76 @@ $(subModalId).find(".modal-del-btn").on("click", async function() {
const subscription = $(subTableId).DataTable().row((idx, row) => { return row.id === id }).data(); const subscription = $(subTableId).DataTable().row((idx, row) => { return row.id === id }).data();
const name = sanitise(subscription.name); const name = sanitise(subscription.name);
await confirmationModal( const deleteSubscription = async () => {
`Delete a Subscription`, await ajaxRequest(`/api/subscriptions/${subscription.id}/`, "DELETE");
`Do you wish to permanently delete <b>${name}</b>?`, setTimeout(() => { $(subTableId).trigger("doDataLoad") }, 600);
"danger", }
"bi-trash3",
async () => { createModal({
await ajaxRequest(`/api/subscriptions/${subscription.id}/`, "DELETE"); title: "Delete a Subscriptions",
setTimeout(() => { $(subTableId).trigger("doDataLoad") }, 600); texts: [
}, {
() => { $(subModalId).modal("show") } content: `<span>Do you wish to permanently delete <b>${name}</b>?</span>`,
); html: true
},
{ content: "This action is irreversible, you will lose this subscription forever." }
],
buttons: [
{
className: "btn-danger me-3",
iconClass: "bi-trash3",
closeModal: true,
onClick: deleteSubscription,
},
{
className: "btn-secondary px-4",
iconClass: "bi-arrow-return-right",
closeModal: true,
onClick: async () => $(subModalId).modal("show")
}
]
});
}) })
getTableFiltersComponent(subTableId).find(".table-del-btn").on("click", async function() { getTableFiltersComponent(subTableId).find(".table-del-btn").on("click", async function() {
const rows = getSelectedTableRows(subTableId); const rows = getSelectedTableRows(subTableId);
const names = rows.map(row => row.name); const names = rows.map(row => row.name);
const namesString = arrayToHtmlList(names, true).prop("outerHTML");
const isMany = names.length > 1; const isMany = names.length > 1;
await confirmationModal( const deleteSubscriptions = () => {
`Delete ${isMany ? "Many Subscriptions" : "a Subscription"}`, rows.forEach(async row => {
`Do you wish to permanently delete ${isMany ? "these" : "this"} <b>${names.length}</b> subscription${isMany ? "s" : ""}?<br><br>${namesString}`, await ajaxRequest(`/api/subscriptions/${row.id}/`, "DELETE");
"danger", });
"bi-trash3",
async () => { setTimeout(() => { $(subTableId).trigger("doDataLoad") }, 600);
rows.forEach(async row => { }
await ajaxRequest(`/api/subscriptions/${row.id}/`, "DELETE");
}); createModal({
title: `Delete ${isMany ? "Many Subscriptions" : "Subscription"}`,
setTimeout(() => { $(subTableId).trigger("doDataLoad") }, 600); texts: [
}, {
null content: `<p>Do you wish to permanently delete ${isMany ? "these" : "these"} subscription${isMany ? "s" : ""}?</p>`,
) html: true
},
{
content: arrayToHtmlList(names, true).prop("outerHTML"),
html: true
}
],
buttons: [
{
className: "btn-danger me-3",
iconClass: "bi-trash3",
closeModal: true,
onClick: deleteSubscriptions
},
{
className: "btn-secondary px-4",
iconClass: "bi-arrow-return-right",
closeModal: true
}
]
});
}); });