Added error handling notification (#536)

web/src/lib/components/album-page/album-viewer.svelte

@@ -22,6 +22,10 @@
 	import MenuOption from '../shared-components/context-menu/menu-option.svelte';
 	import ThumbnailSelection from './thumbnail-selection.svelte';
 	import ControlAppBar from '../shared-components/control-app-bar.svelte';
+	import {
+		notificationController,
+		NotificationType
+	} from '../shared-components/notification/notification';
 
 	export let album: AlbumResponseDto;
 
@@ -129,7 +133,11 @@
 				album = data;
 				multiSelectAsset = new Set();
 			} catch (e) {
-				console.log('Error [album-viewer] [removeAssetFromAlbum]', e);
+				console.error('Error [album-viewer] [removeAssetFromAlbum]', e);
+				notificationController.show({
+					type: NotificationType.Error,
+					message: 'Error removing assets from album, check console for more details'
+				});
 			}
 		}
 	};
@@ -179,7 +187,11 @@
 					currentAlbumName = album.albumName;
 				})
 				.catch((e) => {
-					console.log('Error [updateAlbumInfo] ', e);
+					console.error('Error [updateAlbumInfo] ', e);
+					notificationController.show({
+						type: NotificationType.Error,
+						message: "Error updating album's name, check console for more details"
+					});
 				});
 		}
 	}
@@ -193,7 +205,11 @@
 
 			isShowAssetSelection = false;
 		} catch (e) {
-			console.log('Error [createAlbumHandler] ', e);
+			console.error('Error [createAlbumHandler] ', e);
+			notificationController.show({
+				type: NotificationType.Error,
+				message: 'Error creating album, check console for more details'
+			});
 		}
 	};
 
@@ -209,7 +225,11 @@
 
 			isShowShareUserSelection = false;
 		} catch (e) {
-			console.log('Error [createAlbumHandler] ', e);
+			console.error('Error [addUserHandler] ', e);
+			notificationController.show({
+				type: NotificationType.Error,
+				message: 'Error adding users to album, check console for more details'
+			});
 		}
 	};
 
@@ -227,7 +247,11 @@
 			album = data;
 			isShowShareInfoModal = false;
 		} catch (e) {
-			console.log('Error [sharedUserDeletedHandler] ', e);
+			console.error('Error [sharedUserDeletedHandler] ', e);
+			notificationController.show({
+				type: NotificationType.Error,
+				message: 'Error deleting share users, check console for more details'
+			});
 		}
 	};
 
@@ -241,7 +265,11 @@
 				await api.albumApi.deleteAlbum(album.id);
 				goto(backUrl);
 			} catch (e) {
-				console.log('Error [userDeleteMenu] ', e);
+				console.error('Error [userDeleteMenu] ', e);
+				notificationController.show({
+					type: NotificationType.Error,
+					message: 'Error deleting album, check console for more details'
+				});
 			}
 		}
 	};
@@ -262,7 +290,11 @@
 				albumThumbnailAssetId: asset.id
 			});
 		} catch (e) {
-			console.log('Error [setAlbumThumbnailHandler] ', e);
+			console.error('Error [setAlbumThumbnailHandler] ', e);
+			notificationController.show({
+				type: NotificationType.Error,
+				message: 'Error setting album thumbnail, check console for more details'
+			});
 		}
 
 		isShowThumbnailSelection = false;

web/src/lib/components/album-page/share-info-modal.svelte

@@ -7,6 +7,10 @@
 	import CircleIconButton from '../shared-components/circle-icon-button.svelte';
 	import ContextMenu from '../shared-components/context-menu/context-menu.svelte';
 	import MenuOption from '../shared-components/context-menu/menu-option.svelte';
+	import {
+		notificationController,
+		NotificationType
+	} from '../shared-components/notification/notification';
 
 	export let album: AlbumResponseDto;
 
