mirror of
https://github.com/immich-app/immich.git
synced 2025-07-09 03:04:16 -04:00
refactor: email template preview modal (#19119)
This commit is contained in:
parent
08e2b22db8
commit
7a001d27a5
@ -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
23
web/src/lib/modals/EmailTemplatePreviewModal.svelte
Normal 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>
|
Loading…
x
Reference in New Issue
Block a user