feat (server, web): Share with partner (#2388)

* feat(server, web): implement share with partner

* chore: regenerate api

* chore: regenerate api

* Pass userId to getAssetCountByTimeBucket and getAssetByTimeBucket

* chore: regenerate api

* Use AssetGrid to view partner's assets

* Remove disableNavBarActions flag

* Check access to buckets

* Apply suggestions from code review

Co-authored-by: Jason Rasmussen <jrasm91@gmail.com>

* Remove exception rethrowing

* Simplify partner access check

* Create new PartnerController

* chore api:generate

* Use partnerApi

* Remove id from PartnerResponseDto

* Refactor PartnerEntity

* Rename args

* Remove duplicate code in getAll

* Create composite primary keys for partners table

* Move asset access check into PartnerCore

* Remove redundant getUserAssets call

* Remove unused getUserAssets method

* chore: regenerate api

* Simplify getAll

* Replace ?? with ||

* Simplify PartnerRepository.create

* Introduce PartnerIds interface

* Replace two database migrations with one

* Simplify getAll

* Change PartnerResponseDto to include UserResponseDto

* Move partner sharing endpoints to PartnerController

* Rename ShareController to SharedLinkController

* chore: regenerate api after rebase

* refactor: shared link remove return type

* refactor: return user response dto

* chore: regenerate open api

* refactor: partner getAll

* refactor: partner settings event typing

* chore: remove unused code

* refactor: add partners modal trigger

* refactor: update url for viewing partner photos

* feat: update partner sharing title

* refactor: rename service method names

* refactor: http exception logic to service, PartnerIds interface

* chore: regenerate open api

* test: coverage for domain code

* fix: addPartner => createPartner

* fix: missed rename

* refactor: more code cleanup

* chore: alphabetize settings order

* feat: stop sharing confirmation modal

* Enhance contrast of the email in dark mode

* Replace button with CircleIconButton

* Fix linter warning

* Fix date types for PartnerEntity

* Fix PartnerEntity creation

* Reset assetStore state

* Change layout of the partner's assets page

* Add bulk download action for partner's assets

---------

Co-authored-by: Jason Rasmussen <jrasm91@gmail.com>

web/src/lib/components/album-page/user-selection-modal.svelte

@@ -8,6 +8,7 @@
 	import { goto } from '$app/navigation';
 	import ImmichLogo from '../shared-components/immich-logo.svelte';
 	import Button from '../elements/buttons/button.svelte';
+	import { AppRoute } from '$lib/constants';
 
 	export let album: AlbumResponseDto;
 	export let sharedUsersInAlbum: Set<UserResponseDto>;
@@ -138,7 +139,7 @@
 		{#if sharedLinks.length}
 			<button
 				class="flex flex-col gap-2 place-items-center place-content-center hover:cursor-pointer"
-				on:click={() => goto('/sharing/sharedlinks')}
+				on:click={() => goto(AppRoute.SHARED_LINKS)}
 			>
 				<ShareCircle size={24} />
 				<p class="text-sm">View links</p>

web/src/lib/components/photos-page/asset-grid.svelte

@@ -1,6 +1,7 @@
 <script lang="ts">
-	import { onMount } from 'svelte';
+	import { onDestroy, onMount } from 'svelte';
 
+	import { UserResponseDto } from '@api';
 	import IntersectionObserver from '../asset-viewer/intersection-observer.svelte';
 	import { assetGridState, assetStore, loadingBucketState } from '$lib/stores/assets.store';
 	import { api, AssetCountByTimeBucketResponseDto, AssetResponseDto, TimeGroupEnum } from '@api';
@@ -17,6 +18,7 @@
 		OnScrollbarDragDetail
 	} from '../shared-components/scrollbar/scrollbar.svelte';
 
+	export let user: UserResponseDto | undefined = undefined;
 	export let isAlbumSelectionMode = false;
 
 	let viewportHeight = 0;
@@ -26,11 +28,12 @@
 
 	onMount(async () => {
 		const { data: assetCountByTimebucket } = await api.assetApi.getAssetCountByTimeBucket({
-			timeGroup: TimeGroupEnum.Month
+			timeGroup: TimeGroupEnum.Month,
+			userId: user?.id
 		});
 		bucketInfo = assetCountByTimebucket;
 
-		assetStore.setInitialState(viewportHeight, viewportWidth, assetCountByTimebucket);
+		assetStore.setInitialState(viewportHeight, viewportWidth, assetCountByTimebucket, user?.id);
 
 		// Get asset bucket if bucket height is smaller than viewport height
 		let bucketsToFetchInitially: string[] = [];
@@ -50,6 +53,10 @@
 		});
 	});
 