@@ -24,6 +28,10 @@
 			currentUser = data;
 		} catch (e) {
 			console.error('Error [share-info-modal] [getAllUsers]', e);
+			notificationController.show({
+				message: 'Error getting user info, check console for more details',
+				type: NotificationType.Error
+			});
 		}
 	});
 
@@ -48,6 +56,10 @@
 				dispatch('user-deleted', { userId });
 			} catch (e) {
 				console.error('Error [share-info-modal] [removeUser]', e);
+				notificationController.show({
+					message: 'Error removing user, check console for more details',
+					type: NotificationType.Error
+				});
 			}
 		}
 	};

web/src/lib/components/asset-viewer/asset-viewer.svelte

@@ -9,6 +9,10 @@
 	import { downloadAssets } from '$lib/stores/download';
 	import VideoViewer from './video-viewer.svelte';
 	import { api, AssetResponseDto, AssetTypeEnum } from '@api';
+	import {
+		notificationController,
+		NotificationType
+	} from '../shared-components/notification/notification';
 
 	export let asset: AssetResponseDto;
 
@@ -115,7 +119,11 @@
 				}, 2000);
 			}
 		} catch (e) {
-			console.log('Error downloading file ', e);
+			console.error('Error downloading file ', e);
+			notificationController.show({
+				type: NotificationType.Error,
+				message: 'Error downloading file, check console for more details.'
+			});
 		}
 	};
 </script>

web/src/lib/components/asset-viewer/photo-viewer.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
 	import { fade } from 'svelte/transition';
 
-	import { createEventDispatcher, onMount } from 'svelte';
+	import { onMount } from 'svelte';
 	import LoadingSpinner from '../shared-components/loading-spinner.svelte';
 	import { api, AssetResponseDto } from '@api';
 
@@ -10,8 +10,6 @@
 
 	let assetInfo: AssetResponseDto;
 
-	const dispatch = createEventDispatcher();
-
 	onMount(async () => {
 		const { data } = await api.assetApi.getAssetById(assetId);
 		assetInfo = data;

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

@@ -2,6 +2,10 @@
 	import { api, UserResponseDto } from '@api';
 	import { createEventDispatcher } from 'svelte';
 	import AccountEditOutline from 'svelte-material-icons/AccountEditOutline.svelte';
+	import {
+		notificationController,
+		NotificationType
+	} from '../shared-components/notification/notification';
 
 	export let user: UserResponseDto;
 
@@ -29,7 +33,11 @@
 				dispatch('edit-success');
 			}
 		} catch (e) {
-			console.log('Error updating user ', e);
+			console.error('Error updating user ', e);
+			notificationController.show({
+				message: 'Error updating user, check console for more details',
+				type: NotificationType.Error
+			});
 		}
 	};
 
@@ -49,7 +57,11 @@
 				}
 			}
 		} catch (e) {
-			console.log('Error reseting user password', e);
+			console.error('Error reseting user password', e);
+			notificationController.show({
+				message: 'Error reseting user password, check console for more details',
+				type: NotificationType.Error
+			});
 		}
 	};
 </script>

web/src/lib/components/shared-components/navigation-bar.svelte

@@ -25,7 +25,6 @@
 			await api.userApi.getProfileImage(user.id);
 			shouldShowProfileImage = true;
 		} catch (e) {
-			console.log('User does not have a profile image');
 			shouldShowProfileImage = false;
 		}
 	};
@@ -33,10 +32,6 @@
 		return text?.charAt(0).toUpperCase();
 	};
 
-	const navigateToAdmin = () => {
-		goto('/admin');
-	};
-
 	const showAccountInfoPanel = () => {
 		shouldShowAccountInfoPanel = true;
 	};

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

