mirror of
https://github.com/immich-app/immich
synced 2025-11-07 17:27:20 +00:00
refactor(web): ConfirmDialog and dialogController (#9716)
* wrapper * no more callback * refactor: wip * refactor: wip * refactor: wip * pr feedback * fix * pr feedback
This commit is contained in:
Alex
GitHub
parent
f020d29ab6
commit
bce916e4c8
26 changed files with 281 additions and 317 deletions
|
|
@ -2,36 +2,47 @@
|
|||
import { deleteAllSessions, deleteSession, getSessions, type SessionResponseDto } from '@immich/sdk';
|
||||
import { handleError } from '../../utils/handle-error';
|
||||
import Button from '../elements/buttons/button.svelte';
|
||||
import ConfirmDialogue from '../shared-components/confirm-dialogue.svelte';
|
||||
import { notificationController, NotificationType } from '../shared-components/notification/notification';
|
||||
import DeviceCard from './device-card.svelte';
|
||||
import { dialogController } from '$lib/components/shared-components/dialog/dialog';
|
||||
|
||||
export let devices: SessionResponseDto[];
|
||||
let deleteDevice: SessionResponseDto | null = null;
|
||||
let deleteAll = false;
|
||||
|
||||
const refresh = () => getSessions().then((_devices) => (devices = _devices));
|
||||
|
||||
$: currentDevice = devices.find((device) => device.current);
|
||||
$: otherDevices = devices.filter((device) => !device.current);
|
||||
|
||||
const handleDelete = async () => {
|
||||
if (!deleteDevice) {
|
||||
const handleDelete = async (device: SessionResponseDto) => {
|
||||
const isConfirmed = await dialogController.show({
|
||||
id: 'log-out-device',
|
||||
prompt: 'Are you sure you want to log out this device?',
|
||||
});
|
||||
|
||||
if (!isConfirmed) {
|
||||
return;
|
||||
}
|
||||
|
||||
try {
|
||||
await deleteSession({ id: deleteDevice.id });
|
||||
await deleteSession({ id: device.id });
|
||||
notificationController.show({ message: `Logged out device`, type: NotificationType.Info });
|
||||
} catch (error) {
|
||||
handleError(error, 'Unable to log out device');
|
||||
} finally {
|
||||
await refresh();
|
||||
deleteDevice = null;
|
||||
}
|
||||
};
|
||||
|
||||
const handleDeleteAll = async () => {
|
||||
const isConfirmed = await dialogController.show({
|
||||
id: 'log-out-all-devices',
|
||||
prompt: 'Are you sure you want to log out all devices?',
|
||||
});
|
||||
|
||||
if (!isConfirmed) {
|
||||
return;
|
||||
}
|
||||
|
||||
try {
|
||||
await deleteAllSessions();
|
||||
notificationController.show({
|
||||
|
|
@ -42,29 +53,10 @@
|
|||
handleError(error, 'Unable to log out all devices');
|
||||
} finally {
|
||||
await refresh();
|
||||
deleteAll = false;
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
{#if deleteDevice}
|
||||
<ConfirmDialogue
|
||||
id="log-out-device-modal"
|
||||
prompt="Are you sure you want to log out this device?"
|
||||
onConfirm={() => handleDelete()}
|
||||
onClose={() => (deleteDevice = null)}
|
||||
/>
|
||||
{/if}
|
||||
|
||||
{#if deleteAll}
|
||||
<ConfirmDialogue
|
||||
id="log-out-all-modal"
|
||||
prompt="Are you sure you want to log out all devices?"
|
||||
onConfirm={() => handleDeleteAll()}
|
||||
onClose={() => (deleteAll = false)}
|
||||
/>
|
||||
{/if}
|
||||
|
||||
<section class="my-4">
|
||||
{#if currentDevice}
|
||||
<div class="mb-6">
|
||||
|
|
@ -76,7 +68,7 @@
|
|||
<div class="mb-6">
|
||||
<h3 class="mb-2 text-xs font-medium text-immich-primary dark:text-immich-dark-primary">OTHER DEVICES</h3>
|
||||
{#each otherDevices as device, index}
|
||||
<DeviceCard {device} on:delete={() => (deleteDevice = device)} />
|
||||
<DeviceCard {device} on:delete={() => handleDelete(device)} />
|
||||
{#if index !== otherDevices.length - 1}
|
||||
<hr class="my-3" />
|
||||
{/if}
|
||||
|
|
@ -84,7 +76,7 @@
|
|||
</div>
|
||||
<h3 class="mb-2 text-xs font-medium text-immich-primary dark:text-immich-dark-primary">LOG OUT ALL DEVICES</h3>
|
||||
<div class="flex justify-end">
|
||||
<Button color="red" size="sm" on:click={() => (deleteAll = true)}>Log Out All Devices</Button>
|
||||
<Button color="red" size="sm" on:click={handleDeleteAll}>Log Out All Devices</Button>
|
||||
</div>
|
||||
{/if}
|
||||
</section>
|
||||
|
|
|
|||
|
|
@ -13,10 +13,10 @@
|
|||
import Button from '../elements/buttons/button.svelte';
|
||||
import CircleIconButton from '../elements/buttons/circle-icon-button.svelte';
|
||||
import Icon from '../elements/icon.svelte';
|
||||
import ConfirmDialogue from '$lib/components/shared-components/confirm-dialogue.svelte';
|
||||
import UserAvatar from '$lib/components/shared-components/user-avatar.svelte';
|
||||
import PartnerSelectionModal from './partner-selection-modal.svelte';
|
||||
import SettingSwitch from '$lib/components/shared-components/settings/setting-switch.svelte';
|
||||
import { dialogController } from '$lib/components/shared-components/dialog/dialog';
|
||||
|
||||
interface PartnerSharing {
|
||||
user: UserResponseDto;
|
||||
|
|
@ -28,7 +28,7 @@
|
|||
export let user: UserResponseDto;
|
||||
|
||||
let createPartnerFlag = false;
|
||||
let removePartnerDto: PartnerResponseDto | null = null;
|
||||
// let removePartnerDto: PartnerResponseDto | null = null;
|
||||
let partners: Array<PartnerSharing> = [];
|
||||
|
||||
onMount(async () => {
|
||||
|
|
@ -75,14 +75,19 @@
|
|||
}
|
||||
};
|
||||
|
||||
const handleRemovePartner = async () => {
|
||||
if (!removePartnerDto) {
|
||||
const handleRemovePartner = async (partner: PartnerResponseDto) => {
|
||||
const isConfirmed = await dialogController.show({
|
||||
id: 'remove-partner',
|
||||
title: 'Stop sharing your photos?',
|
||||
prompt: `${partner.name} will no longer be able to access your photos.`,
|
||||
});
|
||||
|
||||
if (!isConfirmed) {
|
||||
return;
|
||||
}
|
||||
|
||||
try {
|
||||
await removePartner({ id: removePartnerDto.id });
|
||||
removePartnerDto = null;
|
||||
await removePartner({ id: partner.id });
|
||||
await refreshPartners();
|
||||
} catch (error) {
|
||||
handleError(error, 'Unable to remove partner');
|
||||
|
|
@ -133,7 +138,7 @@
|
|||
|
||||
{#if partner.sharedByMe}
|
||||
<CircleIconButton
|
||||
on:click={() => (removePartnerDto = partner.user)}
|
||||
on:click={() => handleRemovePartner(partner.user)}
|
||||
icon={mdiClose}
|
||||
size={'16'}
|
||||
title="Stop sharing your photos with this user"
|
||||
|
|
@ -186,13 +191,3 @@
|
|||
on:add-users={(event) => handleCreatePartners(event.detail)}
|
||||
/>
|
||||
{/if}
|
||||
|
||||
{#if removePartnerDto}
|
||||
<ConfirmDialogue
|
||||
id="stop-sharing-photos-modal"
|
||||
title="Stop sharing your photos?"
|
||||
prompt="{removePartnerDto.name} will no longer be able to access your photos."
|
||||
onClose={() => (removePartnerDto = null)}
|
||||
onConfirm={() => handleRemovePartner()}
|
||||
/>
|
||||
{/if}
|
||||
|
|
|
|||
|
|
@ -7,15 +7,14 @@
|
|||
import Button from '../elements/buttons/button.svelte';
|
||||
import APIKeyForm from '../forms/api-key-form.svelte';
|
||||
import APIKeySecret from '../forms/api-key-secret.svelte';
|
||||
import ConfirmDialogue from '../shared-components/confirm-dialogue.svelte';
|
||||
import { NotificationType, notificationController } from '../shared-components/notification/notification';
|
||||
import CircleIconButton from '$lib/components/elements/buttons/circle-icon-button.svelte';
|
||||
import { dialogController } from '$lib/components/shared-components/dialog/dialog';
|
||||
|
||||
export let keys: ApiKeyResponseDto[];
|
||||
|
||||
let newKey: Partial<ApiKeyResponseDto> | null = null;
|
||||
let editKey: ApiKeyResponseDto | null = null;
|
||||
let deleteKey: ApiKeyResponseDto | null = null;
|
||||
let secret = '';
|
||||
|
||||
const format: Intl.DateTimeFormatOptions = {
|
||||
|
|
@ -59,22 +58,26 @@
|
|||
}
|
||||
};
|
||||
|
||||
const handleDelete = async () => {
|
||||
if (!deleteKey) {
|
||||
const handleDelete = async (key: ApiKeyResponseDto) => {
|
||||
const isConfirmed = await dialogController.show({
|
||||
id: 'delete-api-key',
|
||||
prompt: 'Are you sure you want to delete this API key?',
|
||||
});
|
||||
|
||||
if (!isConfirmed) {
|
||||
return;
|
||||
}
|
||||
|
||||
try {
|
||||
await deleteApiKey({ id: deleteKey.id });
|
||||
await deleteApiKey({ id: key.id });
|
||||
notificationController.show({
|
||||
message: `Removed API Key: ${deleteKey.name}`,
|
||||
message: `Removed API Key: ${key.name}`,
|
||||
type: NotificationType.Info,
|
||||
});
|
||||
} catch (error) {
|
||||
handleError(error, 'Unable to remove API Key');
|
||||
} finally {
|
||||
await refreshKeys();
|
||||
deleteKey = null;
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
|
@ -103,15 +106,6 @@
|
|||
/>
|
||||
{/if}
|
||||
|
||||
{#if deleteKey}
|
||||
<ConfirmDialogue
|
||||
id="confirm-api-key-delete-modal"
|
||||
prompt="Are you sure you want to delete this API key?"
|
||||
onConfirm={() => handleDelete()}
|
||||
onClose={() => (deleteKey = null)}
|
||||
/>
|
||||
{/if}
|
||||
|
||||
<section class="my-4">
|
||||
<div class="flex flex-col gap-2" in:fade={{ duration: 500 }}>
|
||||
<div class="mb-2 flex justify-end">
|
||||
|
|
@ -156,7 +150,7 @@
|
|||
icon={mdiTrashCanOutline}
|
||||
title="Delete key"
|
||||
size="16"
|
||||
on:click={() => (deleteKey = key)}
|
||||
on:click={() => handleDelete(key)}
|
||||
/>
|
||||
</td>
|
||||
</tr>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue