delete selected item functions

apps/home/static/home/js/tabs/styles.js

@@ -11,7 +11,12 @@ function initMessageStylesModule() {
             {
                 title: "Name",
                 data: "name",
-                render: renderEditColumn
+                render: function(data, type, row) {
+                    const btn = renderEditColumn(data);
+                    return row.auto_created ?
+                        $(btn).removeClass("edit-modal").addClass("disabled")[0]
+                        : btn;
+                }
             },
             {
                 title: "Is Embed",
@@ -56,6 +61,26 @@ function initMessageStylesModule() {
             {
                 title: "Description Mutator",
                 data: "description_mutator"
+            },
+            {
+                title: "Editable",
+                data: "auto_created",
+                className: "text-center",
+                render: function(data) {
+                    const icon = renderBooleanColumn(!data);
+                    if (!data) {
+                        return icon;
+                    }
+
+                    return $(`
+                        <span data-bs-trigger="hover focus"
+                            data-bs-custom-class="text-center"
+                            data-bs-toggle="popover"
+                            data-bs-content="This style was created internally, and cannot be altered.">
+                            ${icon}
+                        </span>
+                    `).popover()[0];
+                }
             }
         ]
     );
@@ -81,6 +106,74 @@ async function loadMessageStyleData() {
     await loadTableData(styleTableId, "/api/message-styles/", "GET");
 }
 
+// region Table Delete Btns
+
+$(styleModalId).find(".modal-del-btn").on("click", async function() {
+    $(styleModalId).modal("hide");
+
+    const id = parseInt($(styleModalId).data("primary-key"));
+    const style = $(styleTableId).DataTable().row((idx, row) => { return row.id === id }).data();
+    const name = sanitise(style.name);
+
+    await confirmationModal(
+        `Delete a Message Style`,
+        `Do you wish to permanently delete <b>${name}</b>?`,
+        "danger",
+        "bi-trash3",
+        async () => {
+            await ajaxRequest(`/api/message-styles/${style.id}/`, "DELETE");
+            setTimeout(async () => {
+                $(styleTableId).trigger("doDataLoad");
+                await loadSubModalOptions(
+                    $(subModalId).find('[data-field="message_style"]'),
+                    `/api/message-styles/?server=${selectedServer.id}`
+                );
+            }, 600);
+        },
+        () => { $(styleModalId).modal("show") }
+    );
+})
+
+getTableFiltersComponent(styleTableId).find(".table-del-btn").on("click", async function() {
+    const rows = getSelectedTableRows(styleTableId);
+    const isMany = rows.length > 1;
+
+    if (rows.some(row => row.auto_created)) {
+        await okModal(
+            `Cannot Delete Style${isMany ? "s" : ""}`,
+            "One or more styles were created by the system, and cannot be altered.",
+            "warning",
+            "bi-cpu",
+            null,
+        );
+        return
+    }
+
+    const names = rows.map(row => row.name);
+    const namesString = arrayToHtmlList(names, true).prop("outerHTML");
+    
+    await confirmationModal(
+        `Delete ${isMany ? "Many Message Styles" : "a Message Style"}`,
+        `Do you wish to permanently delete ${isMany ? "these" : "this"} <b>${names.length}</b> message style${isMany ? "s" : ""}?<br><br>${namesString}`,
+        "danger",
+        "bi-trash3",
+        async () => {
+            rows.forEach(async row => {
+                await ajaxRequest(`/api/message-styles/${row.id}/`, "DELETE");
+            });
+    
+            setTimeout(async () => {
+                $(styleTableId).trigger("doDataLoad");
+                await loadSubModalOptions(
+                    $(subModalId).find('[data-field="message_style"]'),
+                    `/api/message-styles/?server=${selectedServer.id}`
+                );
+            }, 600);
+        },
+        null
+    )
+});
+
 
 // region New/Edit Modal
 
@@ -95,11 +188,16 @@ $(styleTableId).on("click", ".edit-modal", async function() {
 
 $(styleModalId).on("submit", async function(event) {
     event.preventDefault();
-    await onModalSubmit(
+    onModalSubmit(
         $(styleModalId),
         $(styleTableId),
         "/api/message-styles/"
-    );
+    ).then(async () => {
+        await loadSubModalOptions(
+            $(subModalId).find('[data-field="message_style"]'),
+            `/api/message-styles/?server=${selectedServer.id}`
+        );
+    });
 });
 
 

apps/home/static/home/js/tabs/subs.js

@@ -102,6 +102,50 @@ $(subTableId).on("change", ".sub-toggle-active", async function() {
 });
 
 
+// region Table Delete Buttons
+
+$(subModalId).find(".modal-del-btn").on("click", async function() {
+    $(subModalId).modal("hide");
+
+    const id = parseInt($(subModalId).data("primary-key"));
+    const subscription = $(subTableId).DataTable().row((idx, row) => { return row.id === id }).data();
+    const name = sanitise(subscription.name);
+
+    await confirmationModal(
+        `Delete a Subscription`,
+        `Do you wish to permanently delete <b>${name}</b>?`,
+        "danger",
+        async () => {
+            await ajaxRequest(`/api/subscriptions/${subscription.id}/`, "DELETE");
+            setTimeout(() => { $(subTableId).trigger("doDataLoad") }, 600);
+        },
+        () => { $(subModalId).modal("show") }
+    );
+})
+
+getTableFiltersComponent(subTableId).find(".table-del-btn").on("click", async function() {
+    const rows = getSelectedTableRows(subTableId);
+
+    const names = rows.map(row => row.name);
+    const namesString = arrayToHtmlList(names, true).prop("outerHTML");
+    const isMany = names.length > 1;
+    
+    await confirmationModal(
+        `Delete ${isMany ? "Many Subscriptions" : "a Subscription"}`,
+        `Do you wish to permanently delete ${isMany ? "these" : "this"} <b>${names.length}</b> subscription${isMany ? "s" : ""}?<br><br>${namesString}`,
+        "danger",
+        async () => {
+            rows.forEach(async row => {
+                await ajaxRequest(`/api/subscriptions/${row.id}/`, "DELETE");
+            });
+    
+            setTimeout(() => { $(subTableId).trigger("doDataLoad") }, 600);
+        },
+        null
+    )
+});
+
+
 // region New/Edit Modal
 
 $(subTableId).closest('.js-tableBody').siblings('.js-tableFilters').on("click", ".table-new-btn", async function() {