mirror of
https://github.com/immich-app/immich
synced 2025-11-07 17:27:20 +00:00
refactor: introduce modal manager (#18039)
This commit is contained in:
Daniel Dietzler
GitHub
parent
15d431ba6a
commit
62fc5b3c7d
11 changed files with 265 additions and 236 deletions
|
|
@ -1,34 +1,26 @@
|
|||
<script lang="ts">
|
||||
import { dialogController } from '$lib/components/shared-components/dialog/dialog';
|
||||
import FullScreenModal from '$lib/components/shared-components/full-screen-modal.svelte';
|
||||
import { AppRoute } from '$lib/constants';
|
||||
import { modalManager } from '$lib/managers/modal-manager.svelte';
|
||||
import { userInteraction } from '$lib/stores/user.svelte';
|
||||
import { ByteUnit, convertFromBytes, convertToBytes } from '$lib/utils/byte-units';
|
||||
import { handleError } from '$lib/utils/handle-error';
|
||||
import { updateUserAdmin, type UserAdminResponseDto } from '@immich/sdk';
|
||||
import { Button } from '@immich/ui';
|
||||
import { Button, Modal, ModalBody, ModalFooter } from '@immich/ui';
|
||||
import { mdiAccountEditOutline } from '@mdi/js';
|
||||
import { t } from 'svelte-i18n';
|
||||
|
||||
interface Props {
|
||||
user: UserAdminResponseDto;
|
||||
canResetPassword?: boolean;
|
||||
newPassword: string;
|
||||
onClose: () => void;
|
||||
onResetPasswordSuccess: () => void;
|
||||
onEditSuccess: () => void;
|
||||
onClose: (
|
||||
data?: { action: 'update'; data: UserAdminResponseDto } | { action: 'resetPassword'; data: string },
|
||||
) => void;
|
||||
}
|
||||
|
||||
let {
|
||||
user,
|
||||
canResetPassword = true,
|
||||
newPassword = $bindable(),
|
||||
onClose,
|
||||
onResetPasswordSuccess,
|
||||
onEditSuccess,
|
||||
}: Props = $props();
|
||||
let { user, canResetPassword = true, onClose }: Props = $props();
|
||||
|
||||
let quotaSize = $state(user.quotaSizeInBytes === null ? null : convertFromBytes(user.quotaSizeInBytes, ByteUnit.GiB));
|
||||
let newPassword = $state<string>('');
|
||||
|
||||
const previousQutoa = user.quotaSizeInBytes;
|
||||
|
||||
|
|
@ -42,7 +34,7 @@
|
|||
const editUser = async () => {
|
||||
try {
|
||||
const { id, email, name, storageLabel } = user;
|
||||
await updateUserAdmin({
|
||||
const newUser = await updateUserAdmin({
|
||||
id,
|
||||
userAdminUpdateDto: {
|
||||
email,
|
||||
|
|
@ -52,14 +44,14 @@
|
|||
},
|
||||
});
|
||||
|
||||
onEditSuccess();
|
||||
onClose({ action: 'update', data: newUser });
|
||||
} catch (error) {
|
||||
handleError(error, $t('errors.unable_to_update_user'));
|
||||
}
|
||||
};
|
||||
|
||||
const resetPassword = async () => {
|
||||
const isConfirmed = await dialogController.show({
|
||||
const isConfirmed = await modalManager.openDialog({
|
||||
prompt: $t('admin.confirm_user_password_reset', { values: { user: user.name } }),
|
||||
});
|
||||
|
||||
|
|
@ -78,7 +70,7 @@
|
|||
},
|
||||
});
|
||||
|
||||
onResetPasswordSuccess();
|
||||
onClose({ action: 'resetPassword', data: newPassword });
|
||||
} catch (error) {
|
||||
handleError(error, $t('errors.unable_to_reset_password'));
|
||||
}
|
||||
|
|
@ -107,61 +99,65 @@
|
|||
};
|
||||
</script>
|
||||
|
||||
<FullScreenModal title={$t('edit_user')} icon={mdiAccountEditOutline} {onClose}>
|
||||
<form onsubmit={onSubmit} autocomplete="off" id="edit-user-form">
|
||||
<div class="my-4 flex flex-col gap-2">
|
||||
<label class="immich-form-label" for="email">{$t('email')}</label>
|
||||
<input class="immich-form-input" id="email" name="email" type="email" bind:value={user.email} />
|
||||
<Modal title={$t('edit_user')} size="small" icon={mdiAccountEditOutline} {onClose}>
|
||||
<ModalBody>
|
||||
<form onsubmit={onSubmit} autocomplete="off" id="edit-user-form">
|
||||
<div class="my-4 flex flex-col gap-2">
|
||||
<label class="immich-form-label" for="email">{$t('email')}</label>
|
||||
<input class="immich-form-input" id="email" name="email" type="email" bind:value={user.email} />
|
||||
</div>
|
||||
|
||||
<div class="my-4 flex flex-col gap-2">
|
||||
<label class="immich-form-label" for="name">{$t('name')}</label>
|
||||
<input class="immich-form-input" id="name" name="name" type="text" required bind:value={user.name} />
|
||||
</div>
|
||||
|
||||
<div class="my-4 flex flex-col gap-2">
|
||||
<label class="flex items-center gap-2 immich-form-label" for="quotaSize">
|
||||
{$t('admin.quota_size_gib')}
|
||||
{#if quotaSizeWarning}
|
||||
<p class="text-red-400 text-sm">{$t('errors.quota_higher_than_disk_size')}</p>
|
||||
{/if}</label
|
||||
>
|
||||
<input
|
||||
class="immich-form-input"
|
||||
id="quotaSize"
|
||||
name="quotaSize"
|
||||
placeholder={$t('unlimited')}
|
||||
type="number"
|
||||
min="0"
|
||||
bind:value={quotaSize}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="my-4 flex flex-col gap-2">
|
||||
<label class="immich-form-label" for="storage-label">{$t('storage_label')}</label>
|
||||
<input
|
||||
class="immich-form-input"
|
||||
id="storage-label"
|
||||
name="storage-label"
|
||||
type="text"
|
||||
bind:value={user.storageLabel}
|
||||
/>
|
||||
|
||||
<p>
|
||||
{$t('admin.note_apply_storage_label_previous_assets')}
|
||||
<a href={AppRoute.ADMIN_JOBS} class="text-immich-primary dark:text-immich-dark-primary">
|
||||
{$t('admin.storage_template_migration_job')}
|
||||
</a>
|
||||
</p>
|
||||
</div>
|
||||
</form>
|
||||
</ModalBody>
|
||||
|
||||
<ModalFooter>
|
||||
<div class="flex gap-3 w-full">
|
||||
{#if canResetPassword}
|
||||
<Button shape="round" color="warning" variant="filled" fullWidth onclick={resetPassword}
|
||||
>{$t('reset_password')}</Button
|
||||
>
|
||||
{/if}
|
||||
<Button type="submit" shape="round" fullWidth form="edit-user-form">{$t('confirm')}</Button>
|
||||
</div>
|
||||
|
||||
<div class="my-4 flex flex-col gap-2">
|
||||
<label class="immich-form-label" for="name">{$t('name')}</label>
|
||||
<input class="immich-form-input" id="name" name="name" type="text" required bind:value={user.name} />
|
||||
</div>
|
||||
|
||||
<div class="my-4 flex flex-col gap-2">
|
||||
<label class="flex items-center gap-2 immich-form-label" for="quotaSize">
|
||||
{$t('admin.quota_size_gib')}
|
||||
{#if quotaSizeWarning}
|
||||
<p class="text-red-400 text-sm">{$t('errors.quota_higher_than_disk_size')}</p>
|
||||
{/if}</label
|
||||
>
|
||||
<input
|
||||
class="immich-form-input"
|
||||
id="quotaSize"
|
||||
name="quotaSize"
|
||||
placeholder={$t('unlimited')}
|
||||
type="number"
|
||||
min="0"
|
||||
bind:value={quotaSize}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="my-4 flex flex-col gap-2">
|
||||
<label class="immich-form-label" for="storage-label">{$t('storage_label')}</label>
|
||||
<input
|
||||
class="immich-form-input"
|
||||
id="storage-label"
|
||||
name="storage-label"
|
||||
type="text"
|
||||
bind:value={user.storageLabel}
|
||||
/>
|
||||
|
||||
<p>
|
||||
{$t('admin.note_apply_storage_label_previous_assets')}
|
||||
<a href={AppRoute.ADMIN_JOBS} class="text-immich-primary dark:text-immich-dark-primary">
|
||||
{$t('admin.storage_template_migration_job')}
|
||||
</a>
|
||||
</p>
|
||||
</div>
|
||||
</form>
|
||||
|
||||
{#snippet stickyBottom()}
|
||||
{#if canResetPassword}
|
||||
<Button shape="round" color="warning" variant="filled" fullWidth onclick={resetPassword}
|
||||
>{$t('reset_password')}</Button
|
||||
>
|
||||
{/if}
|
||||
<Button type="submit" shape="round" fullWidth form="edit-user-form">{$t('confirm')}</Button>
|
||||
{/snippet}
|
||||
</FullScreenModal>
|
||||
</ModalFooter>
|
||||
</Modal>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue