From 4c5397d7e60319a3677a91656ce388cbd9769f21 Mon Sep 17 00:00:00 2001 From: martin <74269598+martabal@users.noreply.github.com> Date: Fri, 15 Dec 2023 03:54:21 +0100 Subject: [PATCH] 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 --- .../admin-page/delete-confirm-dialoge.svelte | 11 +++++--- .../admin-page/restore-dialoge.svelte | 9 ++++--- .../logging-settings/logging-settings.svelte | 12 +++++++-- .../album-page/thumbnail-selection.svelte | 9 ++++--- .../asset-viewer/activity-status.svelte | 5 +++- .../asset-viewer/album-list-item.svelte | 6 +++-- .../asset-viewer/asset-viewer-nav-bar.svelte | 4 +-- .../asset-viewer/asset-viewer.svelte | 19 +++++--------- .../asset-viewer/detail-panel.svelte | 3 +-- .../faces-page/assign-face-side-panel.svelte | 6 ++++- .../faces-page/face-thumbnail.svelte | 4 ++- .../faces-page/merge-face-selector.svelte | 9 ++++--- .../faces-page/person-side-panel.svelte | 5 +++- .../components/faces-page/show-hide.svelte | 19 +++++++------- .../faces-page/unmerge-face-selector.svelte | 7 +++-- .../lib/components/forms/api-key-form.svelte | 26 ++++++++++++++----- .../components/forms/api-key-secret.svelte | 4 ++- .../forms/change-password-form.svelte | 4 ++- .../components/forms/create-user-form.svelte | 7 +++-- .../library-exclusion-pattern-form.svelte | 6 ++++- .../forms/library-import-path-form.svelte | 6 ++++- .../forms/library-import-paths-form.svelte | 5 +++- .../forms/library-rename-form.svelte | 5 +++- .../forms/library-scan-settings-form.svelte | 7 +++-- .../memory-page/memory-viewer.svelte | 2 +- .../photos-page/actions/add-to-album.svelte | 11 +++----- .../asset-select-control-bar.svelte | 2 +- .../individual-shared-viewer.svelte | 2 +- .../album-selection-modal.svelte | 19 +++----------- .../shared-components/control-app-bar.svelte | 6 +++-- .../sharedlinks-page/shared-link-card.svelte | 6 ++++- .../user-settings-page/library-list.svelte | 21 ++++++++++----- .../user-api-key-list.svelte | 22 +++++++++------- .../(user)/albums/[albumId]/+page.svelte | 6 ++--- .../(user)/partners/[userId]/+page.svelte | 2 +- web/src/routes/(user)/people/+page.svelte | 8 +++--- .../(user)/people/[personId]/+page.svelte | 6 ++--- web/src/routes/(user)/search/+page.svelte | 2 +- .../(user)/sharing/sharedlinks/+page.svelte | 2 +- .../routes/admin/user-management/+page.svelte | 12 ++++----- web/src/routes/auth/login/+page.svelte | 2 +- 41 files changed, 199 insertions(+), 130 deletions(-) diff --git a/web/src/lib/components/admin-page/delete-confirm-dialoge.svelte b/web/src/lib/components/admin-page/delete-confirm-dialoge.svelte index 5bad6c940e..baaab70527 100644 --- a/web/src/lib/components/admin-page/delete-confirm-dialoge.svelte +++ b/web/src/lib/components/admin-page/delete-confirm-dialoge.svelte @@ -6,19 +6,22 @@ export let user: UserResponseDto; - const dispatch = createEventDispatcher(); + const dispatch = createEventDispatcher<{ + success: void; + fail: void; + }>(); const deleteUser = async () => { try { const deletedUser = await api.userApi.deleteUser({ id: user.id }); if (deletedUser.data.deletedAt != null) { - dispatch('user-delete-success'); + dispatch('success'); } else { - dispatch('user-delete-fail'); + dispatch('fail'); } } catch (error) { handleError(error, 'Unable to delete user'); - dispatch('user-delete-fail'); + dispatch('fail'); } }; diff --git a/web/src/lib/components/admin-page/restore-dialoge.svelte b/web/src/lib/components/admin-page/restore-dialoge.svelte index e96a4a54db..581bde9adb 100644 --- a/web/src/lib/components/admin-page/restore-dialoge.svelte +++ b/web/src/lib/components/admin-page/restore-dialoge.svelte @@ -5,14 +5,17 @@ export let user: UserResponseDto; - const dispatch = createEventDispatcher(); + const dispatch = createEventDispatcher<{ + success: void; + fail: void; + }>(); const restoreUser = async () => { const restoredUser = await api.userApi.restoreUser({ id: user.id }); if (restoredUser.data.deletedAt == null) { - dispatch('user-restore-success'); + dispatch('success'); } else { - dispatch('user-restore-fail'); + dispatch('fail'); } }; diff --git a/web/src/lib/components/admin-page/settings/logging-settings/logging-settings.svelte b/web/src/lib/components/admin-page/settings/logging-settings/logging-settings.svelte index 70fa2dc8d1..9884cb8380 100644 --- a/web/src/lib/components/admin-page/settings/logging-settings/logging-settings.svelte +++ b/web/src/lib/components/admin-page/settings/logging-settings/logging-settings.svelte @@ -10,6 +10,7 @@ import SettingButtonsRow from '../setting-buttons-row.svelte'; import SettingSwitch from '../setting-switch.svelte'; import SettingSelect from '../setting-select.svelte'; + import type { ResetOptions } from '$lib/utils/dipatch'; export let loggingConfig: SystemConfigLoggingDto; // this is the config that is being edited export let disabled = false; @@ -24,6 +25,14 @@ ]); } + const handleReset = (detail: ResetOptions) => { + if (detail.default) { + resetToDefault(); + } else { + reset(); + } + }; + async function saveSetting() { try { const { data: current } = await api.systemConfigApi.getConfig(); @@ -96,9 +105,8 @@ /> handleReset(detail)} on:save={saveSetting} - on:reset-to-default={resetToDefault} showResetToDefault={!isEqual(savedConfig, defaultConfig)} {disabled} /> diff --git a/web/src/lib/components/album-page/thumbnail-selection.svelte b/web/src/lib/components/album-page/thumbnail-selection.svelte index e58bf89d38..e2c1968b29 100644 --- a/web/src/lib/components/album-page/thumbnail-selection.svelte +++ b/web/src/lib/components/album-page/thumbnail-selection.svelte @@ -10,7 +10,10 @@ export let album: AlbumResponseDto; let selectedThumbnail: AssetResponseDto | undefined; - const dispatch = createEventDispatcher(); + const dispatch = createEventDispatcher<{ + close: void; + thumbnail: AssetResponseDto | undefined; + }>(); $: isSelected = (id: string): boolean | undefined => { if (!selectedThumbnail && album.albumThumbnailAssetId == id) { @@ -25,7 +28,7 @@ transition:fly={{ y: 500, duration: 100, easing: quintOut }} class="absolute left-0 top-0 z-[9999] h-full w-full bg-immich-bg py-[160px] dark:bg-immich-dark-bg" > - dispatch('close')}> + dispatch('close')}>

