refactor(web): ConfirmDialog and dialogController (#9716)

* wrapper

* no more callback

* refactor: wip

* refactor: wip

* refactor: wip

* pr feedback

* fix

* pr feedback

web/src/lib/components/shared-components/change-date.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
   import { createEventDispatcher } from 'svelte';
   import { DateTime } from 'luxon';
-  import ConfirmDialogue from './confirm-dialogue.svelte';
+  import ConfirmDialog from './dialog/confirm-dialog.svelte';
   import Combobox from './combobox.svelte';
   import DateInput from '../elements/date-input.svelte';
 
@@ -55,14 +55,14 @@
   };
 </script>
 
-<ConfirmDialogue
+<ConfirmDialog
   id="edit-date-time-modal"
   confirmColor="primary"
   title="Edit date and time"
   prompt="Please select a new date:"
   disabled={!date.isValid}
   onConfirm={handleConfirm}
-  onClose={handleCancel}
+  onCancel={handleCancel}
 >
   <div class="flex flex-col text-md px-4 text-center gap-2" slot="prompt">
     <div class="flex flex-col">
@@ -84,4 +84,4 @@
       />
     </div>
   </div>
-</ConfirmDialogue>
+</ConfirmDialog>

web/src/lib/components/shared-components/change-location.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
   import { createEventDispatcher } from 'svelte';
-  import ConfirmDialogue from './confirm-dialogue.svelte';
+  import ConfirmDialog from './dialog/confirm-dialog.svelte';
   import { timeDebounceOnSearch } from '$lib/constants';
   import { handleError } from '$lib/utils/handle-error';
 
@@ -103,13 +103,13 @@
   };
 </script>
 
-<ConfirmDialogue
+<ConfirmDialog
   id="change-location-modal"
   confirmColor="primary"
   title="Change location"
   width="wide"
   onConfirm={handleConfirm}
-  onClose={handleCancel}
+  onCancel={handleCancel}
 >
   <div slot="prompt" class="flex flex-col w-full h-full gap-2">
     <div
@@ -182,4 +182,4 @@
       {/await}
     </div>
   </div>
-</ConfirmDialogue>
+</ConfirmDialog>

web/src/lib/components/shared-components/dialog/confirm-dialog.svelte

@@ -1,9 +1,9 @@
 <script lang="ts">
-  import FullScreenModal from './full-screen-modal.svelte';
-  import Button from '../elements/buttons/button.svelte';
+  import FullScreenModal from '../full-screen-modal.svelte';
+  import Button from '../../elements/buttons/button.svelte';
   import type { Color } from '$lib/components/elements/buttons/button.svelte';
 
-  export let id: string;
+  export let id: string = 'confirm-dialog';
   export let title = 'Confirm';
   export let prompt = 'Are you sure you want to do this?';
   export let confirmText = 'Confirm';
@@ -13,7 +13,7 @@
   export let hideCancelButton = false;
   export let disabled = false;
   export let width: 'wide' | 'narrow' = 'narrow';
-  export let onClose: () => void;
+  export let onCancel: () => void;
   export let onConfirm: () => void;
 
   let isConfirmButtonDisabled = false;
@@ -24,7 +24,7 @@
   };
 </script>
 
-<FullScreenModal {title} {id} {onClose} {width}>
+<FullScreenModal {title} {id} onClose={onCancel} {width}>
   <div class="text-md py-5 text-center">
     <slot name="prompt">
       <p>{prompt}</p>
@@ -33,7 +33,7 @@
 
   <svelte:fragment slot="sticky-bottom">
     {#if !hideCancelButton}
-      <Button color={cancelColor} fullwidth on:click={onClose}>
+      <Button color={cancelColor} fullwidth on:click={onCancel}>
         {cancelText}
       </Button>
     {/if}

web/src/lib/components/shared-components/dialog/dialog-wrapper.svelte

@@ -0,0 +1,9 @@
+<script lang="ts">
+  import { dialogController } from './dialog';
+  import ConfirmDialog from '$lib/components/shared-components/dialog/confirm-dialog.svelte';
+  const { dialog } = dialogController;
+</script>
+
+{#if $dialog}
+  <ConfirmDialog {...$dialog} />
+{/if}

web/src/lib/components/shared-components/dialog/dialog.ts

@@ -0,0 +1,48 @@
+import { writable } from 'svelte/store';
+
+type DialogActions = {
+  onConfirm: () => void;
+  onCancel: () => void;
+};
+
+type DialogOptions = {
+  id?: string;
+  title?: string;
+  prompt?: string;
+  confirmText?: string;
+  cancelText?: string;
+  hideCancelButton?: boolean;
+  disable?: boolean;
+  width?: 'wide' | 'narrow' | undefined;
+};
+
+export type Dialog = DialogOptions & DialogActions;
+
+function createDialogWrapper() {
+  const dialog = writable<Dialog | undefined>();
+
+  async function show(options: DialogOptions) {
+    return new Promise((resolve) => {
+      const newDialog: Dialog = {
+        ...options,
+        onConfirm: () => {
+          dialog.set(undefined);
+          resolve(true);
+        },
+        onCancel: () => {
+          dialog.set(undefined);
+          resolve(false);
+        },
+      };
+
+      dialog.set(newDialog);
+    });
+  }
+
+  return {
+    dialog,
+    show,
+  };
+}
+
+export const dialogController = createDialogWrapper();

web/src/lib/components/shared-components/full-screen-modal.svelte

@@ -47,7 +47,7 @@
   role="presentation"
   in:fade={{ duration: 100 }}
   out:fade={{ duration: 100 }}
-  class="fixed left-0 top-0 z-[9990] flex h-screen w-screen place-content-center place-items-center bg-black/40"
+  class="fixed left-0 top-0 z-[9999] flex h-screen w-screen place-content-center place-items-center bg-black/40"
   on:keydown={(event) => {
     event.stopPropagation();
   }}