@@ -27,7 +27,7 @@ export class ImmichNotificationDto {
 	/**
 	 * Timeout in miliseconds
 	 */
-	timeout = 3000;
+	timeout?: number;
 }
 function createNotificationList() {
 	const notificationList = writable<ImmichNotification[]>([]);
@@ -36,7 +36,7 @@ function createNotificationList() {
 		const newNotification = new ImmichNotification();
 		newNotification.message = notificationInfo.message;
 		newNotification.type = notificationInfo.type;
-		newNotification.timeout = notificationInfo.timeout;
+		newNotification.timeout = notificationInfo.timeout || 3000;
 
 		notificationList.update((currentList) => [...currentList, newNotification]);
 	};

web/src/routes/albums/+page.svelte

@@ -10,6 +10,10 @@
 	import NavigationBar from '$lib/components/shared-components/navigation-bar.svelte';
 	import SideBar from '$lib/components/shared-components/side-bar/side-bar.svelte';
 	import PlusBoxOutline from 'svelte-material-icons/PlusBoxOutline.svelte';
+	import {
+		notificationController,
+		NotificationType
+	} from '$lib/components/shared-components/notification/notification';
 
 	export let data: PageData;
 
@@ -40,7 +44,11 @@
 
 			goto('/albums/' + newAlbum.id);
 		} catch (e) {
-			console.log('Error [createAlbum] ', e);
+			console.error('Error [createAlbum] ', e);
+			notificationController.show({
+				message: 'Error creating album, check console for more details',
+				type: NotificationType.Error
+			});
 		}
 	};
 
@@ -49,7 +57,7 @@
 			await api.albumApi.deleteAlbum(album.id);
 			return true;
 		} catch (e) {
-			console.log('Error [autoDeleteAlbum] ', e);
+			console.error('Error [autoDeleteAlbum] ', e);
 			return false;
 		}
 	};
@@ -64,7 +72,11 @@
 				await api.albumApi.deleteAlbum(targetAlbum.id);
 				data.albums = data.albums.filter((a) => a.id !== targetAlbum.id);
 			} catch (e) {
-				console.log('Error [userDeleteMenu] ', e);
+				console.error('Error [userDeleteMenu] ', e);
+				notificationController.show({
+					message: 'Error deleting user, check console for more details',
+					type: NotificationType.Error
+				});
 			}
 		}
 

web/src/routes/photos/+page.svelte

@@ -21,6 +21,10 @@
 	import ControlAppBar from '$lib/components/shared-components/control-app-bar.svelte';
 	import type { PageData } from './$types';
 	import { onMount } from 'svelte';
+	import {
+		notificationController,
+		NotificationType
+	} from '$lib/components/shared-components/notification/notification';
 
 	export let data: PageData;
 
@@ -68,7 +72,10 @@
 				pushState(selectedAsset.id);
 			}
 		} catch (e) {
-			console.log('Error navigating asset forward', e);
+			notificationController.show({
+				type: NotificationType.Info,
+				message: 'You have reached the end'
+			});
 		}
 	};
 
@@ -80,7 +87,10 @@
 				pushState(selectedAsset.id);
 			}
 		} catch (e) {
-			console.log('Error navigating asset backward', e);
+			notificationController.show({
+				type: NotificationType.Info,
+				message: 'You have reached the end'
+			});
 		}
 	};
 
@@ -176,7 +186,11 @@
 				clearMultiSelectAssetAssetHandler();
 			}
 		} catch (e) {
-			console.log('Error deleteSelectedAssetHandler', e);
+			notificationController.show({
+				type: NotificationType.Error,
+				message: 'Error deleting assets, check console for more details'
+			});
+			console.error('Error deleteSelectedAssetHandler', e);
 		}
 	};
 </script>

web/src/routes/sharing/+page.svelte

@@ -6,6 +6,10 @@
 	import { goto } from '$app/navigation';
 	import { api } from '@api';
 	import type { PageData } from './$types';
+	import {
+		notificationController,
+		NotificationType
+	} from '$lib/components/shared-components/notification/notification';
 
 	export let data: PageData;
 
@@ -17,6 +21,11 @@
 
 			goto('/albums/' + newAlbum.id);
 		} catch (e) {
+			notificationController.show({
+				message: 'Error creating album, check console for more details',
+				type: NotificationType.Error
+			});
+
 			console.log('Error [createAlbum] ', e);
 		}
 	};