scan delete working

src/components/scans/ScansOverview.svelte

@@ -22,15 +22,14 @@
   import { runnerFilter, statusFilter } from "../shared/tablefilters";
   import CardRunner from "../cards/CardRunner.svelte";
   import ScanValid from "./ScanValid.svelte";
-  import DeleteScansModal from "./DeleteScansModal.svelte";
+  import DeleteScanModal from "./DeleteScanModal.svelte";
 
   $: selectedScans =
     $table?.getSelectedRowModel().rows.map((row) => row.original) || [];
   $: selected =
     $table?.getSelectedRowModel().rows.map((row) => row.index) || [];
 
-  $: delete_active = false;
-  $: active_deletes = [];
+  $: active_delete = undefined;
   export let current_scans = [];
   const scans_promise = ScanService.scanControllerGetAll().then((val) => {
     current_scans = val;
@@ -123,12 +122,10 @@
         return renderComponent(TableActions, {
           detailsLink: `./${info.row.original.id}`,
           deleteAction: () => {
-            active_deletes = [
+            active_delete =
               current_scans[
                 current_scans.findIndex((r) => r.id == info.row.original.id)
-              ],
-            ];
-            delete_active = true;
+              ];
           },
           deleteEnabled:
             store.state.jwtinfo.userdetails.permissions.includes("SCAN:DELETE"),
@@ -158,41 +155,25 @@
   });
   const table = createSvelteTable(options);
   async function deleteScan(scan_id) {
-    // await ScanService.scanControllerRemove(scan_id, true);
+    await ScanService.scanControllerRemove(scan_id, true);
     current_scans = current_scans.filter((r) => r.id !== scan_id);
-    // options.update((options) => ({
-    //   ...options,
-    //   data: current_scans,
-    // }));
-    // Toastify({
-    //   text: $_("scans-deleted"),
-    //   duration: 3500,
-    //   backgroundColor: "linear-gradient(to right, #00b09b, #96c93d)",
-    // }).showToast();
-  }
-  async function deleteScans(scan_ids) {
-    scan_ids.forEach((scan_id) => {
-      deleteScan(scan_id);
-    });
-    //   // await ScanService.scanControllerRemove(scan_id, true);
-    //   current_scans = current_scans.filter((r) => r.id !== scan_id);
-    //   options.update((options) => ({
-    //     ...options,
-    //     data: current_scans,
-    //   }));
-    //   Toastify({
-    //     text: $_("scans-deleted"),
-    //     duration: 3500,
-    //     backgroundColor: "linear-gradient(to right, #00b09b, #96c93d)",
-    //   }).showToast();
+    options.update((options) => ({
+      ...options,
+      data: current_scans,
+    }));
+    Toastify({
+      text: $_("scan-deleted"),
+      duration: 3500,
+      backgroundColor: "linear-gradient(to right, #00b09b, #96c93d)",
+    }).showToast();
   }
 </script>
 
-<DeleteScansModal
-  delete_scans={active_deletes}
-  modal_open={delete_active}
+<DeleteScanModal
+  delete_scan={active_delete}
+  modal_open={active_delete != undefined}
   on:delete={(event) => {
-    deleteScans(event.detail.scans);
+    deleteScan(event.detail.id);
   }}
 />
 {#if store.state.jwtinfo.userdetails.permissions.includes("SCAN:GET")}
@@ -208,6 +189,36 @@
     {#if current_scans.length === 0}
       <ScansEmptyState />
     {:else}
+      {#if selected.length > 0}
+        <button
+          type="button"
+          class="w-full justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-red-600 text-base font-medium text-white hover:bg-red-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-red-500 sm:ml-3 sm:w-auto sm:text-sm inline-flex"
+          id="options-menu"
+          on:click={async () => {
+            const prom = [];
+            for (const scan of selectedScans) {
+              prom.push(deleteScan(scan.id));
+            }
+            await Promise.all(prom);
+          }}
+        >
+          {$_("delete-cards")}
+          <svg
+            xmlns="http://www.w3.org/2000/svg"
+            fill="none"
+            viewBox="0 0 24 24"
+            stroke-width="1.5"
+            stroke="currentColor"
+            class="w-5 h-5"
+          >
+            <path
+              stroke-linecap="round"
+              stroke-linejoin="round"
+              d="M14.74 9l-.346 9m-4.788 0L9.26 9m9.968-3.21c.342.052.682.107 1.022.166m-1.022-.165L18.16 19.673a2.25 2.25 0 01-2.244 2.077H8.084a2.25 2.25 0 01-2.244-2.077L4.772 5.79m14.456 0a48.108 48.108 0 00-3.478-.397m-12 .562c.34-.059.68-.114 1.022-.165m0 0a48.11 48.11 0 013.478-.397m7.5 0v-.916c0-1.18-.91-2.164-2.09-2.201a51.964 51.964 0 00-3.32 0c-1.18.037-2.09 1.022-2.09 2.201v.916m7.5 0a48.667 48.667 0 00-7.5 0"
+            />
+          </svg>
+        </button>
+      {/if}
       <div class="overflow-x-auto">
         <table class="w-full">
           <thead>