app/Livewire/ShowReports.php

@@ -14,6 +14,7 @@ class ShowReports extends Component
     public $datatableHeadersConfig;
     public $datatableButtonsConfig;
     public $datatableColumnDefsConfig;
+    public $title = "Test Report";
 
 
     public function mount($reportName)
@@ -38,7 +39,7 @@ class ShowReports extends Component
     public function render()
     {
 
-        return view('livewire.show-reports')->layout('components.layouts.reports');
+        return view('livewire.show-reports')->title($this->title)->layout('components.layouts.reports');
     }
 
 

resources/js/reports.js

@@ -28,6 +28,30 @@ function initializeDataTable() {
     var dataTablesButtonsConfig = JSON.parse(document.getElementById('datatable-config').dataset.datatableButtonsConfig);
     var dataTablesColumnDefsConfig = JSON.parse(document.getElementById('datatable-config').dataset.datatableColumnDefsConfig);
 
+    //Strip out HTML from headers when exporting
+    dataTablesButtonsConfig.forEach(function(buttonConfig){
+        buttonConfig.exportOptions = buttonConfig.exportOptions || {};
+        for(let key in buttonConfig)
+        {
+            if(key === "exportOptions")
+            {
+
+                buttonConfig.exportOptions.format = {
+                    header: function (data){
+                        const tempDiv = document.createElement('div');
+                        tempDiv.innerHTML = data;
+
+                        // Remove all <select> elements
+                        tempDiv.querySelectorAll('select').forEach(el => el.remove());
+
+                        return tempDiv.textContent.trim().replace(/\s+/g, ' ');
+
+                    }
+                }
+            }
+        }
+    })
+
 
     //Set up any action columns
     function doActionButton(url, id)
@@ -40,15 +64,13 @@ function initializeDataTable() {
     dataTableHeadersConfig.forEach(function (headerColumn, columnIndex){
         if(headerColumn.type === "action")
         {
-            console.log("tyson"+columnIndex);
             let actionButtons = dataTableColumnsConfig[columnIndex].actionButtons;
             let renderBody = '';
-            renderBody = `if (type === "display") {console.log(row);`;
+            renderBody = `if (type === "display"){`;
             renderBody += `return '`;
             actionButtons.forEach(function (actionButton){
             let buttonUrl = actionButton.buttonUrl;
             let parameters = actionButton.querystring_parameters;
-            console.log(parameters);
 
             renderBody +=  `<button class="action-button" onclick="doActionButton(`;
             renderBody += `\\'`+buttonUrl;
@@ -80,7 +102,6 @@ function initializeDataTable() {
             });
             renderBody += "'}return data;";
             renderFunctions[columnIndex] = new Function('data', 'type', 'row', 'meta', renderBody);
-            console.log(renderFunctions[columnIndex]);
             dataTableColumnsConfig[columnIndex].searchable = false;
             dataTableColumnsConfig[columnIndex].orderable = false;
             dataTableColumnsConfig[columnIndex].render = renderFunctions[columnIndex];
@@ -100,16 +121,12 @@ function initializeDataTable() {
             url: '/api/report-data/' + dataTableName,
             type: 'POST',
             dataSrc: function (json) {
-                //console.log('Returned data:', json);
                 //populate any dropdown headers
-                //console.log(dataTableHeadersConfig);
                 dataTableHeadersConfig.forEach(function(headerConfig, index){
 
                     if(headerConfig.searchtype == "dropdown")
                     {
-                        //console.log('Tyson here');
                         var dropdown = $('#'+headerConfig.header.replace(' ', '-')+'FilterDropdown');
-                        //console.log(dropdown);
                         dropdown.empty().append($('<option>',{
                             value: '',
                             text: '-- Not  Filtered  --'
@@ -119,7 +136,6 @@ function initializeDataTable() {
                             if(json.searchterms && json.searchterms[index]){
                                     Object.keys(searchTerms[index]).forEach(function (key){
                                         var searchValue = searchTerms[index][key]
-                                        console.log('value: '+searchValue)
                                         if(option === searchValue)
                                         {
                                             selected = true;
@@ -149,7 +165,6 @@ function initializeDataTable() {
 }
 document.addEventListener('livewire:init', function () {
 
-    console.log('Initializing DataTable');
 
 
 
@@ -182,7 +197,6 @@ function getFilterInput(searchTerm, index, searchType, extra){
             break;
     }
     searchTerms[index] =  inner;
-    console.log(searchTerms[index]);
     dataTableInstance.ajax.reload();
 
 
@@ -198,7 +212,7 @@ window.getFilterInput = getFilterInput;
 
 
 document.addEventListener('DOMContentLoaded', () => {
-    console.log("reports.js is working!");
+
 });
 
 

resources/views/MainView.blade.php

@@ -1,3 +1,3 @@
-<x-layouts.reports>
-    <livewire:show-reports :reportName="$reportName" />
+ <x-layouts.reports :title="$title">
+    <livewire:show-reports :reportName="$reportName" :title="$title"/>
 </x-layouts.reports>

resources/views/components/layouts/reports.blade.php

@@ -5,7 +5,7 @@
         <meta charset="utf-8">
         <meta name="viewport" content="width=device-width, initial-scale=1.0">
 
-        <title>{{ $title ?? 'Page Title' }}</title>
+        <title>{{ $title }}</title>
 
 
 

routes/web.php

@@ -2,12 +2,7 @@
 
 use Illuminate\Support\Facades\Route;
 
-Route::get('/reports/{report}', function ($report){
-        // Fetch the datatable name dynamically from the database (replace with your logic)
-        $reportName = DB::table('reports')->where('name', '=', $report)->value('name');
-        // Pass it to the view
-        return view('MainView', compact('reportName'));
 
-});
 Route::get('/login', \App\Livewire\Login::class);
 Route::view('/test-datatables', 'components.layouts/datatables');
+Route::get('/reports/{reportName}', App\Livewire\ShowReports::class);