paul/picpeak
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 1 Wiki Activity

Fix admin reference mode regressions

Browse Source
This commit is contained in:
paul
2025-10-02 23:39:17 +02:00
parent fc1bf53412
commit 775e417e55
12 changed files with 2608 additions and 30 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/package-lock.json
Generated
+2177 -4
View File
File diff suppressed because it is too large Load Diff
frontend/package.json
+8 -2
View File
@@ -8,7 +8,8 @@
"build": "vite build",
"build:check": "tsc -b && vite build",
"lint": "eslint .",
"preview": "vite preview"
"preview": "vite preview",
"test": "vitest run src/components/admin/__tests__/ThemeCustomizerEnhanced.test.tsx"
},
"dependencies": {
"@tanstack/react-query": "^5.0.0",
@@ -47,6 +48,9 @@
},
"devDependencies": {
"@eslint/js": "^9.29.0",
"@testing-library/jest-dom": "^6.6.3",
"@testing-library/react": "^16.1.0",
"@testing-library/user-event": "^14.6.1",
"@types/react": "^18.3.12",
"@types/react-dom": "^18.3.1",
"@vitejs/plugin-react": "^4.5.2",
@@ -55,10 +59,12 @@
"eslint-plugin-react-hooks": "^5.2.0",
"eslint-plugin-react-refresh": "^0.4.20",
"globals": "^16.2.0",
"jsdom": "^25.0.1",
"postcss": "^8.4.21",
"tailwindcss": "^3.3.0",
"typescript": "~5.8.3",
"typescript-eslint": "^8.34.1",
"vite": "^7.1.6"
"vite": "^7.1.6",
"vitest": "^2.1.5"
}
}
frontend/src/components/admin/ThemeCustomizerEnhanced.tsx
+15 -5
View File
@@ -14,6 +14,8 @@ interface ThemeCustomizerEnhancedProps {
isPreviewMode?: boolean;
showGalleryLayouts?: boolean;
hideActions?: boolean;
onApply?: (theme: ThemeConfig, metadata: { presetName: string }) => Promise<void> | void;
isApplying?: boolean;
}
const layoutIcons: Record<GalleryLayoutType, React.ReactNode> = {
@@ -34,7 +36,9 @@ export const ThemeCustomizerEnhanced: React.FC<ThemeCustomizerEnhancedProps> = (
onPresetChange,
isPreviewMode = false,
showGalleryLayouts = true,
hideActions = false
hideActions = false,
onApply,
isApplying = false
}) => {
const { t } = useTranslation();
const [localTheme, setLocalTheme] = useState<ThemeConfig>(value);
@@ -80,8 +84,13 @@ export const ThemeCustomizerEnhanced: React.FC<ThemeCustomizerEnhancedProps> = (
}
};
const handleApply = () => {
onChange({ ...localTheme, customCss });
const handleApply = async () => {
const themeWithCss = { ...localTheme, customCss };
onChange(themeWithCss);
if (onApply) {
await onApply(themeWithCss, { presetName: selectedPreset });
}
};
const handleReset = () => {
@@ -587,11 +596,12 @@ export const ThemeCustomizerEnhanced: React.FC<ThemeCustomizerEnhancedProps> = (
variant="primary"
leftIcon={<Palette className="w-4 h-4" />}
onClick={handleApply}
disabled={isApplying}
>
{t('branding.applyTheme')}
{isApplying ? t('common.applying', 'Applying...') : t('branding.applyTheme')}
</Button>
</div>
)}
</div>
);
};
};
frontend/src/components/admin/__tests__/ThemeCustomizerEnhanced.test.tsx
+70
View File
@@ -0,0 +1,70 @@
import { render, screen } from '@testing-library/react';
import userEvent from '@testing-library/user-event';
import { vi } from 'vitest';
import { ThemeCustomizerEnhanced } from '../ThemeCustomizerEnhanced';
import type { ThemeConfig } from '../../../types/theme.types';
vi.mock('react-i18next', async () => {
const actual = await vi.importActual<typeof import('react-i18next')>('react-i18next');
return {
...actual,
useTranslation: () => ({
t: (_key: string, fallback?: string) => fallback ?? _key
})
};
});
describe('ThemeCustomizerEnhanced', () => {
const baseTheme: ThemeConfig = {
primaryColor: '#000000',
accentColor: '#ffffff',
backgroundColor: '#eeeeee',
textColor: '#111111',
galleryLayout: 'grid',
gallerySettings: {
spacing: 'normal'
}
};
it('invokes onApply when Apply Theme is clicked', async () => {
const user = userEvent.setup();
const handleChange = vi.fn();
const handleApply = vi.fn().mockResolvedValue(undefined);
render(
<ThemeCustomizerEnhanced
value={baseTheme}
onChange={handleChange}
presetName="default"
onApply={handleApply}
/>
);
const applyButton = screen.getByRole('button', { name: /branding\.applyTheme/i });
await user.click(applyButton);
expect(handleChange).toHaveBeenCalled();
expect(handleApply).toHaveBeenCalledTimes(1);
expect(handleApply).toHaveBeenCalledWith(
expect.objectContaining({ primaryColor: '#000000' }),
expect.objectContaining({ presetName: 'default' })
);
});
it('disables the Apply button while applying', () => {
const handleChange = vi.fn();
render(
<ThemeCustomizerEnhanced
value={baseTheme}
onChange={handleChange}
presetName="default"
isApplying={true}
/>
);
const applyButton = screen.getByRole('button', { name: /applying/i });
expect(applyButton).toBeDisabled();
});
});
frontend/src/components/gallery/layouts/HeroGalleryLayout.tsx
+19 -3
View File
@@ -1,4 +1,4 @@
import React, { useState, useEffect } from 'react';
import React, { useState, useEffect, useRef, useCallback } from 'react';
import { Download, Maximize2, Check, ChevronDown, Calendar, Clock, Heart, MessageSquare } from 'lucide-react';
import { parseISO } from 'date-fns';
import { useTranslation } from 'react-i18next';
@@ -163,12 +163,22 @@ export const HeroGalleryLayout: React.FC<HeroGalleryLayoutProps> = ({
{/* Scroll Indicator */}
<div className="absolute bottom-8 left-1/2 transform -translate-x-1/2 animate-bounce">
<ChevronDown className="w-8 h-8 text-white drop-shadow-lg" />
<button
type="button"
onClick={handleScrollToGrid}
className="rounded-full border border-white/30 bg-white/10 p-3 text-white transition focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-white focus-visible:ring-offset-2 hover:bg-white/20"
aria-label={t('gallery.scrollToGallery', 'Scroll to gallery')}
>
<ChevronDown className="w-8 h-8 drop-shadow-lg" />
</button>
</div>
</div>
{/* Grid Section */}
<div className="grid grid-cols-2 sm:grid-cols-3 lg:grid-cols-4 xl:grid-cols-5 gap-4">
<div
ref={gridRef}
className="grid grid-cols-2 sm:grid-cols-3 lg:grid-cols-4 xl:grid-cols-5 gap-4"
>
{remainingPhotos.map((photo) => {
const actualIndex = photos.findIndex(p => p.id === photo.id);
return (
@@ -313,3 +323,9 @@ export const HeroGalleryLayout: React.FC<HeroGalleryLayoutProps> = ({
</>
);
};
const gridRef = useRef<HTMLDivElement | null>(null);
const handleScrollToGrid = useCallback(() => {
if (gridRef.current) {
gridRef.current.scrollIntoView({ behavior: 'smooth', block: 'start' });
}
}, []);
frontend/src/pages/admin/EventDetailsPage.tsx
+36
View File
@@ -236,6 +236,28 @@ export const EventDetailsPage: React.FC = () => {
},
});
const applyThemeMutation = useMutation({
mutationFn: async ({ theme, presetName }: { theme: ThemeConfig; presetName: string }) => {
if (!id) {
throw new Error('Missing event identifier');
}
const colorThemeValue = presetName && presetName !== 'custom'
? presetName
: JSON.stringify(theme);
return eventsService.updateEvent(parseInt(id), { color_theme: colorThemeValue });
},
onSuccess: () => {
queryClient.invalidateQueries({ queryKey: ['admin-event', id] });
toast.success(t('branding.themeApplied', 'Theme updated'));
},
onError: (error: any) => {
const message = error?.response?.data?.error || t('branding.themeApplyError', 'Failed to apply theme');
toast.error(message);
}
});
// Archive mutation
const archiveMutation = useMutation({
mutationFn: () => eventsService.archiveEvent(parseInt(id!)),
@@ -1124,6 +1146,20 @@ export const EventDetailsPage: React.FC = () => {
}}
isPreviewMode={false}
showGalleryLayouts={true}
onApply={async (theme, { presetName }) => {
const resolvedPreset = presetName || 'custom';
setCurrentTheme(theme);
setCurrentPresetName(resolvedPreset);
const themeValue = resolvedPreset !== 'custom'
? resolvedPreset
: JSON.stringify(theme);
setEditForm(prev => ({ ...prev, color_theme: themeValue }));
await applyThemeMutation.mutateAsync({ theme, presetName: resolvedPreset });
}}
isApplying={applyThemeMutation.isPending}
/>
</Card>
)}
frontend/vite.config.ts
+5
View File
@@ -15,6 +15,11 @@ export default defineConfig({
},
sourcemap: true,
},
test: {
environment: 'jsdom',
setupFiles: './vitest.setup.ts',
globals: true
},
server: {
port: 5173,
host: true,
frontend/vitest.setup.ts
+7
View File
@@ -0,0 +1,7 @@
import { expect, vi } from 'vitest';
import * as matchers from '@testing-library/jest-dom/matchers';
expect.extend(matchers);
// Provide Jest-compatible globals for existing tests that rely on jest.fn
(globalThis as any).jest = vi;