Select album cover

 @@ -35,7 +38,7 @@ size="sm" rounded="lg" disabled={selectedThumbnail == undefined} - on:click={() => dispatch('thumbnail-selected', { asset: selectedThumbnail })} + on:click={() => dispatch('thumbnail', selectedThumbnail)} > Done diff --git a/web/src/lib/components/asset-viewer/activity-status.svelte b/web/src/lib/components/asset-viewer/activity-status.svelte index 47e29ff974..8e1aa91af9 100644 --- a/web/src/lib/components/asset-viewer/activity-status.svelte +++ b/web/src/lib/components/asset-viewer/activity-status.svelte @@ -9,7 +9,10 @@ export let isShowActivity: boolean | undefined; export let disabled: boolean; - const dispatch = createEventDispatcher(); + const dispatch = createEventDispatcher<{ + openActivityTab: void; + favorite: void; + }>();
(); export let album: AlbumResponseDto; export let variant: 'simple' | 'full' = 'full'; @@ -24,7 +26,7 @@ +
diff --git a/web/src/lib/components/forms/api-key-secret.svelte b/web/src/lib/components/forms/api-key-secret.svelte index afeb8e6987..7dcf39c36b 100644 --- a/web/src/lib/components/forms/api-key-secret.svelte +++ b/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; diff --git a/web/src/lib/components/forms/change-password-form.svelte b/web/src/lib/components/forms/change-password-form.svelte index ba2cdb862b..41c7cee990 100644 --- a/web/src/lib/components/forms/change-password-form.svelte +++ b/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) { diff --git a/web/src/lib/components/forms/create-user-form.svelte b/web/src/lib/components/forms/create-user-form.svelte index 50c20790ea..42cbb2bb43 100644 --- a/web/src/lib/components/forms/create-user-form.svelte +++ b/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; diff --git a/web/src/lib/components/forms/library-exclusion-pattern-form.svelte b/web/src/lib/components/forms/library-exclusion-pattern-form.svelte index 3b7954107b..fccf3b57b9 100644 --- a/web/src/lib/components/forms/library-exclusion-pattern-form.svelte +++ b/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 }); diff --git a/web/src/lib/components/forms/library-import-path-form.svelte b/web/src/lib/components/forms/library-import-path-form.svelte index f1f46190e5..f01b902dce 100644 --- a/web/src/lib/components/forms/library-import-path-form.svelte +++ b/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 }); diff --git a/web/src/lib/components/forms/library-import-paths-form.svelte b/web/src/lib/components/forms/library-import-paths-form.svelte index 16e083ffbb..3d31573499 100644 --- a/web/src/lib/components/forms/library-import-paths-form.svelte +++ b/web/src/lib/components/forms/library-import-paths-form.svelte @@ -26,7 +26,10 @@ } }); - const dispatch = createEventDispatcher(); + const dispatch = createEventDispatcher<{ + cancel: void; + submit: Partial; + }>(); const handleCancel = () => { dispatch('cancel'); }; diff --git a/web/src/lib/components/forms/library-rename-form.svelte b/web/src/lib/components/forms/library-rename-form.svelte index 34ee1a058c..6d7d6865b1 100644 --- a/web/src/lib/components/forms/library-rename-form.svelte +++ b/web/src/lib/components/forms/library-rename-form.svelte @@ -5,7 +5,10 @@ export let library: Partial; - const dispatch = createEventDispatcher(); + const dispatch = createEventDispatcher<{ + cancel: void; + submit: Partial; + }>(); const handleCancel = () => { dispatch('cancel'); }; diff --git a/web/src/lib/components/forms/library-scan-settings-form.svelte b/web/src/lib/components/forms/library-scan-settings-form.svelte index 23c41094de..1a07839a9d 100644 --- a/web/src/lib/components/forms/library-scan-settings-form.svelte +++ b/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; type: LibraryType }; + }>(); const handleCancel = () => { dispatch('cancel'); }; const handleSubmit = () => { - dispatch('submit', { ...library, libraryType: LibraryType.External }); + dispatch('submit', { library, type: LibraryType.External }); }; const handleAddExclusionPattern = async () => { diff --git a/web/src/lib/components/memory-page/memory-viewer.svelte b/web/src/lib/components/memory-page/memory-viewer.svelte index d90efe7127..8f58b662b7 100644 --- a/web/src/lib/components/memory-page/memory-viewer.svelte +++ b/web/src/lib/components/memory-page/memory-viewer.svelte @@ -101,7 +101,7 @@
{#if currentMemory} - goto(AppRoute.PHOTOS)} forceDark> + goto(AppRoute.PHOTOS)} forceDark>

{currentMemory.title} diff --git a/web/src/lib/components/photos-page/actions/add-to-album.svelte b/web/src/lib/components/photos-page/actions/add-to-album.svelte index b62d2eccb9..9e4b422dd6 100644 --- a/web/src/lib/components/photos-page/actions/add-to-album.svelte +++ b/web/src/lib/components/photos-page/actions/add-to-album.svelte @@ -23,10 +23,9 @@ closeMenu(); }; - const handleAddToNewAlbum = (event: CustomEvent) => { + const handleAddToNewAlbum = (albumName: string) => { showAlbumPicker = false; - const { albumName }: { albumName: string } = event.detail; const assetIds = Array.from(getAssets()).map((asset) => asset.id); api.albumApi.createAlbum({ createAlbumDto: { albumName, assetIds } }).then((response) => { const { id, albumName } = response.data; @@ -42,9 +41,8 @@ }); }; - const handleAddToAlbum = async (event: CustomEvent<{ album: AlbumResponseDto }>) => { + const handleAddToAlbum = async (album: AlbumResponseDto) => { showAlbumPicker = false; - const album = event.detail.album; const assetIds = Array.from(getAssets()).map((asset) => asset.id); await addAssetsToAlbum(album.id, assetIds); clearSelect(); @@ -56,9 +54,8 @@ {#if showAlbumPicker} handleAddToNewAlbum(detail)} + on:album={({ detail }) => handleAddToAlbum(detail)} on:close={handleHideAlbumPicker} /> {/if} diff --git a/web/src/lib/components/photos-page/asset-select-control-bar.svelte b/web/src/lib/components/photos-page/asset-select-control-bar.svelte index 5ce4a9ebd0..3b0a77c9c0 100644 --- a/web/src/lib/components/photos-page/asset-select-control-bar.svelte +++ b/web/src/lib/components/photos-page/asset-select-control-bar.svelte @@ -36,7 +36,7 @@ }); - +

Selected {assets.size.toLocaleString($locale)}

diff --git a/web/src/lib/components/share-page/individual-shared-viewer.svelte b/web/src/lib/components/share-page/individual-shared-viewer.svelte index f8cd13fb16..99b105e995 100644 --- a/web/src/lib/components/share-page/individual-shared-viewer.svelte +++ b/web/src/lib/components/share-page/individual-shared-viewer.svelte @@ -79,7 +79,7 @@ {/if} {:else} - goto(AppRoute.PHOTOS)} backIcon={mdiArrowLeft} showBackButton={false}> + goto(AppRoute.PHOTOS)} backIcon={mdiArrowLeft} showBackButton={false}> (); @@ -47,15 +40,11 @@ } const handleSelect = (album: AlbumResponseDto) => { - dispatch('album', { album }); + dispatch('album', album); }; const handleNew = () => { - if (shared) { - dispatch('newAlbum', { albumName: search.length > 0 ? search : '' }); - } else { - dispatch('newSharedAlbum', { albumName: search.length > 0 ? search : '' }); - } + dispatch('newAlbum', search.length > 0 ? search : ''); }; diff --git a/web/src/lib/components/shared-components/control-app-bar.svelte b/web/src/lib/components/shared-components/control-app-bar.svelte index f8d5627fa6..967b217170 100644 --- a/web/src/lib/components/shared-components/control-app-bar.svelte +++ b/web/src/lib/components/shared-components/control-app-bar.svelte @@ -13,7 +13,9 @@ let appBarBorder = 'bg-immich-bg border border-transparent'; - const dispatch = createEventDispatcher(); + const dispatch = createEventDispatcher<{ + close: void; + }>(); const onScroll = () => { if (window.pageYOffset > 80) { @@ -50,7 +52,7 @@
{#if showBackButton} dispatch('close-button-click')} + on:click={() => dispatch('close')} icon={backIcon} backgroundColor={'transparent'} hoverColor={'#e2e7e9'} diff --git a/web/src/lib/components/sharedlinks-page/shared-link-card.svelte b/web/src/lib/components/sharedlinks-page/shared-link-card.svelte index f4a21a5408..d16f82e9a4 100644 --- a/web/src/lib/components/sharedlinks-page/shared-link-card.svelte +++ b/web/src/lib/components/sharedlinks-page/shared-link-card.svelte @@ -12,7 +12,11 @@ export let link: SharedLinkResponseDto; let expirationCountdown: luxon.DurationObjectUnits; - const dispatch = createEventDispatcher(); + const dispatch = createEventDispatcher<{ + delete: void; + copy: void; + edit: void; + }>(); const getThumbnail = async (): Promise => { let assetId = ''; diff --git a/web/src/lib/components/user-settings-page/library-list.svelte b/web/src/lib/components/user-settings-page/library-list.svelte index fd96129eba..8f5374a603 100644 --- a/web/src/lib/components/user-settings-page/library-list.svelte +++ b/web/src/lib/components/user-settings-page/library-list.svelte @@ -1,5 +1,5 @@ - goto(AppRoute.SHARING)}> + goto(AppRoute.SHARING)}> Shared links diff --git a/web/src/routes/admin/user-management/+page.svelte b/web/src/routes/admin/user-management/+page.svelte index ed631c25ff..f430da1e0a 100644 --- a/web/src/routes/admin/user-management/+page.svelte +++ b/web/src/routes/admin/user-management/+page.svelte @@ -110,7 +110,7 @@
{#if shouldShowCreateUserForm} (shouldShowCreateUserForm = false)}> - (shouldShowCreateUserForm = false)} /> + (shouldShowCreateUserForm = false)} /> {/if} @@ -120,7 +120,7 @@ user={selectedUser} canResetPassword={selectedUser?.id !== $user.id} on:editSuccess={onEditUserSuccess} - on:reset-password-success={onEditPasswordSuccess} + on:resetPasswordSuccess={onEditPasswordSuccess} on:close={() => (shouldShowEditUserForm = false)} /> @@ -129,8 +129,8 @@ {#if shouldShowDeleteConfirmDialog} (shouldShowDeleteConfirmDialog = false)} /> {/if} @@ -138,8 +138,8 @@ {#if shouldShowRestoreDialog} (shouldShowRestoreDialog = false)} /> {/if} diff --git a/web/src/routes/auth/login/+page.svelte b/web/src/routes/auth/login/+page.svelte index 4b11481f64..d54292e109 100644 --- a/web/src/routes/auth/login/+page.svelte +++ b/web/src/routes/auth/login/+page.svelte @@ -18,7 +18,7 @@ goto(AppRoute.PHOTOS, { invalidateAll: true })} - on:first-login={() => goto(AppRoute.AUTH_CHANGE_PASSWORD)} + on:firstLogin={() => goto(AppRoute.AUTH_CHANGE_PASSWORD)} /> {/if}