soeren/fotospiel-app
1
0
Fork 0
Code Issues Pull Requests Actions 2 Packages Projects Releases Wiki Activity

fixed errors in branding and invite page, added an error route for better react error display

Browse Source
This commit is contained in:
Codex Agent
2025-11-25 20:15:17 +01:00
parent 9bde8f3f32
commit ff168834b4
6 changed files with 94 additions and 32 deletions
Download Patch File Download Diff File Expand all files Collapse all files

17
resources/js/admin/pages/EventBrandingPage.tsx
View File

@@ -21,6 +21,9 @@ import { getContrastingTextColor } from '../../guest/lib/color';
import { buildEventTabs } from '../lib/eventTabs';
import { ensureFontLoaded, useTenantFonts } from '../lib/fonts';
const DEFAULT_FONT_VALUE = '__default';
const CUSTOM_FONT_VALUE = '__custom';
type BrandingForm = {
useDefault: boolean;
palette: {
@@ -318,12 +321,12 @@ export default function EventBrandingPage(): React.ReactElement {
}
const resolveFontSelectValue = (current: string): string => {
if (!current) return '';
return availableFonts.some((font) => font.family === current) ? current : '__custom';
if (!current) return DEFAULT_FONT_VALUE;
return availableFonts.some((font) => font.family === current) ? current : CUSTOM_FONT_VALUE;
};
const handleFontSelect = (key: 'heading' | 'body', value: string) => {
const resolved = value === '__custom' ? '' : value;
const resolved = value === CUSTOM_FONT_VALUE || value === DEFAULT_FONT_VALUE ? '' : value;
setForm((prev) => ({ ...prev, typography: { ...prev.typography, [key]: resolved } }));
const font = availableFonts.find((entry) => entry.family === resolved);
if (font) {
@@ -446,11 +449,11 @@ export default function EventBrandingPage(): React.ReactElement {
<SelectValue placeholder={t('branding.fontDefault', 'Standard (Tenant)')} />
</SelectTrigger>
<SelectContent>
<SelectItem value="">{t('branding.fontDefault', 'Standard (Tenant)')}</SelectItem>
<SelectItem value={DEFAULT_FONT_VALUE}>{t('branding.fontDefault', 'Standard (Tenant)')}</SelectItem>
{availableFonts.map((font) => (
<SelectItem key={font.family} value={font.family}>{font.family}</SelectItem>
))}
<SelectItem value="__custom">{t('branding.fontCustom', 'Eigene Schrift eingeben')}</SelectItem>
<SelectItem value={CUSTOM_FONT_VALUE}>{t('branding.fontCustom', 'Eigene Schrift eingeben')}</SelectItem>
</SelectContent>
</Select>
<Input
@@ -471,11 +474,11 @@ export default function EventBrandingPage(): React.ReactElement {
<SelectValue placeholder={t('branding.fontDefault', 'Standard (Tenant)')} />
</SelectTrigger>
<SelectContent>
<SelectItem value="">{t('branding.fontDefault', 'Standard (Tenant)')}</SelectItem>
<SelectItem value={DEFAULT_FONT_VALUE}>{t('branding.fontDefault', 'Standard (Tenant)')}</SelectItem>
{availableFonts.map((font) => (
<SelectItem key={font.family} value={font.family}>{font.family}</SelectItem>
))}
<SelectItem value="__custom">{t('branding.fontCustom', 'Eigene Schrift eingeben')}</SelectItem>
<SelectItem value={CUSTOM_FONT_VALUE}>{t('branding.fontCustom', 'Eigene Schrift eingeben')}</SelectItem>
</SelectContent>
</Select>
<Input

34
resources/js/admin/pages/components/InviteLayoutCustomizerPanel.tsx
View File

@@ -33,6 +33,8 @@ import { Collapsible, CollapsibleContent, CollapsibleTrigger } from '@/component
import { cn } from '@/lib/utils';
import { ensureFontLoaded, useTenantFonts } from '../../lib/fonts';
const DEFAULT_FONT_VALUE = '__default';
import type { EventQrInvite, EventQrInviteLayout } from '../../api';
import { authorizedFetch } from '../../auth/tokens';
@@ -271,19 +273,6 @@ export function InviteLayoutCustomizerPanel({
const appliedLayoutRef = React.useRef<string | null>(null);
const appliedInviteRef = React.useRef<number | string | null>(null);
const handleElementFontChange = React.useCallback(
(id: string, family: string) => {
updateElement(id, { fontFamily: family || null });
const font = availableFonts.find((entry) => entry.family === family);
if (font) {
void ensureFontLoaded(font).then(() => {
fabricCanvasRef.current?.requestRenderAll();
});
}
},
[availableFonts, updateElement]
);
React.useEffect(() => {
if (!availableFonts.length || !elements.length) {
return;
@@ -609,6 +598,19 @@ export function InviteLayoutCustomizerPanel({
[commitElements]
);
const handleElementFontChange = React.useCallback(
(id: string, family: string) => {
updateElement(id, { fontFamily: family || null });
const font = availableFonts.find((entry) => entry.family === family);
if (font) {
void ensureFontLoaded(font).then(() => {
fabricCanvasRef.current?.requestRenderAll();
});
}
},
[availableFonts, updateElement]
);
React.useEffect(() => {
if (!invite) {
setAvailableLayouts([]);
@@ -1340,15 +1342,15 @@ export function InviteLayoutCustomizerPanel({
<div className="space-y-2">
<Label>{t('invites.customizer.elements.fontFamily', 'Schriftart')}</Label>
<Select
value={availableFonts.some((font) => font.family === element.fontFamily) ? element.fontFamily ?? '' : ''}
onValueChange={(value) => handleElementFontChange(element.id, value)}
value={availableFonts.some((font) => font.family === element.fontFamily) ? element.fontFamily ?? DEFAULT_FONT_VALUE : DEFAULT_FONT_VALUE}
onValueChange={(value) => handleElementFontChange(element.id, value === DEFAULT_FONT_VALUE ? '' : value)}
disabled={fontsLoading}
>
<SelectTrigger>
<SelectValue placeholder={t('invites.customizer.elements.fontPlaceholder', 'Standard')} />
</SelectTrigger>
<SelectContent>
<SelectItem value="">{t('invites.customizer.elements.fontPlaceholder', 'Standard')}</SelectItem>
<SelectItem value={DEFAULT_FONT_VALUE}>{t('invites.customizer.elements.fontPlaceholder', 'Standard')}</SelectItem>
{availableFonts.map((font) => (
<SelectItem key={font.family} value={font.family}>{font.family}</SelectItem>
))}