+	onDestroy(() => {
+		assetStore.setInitialState(0, 0, { totalCount: 0, buckets: [] }, undefined);
+	});
+
 	function intersectedHandler(event: CustomEvent) {
 		const el = event.detail as HTMLElement;
 		const target = el.firstChild as HTMLElement;

web/src/lib/components/shared-components/base-modal.svelte

@@ -31,7 +31,7 @@
 	id="immich-modal"
 	style:z-index={zIndex}
 	transition:fade={{ duration: 100, easing: quintOut }}
-	class="fixed top-0 w-full h-full  bg-black/50 flex place-items-center place-content-center overflow-hidden"
+	class="fixed top-0 left-0 w-full h-full  bg-black/50 flex place-items-center place-content-center overflow-hidden"
 >
 	<div
 		use:clickOutside

web/src/lib/components/user-settings-page/partner-selection-modal.svelte

@@ -0,0 +1,85 @@
+<script lang="ts">
+	import { api, UserResponseDto } from '@api';
+	import BaseModal from '../shared-components/base-modal.svelte';
+	import CircleAvatar from '../shared-components/circle-avatar.svelte';
+	import ImmichLogo from '../shared-components/immich-logo.svelte';
+	import Button from '../elements/buttons/button.svelte';
+	import { createEventDispatcher, onMount } from 'svelte';
+
+	let availableUsers: UserResponseDto[] = [];
+	let selectedUsers: UserResponseDto[] = [];
+
+	const dispatch = createEventDispatcher<{ close: void; 'add-users': UserResponseDto[] }>();
+
+	onMount(async () => {
+		// TODO: update endpoint to have a query param for deleted users
+		let { data: users } = await api.userApi.getAllUsers(false);
+
+		// remove soft deleted users
+		users = users.filter((user) => !user.deletedAt);
+
+		// exclude partners from the list of users available for selection
+		const { data: partners } = await api.partnerApi.getPartners('shared-by');
+		const partnerIds = partners.map((partner) => partner.id);
+		availableUsers = users.filter((user) => !partnerIds.includes(user.id));
+	});
+
+	const selectUser = (user: UserResponseDto) => {
+		if (selectedUsers.includes(user)) {
+			selectedUsers = selectedUsers.filter((selectedUser) => selectedUser.id !== user.id);
+		} else {
+			selectedUsers = [...selectedUsers, user];
+		}
+	};
+</script>
+
+<BaseModal on:close={() => dispatch('close')}>
+	<svelte:fragment slot="title">
+		<span class="flex gap-2 place-items-center">
+			<ImmichLogo width={24} />
+			<p class="font-medium">Add partner</p>
+		</span>
+	</svelte:fragment>
+
+	<div class="max-h-[300px] overflow-y-auto immich-scrollbar">
+		{#if availableUsers.length > 0}
+			{#each availableUsers as user}
+				<button
+					on:click={() => selectUser(user)}
+					class="w-full flex place-items-center gap-4 py-4 px-5 hover:bg-gray-200 dark:hover:bg-gray-700 transition-all"
+				>
+					{#if selectedUsers.includes(user)}
+						<span
+							class="bg-immich-primary dark:bg-immich-dark-primary text-white dark:text-immich-dark-bg rounded-full w-12 h-12 border flex place-items-center place-content-center text-3xl dark:border-immich-dark-gray"
+							>✓</span
+						>
+					{:else}
+						<CircleAvatar {user} />
+					{/if}
+
+					<div class="text-left">
+						<p class="text-immich-fg dark:text-immich-dark-fg">
+							{user.firstName}
+							{user.lastName}
+						</p>
+						<p class="text-xs ">
+							{user.email}
+						</p>
+					</div>
+				</button>
+			{/each}
+		{:else}
+			<p class="text-sm p-5">
+				Looks like you shared your photos with all users or you don't have any user to share with.
+			</p>
+		{/if}
+
+		{#if selectedUsers.length > 0}
+			<div class="flex place-content-end p-5 ">
+				<Button size="sm" rounded="lg" on:click={() => dispatch('add-users', selectedUsers)}>
+					Add
+				</Button>
+			</div>
+		{/if}
+	</div>
+</BaseModal>

web/src/lib/components/user-settings-page/partner-settings.svelte

@@ -0,0 +1,98 @@
+<script lang="ts">
+	import { UserResponseDto, api } from '@api';
+	import CircleAvatar from '../shared-components/circle-avatar.svelte';
+	import Close from 'svelte-material-icons/Close.svelte';
+	import Button from '../elements/buttons/button.svelte';
+	import PartnerSelectionModal from './partner-selection-modal.svelte';
+	import { handleError } from '../../utils/handle-error';
+	import { onMount } from 'svelte';
+	import ConfirmDialogue from '../shared-components/confirm-dialogue.svelte';
+	import CircleIconButton from '../elements/buttons/circle-icon-button.svelte';
+
+	let partners: UserResponseDto[] = [];
+	let createPartner = false;
+	let removePartner: UserResponseDto | null = null;
+
+	const refreshPartners = async () => {
+		const { data } = await api.partnerApi.getPartners('shared-by');
+		partners = data;
+	};
+
+	const handleRemovePartner = async () => {
+		if (!removePartner) {
+			return;
+		}
+
+		try {
+			await api.partnerApi.removePartner(removePartner.id);
+			removePartner = null;
+			await refreshPartners();
+		} catch (error) {
+			handleError(error, 'Unable to remove partner');
+		}
+	};
+
+	const handleCreatePartners = async (users: UserResponseDto[]) => {
+		try {
+			for (const user of users) {
+				await api.partnerApi.createPartner(user.id);
+			}
+
+			await refreshPartners();
+			createPartner = false;
+		} catch (error) {
+			handleError(error, 'Unable to add partners');
+		}
+	};
+
+	onMount(async () => {
+		await refreshPartners();
+	});
+</script>
+
+<section class="my-4">
+	{#if partners.length > 0}
+		<div class="flex flex-row gap-4">
+			{#each partners as partner}
+				<div class="flex rounded-lg gap-4 py-4 px-5 transition-all">
+					<CircleAvatar user={partner} />
+
+					<div class="text-left">
+						<p class="text-immich-fg dark:text-immich-dark-fg">
+							{partner.firstName}
+							{partner.lastName}
+						</p>
+						<p class="text-xs text-immich-fg/75 dark:text-immich-dark-fg/75">
+							{partner.email}
+						</p>
+					</div>
+					<CircleIconButton
+						on:click={() => (removePartner = partner)}
+						logo={Close}
+						size={'16'}
+						title="Remove partner"
+					/>
+				</div>
+			{/each}
+		</div>
+	{/if}
+	<div class="flex justify-end">
+		<Button size="sm" on:click={() => (createPartner = true)}>Add partner</Button>
+	</div>
+</section>
+
+{#if createPartner}
+	<PartnerSelectionModal
+		on:close={() => (createPartner = false)}
+		on:add-users={(event) => handleCreatePartners(event.detail)}
+	/>
+{/if}
+
+{#if removePartner}
+	<ConfirmDialogue
+		title="Stop sharing your photos?"
+		prompt="{removePartner.firstName} will no longer be able to access your photos."
+		on:cancel={() => (removePartner = null)}
+		on:confirm={() => handleRemovePartner()}
+	/>
+{/if}

web/src/lib/components/user-settings-page/user-settings-list.svelte

@@ -7,6 +7,7 @@
 	import OAuthSettings from './oauth-settings.svelte';
 	import UserAPIKeyList from './user-api-key-list.svelte';
 	import DeviceList from './device-list.svelte';
+	import PartnerSettings from './partner-settings.svelte';
 	import UserProfileSettings from './user-profile-settings.svelte';
 
 	export let user: UserResponseDto;
@@ -51,3 +52,7 @@
 <SettingAccordion title="Password" subtitle="Change your password">
 	<ChangePasswordSettings />
 </SettingAccordion>
+
+<SettingAccordion title="Sharing" subtitle="Manage sharing with partners">
+	<PartnerSettings />
+</SettingAccordion>