bruno
c5c225a68e
L'editeur lisait les styles mais ne les ecrivait pas, exportait la feuille entiere et laissait le dernier-ecrivain gagner entre processus. - A8 : bouton Mise en forme (gras/italique/souligne, alignements, couleurs via selecteur natif, formats de nombre, fusion, volets figes, largeur/hauteur) et nouvelle route PUT .../xlsx/style (verrou, backup, swap atomique, garde de perte, If-Match) ; A9 : decision "pas de moteur de formule" annoncee dans l'UI ; A10 : undo/redo unifie, piles par fichier conservees au re-rendu - A11 : export de la selection + Markdown/HTML/impression et recherche sur toutes les feuilles ; A12 : concurrence optimiste (If-Match -> 409 reparable, retry qui relit) ; A13 : cache des metadonnees par (chemin, mtime, taille) - A14 : outils IA .xlsm/.csv + search_workbook, analyze_range, edit_xlsx_structure - tests : test_xlsx_styles.py (17), test_spreadsheet_tools.py (34), TestOptimisticConcurrency/TestMetaCache, JSDOM xlsx-viewer 107/107
90 lines
5.1 KiB
JavaScript
90 lines
5.1 KiB
JavaScript
/* ObsiGate — XLSX command bar builder (#154-A5).
|
|
*
|
|
* Pure string builder for the spreadsheet shell (sheet tabs + grouped action
|
|
* buttons + status pills). Extracted from frontend/js/viewer.js so the markup
|
|
* is testable and the viewer only wires behaviour.
|
|
*/
|
|
import { t } from '../i18n.js';
|
|
import { escapeHtml } from '../utils.js';
|
|
|
|
/**
|
|
* @param {object} ctx
|
|
* @param {Array<{name: string}>} ctx.sheets
|
|
* @param {boolean} ctx.isCsv
|
|
* @param {boolean} ctx.readOnly
|
|
* @param {boolean} ctx.editable - not a CSV and not read-only
|
|
* @returns {{ tabs: string, actionsHtml: string, statusBar: string }}
|
|
*/
|
|
export function buildCommandBar({ sheets, isCsv, readOnly, editable }) {
|
|
// Sheet tabs are always rendered (even for a single sheet) so the strip reads
|
|
// as a real affordance; an editable workbook gets an explicit “+” button.
|
|
const tabs = isCsv
|
|
? ""
|
|
: `<div class="xlsx-tabs" role="tablist">${sheets.map((s, i) =>
|
|
`<button class="xlsx-tab${i === 0 ? " active" : ""}" data-sheet="${i}" role="tab" aria-selected="${i === 0}">${escapeHtml(s.name)}</button>`
|
|
).join("")}${editable
|
|
? `<button class="xlsx-tab-add" id="xlsx-tab-add" type="button" title="${escapeHtml(t("xlsx.tabs_add_sheet"))}" aria-label="${escapeHtml(t("xlsx.tabs_add_sheet"))}">+</button>`
|
|
: ""}</div>`;
|
|
|
|
// Status pills make the viewer's limits visible up front.
|
|
const statusPills = [
|
|
readOnly
|
|
? `<span class="xlsx-status-pill xlsx-status-readonly" title="${escapeHtml(t("xlsx.readonly_hint"))}"><i data-lucide="lock" class="xlsx-status-icon"></i>${escapeHtml(t("xlsx.readonly_badge"))}</span>`
|
|
: "",
|
|
!isCsv
|
|
? `<span class="xlsx-status-pill xlsx-status-formula" title="${escapeHtml(t("xlsx.formulas_note_title"))}"><i data-lucide="sigma" class="xlsx-status-icon"></i>${escapeHtml(t("xlsx.formulas_note"))}</span>`
|
|
: "",
|
|
].filter(Boolean).join("");
|
|
const statusBar = statusPills ? `<div class="xlsx-status-bar">${statusPills}</div>` : "";
|
|
|
|
// Command groups, separated by thin rules.
|
|
const actionGroups = [];
|
|
if (!readOnly) {
|
|
actionGroups.push(`<span class="xlsx-cmd-group" data-group="history">
|
|
<button class="btn-action" id="xlsx-undo-btn" type="button" title="${escapeHtml(t("xlsx.undo"))}" disabled>
|
|
<i data-lucide="undo-2" style="width:14px;height:14px"></i>
|
|
</button>
|
|
<button class="btn-action" id="xlsx-redo-btn" type="button" title="${escapeHtml(t("xlsx.redo"))}" disabled>
|
|
<i data-lucide="redo-2" style="width:14px;height:14px"></i>
|
|
</button>
|
|
</span>`);
|
|
actionGroups.push(`<span class="xlsx-cmd-group" data-group="formulas">
|
|
<button class="btn-action xlsx-formula-toggle" id="xlsx-formula-btn" type="button"
|
|
aria-pressed="false" title="${escapeHtml(t("xlsx.formula_toggle_title"))}">f(x)</button>
|
|
</span>`);
|
|
}
|
|
if (editable) {
|
|
actionGroups.push(`<span class="xlsx-cmd-group" data-group="insert">
|
|
<button class="btn-action" id="xlsx-format-btn" title="${escapeHtml(t("xlsx.format_btn"))}">
|
|
<i data-lucide="paintbrush" style="width:14px;height:14px"></i>
|
|
</button>
|
|
<button class="btn-action" id="xlsx-structure-btn" title="${escapeHtml(t("xlsx.structure_btn"))}">
|
|
<i data-lucide="table-properties" style="width:14px;height:14px"></i>
|
|
</button>
|
|
</span>`);
|
|
actionGroups.push(`<span class="xlsx-cmd-group" id="xlsx-view-group" data-group="view"></span>`);
|
|
}
|
|
actionGroups.push(`<span class="xlsx-cmd-group" data-group="file">
|
|
<button class="btn-action" id="xlsx-download-btn">
|
|
<i data-lucide="download" style="width:14px;height:14px"></i> ${t("viewer.download")}
|
|
</button>
|
|
<button class="btn-action" id="xlsx-csv-btn" title="${escapeHtml(t("xlsx.csv_export"))}">
|
|
<i data-lucide="file-spreadsheet" style="width:14px;height:14px"></i> CSV
|
|
</button>
|
|
<span class="export-dropdown xlsx-export-dropdown">
|
|
<button class="btn-action" id="xlsx-export-btn" type="button" title="${escapeHtml(t("xlsx.export_title"))}">
|
|
<i data-lucide="file-down" style="width:14px;height:14px"></i> ${escapeHtml(t("xlsx.export_btn"))}
|
|
</button>
|
|
<div class="export-menu xlsx-export-menu" id="xlsx-export-menu" style="display:none">
|
|
<button class="export-menu-item" type="button" data-xlsx-export="md">${escapeHtml(t("xlsx.export_md"))}</button>
|
|
<button class="export-menu-item" type="button" data-xlsx-export="html">${escapeHtml(t("xlsx.export_html"))}</button>
|
|
<button class="export-menu-item" type="button" data-xlsx-export="print">${escapeHtml(t("xlsx.print"))}</button>
|
|
</div>
|
|
</span>
|
|
<button class="btn-action xlsx-save-primary" id="xlsx-save-btn" disabled>${t("common.save")}</button>
|
|
</span>`);
|
|
const actionsHtml = actionGroups.join('<span class="xlsx-cmd-sep" aria-hidden="true"></span>');
|
|
|
|
return { tabs, actionsHtml, statusBar };
|
|
}
|