mirror of
https://github.com/immich-app/immich
synced 2025-11-07 17:27:20 +00:00
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>
This commit is contained in:
Sergey Kondrikov
GitHub
parent
4524aa0d06
commit
7f2fa23179
55 changed files with 1669 additions and 92 deletions
|
|
@ -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>
|
||||
|
|
@ -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}
|
||||
|
|
@ -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>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue