task(CAD-9): bill of materials - buildBOM grouping by type+size with counts and total truss meters (corners count both arms), CSV export excel-friendly, dialog with table and download button

2026-08-31 22:36:21 +02:00
parent 748ba01083
commit 4398c675e4
4 changed files with 469 additions and 0 deletions
@@ -0,0 +1,92 @@
+/**
+ * Task CAD-9 – Stuecklisten-Dialog fuer Traversen-Systeme.
+ *
+ * Zeigt die gruppierte Stueckliste (Traversen + Eck-Traversen)
+ * als Tabelle mit Summenzeile; CSV-Download als Datei.
+ */
+import React, { useMemo } from 'react';
+import { buildBOM, exportBOMCsv } from '../services/bomService';
+
+interface BOMDialogProps {
+  elements: import('../types/cad.types').CADElement[];
+  onClose: () => void;
+}
+
+const BOMDialog: React.FC<BOMDialogProps> = ({ elements, onClose }) => {
+  const bom = useMemo(() => buildBOM(elements), [elements]);
+
+  const handleDownload = () => {
+    const csv = exportBOMCsv(bom);
+    const blob = new Blob(['\ufeff' + csv], { type: 'text/csv;charset=utf-8' });
+    const url = URL.createObjectURL(blob);
+    const a = document.createElement('a');
+    a.href = url;
+    a.download = `stueckliste-traversen-${new Date().toISOString().slice(0, 10)}.csv`;
+    a.click();
+    URL.revokeObjectURL(url);
+  };
+
+  return (
+    <div className="bom-dialog-overlay" onClick={onClose}>
+      <div className="bom-dialog" onClick={(e) => e.stopPropagation()}>
+        <div className="bom-dialog-header">
+          <h3>Stückliste – Traversen</h3>
+          <button className="bom-close" onClick={onClose} title="Schließen">✕
+          </button>
+        </div>
+        {bom.rows.length === 0 ? (
+          <div className="bom-empty">
+            Keine Traversen oder Eck-Traversen in der Zeichnung gefunden.
+            <br />
+            Platziere zuerst Traversen mit dem Traverse- oder Eck-Traverse-Werkzeug.
+          </div>
+        ) : (
+          <>
+            <table className="bom-table">
+              <thead>
+                <tr>
+                  <th>Pos</th>
+                  <th>Typ</th>
+                  <th>Länge (cm)</th>
+                  <th>Breite (cm)</th>
+                  <th>Anzahl</th>
+                  <th>Gesamt</th>
+                </tr>
+              </thead>
+              <tbody>
+                {bom.rows.map((r) => (
+                  <tr key={`${r.pos}-${r.label}`}>
+                    <td>{r.pos}</td>
+                    <td>{r.type}</td>
+                    <td>{r.length}</td>
+                    <td>{r.width}</td>
+                    <td>{r.count}</td>
+                    <td>{(r.totalCm / 100).toFixed(2)} m</td>
+                  </tr>
+                ))}
+                <tr className="bom-sum-row">
+                  <td colSpan={5}>
+                    <strong>SUMME</strong>
+                  </td>
+                  <td>
+                    <strong>{bom.totalLengthM.toFixed(2)} m</strong>
+                  </td>
+                </tr>
+              </tbody>
+            </table>
+            <div className="bom-dialog-actions">
+              <button className="bom-btn-primary" onClick={handleDownload}>
+                CSV herunterladen
+              </button>
+              <button className="bom-btn-secondary" onClick={onClose}>
+                Schließen
+              </button>
+            </div>
+          </>
+        )}
+      </div>
+    </div>
+  );
+};
+
+export default BOMDialog;