Cutlery/immich
1
0
Fork 1
mirror of https://github.com/immich-app/immich.git synced 2025-07-09 03:04:16 -04:00
Code Issues Packages Projects Releases Wiki Activity

refactor: email template preview modal (#19119)

Browse Source
This commit is contained in:
Daniel Dietzler 2025-06-11 20:18:46 +02:00 committed by GitHub
parent 08e2b22db8
commit 7a001d27a5
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
2 changed files with 68 additions and 64 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

29
web/src/lib/components/admin-page/settings/template-settings/template-settings.svelte
View File

@ -4,9 +4,11 @@
import LoadingSpinner from '$lib/components/shared-components/loading-spinner.svelte'; import LoadingSpinner from '$lib/components/shared-components/loading-spinner.svelte';
import SettingAccordion from '$lib/components/shared-components/settings/setting-accordion.svelte'; import SettingAccordion from '$lib/components/shared-components/settings/setting-accordion.svelte';
import SettingTextarea from '$lib/components/shared-components/settings/setting-textarea.svelte'; import SettingTextarea from '$lib/components/shared-components/settings/setting-textarea.svelte';
import { modalManager } from '$lib/managers/modal-manager.svelte';
import EmailTemplatePreviewModal from '$lib/modals/EmailTemplatePreviewModal.svelte';
import { handleError } from '$lib/utils/handle-error'; import { handleError } from '$lib/utils/handle-error';
import { type SystemConfigDto, type SystemConfigTemplateEmailsDto, getNotificationTemplateAdmin } from '@immich/sdk'; import { type SystemConfigDto, type SystemConfigTemplateEmailsDto, getNotificationTemplateAdmin } from '@immich/sdk';
import { Button, Modal, ModalBody } from '@immich/ui'; import { Button } from '@immich/ui';
import { mdiEyeOutline } from '@mdi/js'; import { mdiEyeOutline } from '@mdi/js';
import { t } from 'svelte-i18n'; import { t } from 'svelte-i18n';
import { fade } from 'svelte/transition'; import { fade } from 'svelte/transition';
@ -18,14 +20,13 @@
let { savedConfig, config = $bindable() }: Props = $props(); let { savedConfig, config = $bindable() }: Props = $props();
let htmlPreview = $state('');
let loadingPreview = $state(false); let loadingPreview = $state(false);
const getTemplate = async (name: string, template: string) => { const getTemplate = async (name: string, template: string) => {
try { try {
loadingPreview = true; loadingPreview = true;
const result = await getNotificationTemplateAdmin({ name, templateDto: { template } }); const { html } = await getNotificationTemplateAdmin({ name, templateDto: { template } });
htmlPreview = result.html; await modalManager.show(EmailTemplatePreviewModal, { html });
} catch (error) { } catch (error) {
handleError(error, 'Could not load template.'); handleError(error, 'Could not load template.');
} finally { } finally {
@ -33,10 +34,6 @@
} }
}; };
const closePreviewModal = () => {
htmlPreview = '';
};
const templateConfigs = [ const templateConfigs = [
{ {
label: $t('admin.template_email_welcome'), label: $t('admin.template_email_welcome'),
@ -66,7 +63,6 @@
}; };
</script> </script>
<div>
<div in:fade={{ duration: 500 }}> <div in:fade={{ duration: 500 }}>
<form autocomplete="off" {onsubmit} class="mt-4"> <form autocomplete="off" {onsubmit} class="mt-4">
<div class="flex flex-col gap-4"> <div class="flex flex-col gap-4">
@ -109,20 +105,5 @@
</div> </div>
</SettingAccordion> </SettingAccordion>
</div> </div>
{#if htmlPreview}
<Modal title={$t('admin.template_email_preview')} onClose={closePreviewModal} size="medium">
<ModalBody>
<div style="position:relative; width:100%; height:90vh; overflow: hidden">
<iframe
title={$t('admin.template_email_preview')}
srcdoc={htmlPreview}
style="width: 100%; height: 100%; border: none; overflow:hidden; position: absolute; top: 0; left: 0;"
></iframe>
</div>
</ModalBody>
</Modal>
{/if}
</form> </form>
</div> </div>
</div>

23
web/src/lib/modals/EmailTemplatePreviewModal.svelte Normal file
View File

@ -0,0 +1,23 @@
<script lang="ts">
import { Modal, ModalBody } from '@immich/ui';
import { t } from 'svelte-i18n';
interface Props {
html: string;
onClose: () => void;
}
let { html, onClose }: Props = $props();
</script>
<Modal title={$t('admin.template_email_preview')} {onClose} size="giant">
<ModalBody>
<div class="relative w-full h-240 overflow-hidden">
<iframe
title={$t('admin.template_email_preview')}
srcdoc={html}
class="absolute top-0 left-0 w-full h-full border-none"
></iframe>
</div>
</ModalBody>
</Modal>