Added station deletion confirmation dialog

ref #93

src/components/scanstations/ConfirmScanStationDeletion.svelte

@@ -0,0 +1,92 @@
+<script>
+  import { _ } from "svelte-i18n";
+  import { clickOutside } from "../base/outsideclick";
+  import { focusTrap } from "svelte-focus-trap";
+  import { ScanStationService } from "@odit/lfk-client-js";
+  import Toastify from "toastify-js";
+  import { createEventDispatcher } from "svelte";
+  export let modal_open;
+  export let delete_station;
+  const dispatch = createEventDispatcher();
+  function cancelDelete() {
+    modal_open = false;
+    dispatch("cancelDelete", { id: delete_station.id });
+  }
+  function deleteStation() {
+    ScanStationService.donorControllerRemove(
+      delete_station.id,
+      true
+    )
+      .then((resp) => {
+        Toastify({
+          text: "Station deleted",
+          duration: 500,
+          backgroundColor: "linear-gradient(to right, #00b09b, #96c93d)",
+        }).showToast();
+        location.replace("./");
+      })
+      .catch((err) => {});
+  }
+</script>
+
+{#if modal_open}
+  <div
+    class="fixed z-10 inset-0 overflow-y-auto"
+    use:focusTrap
+    use:clickOutside
+    on:click_outside={cancelDelete}>
+    <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 overflow-hidden 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 class="h-6 w-6 text-blue-600" fill="currentColor" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="none" d="M0 0h24v24H0z"/><path d="M9.33 11.5h2.17A4.5 4.5 0 0116 16H9v1h8v-1a5.58 5.58 0 00-.89-3H19a5 5 0 014.52 2.85A13.15 13.15 0 0113 21c-2.76 0-5.1-.59-7-1.63v-9.3a6.97 6.97 0 013.33 1.43zM5 19a1 1 0 01-1 1H2a1 1 0 01-1-1v-9a1 1 0 011-1h2a1 1 0 011 1v9zM18 5a3 3 0 110 6 3 3 0 010-6zm-7-3a3 3 0 110 6 3 3 0 010-6z"/></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">
+                {$_('attention')}
+              </h3>
+              <div class="mt-2 mb-6">
+                <p class="text-sm text-gray-500">
+                  {$_(
+                    'do-you-want-to-delete-this-donor-with-all-related-donations'
+                  )}
+                  <br /> 
+                  All associated scans will get deleted as well
+                </p>
+              </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={deleteStation}
+            type="button"
+            class="w-full inline-flex 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">
+            Confirm, delete station with all scans
+          </button>
+          <button
+            on:click={cancelDelete}
+            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, keep station
+          </button>
+        </div>
+      </div>
+    </div>
+  </div>
+{/if}

src/components/scanstations/ScanStationsOverview.svelte

@@ -9,11 +9,21 @@
   );
   import store from "../../store";
   import ScanStationsEmptyState from "./ScanStationsEmptyState.svelte";
+import ConfirmScanStationDeletion from "./ConfirmScanStationDeletion.svelte";
   $: searchvalue = "";
   $: active_deletes = [];
+  let delete_station = {};
+  let modal_open = false;
   export let current_stations = [];
 </script>
 
+<ConfirmScanStationDeletion
+  on:cancelDelete={(event) => {
+    modal_open = false;
+    active_deletes[event.detail.id] = false;
+  }}
+  bind:modal_open
+  bind:delete_station />
 {#if store.state.jwtinfo.userdetails.permissions.includes('STATION:GET')}
   {#await promise}
     <div
@@ -103,22 +113,22 @@
                         tabindex="0"
                         class="ml-4 text-indigo-600 hover:text-indigo-900 cursor-pointer">{$_('cancel-delete')}</button>
                       <button
-                        on:click={() => {
+                      on:click={() => {
-                          //TODO:
+                        ScanStationService.scanStationControllerRemove(s.id, false)
-                          // ScanStationService.scanStationControllerRemove(s.id, false).then(
+                          .then((resp) => {
-                          //   (resp) => {
+                            current_stations = current_stations.filter((obj) => obj.id !== s.id);
-                          //     current_stations = current_stations.filter(
+                            Toastify({
-                          //       (obj) => obj.id !== t.id
+                              text: 'Station deleted',
-                          //     );
+                              duration: 500,
-                          //     Toastify({
+                              backgroundColor:
-                          //       text: $_('contact-deleted'),
+                                'linear-gradient(to right, #00b09b, #96c93d)',
-                          //       duration: 500,
+                            }).showToast();
-                          //       backgroundColor:
+                          })
-                          //         'linear-gradient(to right, #00b09b, #96c93d)',
+                          .catch((err) => {
-                          //     }).showToast();
+                            modal_open = true;
-                          //   }
+                            delete_station = s;
-                          // );
+                          });
-                        }}
+                      }}
                         tabindex="0"
                         class="ml-4 text-red-600 hover:text-red-900 cursor-pointer">{$_('confirm-delete')}</button>
                     </td>