No translatable content yet. Add questionnaires and questions in the editor first.
`;
return;
@@ -235,44 +366,97 @@ function renderEntryList() {
const sourceLabel = sourceLanguageLabel(languages);
const langLabel = targets.find(l => l.languageCode === selectedLang)?.name || selectedLang.toUpperCase();
-
- const missingCount = allEntries.filter(e => !translationFor(e, selectedLang).trim()).length;
- const pct = allEntries.length ? Math.round(((allEntries.length - missingCount) / allEntries.length) * 100) : 0;
+ const scopeEntries = entriesInScope();
+ const missingCount = countMissing(scopeEntries, selectedLang);
+ const pct = scopeEntries.length
+ ? Math.round(((scopeEntries.length - missingCount) / scopeEntries.length) * 100)
+ : 0;
const headerOnce = translationListHeaderHTML(langLabel, sourceLabel);
+ const useQnDetails = selectedScope === '__all__';
const sectionsHtml = sections.map(sec => {
- let entries = allEntries.slice(sec.startIdx, sec.startIdx + sec.entryCount);
- if (sec.isApp) {
- entries = entries.filter(e => e.type === 'app_string');
- }
+ const entries = sectionEntries(allEntries, sec);
const groups = buildTranslationGroups(entries, selectedLang, sec.startIdx);
- return `
-
-
${missingCount ? `${missingCount} missing · ` : ''}${allEntries.length} keys
-
-
- ${pct}% in ${esc(selectedLang.toUpperCase())}
-
+
+
+ ${missingCount ? `${missingCount} missing · ` : ''}${scopeEntries.length} in scope
+
+
+ ${pct}% in ${esc(selectedLang.toUpperCase())}
+
+
+
+ All changes saved
+
+
+
+
+ ${headerOnce}
+
${sectionsHtml}
`;
+ document.getElementById('transJumpMissingBtn')?.addEventListener('click', jumpToNextMissing);
+
bindEntryEditing(allEntries);
applyFilters();
}
+function openAncestors(el) {
+ let node = el;
+ while (node) {
+ if (node.tagName === 'DETAILS') node.open = true;
+ node = node.parentElement;
+ }
+}
+
+function jumpToNextMissing() {
+ const rows = [...document.querySelectorAll('#transGroupedRoot .trans-list-item')]
+ .filter(r => !r.classList.contains('trans-row-hidden') && r.dataset.missing === '1');
+ if (!rows.length) {
+ showToast(showMode === 'missing'
+ ? 'All translations in this scope are complete'
+ : 'No missing translations in view', 'info');
+ return;
+ }
+
+ const activeRow = document.activeElement?.closest?.('.trans-list-item');
+ let start = 0;
+ if (activeRow) {
+ const idx = rows.indexOf(activeRow);
+ if (idx >= 0) start = idx + 1;
+ }
+ const target = rows[start] || rows[0];
+ openAncestors(target);
+ const inp = target.querySelector('[data-field="translation"]');
+ inp?.focus({ preventScroll: false });
+ target.scrollIntoView({ behavior: 'smooth', block: 'center' });
+}
+
function bindEntryEditing(entries) {
document.querySelectorAll('#transGroupedRoot .trans-cell-input').forEach(inp => {
inp.addEventListener('input', () => {
@@ -303,11 +487,14 @@ function bindEntryEditing(entries) {
const timerKey = isGerman ? `${idx}_de` : `${idx}_${selectedLang}`;
clearTimeout(saveTimers[timerKey]);
saveTimers[timerKey] = setTimeout(() => saveTranslation(entry, inp, isGerman), 500);
+ setSaveStatus('saving');
});
});
}
async function saveTranslation(entry, inp, isGerman = false) {
+ savesInFlight++;
+ setSaveStatus('saving');
try {
await apiPut('translations.php', {
type: entry.type,
@@ -319,23 +506,48 @@ async function saveTranslation(entry, inp, isGerman = false) {
setTimeout(() => inp.classList.remove('save-flash'), 400);
updateProgress();
} catch (e) {
+ setSaveStatus('error');
showToast(e.message, 'error');
+ } finally {
+ savesInFlight = Math.max(0, savesInFlight - 1);
+ if (savesInFlight === 0) {
+ setSaveStatus('saved');
+ populateScopeSelect();
+ }
}
}
function updateProgress() {
- const missing = allEntries.filter(e => !translationFor(e, selectedLang).trim()).length;
- const pct = allEntries.length ? Math.round(((allEntries.length - missing) / allEntries.length) * 100) : 0;
+ const scopeEntries = entriesInScope();
+ const missing = countMissing(scopeEntries, selectedLang);
+ const pct = scopeEntries.length
+ ? Math.round(((scopeEntries.length - missing) / scopeEntries.length) * 100)
+ : 0;
const fill = document.querySelector('.trans-progress-fill');
if (fill) fill.style.width = `${pct}%`;
const label = document.querySelector('.trans-progress-label');
if (label) label.textContent = `${pct}% in ${selectedLang.toUpperCase()}`;
- const countEl = document.getElementById('transVisibleCount');
- if (countEl && !document.getElementById('transFilter')?.value && !document.getElementById('transTypeFilter')?.value) {
- countEl.textContent = `${missing ? `${missing} missing · ` : ''}${allEntries.length} keys`;
+ if (!document.getElementById('transFilter')?.value && !document.getElementById('transTypeFilter')?.value) {
+ updateVisibleCountSummary();
}
}
+function updateVisibleCountSummary(visible = null, visibleMissing = null) {
+ const countEl = document.getElementById('transVisibleCount');
+ if (!countEl) return;
+ const scopeEntries = entriesInScope();
+ const text = document.getElementById('transFilter')?.value || '';
+ const type = document.getElementById('transTypeFilter')?.value || '';
+ if (text || type || showMode !== 'missing') {
+ if (visible != null) {
+ countEl.textContent = `Showing ${visible}${visibleMissing ? ` (${visibleMissing} missing)` : ''}`;
+ }
+ return;
+ }
+ const missing = countMissing(scopeEntries, selectedLang);
+ countEl.textContent = `${missing ? `${missing} missing · ` : ''}${scopeEntries.length} in scope`;
+}
+
let filtersBound = false;
function bindFilters() {
@@ -364,8 +576,11 @@ function applyFilters() {
const german = row.querySelector('.trans-source-text')?.textContent?.toLowerCase()
|| row.querySelector('[data-field="german"]')?.value?.toLowerCase() || '';
const val = row.querySelector('[data-field="translation"]')?.value?.toLowerCase() || '';
- const show = (!type || rowType === type) &&
+ const isMissing = row.dataset.missing === '1';
+ let show = (!type || rowType === type) &&
(!text || key.includes(text) || label.includes(text) || german.includes(text) || val.includes(text));
+ if (showMode === 'missing' && !isMissing) show = false;
+ if (showMode === 'complete' && isMissing) show = false;
row.classList.toggle('trans-row-hidden', !show);
if (show) {
visible++;
@@ -373,26 +588,33 @@ function applyFilters() {
}
});
- document.querySelectorAll('#transGroupedRoot .trans-group').forEach(group => {
+ document.querySelectorAll('#transGroupedRoot .trans-group-details').forEach(group => {
const rows = group.querySelectorAll('.trans-list-item');
const anyVisible = [...rows].some(r => !r.classList.contains('trans-row-hidden'));
group.classList.toggle('trans-group-hidden', !anyVisible);
});
- document.querySelectorAll('#transGroupedRoot .trans-qn-block').forEach(block => {
+ document.querySelectorAll('#transGroupedRoot .trans-scope-block, #transGroupedRoot .trans-qn-section').forEach(block => {
const anyVisible = [...block.querySelectorAll('.trans-list-item')].some(r => !r.classList.contains('trans-row-hidden'));
block.classList.toggle('trans-qn-hidden', !anyVisible);
});
- const countEl = document.getElementById('transVisibleCount');
- if (countEl) {
- if (text || type) {
- countEl.textContent = `Showing ${visible} (${visibleMissing} missing)`;
- } else {
- const totalMissing = [...items].filter(r => r.dataset.missing === '1').length;
- countEl.textContent = `${totalMissing ? `${totalMissing} missing · ` : ''}${items.length} keys`;
+ const emptyEl = document.getElementById('transEmptyHint');
+ if (emptyEl) emptyEl.remove();
+ if (visible === 0 && items.length > 0) {
+ const root = document.getElementById('transGroupedRoot');
+ if (root) {
+ const hint = document.createElement('p');
+ hint.id = 'transEmptyHint';
+ hint.className = 'text-muted trans-hint trans-empty-hint';
+ hint.textContent = showMode === 'missing'
+ ? 'All translations in this scope are complete for the selected language.'
+ : 'No rows match the current filters.';
+ root.insertAdjacentElement('afterend', hint);
}
}
+
+ updateVisibleCountSummary(visible, visibleMissing);
}
function bindTranslationBundleActions() {
diff --git a/website/js/translations-helpers.js b/website/js/translations-helpers.js
index f3ed0d5..f97c860 100644
--- a/website/js/translations-helpers.js
+++ b/website/js/translations-helpers.js
@@ -49,6 +49,22 @@ export function translationFor(entry, lang) {
return normalizeTranslations(entry.translations)[lang] || '';
}
+export function isEntryMissing(entry, lang) {
+ return !translationFor(entry, lang).trim();
+}
+
+export function countMissing(entries, lang) {
+ return entries.filter(e => isEntryMissing(e, lang)).length;
+}
+
+export function sectionEntries(allEntries, section) {
+ let entries = allEntries.slice(section.startIdx, section.startIdx + section.entryCount);
+ if (section.isApp) {
+ entries = entries.filter(e => e.type === 'app_string');
+ }
+ return entries;
+}
+
export function targetLanguages(languages) {
return (languages || []).filter(l => l.languageCode !== SOURCE_LANG);
}
@@ -197,11 +213,11 @@ export function sourceLanguageLabel(languages) {
return row?.name ? `${row.name} (${SOURCE_LANG})` : 'German';
}
-/** Column headers: Key | main language (German) | target language */
+/** Column headers: label | main language (German) | target language */
export function translationListHeaderHTML(targetLangLabel, sourceLabel = 'German') {
return `
-