Add CSV export for Project BOM tables (#1442)

* add Export AS CSV button to the Project BOM Entry tab

* added Export as CSV translation

* add service file for BOM exporter

* added controller for handling exporting project BOM data as CSV file

* added tests for Export as CSV controller and exporter code

* remove hierarchical paths from being exported in CSV to match datatable format

* Fixed message id

* Use stimulus functions to refer to stimulus controller

---------

Co-authored-by: Jan Böhmer <mail@jan-boehmer.de>

assets/controllers/pages/project_bom_export_controller.js

@@ -0,0 +1,176 @@
+import { Controller } from '@hotwired/stimulus';
+
+export default class extends Controller {
+    static values = {
+        url: String,
+    };
+
+    async export(event) {
+        event.preventDefault();
+
+        const tableElement = this.element
+            .closest('#bom-tab-pane')
+            ?.querySelector('table');
+
+        if (!tableElement) {
+            throw new Error('Could not find the project BOM table.');
+        }
+
+        if (
+            typeof window.jQuery === 'undefined'
+            || !window.jQuery.fn.DataTable.isDataTable(tableElement)
+        ) {
+            throw new Error('The project BOM DataTable is not initialized.');
+        }
+
+        const dataTable = window.jQuery(tableElement).DataTable();
+        const ajaxParameters = dataTable.ajax.params();
+
+        const parameters = this.toSearchParameters(ajaxParameters);
+
+        /*
+         * Export the currently visible columns in their current display order.
+         * Exclude the picture column because it has no useful CSV value.
+         */
+        dataTable
+            .columns()
+            .every(function () {
+                /*
+                 * column.visible() returns DataTables' configured visibility.
+                 *
+                 * Responsive may hide a column visually and move it into a child
+                 * row, but it does not change this configured visibility state.
+                 */
+                if (!this.visible()) {
+                    return;
+                }
+
+                const index = this.index();
+                const settings = dataTable.settings()[0];
+                const columnSettings = settings.aoColumns[index];
+                const name = columnSettings.data;
+
+                /*
+                 * The picture column is not useful in CSV.
+                 */
+                if (!name || name === 'picture') {
+                    return;
+                }
+
+                const heading = this.header().textContent.trim();
+
+                parameters.append('exportColumns[]', name);
+                parameters.append(
+                    'exportLabels[]',
+                    heading || name
+                );
+            });
+
+        await this.downloadExport(parameters);
+    }
+
+    async downloadExport(parameters) {
+        const response = await fetch(this.urlValue, {
+            method: 'POST',
+            headers: {
+                'Content-Type': 'application/x-www-form-urlencoded;charset=UTF-8',
+                'X-Requested-With': 'XMLHttpRequest',
+            },
+            body: parameters.toString(),
+            credentials: 'same-origin',
+        });
+
+        if (!response.ok) {
+            const errorBody = await response.text();
+
+            console.error('BOM CSV export failed:', {
+                status: response.status,
+                statusText: response.statusText,
+                body: errorBody,
+            });
+
+            throw new Error(
+                `BOM CSV export failed with HTTP ${response.status}`
+            );
+        }
+
+        const blob = await response.blob();
+        const filename = this.getFilename(response)
+            ?? 'project_bom.csv';
+
+        const downloadUrl = URL.createObjectURL(blob);
+        const link = document.createElement('a');
+
+        link.href = downloadUrl;
+        link.download = filename;
+        link.style.display = 'none';
+
+        document.body.appendChild(link);
+        link.click();
+        link.remove();
+
+        URL.revokeObjectURL(downloadUrl);
+    }
+
+    getFilename(response) {
+        const disposition = response.headers.get('Content-Disposition');
+
+        if (!disposition) {
+            return null;
+        }
+
+        /*
+         * Prefer RFC 5987 filename*=UTF-8''... when present.
+         */
+        const encodedMatch = disposition.match(
+            /filename\*=UTF-8''([^;]+)/i
+        );
+
+        if (encodedMatch) {
+            return decodeURIComponent(encodedMatch[1]);
+        }
+
+        const filenameMatch = disposition.match(
+            /filename="?([^";]+)"?/i
+        );
+
+        return filenameMatch ? filenameMatch[1] : null;
+    }
+
+    /**
+     * Convert DataTables' nested AJAX object into query-string parameters.
+     */
+    toSearchParameters(object) {
+        const parameters = new URLSearchParams();
+
+        const append = (key, value) => {
+            if (Array.isArray(value)) {
+                value.forEach((item, index) => {
+                    append(`${key}[${index}]`, item);
+                });
+
+                return;
+            }
+
+            if (value !== null && typeof value === 'object') {
+                Object.entries(value).forEach(([childKey, childValue]) => {
+                    const fullKey = key
+                        ? `${key}[${childKey}]`
+                        : childKey;
+
+                    append(fullKey, childValue);
+                });
+
+                return;
+            }
+
+            parameters.append(key, String(value ?? ''));
+        };
+
+        Object.entries(object).forEach(([key, value]) => {
+            append(key, value);
+        });
+
+        return parameters;
+    }
+}