wip: delete scans

src/components/scans/DeleteScansModal.svelte

@@ -0,0 +1,104 @@
+<script>
+  import { _ } from "svelte-i18n";
+  import { clickOutside } from "../base/outsideclick";
+  import { createEventDispatcher, onMount } from "svelte";
+  export let modal_open;
+  export let delete_scans = [];
+  const dispatch = createEventDispatcher();
+  onMount(() => {
+    document.onkeydown = (e) => {
+      e = e || window.event;
+      if (e.key === "Escape") {
+        modal_open = false;
+      }
+      if (e.keyCode === 13) {
+        if (createbtnenabled === true) {
+          createbtnenabled = false;
+          submit();
+        }
+      }
+    };
+  });
+  async function submit() {
+    dispatch("delete", { scans: delete_scans });
+    modal_open = false;
+  }
+</script>
+
+{#if modal_open}
+  <div
+    class="fixed z-10 inset-0 overflow-y-auto"
+    use:clickOutside
+    on:click_outside={() => {
+      modal_open = false;
+    }}
+  >
+    <div
+      class="flex items-end justify-center min-h-screen pt-4 px-4 pb-20 text-center sm:block sm:p-0"
+    >
+      <div class="fixed inset-0 transition-opacity" aria-hidden="true">
+        <div
+          class="absolute inset-0 bg-gray-500 opacity-75"
+          data-id="modal_backdrop"
+        />
+      </div>
+      <span
+        class="hidden sm:inline-block sm:align-middle sm:h-screen"
+        aria-hidden="true">&#8203;</span
+      >
+      <div
+        class="inline-block align-bottom bg-white rounded-lg text-left shadow-xl transform transition-all sm:my-8 sm:align-middle sm:max-w-lg sm:w-full"
+        role="dialog"
+        aria-modal="true"
+        aria-labelledby="modal-headline"
+      >
+        <div class="bg-white px-4 pt-5 pb-4 sm:p-6 sm:pb-4">
+          <div class="sm:flex sm:items-start">
+            <div
+              class="mx-auto flex-shrink-0 flex items-center justify-center h-12 w-12 rounded-full bg-blue-100 sm:mx-0 sm:h-10 sm:w-10"
+            >
+              <svg
+                xmlns="http://www.w3.org/2000/svg"
+                viewBox="0 0 24 24"
+                class="h-6 w-6 text-blue-600"
+                fill="currentColor"
+                width="24"
+                height="24"
+                ><path fill="none" d="M0 0h24v24H0z" />
+                <path
+                  d="M9.83 8.79L8 9.456V13H6V8.05h.015l5.268-1.918c.244-.093.51-.14.782-.131a2.616 2.616 0 0 1 2.427 1.82c.186.583.356.977.51 1.182A4.992 4.992 0 0 0 19 11v2a6.986 6.986 0 0 1-5.402-2.547l-.581 3.297L15 15.67V23h-2v-5.986l-2.05-1.987-.947 4.298-6.894-1.215.348-1.97 4.924.868L9.83 8.79zM13.5 5.5a2 2 0 1 1 0-4 2 2 0 0 1 0 4z"
+                /></svg
+              >
+            </div>
+            <div class="mt-3 text-center sm:mt-0 sm:ml-4 sm:text-left">
+              <h3 class="text-lg leading-6 font-medium text-gray-900">
+                {$_("confirm-delete")}
+              </h3>
+              <div class="mt-2 mb-6">
+                please confirm deletion of {delete_scans.length} scans
+              </div>
+            </div>
+          </div>
+        </div>
+        <div class="bg-gray-50 px-4 py-3 sm:px-6 sm:flex sm:flex-row-reverse">
+          <button
+            on:click={submit}
+            type="button"
+            class="w-full inline-flex justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-blue-600 text-base font-medium text-white hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 sm:ml-3 sm:w-auto sm:text-sm"
+          >
+            {$_("delete")}
+          </button>
+          <button
+            on:click={() => {
+              modal_open = false;
+            }}
+            type="button"
+            class="mt-3 w-full inline-flex justify-center rounded-md border border-gray-300 shadow-sm px-4 py-2 bg-white text-base font-medium text-gray-700 hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 sm:mt-0 sm:ml-3 sm:w-auto sm:text-sm"
+          >
+            {$_("cancel")}
+          </button>
+        </div>
+      </div>
+    </div>
+  </div>
+{/if}

src/components/scans/ScansOverview.svelte

@@ -22,13 +22,14 @@
   import { runnerFilter } from "../shared/tablefilters";
   import CardRunner from "../cards/CardRunner.svelte";
   import ScanValid from "./ScanValid.svelte";
+  import DeleteScansModal from "./DeleteScansModal.svelte";
 
   $: selectedScans =
     $table?.getSelectedRowModel().rows.map((row) => row.original) || [];
   $: selected =
     $table?.getSelectedRowModel().rows.map((row) => row.index) || [];
 
-  $: active_delete = undefined;
+  $: delete_active = false;
   $: active_deletes = [];
   export let current_scans = [];
   const scans_promise = ScanService.scanControllerGetAll().then((val) => {
@@ -122,10 +123,12 @@
         return renderComponent(TableActions, {
           detailsLink: `./${info.row.original.id}`,
           deleteAction: () => {
-            active_delete =
+            active_deletes = [
               current_scans[
                 current_scans.findIndex((r) => r.id == info.row.original.id)
-              ];
+              ],
+            ];
+            delete_active = true;
           },
           deleteEnabled:
             store.state.jwtinfo.userdetails.permissions.includes("SCAN:DELETE"),
@@ -153,8 +156,44 @@
     getSortedRowModel: getSortedRowModel(),
   });
   const table = createSvelteTable(options);
+  async function 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();
+  }
+  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();
+  }
 </script>
 
+<DeleteScansModal
+  delete_scans={active_deletes}
+  modal_open={delete_active}
+  on:delete={(event) => {
+    deleteScans(event.detail.scans);
+  }}
+/>
 {#if store.state.jwtinfo.userdetails.permissions.includes("SCAN:GET")}
   {#await scans_promise}
     <div