Mateusz Gruszczyński
2 lines
6.3 KiB
JavaScript
2 lines
6.3 KiB
JavaScript
export const columnManagerSource = " function columnPrefsPayload(){\n return JSON.stringify({hidden:cleanColumnPrefsHidden(hiddenColumns), shown:cleanColumnPrefsHidden(DEFAULT_HIDDEN_COLUMNS).filter(key => !hiddenColumns.has(key)), mobile:mobileColumns, mobileSortFilters, mobileSmartFiltersEnabled, widths:columnWidths});\n }\n function parseTableColumnsPreference(value){\n if(!value) return {};\n if(typeof value === 'object') return value;\n try{ return JSON.parse(value); }catch(e){ return {}; }\n }\n function applyTableColumnsPreference(value){\n const prefs = parseTableColumnsPreference(value);\n const explicitlyShown = new Set(prefs.shown || []);\n hiddenColumns = new Set([...(prefs.hidden || []), ...[...DEFAULT_HIDDEN_COLUMNS].filter(key => !explicitlyShown.has(key))]);\n mobileColumns = normalizeMobileColumns(prefs.mobile || {});\n mobileSortFilters = normalizeMobileSortFilters(prefs.mobileSortFilters || {});\n mobileSmartFiltersEnabled = prefs.mobileSmartFiltersEnabled ?? true;\n columnWidths = normalizeColumnWidths(prefs.widths || {});\n saveBrowserViewPrefs({mobileColumns, mobileSortFilters, mobileSmartFiltersEnabled, columnWidths});\n }\n function renderColumnCards(defs, values, inputClass, dataAttr, icon){\n return defs.map(([key,label,hiddenByDefault])=>{\n const active = !!values[key];\n return `<label class=\"column-card form-check form-switch ${active?'active':''}\"><input class=\"form-check-input ${inputClass}\" type=\"checkbox\" ${dataAttr}=\"${esc(key)}\" ${active?'checked':''}><span class=\"form-check-label\"><i class=\"fa-solid ${icon}\"></i> ${esc(label)}</span></label>`;\n }).join('');\n }\n function renderMobileSortFilterCards(){\n return MOBILE_SORT_STEPS.map(step => {\n const id = mobileSortStepId(step);\n const active = !!mobileSortFilters[id];\n const direction = step.dir > 0 ? 'ascending' : 'descending';\n return `<label class=\"column-card form-check form-switch ${active?'active':''}\"><input class=\"form-check-input mobile-sort-filter-toggle\" type=\"checkbox\" data-mobile-sort-filter=\"${esc(id)}\" ${active?'checked':''}><span class=\"form-check-label\"><i class=\"fa-solid ${step.dir > 0 ? 'fa-arrow-up-wide-short' : 'fa-arrow-down-wide-short'}\"></i> ${esc(step.label)} ${esc(direction)}</span></label>`;\n }).join('');\n }\n function renderColumnManager(){\n const box=$('columnManager');\n if(!box) return;\n const desktopValues = Object.fromEntries(COLUMN_DEFS.map(([key])=>[key, !hiddenColumns.has(key)]));\n const desktop = renderColumnCards(COLUMN_DEFS, desktopValues, 'column-toggle', 'data-col-key', 'fa-table-columns');\n const mobile = renderColumnCards(MOBILE_COLUMN_DEFS, mobileColumns, 'mobile-column-toggle', 'data-mobile-col-key', 'fa-mobile-screen');\n const mobileSort = renderMobileSortFilterCards();\n const smart = `<label class=\"column-card form-check form-switch ${mobileSmartFiltersEnabled?'active':''}\"><input id=\"mobileSmartFiltersToggle\" class=\"form-check-input\" type=\"checkbox\" ${mobileSmartFiltersEnabled?'checked':''}><span class=\"form-check-label\"><i class=\"fa-solid fa-wand-magic-sparkles\"></i> Smart filters</span></label>`;\n box.innerHTML=`<div class=\"column-manager-tabs nav nav-pills\" role=\"tablist\"><button class=\"nav-link active\" data-bs-toggle=\"pill\" data-bs-target=\"#desktopColumnPane\" type=\"button\" role=\"tab\"><i class=\"fa-solid fa-desktop\"></i> Desktop</button><button class=\"nav-link\" data-bs-toggle=\"pill\" data-bs-target=\"#mobileColumnPane\" type=\"button\" role=\"tab\"><i class=\"fa-solid fa-mobile-screen\"></i> Mobile</button></div><div class=\"column-manager-pane tab-content\"><div id=\"desktopColumnPane\" class=\"tab-pane fade show active\" role=\"tabpanel\"><div class=\"column-grid\">${desktop}</div></div><div id=\"mobileColumnPane\" class=\"tab-pane fade\" role=\"tabpanel\"><section class=\"column-config-section\"><h6>Mobile columns</h6><div class=\"column-grid\">${mobile}</div></section><section class=\"column-config-section\"><h6>Mobile sort filters</h6><small class=\"text-muted\">Only enabled sort choices appear in the mobile Sort button. Defaults keep seeds, upload, download and progress descending.</small><div class=\"column-grid mt-2\">${mobileSort}</div></section><section class=\"column-config-section\"><h6>Mobile filter groups</h6><div class=\"column-grid\">${smart}</div></section></div></div>`;\n }\n $('saveColumnsBtn')?.addEventListener('click',async()=>{ document.querySelectorAll('.column-toggle').forEach(cb=>cb.checked?hiddenColumns.delete(cb.dataset.colKey):hiddenColumns.add(cb.dataset.colKey)); document.querySelectorAll('.mobile-column-toggle').forEach(cb=>mobileColumns[cb.dataset.mobileColKey]=cb.checked); document.querySelectorAll('.mobile-sort-filter-toggle').forEach(cb=>mobileSortFilters[cb.dataset.mobileSortFilter]=cb.checked); mobileSmartFiltersEnabled = $('mobileSmartFiltersToggle')?.checked ?? true; saveBrowserViewPrefs({mobileColumns, mobileSortFilters, mobileSmartFiltersEnabled, columnWidths}); applyColumnVisibility(); scheduleRender(true); await post('/api/preferences',{table_columns_json:columnPrefsPayload()}).catch(e=>toast(e.message,'danger')); toastMessage('toast.columnsSaved','success'); });\n $('resetColumnsBtn')?.addEventListener('click',async()=>{ hiddenColumns = new Set(DEFAULT_HIDDEN_COLUMNS); mobileColumns = normalizeMobileColumns(); mobileSortFilters = normalizeMobileSortFilters(); mobileSmartFiltersEnabled = true; columnWidths = normalizeColumnWidths(); saveBrowserViewPrefs({mobileColumns, mobileSortFilters, mobileSmartFiltersEnabled, columnWidths}); renderColumnManager(); applyColumnVisibility(); scheduleRender(true); await post('/api/preferences',{table_columns_json:columnPrefsPayload()}).catch(()=>{}); });\n $('recommendedColumnsBtn')?.addEventListener('click',async()=>{\n try{\n // Note: The recommended layout is applied by the backend and includes desktop, mobile and widths.\n const j = await post('/api/preferences/table-columns/recommended', {});\n applyTableColumnsPreference(j.preferences?.table_columns_json);\n renderColumnManager();\n applyColumnVisibility();\n scheduleRender(true);\n toastMessage('toast.recommendedColumnsApplied','success');\n }catch(e){\n toast(e.message,'danger');\n }\n });\n\n";
|