feat(web): add types to dispatcher (#5700)

* feat: add types to dispatcher

* fix: create album name

* pr feedback

* pr feedback

* pr feedback

* fix: api key name

* remove newSharedAlbum

* pr feedback

* fix: api key creation

* on:close

* fix: owner

* fix: onclose

* remove unused code

---------

Co-authored-by: Alex Tran <alex.tran1502@gmail.com>

web/src/lib/components/forms/api-key-form.svelte

@@ -5,18 +5,32 @@
   import FullScreenModal from '../shared-components/full-screen-modal.svelte';
   import Icon from '$lib/components/elements/icon.svelte';
   import { mdiKeyVariant } from '@mdi/js';
+  import { NotificationType, notificationController } from '../shared-components/notification/notification';
 
   export let apiKey: Partial<APIKeyResponseDto>;
   export let title = 'API Key';
   export let cancelText = 'Cancel';
   export let submitText = 'Save';
+  export let apiKeyName = 'API Key';
 
-  const dispatch = createEventDispatcher();
+  const dispatch = createEventDispatcher<{
+    cancel: void;
+    submit: Partial<APIKeyResponseDto>;
+  }>();
   const handleCancel = () => dispatch('cancel');
-  const handleSubmit = () => dispatch('submit', { ...apiKey, name: apiKey.name });
+  const handleSubmit = () => {
+    if (apiKeyName) {
+      dispatch('submit', { ...apiKey, name: apiKeyName });
+    } else {
+      notificationController.show({
+        message: "Your API Key name shouldn't be empty",
+        type: NotificationType.Warning,
+      });
+    }
+  };
 </script>
 
-<FullScreenModal on:clickOutside={() => handleCancel()}>
+<FullScreenModal on:clickOutside={handleCancel}>
   <div
     class="w-[500px] max-w-[95vw] rounded-3xl border bg-immich-bg p-4 py-8 shadow-sm dark:border-immich-dark-gray dark:bg-immich-dark-gray dark:text-immich-dark-fg"
   >
@@ -29,14 +43,14 @@
       </h1>
     </div>
 
-    <form on:submit|preventDefault={() => handleSubmit()} autocomplete="off">
+    <form on:submit|preventDefault={handleSubmit} autocomplete="off">
       <div class="m-4 flex flex-col gap-2">
         <label class="immich-form-label" for="name">Name</label>
-        <input class="immich-form-input" id="name" name="name" type="text" bind:value={apiKey.name} />
+        <input class="immich-form-input" id="name" name="name" type="text" bind:value={apiKeyName} />
       </div>
 
       <div class="mt-8 flex w-full gap-4 px-4">
-        <Button color="gray" fullwidth on:click={() => handleCancel()}>{cancelText}</Button>
+        <Button color="gray" fullwidth on:click={handleCancel}>{cancelText}</Button>
         <Button type="submit" fullwidth>{submitText}</Button>
       </div>
     </form>

web/src/lib/components/forms/api-key-secret.svelte

@@ -8,7 +8,9 @@
 
   export let secret = '';
 
-  const dispatch = createEventDispatcher();
+  const dispatch = createEventDispatcher<{
+    done: void;
+  }>();
   const handleDone = () => dispatch('done');
   let canCopyImagesToClipboard = true;
 

web/src/lib/components/forms/change-password-form.svelte

@@ -22,7 +22,9 @@
     }
   }
 
-  const dispatch = createEventDispatcher();
+  const dispatch = createEventDispatcher<{
+    success: void;
+  }>();
 
   async function changePassword() {
     if (changeChagePassword) {

web/src/lib/components/forms/create-user-form.svelte

@@ -24,7 +24,10 @@
       canCreateUser = true;
     }
   }
-  const dispatch = createEventDispatcher();
+  const dispatch = createEventDispatcher<{
+    submit: void;
+    cancel: void;
+  }>();
 
   async function registerUser(event: SubmitEvent) {
     if (canCreateUser && !isCreatingUser) {
@@ -52,7 +55,7 @@
         if (status === 201) {
           success = 'New user created';
 
-          dispatch('user-created');
+          dispatch('submit');
 
           isCreatingUser = false;
           return;

web/src/lib/components/forms/library-exclusion-pattern-form.svelte

@@ -9,7 +9,11 @@
   export let canDelete = false;
   export let submitText = 'Submit';
 
-  const dispatch = createEventDispatcher();
+  const dispatch = createEventDispatcher<{
+    cancel: void;
+    submit: { excludePattern: string };
+    delete: void;
+  }>();
   const handleCancel = () => dispatch('cancel');
   const handleSubmit = () => dispatch('submit', { excludePattern: exclusionPattern });
 </script>

web/src/lib/components/forms/library-import-path-form.svelte

@@ -11,7 +11,11 @@
   export let submitText = 'Save';
   export let canDelete = false;
 
-  const dispatch = createEventDispatcher();
+  const dispatch = createEventDispatcher<{
+    cancel: void;
+    submit: { importPath: string };
+    delete: void;
+  }>();
   const handleCancel = () => dispatch('cancel');
   const handleSubmit = () => dispatch('submit', { importPath });
 </script>

web/src/lib/components/forms/library-import-paths-form.svelte

@@ -26,7 +26,10 @@
     }
   });
 
-  const dispatch = createEventDispatcher();
+  const dispatch = createEventDispatcher<{
+    cancel: void;
+    submit: Partial<LibraryResponseDto>;
+  }>();
   const handleCancel = () => {
     dispatch('cancel');
   };

web/src/lib/components/forms/library-rename-form.svelte

@@ -5,7 +5,10 @@
 
   export let library: Partial<LibraryResponseDto>;
 
-  const dispatch = createEventDispatcher();
+  const dispatch = createEventDispatcher<{
+    cancel: void;
+    submit: Partial<LibraryResponseDto>;
+  }>();
   const handleCancel = () => {
     dispatch('cancel');
   };

web/src/lib/components/forms/library-scan-settings-form.svelte

@@ -26,13 +26,16 @@
     }
   });
 
-  const dispatch = createEventDispatcher();
+  const dispatch = createEventDispatcher<{
+    cancel: void;
+    submit: { library: Partial<LibraryResponseDto>; type: LibraryType };
+  }>();
   const handleCancel = () => {
     dispatch('cancel');
   };
 
   const handleSubmit = () => {
-    dispatch('submit', { ...library, libraryType: LibraryType.External });
+    dispatch('submit', { library, type: LibraryType.External });
   };
 
   const handleAddExclusionPattern = async () => {