style / tools optis & new tools calculator

website/src/features/toolboxes/modules/CalculatorModule.jsx

@@ -0,0 +1,243 @@
+import { useLayoutEffect, useMemo, useRef, useState } from "react";
+import { Icon } from "../../../components/Icon.jsx";
+
+function calculateExpression(expression) {
+  const normalized = String(expression || "").replaceAll(",", ".").trim();
+  if (!normalized || !/^[\d\s+\-*/().]+$/.test(normalized)) return null;
+
+  try {
+    const value = Function(`"use strict"; return (${normalized})`)();
+    return Number.isFinite(value) ? value : null;
+  } catch {
+    return null;
+  }
+}
+
+function formatResult(value) {
+  if (!Number.isFinite(value)) return "";
+  return Number.parseFloat(value.toFixed(6)).toString();
+}
+
+function getChildren(entries, parentId) {
+  return entries.filter((entry) => (entry.parentId || "") === parentId);
+}
+
+function getDescendantIds(entries, parentId) {
+  const children = getChildren(entries, parentId);
+  return children.flatMap((child) => [child.id, ...getDescendantIds(entries, child.id)]);
+}
+
+function getEntriesInTreeOrder(entries, parentId = "") {
+  return getChildren(entries, parentId).flatMap((entry) => [entry, ...getEntriesInTreeOrder(entries, entry.id)]);
+}
+
+export function CalculatorModule({ toolboxId, moduleId, context }) {
+  const data = context.normalizeCalculatorData(context.getModuleData(toolboxId, moduleId, { entries: [] }));
+  const textContent = context.moduleText?.calculator || {};
+  const [expression, setExpression] = useState("");
+  const [label, setLabel] = useState("");
+  const [activeParentId, setActiveParentId] = useState("");
+  const [calculatorHeight, setCalculatorHeight] = useState(0);
+  const [copied, setCopied] = useState(false);
+  const calculatorCardRef = useRef(null);
+  const result = useMemo(() => calculateExpression(expression), [expression]);
+  const activeParent = data.entries.find((entry) => entry.id === activeParentId);
+
+  useLayoutEffect(() => {
+    const element = calculatorCardRef.current;
+    if (!element) return undefined;
+
+    function updateHeight() {
+      setCalculatorHeight(Math.ceil(element.getBoundingClientRect().height));
+    }
+
+    updateHeight();
+    const observer = new ResizeObserver(updateHeight);
+    observer.observe(element);
+    return () => observer.disconnect();
+  }, []);
+
+  function save(entries) {
+    context.setModuleData(toolboxId, moduleId, { ...data, entries });
+  }
+
+  function setScrollResults(scrollResults) {
+    context.setModuleData(toolboxId, moduleId, { ...data, scrollResults });
+  }
+
+  function saveResult(event) {
+    event.preventDefault();
+    if (result == null) return;
+    const cleanLabel = label.trim();
+
+    save([
+      ...data.entries,
+      {
+        id: context.uid("calc"),
+        parentId: activeParentId,
+        label: cleanLabel,
+        value: result
+      }
+    ]);
+    setExpression("");
+    setLabel("");
+  }
+
+  function useEntry(entry) {
+    setExpression(formatResult(entry.value));
+    setActiveParentId(entry.id);
+  }
+
+  function deleteEntry(entryId) {
+    const deletedIds = new Set([entryId, ...getDescendantIds(data.entries, entryId)]);
+    if (deletedIds.has(activeParentId)) setActiveParentId("");
+    save(data.entries.filter((entry) => !deletedIds.has(entry.id)));
+  }
+
+  function renameEntry(entryId, label) {
+    const cleanLabel = label.trim();
+    save(data.entries.map((entry) => entry.id === entryId ? { ...entry, label: cleanLabel } : entry));
+  }
+
+  function resetCalculator() {
+    setExpression("");
+    setLabel("");
+    setActiveParentId("");
+  }
+
+  async function copyChecklistImport() {
+    const text = getEntriesInTreeOrder(data.entries)
+      .map((entry) => `${entry.label || formatResult(entry.value)}:${formatResult(entry.value)}`)
+      .join("\n");
+    if (!text || !await context.copyText(text)) return;
+    setCopied(true);
+    window.setTimeout(() => setCopied(false), 1400);
+  }
+
+  return (
+    <div className="calculator-module">
+      <form className="calculator-form" onSubmit={saveResult}>
+        <div className="calculator-card" ref={calculatorCardRef}>
+          <label>
+            <span>Calcul</span>
+            <input value={expression} onChange={(event) => setExpression(event.target.value)} placeholder={textContent.expressionPlaceholder || "10*10"} inputMode="decimal" />
+          </label>
+          <div className="calculator-result" aria-live="polite">
+            <span>Résultat</span>
+            <strong>{result == null ? "-" : formatResult(result)}</strong>
+          </div>
+          <label>
+            <span>Libellé</span>
+            <input value={label} onChange={(event) => setLabel(event.target.value)} placeholder={textContent.labelPlaceholder || "Lingots de fer"} />
+          </label>
+          <button className="primary" disabled={result == null}>Enregistrer</button>
+        </div>
+      </form>
+      <div
+        className={`calculator-saved ${data.scrollResults ? "is-scrollable" : ""}`}
+        style={data.scrollResults && calculatorHeight ? { "--calculator-scroll-height": `${calculatorHeight}px` } : undefined}
+      >
+        <div className="calculator-result-actions">
+          {activeParent && (
+            <button className="calculator-root-button" type="button" onClick={() => setActiveParentId("")}>
+              Revenir à la racine
+            </button>
+          )}
+          <button className="calculator-action-button danger" type="button" onClick={resetCalculator} aria-label="Réinitialiser le calculateur" title="Réinitialiser">
+            <Icon name="rubber" />
+          </button>
+          <button className="calculator-action-button" type="button" onClick={copyChecklistImport} disabled={!data.entries.length} aria-label="Copier pour checklist" title={copied ? "Copié" : "Copier pour checklist"}>
+            <Icon name="copy" />
+          </button>
+          <button
+            className={`calculator-scroll-toggle ${data.scrollResults ? "active" : ""}`}
+            type="button"
+            onClick={() => setScrollResults(!data.scrollResults)}
+            aria-pressed={data.scrollResults}
+            title={textContent.scrollableTitle || "Liste scrollable"}
+            aria-label={textContent.scrollableTitle || "Liste scrollable"}
+          >
+            <Icon name="scrollable" />
+            <i aria-hidden="true" />
+          </button>
+        </div>
+        <div className={`calculator-tree ${data.scrollResults ? "is-scrollable legacy-scrollbar" : ""}`}>
+          {data.entries.length ? (
+            <CalculatorEntries entries={data.entries} parentId="" activeParentId={activeParentId} onUse={useEntry} onRename={renameEntry} onDelete={deleteEntry} />
+          ) : (
+            <p className="muted">Aucun résultat enregistré.</p>
+          )}
+        </div>
+      </div>
+    </div>
+  );
+}
+
+function CalculatorEntries({ entries, parentId, activeParentId, onUse, onRename, onDelete }) {
+  const children = getChildren(entries, parentId);
+  const [editingId, setEditingId] = useState("");
+  if (!children.length) return null;
+
+  return (
+    <ul className="calculator-entry-list">
+      {children.map((entry) => (
+        <li className={`${entry.id === activeParentId ? "active" : ""} ${entry.id === editingId ? "is-editing" : ""}`} key={entry.id}>
+          <div className="calculator-entry">
+            {entry.id === editingId ? (
+              <>
+                <span className="calculator-entry-value is-readonly" title="Quantité non modifiable">
+                  <strong>{formatResult(entry.value)}</strong>
+                </span>
+                <EditableCalculatorLabel entry={entry} onRename={onRename} onDone={() => setEditingId("")} />
+              </>
+            ) : (
+              <button className="calculator-entry-summary" type="button" onClick={() => onUse(entry)} title="Utiliser comme base">
+                <span><strong>{formatResult(entry.value)}</strong> {entry.label}</span>
+              </button>
+            )}
+            <button type="button" onClick={() => setEditingId(entry.id === editingId ? "" : entry.id)} aria-label={`Renommer ${entry.label}`} title="Renommer">
+              <Icon name="edit" />
+            </button>
+            <button type="button" className="danger" onClick={() => onDelete(entry.id)} aria-label={`Supprimer ${entry.label}`} title="Supprimer">
+              <Icon name="trash" />
+            </button>
+          </div>
+          <CalculatorEntries entries={entries} parentId={entry.id} activeParentId={activeParentId} onUse={onUse} onRename={onRename} onDelete={onDelete} />
+        </li>
+      ))}
+    </ul>
+  );
+}
+
+function EditableCalculatorLabel({ entry, onRename, onDone }) {
+  const [label, setLabel] = useState(entry.label);
+  const inputRef = useRef(null);
+
+  useLayoutEffect(() => {
+    inputRef.current?.focus();
+  }, [entry.id]);
+
+  function saveLabel() {
+    const cleanLabel = label.trim();
+    if (cleanLabel !== entry.label) onRename(entry.id, cleanLabel);
+    onDone();
+  }
+
+  return (
+    <input
+      ref={inputRef}
+      className="calculator-entry-label"
+      value={label}
+      onChange={(event) => setLabel(event.target.value)}
+      onBlur={saveLabel}
+      onKeyDown={(event) => {
+        if (event.key === "Enter") event.currentTarget.blur();
+        if (event.key === "Escape") {
+          setLabel(entry.label);
+          onDone();
+        }
+      }}
+      aria-label={`Renommer ${entry.label}`}
+    />
+  );
+}