766 lines
29 KiB
TypeScript
766 lines
29 KiB
TypeScript
/**
|
||
* SysAdmin: UI language sets (DB-backed i18n).
|
||
*/
|
||
|
||
import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';
|
||
import { FaDownload, FaFileExport, FaFileImport, FaRedo, FaSync, FaTrash } from 'react-icons/fa';
|
||
import api from '../../api';
|
||
import { FormGeneratorTable, type ColumnConfig } from '../../components/FormGenerator/FormGeneratorTable/FormGeneratorTable';
|
||
import { useConfirm } from '../../hooks/useConfirm';
|
||
import { useLanguage } from '../../providers/language/LanguageContext';
|
||
import styles from './Admin.module.css';
|
||
|
||
type LangRow = {
|
||
id: string;
|
||
label: string;
|
||
status: string;
|
||
entriesCount: number;
|
||
uiCount: number;
|
||
gatewayCount: number;
|
||
};
|
||
|
||
type ProgressInfo = {
|
||
message: string;
|
||
current: number;
|
||
total: number;
|
||
error?: string;
|
||
done?: boolean;
|
||
/** Short title (e.g. language label) to avoid long sentences in the overlay. */
|
||
progressHeading?: string;
|
||
/** Keys in language set before sync (from sync-diff). */
|
||
keysCurrent?: number;
|
||
/** New keys vs xx before PUT (from sync-diff). */
|
||
keysPending?: number;
|
||
/** Master (xx) key count (from sync-diff). */
|
||
keysMasterTotal?: number;
|
||
/** Keys AI-translated in last PUT (optional). */
|
||
keysTranslated?: number;
|
||
};
|
||
|
||
function _getColumns(t: (key: string) => string): ColumnConfig[] {
|
||
return [
|
||
{ key: 'id', label: t('adminLanguages.code'), type: 'text', sortable: true, filterable: true, width: 90 },
|
||
{ key: 'label', label: t('adminLanguages.bezeichnung'), type: 'text', sortable: true, filterable: true, width: 200 },
|
||
{ key: 'status', label: t('adminLanguages.status'), type: 'text', sortable: true, filterable: true, width: 120 },
|
||
{ key: 'uiCount', label: t('adminLanguages.ui'), type: 'number', sortable: true, width: 80 },
|
||
{ key: 'gatewayCount', label: t('adminLanguages.api'), type: 'number', sortable: true, width: 80 },
|
||
{ key: 'entriesCount', label: t('adminLanguages.total'), type: 'number', sortable: true, width: 80 },
|
||
];
|
||
}
|
||
|
||
const _PRIORITY_CODES = ['de', 'en', 'fr', 'it'];
|
||
|
||
const _isoChoices: { value: string; label: string }[] = [
|
||
{ value: 'de', label: 'de — Deutsch' }, { value: 'en', label: 'en — English' },
|
||
{ value: 'fr', label: 'fr — Français' }, { value: 'it', label: 'it — Italiano' },
|
||
{ value: 'es', label: 'es — Español' }, { value: 'pt', label: 'pt — Português' },
|
||
{ value: 'nl', label: 'nl — Nederlands' }, { value: 'pl', label: 'pl — Polski' },
|
||
{ value: 'cs', label: 'cs — Čeština' }, { value: 'sk', label: 'sk — Slovenčina' },
|
||
{ value: 'sv', label: 'sv — Svenska' }, { value: 'no', label: 'no — Norsk' },
|
||
{ value: 'da', label: 'da — Dansk' }, { value: 'fi', label: 'fi — Suomi' },
|
||
{ value: 'hu', label: 'hu — Magyar' }, { value: 'ro', label: 'ro — Română' },
|
||
{ value: 'bg', label: 'bg — Български' }, { value: 'hr', label: 'hr — Hrvatski' },
|
||
{ value: 'sl', label: 'sl — Slovenščina' }, { value: 'et', label: 'et — Eesti' },
|
||
{ value: 'lv', label: 'lv — Latviešu' }, { value: 'lt', label: 'lt — Lietuvių' },
|
||
{ value: 'el', label: 'el — Ελληνικά' }, { value: 'tr', label: 'tr — Türkçe' },
|
||
{ value: 'ru', label: 'ru — Русский' }, { value: 'uk', label: 'uk — Українська' },
|
||
{ value: 'ar', label: 'ar — العربية' }, { value: 'he', label: 'he — עברית' },
|
||
{ value: 'zh', label: 'zh — 中文' }, { value: 'ja', label: 'ja — 日本語' },
|
||
{ value: 'ko', label: 'ko — 한국어' }, { value: 'hi', label: 'hi — हिन्दी' },
|
||
{ value: 'th', label: 'th — ไทย' }, { value: 'vi', label: 'vi — Tiếng Việt' },
|
||
{ value: 'id', label: 'id — Bahasa Indonesia' }, { value: 'ms', label: 'ms — Bahasa Melayu' },
|
||
{ value: 'tl', label: 'tl — Filipino' }, { value: 'sw', label: 'sw — Kiswahili' },
|
||
{ value: 'af', label: 'af — Afrikaans' }, { value: 'sq', label: 'sq — Shqip' },
|
||
{ value: 'am', label: 'am — አማርኛ' }, { value: 'hy', label: 'hy — Հայերեն' },
|
||
{ value: 'az', label: 'az — Azərbaycan' }, { value: 'eu', label: 'eu — Euskara' },
|
||
{ value: 'be', label: 'be — Беларуская' }, { value: 'bn', label: 'bn — বাংলা' },
|
||
{ value: 'bs', label: 'bs — Bosanski' }, { value: 'ca', label: 'ca — Català' },
|
||
{ value: 'cy', label: 'cy — Cymraeg' }, { value: 'eo', label: 'eo — Esperanto' },
|
||
{ value: 'fa', label: 'fa — فارسی' }, { value: 'ga', label: 'ga — Gaeilge' },
|
||
{ value: 'gl', label: 'gl — Galego' }, { value: 'gu', label: 'gu — ગુજરાતી' },
|
||
{ value: 'ha', label: 'ha — Hausa' }, { value: 'is', label: 'is — Íslenska' },
|
||
{ value: 'jv', label: 'jv — Basa Jawa' }, { value: 'ka', label: 'ka — ქართული' },
|
||
{ value: 'kk', label: 'kk — Қазақ' }, { value: 'km', label: 'km — ខ្មែរ' },
|
||
{ value: 'kn', label: 'kn — ಕನ್ನಡ' }, { value: 'ku', label: 'ku — Kurdî' },
|
||
{ value: 'ky', label: 'ky — Кыргызча' }, { value: 'la', label: 'la — Latina' },
|
||
{ value: 'lb', label: 'lb — Lëtzebuergesch' }, { value: 'lo', label: 'lo — ລາວ' },
|
||
{ value: 'mk', label: 'mk — Македонски' }, { value: 'ml', label: 'ml — മലയാളം' },
|
||
{ value: 'mn', label: 'mn — Монгол' }, { value: 'mr', label: 'mr — मराठी' },
|
||
{ value: 'mt', label: 'mt — Malti' }, { value: 'my', label: 'my — မြန်မာ' },
|
||
{ value: 'ne', label: 'ne — नेपाली' }, { value: 'or', label: 'or — ଓଡ଼ିଆ' },
|
||
{ value: 'pa', label: 'pa — ਪੰਜਾਬੀ' }, { value: 'ps', label: 'ps — پښتو' },
|
||
{ value: 'si', label: 'si — සිංහල' }, { value: 'so', label: 'so — Soomaali' },
|
||
{ value: 'sr', label: 'sr — Српски' }, { value: 'su', label: 'su — Basa Sunda' },
|
||
{ value: 'ta', label: 'ta — தமிழ்' }, { value: 'te', label: 'te — తెలుగు' },
|
||
{ value: 'tg', label: 'tg — Тоҷикӣ' }, { value: 'tk', label: 'tk — Türkmen' },
|
||
{ value: 'ur', label: 'ur — اردو' }, { value: 'uz', label: 'uz — Oʻzbek' },
|
||
{ value: 'yo', label: 'yo — Yorùbá' }, { value: 'zu', label: 'zu — isiZulu' },
|
||
];
|
||
|
||
// ---------------------------------------------------------------------------
|
||
// Progress overlay component
|
||
// ---------------------------------------------------------------------------
|
||
|
||
const _ProgressOverlay: React.FC<{ progress: ProgressInfo }> = ({ progress }) => {
|
||
const master = progress.keysMasterTotal;
|
||
const pending = progress.keysPending ?? 0;
|
||
const cur = progress.keysCurrent ?? 0;
|
||
const translated = progress.keysTranslated;
|
||
const hasMaster = master != null && master > 0;
|
||
|
||
const entryJ = pending > 0 ? (translated ?? 0) : cur;
|
||
const entryTotal = pending > 0 ? pending : (master ?? 0);
|
||
const showEntryMeter = hasMaster && entryTotal > 0;
|
||
const awaitingAi =
|
||
pending > 0 &&
|
||
translated === undefined &&
|
||
!progress.done &&
|
||
!progress.error;
|
||
|
||
const [softEntryPct, setSoftEntryPct] = useState(0);
|
||
useEffect(() => {
|
||
if (!awaitingAi) {
|
||
setSoftEntryPct(0);
|
||
return;
|
||
}
|
||
const started = Date.now();
|
||
const id = window.setInterval(() => {
|
||
const elapsed = Date.now() - started;
|
||
const cap = 94;
|
||
setSoftEntryPct(Math.min(cap, cap * (1 - Math.exp(-elapsed / 14000))));
|
||
}, 220);
|
||
return () => clearInterval(id);
|
||
}, [awaitingAi]);
|
||
|
||
let entryPct = 0;
|
||
if (pending > 0) {
|
||
if (translated !== undefined && pending > 0) {
|
||
entryPct = Math.min(100, Math.round((translated / pending) * 100));
|
||
}
|
||
} else if (master && master > 0) {
|
||
entryPct = Math.min(100, Math.round((cur / master) * 100));
|
||
}
|
||
|
||
const entryBarPct = awaitingAi ? softEntryPct : entryPct;
|
||
const entryJShown = awaitingAi
|
||
? Math.min(pending, Math.max(0, Math.floor((softEntryPct / 100) * pending)))
|
||
: entryJ;
|
||
|
||
const showLangMeter = progress.total > 1 || !showEntryMeter;
|
||
const pctLang = progress.total > 0 ? Math.round((progress.current / progress.total) * 100) : 0;
|
||
const title = progress.progressHeading ?? progress.message;
|
||
|
||
const barBg = progress.error ? 'var(--error-color, #c53030)' : 'var(--primary-color, #3182ce)';
|
||
|
||
return (
|
||
<div
|
||
style={{
|
||
position: 'absolute',
|
||
inset: 0,
|
||
background: 'rgba(var(--bg-rgb, 255,255,255), 0.85)',
|
||
backdropFilter: 'blur(2px)',
|
||
display: 'flex',
|
||
alignItems: 'center',
|
||
justifyContent: 'center',
|
||
zIndex: 50,
|
||
borderRadius: 'var(--border-radius, 8px)',
|
||
}}
|
||
>
|
||
<div
|
||
style={{
|
||
background: 'var(--card-bg, #fff)',
|
||
border: '1px solid var(--border-color, #ddd)',
|
||
borderRadius: 'var(--border-radius, 8px)',
|
||
padding: '2rem 2.5rem',
|
||
minWidth: 320,
|
||
maxWidth: 420,
|
||
boxShadow: '0 4px 24px rgba(0,0,0,0.12)',
|
||
textAlign: 'center',
|
||
}}
|
||
>
|
||
<p style={{ fontWeight: 600, fontSize: '1.05rem', margin: '0 0 1rem', lineHeight: 1.3 }}>
|
||
{title}
|
||
</p>
|
||
{showLangMeter && (
|
||
<>
|
||
<p
|
||
style={{
|
||
margin: '0 0 0.35rem',
|
||
fontSize: '1rem',
|
||
fontWeight: 600,
|
||
fontVariantNumeric: 'tabular-nums',
|
||
color: 'var(--text-primary, #1e293b)',
|
||
}}
|
||
>
|
||
{progress.current} / {progress.total}
|
||
</p>
|
||
<div
|
||
style={{
|
||
width: '100%',
|
||
height: 8,
|
||
background: 'var(--border-color, #e2e8f0)',
|
||
borderRadius: 4,
|
||
overflow: 'hidden',
|
||
marginBottom: showEntryMeter ? '0.85rem' : 0,
|
||
}}
|
||
>
|
||
<div
|
||
style={{
|
||
width: `${pctLang}%`,
|
||
height: '100%',
|
||
background: barBg,
|
||
borderRadius: 4,
|
||
transition: 'width 0.3s ease',
|
||
}}
|
||
/>
|
||
</div>
|
||
</>
|
||
)}
|
||
{showEntryMeter && (
|
||
<>
|
||
<p
|
||
style={{
|
||
margin: '0 0 0.35rem',
|
||
fontSize: '1rem',
|
||
fontWeight: 600,
|
||
fontVariantNumeric: 'tabular-nums',
|
||
color: 'var(--text-primary, #1e293b)',
|
||
}}
|
||
>
|
||
{entryJShown} / {entryTotal}
|
||
</p>
|
||
<div className={styles.i18nKeysProgressTrack}>
|
||
<div
|
||
className={styles.i18nKeysProgressFill}
|
||
style={{
|
||
width: `${entryBarPct}%`,
|
||
background: barBg,
|
||
transition: awaitingAi ? 'width 0.25s ease-out' : 'width 0.35s ease',
|
||
}}
|
||
/>
|
||
</div>
|
||
</>
|
||
)}
|
||
{progress.error && (
|
||
<p style={{ color: 'var(--error-color, #c53030)', fontSize: '0.85rem', marginTop: '0.75rem' }}>
|
||
{progress.error}
|
||
</p>
|
||
)}
|
||
</div>
|
||
</div>
|
||
);
|
||
};
|
||
|
||
// ---------------------------------------------------------------------------
|
||
// Main component
|
||
// ---------------------------------------------------------------------------
|
||
|
||
export const AdminLanguagesPage: React.FC = () => {
|
||
const { t, reloadLanguage, refreshAvailableLanguages } = useLanguage();
|
||
const { confirm, ConfirmDialog } = useConfirm();
|
||
const [rows, setRows] = useState<LangRow[]>([]);
|
||
const [loading, setLoading] = useState(false);
|
||
const [error, setError] = useState<string | null>(null);
|
||
const [addCode, setAddCode] = useState('');
|
||
const [progress, setProgress] = useState<ProgressInfo | null>(null);
|
||
const [search, setSearch] = useState('');
|
||
const busyRef = useRef(false);
|
||
|
||
const _load = useCallback(async () => {
|
||
try {
|
||
setLoading(true);
|
||
setError(null);
|
||
const res = await api.get('/api/i18n/codes');
|
||
const list = (res.data || []) as any[];
|
||
setRows(
|
||
list.map((r) => ({
|
||
id: r.code,
|
||
label: r.label || r.code,
|
||
status: r.status || '',
|
||
entriesCount: r.entriesCount ?? 0,
|
||
uiCount: r.uiCount ?? 0,
|
||
gatewayCount: r.gatewayCount ?? 0,
|
||
})),
|
||
);
|
||
} catch (e: any) {
|
||
setError(e.response?.data?.detail || e.message || 'Laden fehlgeschlagen');
|
||
} finally {
|
||
setLoading(false);
|
||
}
|
||
}, []);
|
||
|
||
useEffect(() => {
|
||
_load();
|
||
}, [_load]);
|
||
|
||
const displayRows = useMemo(() => {
|
||
const term = search.trim().toLowerCase();
|
||
const filtered = term
|
||
? rows.filter((r) => r.id.toLowerCase().includes(term) || r.label.toLowerCase().includes(term) || r.status.toLowerCase().includes(term))
|
||
: rows;
|
||
return [...filtered].sort((a, b) => {
|
||
if (a.id === 'xx') return -1;
|
||
if (b.id === 'xx') return 1;
|
||
return a.id.localeCompare(b.id);
|
||
});
|
||
}, [rows, search]);
|
||
|
||
const existingCodes = useMemo(() => new Set(rows.map((r) => r.id)), [rows]);
|
||
|
||
const addChoices = useMemo(() => {
|
||
const available = _isoChoices.filter((c) => !existingCodes.has(c.value));
|
||
available.sort((a, b) => {
|
||
const aPrio = _PRIORITY_CODES.indexOf(a.value);
|
||
const bPrio = _PRIORITY_CODES.indexOf(b.value);
|
||
if (aPrio !== -1 && bPrio !== -1) return aPrio - bPrio;
|
||
if (aPrio !== -1) return -1;
|
||
if (bPrio !== -1) return 1;
|
||
return a.label.localeCompare(b.label);
|
||
});
|
||
return available;
|
||
}, [existingCodes]);
|
||
|
||
useEffect(() => {
|
||
if (addChoices.length > 0 && (!addCode || !addChoices.find((c) => c.value === addCode))) {
|
||
setAddCode(addChoices[0].value);
|
||
}
|
||
}, [addChoices, addCode]);
|
||
|
||
const _fetchI18nEntriesFromBundle = useCallback(async (): Promise<any[]> => {
|
||
const base = import.meta.env.BASE_URL || '/';
|
||
const normalizedBase = base.endsWith('/') ? base : `${base}/`;
|
||
const res = await fetch(`${normalizedBase}i18n-keys.json`);
|
||
if (!res.ok) {
|
||
throw new Error(
|
||
t('i18n-keys.json nicht gefunden. Bitte Frontend neu bauen oder Dev-Server starten.'),
|
||
);
|
||
}
|
||
const data = await res.json();
|
||
if (!Array.isArray(data)) {
|
||
throw new Error(t('Ungültiges i18n-keys.json'));
|
||
}
|
||
return data;
|
||
}, [t]);
|
||
|
||
// --- Actions with progress ------------------------------------------------
|
||
|
||
const _syncXx = async () => {
|
||
if (busyRef.current) return;
|
||
busyRef.current = true;
|
||
setError(null);
|
||
setProgress({ message: t('Basisset wird eingelesen…'), current: 0, total: 1 });
|
||
try {
|
||
const entries = await _fetchI18nEntriesFromBundle();
|
||
const res = await api.put('/api/i18n/sets/sync-xx', { entries });
|
||
const d = res.data || {};
|
||
const addedCount = d.added?.length ?? 0;
|
||
const removedCount = d.removed?.length ?? 0;
|
||
const entriesCount = d.entriesCount ?? 0;
|
||
setProgress({
|
||
message: t('Basisset synchronisiert: {added} neu, {removed} entfernt, {total} Einträge.', {
|
||
added: String(addedCount),
|
||
removed: String(removedCount),
|
||
total: String(entriesCount),
|
||
}),
|
||
current: 1,
|
||
total: 1,
|
||
done: true,
|
||
});
|
||
await _load();
|
||
await refreshAvailableLanguages();
|
||
await reloadLanguage();
|
||
} catch (e: any) {
|
||
const msg = e.response?.data?.detail || e.message;
|
||
setProgress({ message: t('Fehler beim Einlesen'), current: 0, total: 1, error: msg, done: true });
|
||
setError(msg);
|
||
} finally {
|
||
setTimeout(() => { setProgress(null); busyRef.current = false; }, 2500);
|
||
}
|
||
};
|
||
|
||
const _updateOne = async (code: string) => {
|
||
if (busyRef.current) return;
|
||
busyRef.current = true;
|
||
setError(null);
|
||
const label = rows.find((r) => r.id === code)?.label || code;
|
||
let keysCurrent: number | undefined;
|
||
let keysPending: number | undefined;
|
||
let keysMasterTotal: number | undefined;
|
||
try {
|
||
const dr = await api.get(`/api/i18n/sets/${encodeURIComponent(code)}/sync-diff`);
|
||
keysCurrent = dr.data?.currentEntryCount;
|
||
keysPending = dr.data?.addedCount;
|
||
keysMasterTotal = dr.data?.masterEntryCount;
|
||
} catch {
|
||
/* sync-diff optional */
|
||
}
|
||
setProgress({
|
||
message: t('Aktualisiere {lang}…', { lang: label }),
|
||
progressHeading: label,
|
||
current: 0,
|
||
total: 1,
|
||
keysCurrent,
|
||
keysPending,
|
||
keysMasterTotal,
|
||
});
|
||
try {
|
||
const putRes = await api.put(`/api/i18n/sets/${encodeURIComponent(code)}`);
|
||
const d = putRes.data || {};
|
||
const pendingAfterPut = Array.isArray(d.added) ? d.added.length : (keysPending ?? 0);
|
||
setProgress({
|
||
message: t('{lang} aktualisiert.', { lang: label }),
|
||
progressHeading: label,
|
||
current: 1,
|
||
total: 1,
|
||
done: true,
|
||
keysCurrent: typeof d.entriesCount === 'number' ? d.entriesCount : keysCurrent,
|
||
keysPending: pendingAfterPut,
|
||
keysMasterTotal,
|
||
keysTranslated: typeof d.translated === 'number' ? d.translated : undefined,
|
||
});
|
||
await _load();
|
||
await refreshAvailableLanguages();
|
||
await reloadLanguage();
|
||
} catch (e: any) {
|
||
const msg = e.response?.data?.detail || e.message;
|
||
setProgress({
|
||
message: t('Fehler bei {lang}', { lang: label }),
|
||
progressHeading: label,
|
||
current: 0,
|
||
total: 1,
|
||
error: msg,
|
||
done: true,
|
||
});
|
||
setError(msg);
|
||
} finally {
|
||
setTimeout(() => { setProgress(null); busyRef.current = false; }, 2000);
|
||
}
|
||
};
|
||
|
||
const _updateAll = async () => {
|
||
if (busyRef.current) return;
|
||
const ok = await confirm(t('Alle Sprachsets jetzt mit dem Basisset synchronisieren und per KI aktualisieren?'), {
|
||
confirmLabel: t('Alle aktualisieren'),
|
||
cancelLabel: t('Abbrechen'),
|
||
});
|
||
if (!ok) return;
|
||
|
||
busyRef.current = true;
|
||
setError(null);
|
||
|
||
const langCodes = rows.filter((r) => r.id !== 'xx').map((r) => r.id);
|
||
const totalSteps = 1 + langCodes.length;
|
||
let step = 0;
|
||
|
||
setProgress({ message: t('Basisset wird eingelesen…'), current: step, total: totalSteps });
|
||
|
||
try {
|
||
const entries = await _fetchI18nEntriesFromBundle();
|
||
await api.put('/api/i18n/sets/sync-xx', { entries });
|
||
step++;
|
||
setProgress({ message: t('Basisset synchronisiert.'), current: step, total: totalSteps });
|
||
} catch (e: any) {
|
||
const msg = e.response?.data?.detail || e.message;
|
||
setProgress({ message: t('Fehler beim Basisset'), current: step, total: totalSteps, error: msg, done: true });
|
||
setError(msg);
|
||
setTimeout(() => { setProgress(null); busyRef.current = false; }, 3000);
|
||
return;
|
||
}
|
||
|
||
const errors: string[] = [];
|
||
for (const code of langCodes) {
|
||
const label = rows.find((r) => r.id === code)?.label || code;
|
||
let keysCurrent: number | undefined;
|
||
let keysPending: number | undefined;
|
||
let keysMasterTotal: number | undefined;
|
||
try {
|
||
const dr = await api.get(`/api/i18n/sets/${encodeURIComponent(code)}/sync-diff`);
|
||
keysCurrent = dr.data?.currentEntryCount;
|
||
keysPending = dr.data?.addedCount;
|
||
keysMasterTotal = dr.data?.masterEntryCount;
|
||
} catch {
|
||
/* sync-diff optional */
|
||
}
|
||
setProgress({
|
||
message: t('Aktualisiere {lang}…', { lang: label }),
|
||
current: step + 1,
|
||
total: totalSteps,
|
||
keysCurrent,
|
||
keysPending,
|
||
keysMasterTotal,
|
||
});
|
||
try {
|
||
const putRes = await api.put(`/api/i18n/sets/${encodeURIComponent(code)}`);
|
||
const d = putRes.data || {};
|
||
const pendingAfterPut = Array.isArray(d.added) ? d.added.length : (keysPending ?? 0);
|
||
setProgress({
|
||
message: t('Aktualisiere {lang}…', { lang: label }),
|
||
progressHeading: label,
|
||
current: step + 1,
|
||
total: totalSteps,
|
||
keysCurrent: typeof d.entriesCount === 'number' ? d.entriesCount : keysCurrent,
|
||
keysPending: pendingAfterPut,
|
||
keysMasterTotal,
|
||
keysTranslated: typeof d.translated === 'number' ? d.translated : undefined,
|
||
});
|
||
} catch (e: any) {
|
||
errors.push(`${code}: ${e.response?.data?.detail || e.message}`);
|
||
}
|
||
step++;
|
||
}
|
||
|
||
if (errors.length > 0) {
|
||
const errMsg = errors.join('; ');
|
||
setProgress({
|
||
message: t('{ok} von {total} Sprachen aktualisiert.', { ok: String(langCodes.length - errors.length), total: String(langCodes.length) }),
|
||
current: step,
|
||
total: totalSteps,
|
||
error: errMsg,
|
||
done: true,
|
||
});
|
||
setError(errMsg);
|
||
} else {
|
||
setProgress({
|
||
message: t('Alle {count} Sprachen erfolgreich aktualisiert.', { count: String(langCodes.length) }),
|
||
current: totalSteps,
|
||
total: totalSteps,
|
||
done: true,
|
||
});
|
||
}
|
||
|
||
await _load();
|
||
await refreshAvailableLanguages();
|
||
await reloadLanguage();
|
||
setTimeout(() => { setProgress(null); busyRef.current = false; }, errors.length > 0 ? 5000 : 2500);
|
||
};
|
||
|
||
// --- Other actions (unchanged logic, but with busy guard) -----------------
|
||
|
||
const _delete = async (code: string) => {
|
||
if (busyRef.current) return;
|
||
if (code === 'xx') return;
|
||
const ok = await confirm(t('Sprachset {code} wirklich löschen?', { code }), {
|
||
confirmLabel: t('Löschen'),
|
||
cancelLabel: t('Abbrechen'),
|
||
variant: 'danger',
|
||
});
|
||
if (!ok) return;
|
||
try {
|
||
await api.delete(`/api/i18n/sets/${encodeURIComponent(code)}`);
|
||
await _load();
|
||
await refreshAvailableLanguages();
|
||
await reloadLanguage();
|
||
} catch (e: any) {
|
||
setError(e.response?.data?.detail || e.message);
|
||
}
|
||
};
|
||
|
||
const _download = async (code: string) => {
|
||
try {
|
||
const response = await api.get(`/api/i18n/sets/${encodeURIComponent(code)}/download`, {
|
||
responseType: 'blob',
|
||
});
|
||
const blob = new Blob([response.data], { type: 'application/json' });
|
||
const url = URL.createObjectURL(blob);
|
||
const a = document.createElement('a');
|
||
a.href = url;
|
||
a.download = `ui-language-${code}.json`;
|
||
document.body.appendChild(a);
|
||
a.click();
|
||
document.body.removeChild(a);
|
||
URL.revokeObjectURL(url);
|
||
} catch (e: any) {
|
||
setError(e.response?.data?.detail || e.message);
|
||
}
|
||
};
|
||
|
||
const _add = async () => {
|
||
if (busyRef.current) return;
|
||
const code = String(addCode).trim().toLowerCase();
|
||
if (!code) return;
|
||
const go = await confirm(
|
||
t('Die Erstellung einer neuen Sprache kann AI-Guthaben auf Ihrem Mandats-Pool belasten. Fortfahren?'),
|
||
{ confirmLabel: t('Fortfahren'), cancelLabel: t('Abbrechen') },
|
||
);
|
||
if (!go) return;
|
||
busyRef.current = true;
|
||
setProgress({ message: t('Sprache wird erstellt…'), current: 0, total: 1 });
|
||
try {
|
||
await api.post('/api/i18n/sets', { code });
|
||
setProgress({ message: t('Sprache erstellt. KI-Übersetzung läuft im Hintergrund.'), current: 1, total: 1, done: true });
|
||
await _load();
|
||
await refreshAvailableLanguages();
|
||
} catch (e: any) {
|
||
const msg = e.response?.data?.detail || e.message;
|
||
setProgress({ message: t('Fehler'), current: 0, total: 1, error: msg, done: true });
|
||
setError(msg);
|
||
} finally {
|
||
setTimeout(() => { setProgress(null); busyRef.current = false; }, 2500);
|
||
}
|
||
};
|
||
|
||
const _exportAll = async () => {
|
||
try {
|
||
const response = await api.get('/api/i18n/export', { responseType: 'blob' });
|
||
const blob = new Blob([response.data], { type: 'application/json' });
|
||
const url = URL.createObjectURL(blob);
|
||
const a = document.createElement('a');
|
||
a.href = url;
|
||
a.download = 'ui-languages-export.json';
|
||
document.body.appendChild(a);
|
||
a.click();
|
||
document.body.removeChild(a);
|
||
URL.revokeObjectURL(url);
|
||
} catch (e: any) {
|
||
setError(e.response?.data?.detail || e.message);
|
||
}
|
||
};
|
||
|
||
const _importFile = async () => {
|
||
if (busyRef.current) return;
|
||
const input = document.createElement('input');
|
||
input.type = 'file';
|
||
input.accept = '.json';
|
||
input.onchange = async () => {
|
||
const file = input.files?.[0];
|
||
if (!file) return;
|
||
const ok = await confirm(
|
||
t('Sprachdatenbank aus Datei importieren? Bestehende Sets werden überschrieben.'),
|
||
{ confirmLabel: t('Importieren'), cancelLabel: t('Abbrechen') },
|
||
);
|
||
if (!ok) return;
|
||
busyRef.current = true;
|
||
setProgress({ message: t('Importiere…'), current: 0, total: 1 });
|
||
try {
|
||
const formData = new FormData();
|
||
formData.append('file', file);
|
||
const res = await api.post('/api/i18n/import', formData, {
|
||
headers: { 'Content-Type': 'multipart/form-data' },
|
||
});
|
||
const d = res.data || {};
|
||
setError(null);
|
||
setProgress({
|
||
message: t('Import abgeschlossen: {created} erstellt, {updated} aktualisiert.', {
|
||
created: String(d.created?.length ?? 0),
|
||
updated: String(d.updated?.length ?? 0),
|
||
}),
|
||
current: 1,
|
||
total: 1,
|
||
done: true,
|
||
});
|
||
await _load();
|
||
await refreshAvailableLanguages();
|
||
await reloadLanguage();
|
||
} catch (e: any) {
|
||
const msg = e.response?.data?.detail || e.message;
|
||
setProgress({ message: t('Import fehlgeschlagen'), current: 0, total: 1, error: msg, done: true });
|
||
setError(msg);
|
||
} finally {
|
||
setTimeout(() => { setProgress(null); busyRef.current = false; }, 2500);
|
||
}
|
||
};
|
||
input.click();
|
||
};
|
||
|
||
const isBusy = progress !== null;
|
||
|
||
return (
|
||
<div className={`${styles.adminPage} ${styles.adminPageFill}`} style={{ gap: '1rem', position: 'relative' }}>
|
||
<header>
|
||
<h1 className={styles.pageTitle}>{t('UI-Sprachen')}</h1>
|
||
<p className={styles.pageSubtitle}>{t('Globale Sprachsets verwalten (SysAdmin).')}</p>
|
||
{error && !progress && (
|
||
<p style={{ color: 'var(--error-color, #c53030)' }}>
|
||
{error}
|
||
</p>
|
||
)}
|
||
</header>
|
||
|
||
<div style={{ display: 'flex', flexWrap: 'wrap', gap: '0.75rem', alignItems: 'center' }}>
|
||
<button type="button" className={styles.secondaryButton} onClick={_load} disabled={isBusy || loading} title={t('Daten neu laden')}>
|
||
<FaSync style={loading ? { animation: 'spin 1s linear infinite' } : undefined} />
|
||
</button>
|
||
<input
|
||
type="text"
|
||
value={search}
|
||
onChange={(e) => setSearch(e.target.value)}
|
||
placeholder={t('Suche…')}
|
||
style={{ padding: '0.35rem 0.5rem', minWidth: 140, maxWidth: 200 }}
|
||
/>
|
||
<button type="button" className={styles.primaryButton} onClick={_updateAll} disabled={isBusy}>
|
||
{t('Alle aktualisieren')}
|
||
</button>
|
||
<button type="button" className={styles.secondaryButton} onClick={_exportAll} disabled={isBusy}>
|
||
<FaFileExport /> {t('Export')}
|
||
</button>
|
||
<button type="button" className={styles.secondaryButton} onClick={_importFile} disabled={isBusy}>
|
||
<FaFileImport /> {t('Import')}
|
||
</button>
|
||
<span style={{ borderLeft: '1px solid var(--border-color)', height: '1.5rem' }} />
|
||
<span style={{ opacity: 0.7 }}>{t('Neue Sprache')}</span>
|
||
<select
|
||
value={addCode}
|
||
onChange={(e) => setAddCode(e.target.value)}
|
||
style={{ padding: '0.35rem 0.5rem' }}
|
||
disabled={isBusy}
|
||
>
|
||
{addChoices.map((c) => (
|
||
<option key={c.value} value={c.value}>
|
||
{c.label}
|
||
</option>
|
||
))}
|
||
</select>
|
||
<button type="button" className={styles.primaryButton} onClick={_add} disabled={addChoices.length === 0 || isBusy}>
|
||
{t('Hinzufügen')}
|
||
</button>
|
||
</div>
|
||
|
||
<div style={{ flex: 1, minHeight: 0, position: 'relative' }}>
|
||
<FormGeneratorTable
|
||
data={displayRows}
|
||
columns={_getColumns(t)}
|
||
loading={loading}
|
||
pagination={false}
|
||
selectable={false}
|
||
searchable={false}
|
||
customActions={[
|
||
{
|
||
id: 'sync-xx',
|
||
title: t('UI-Keys einlesen'),
|
||
icon: <FaSync />,
|
||
onClick: () => _syncXx(),
|
||
visible: (row: LangRow) => row.id === 'xx',
|
||
},
|
||
{
|
||
id: 'upd',
|
||
title: t('Aktualisieren'),
|
||
icon: <FaRedo />,
|
||
onClick: (row: LangRow) => _updateOne(row.id),
|
||
visible: (row: LangRow) => row.id !== 'xx',
|
||
},
|
||
{
|
||
id: 'dl',
|
||
title: t('Herunterladen'),
|
||
icon: <FaDownload />,
|
||
onClick: (row: LangRow) => _download(row.id),
|
||
},
|
||
{
|
||
id: 'del',
|
||
title: t('Löschen'),
|
||
icon: <FaTrash />,
|
||
onClick: (row: LangRow) => _delete(row.id),
|
||
visible: (row: LangRow) => row.id !== 'xx',
|
||
},
|
||
]}
|
||
emptyMessage={t('Keine Einträge')}
|
||
/>
|
||
|
||
{progress && <_ProgressOverlay progress={progress} />}
|
||
</div>
|
||
|
||
<ConfirmDialog />
|
||
</div>
|
||
);
|
||
};
|
||
|
||
export default AdminLanguagesPage;
|