TD-5408 use type script to set url params

DigitalLearningSolutions.Web/Scripts/trackingSystem/tableaureports.ts

@@ -0,0 +1,31 @@
+async function setTableauParams(): Promise<void> {
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  const viz = document.getElementById('tableau-viz') as any;
+  const adminIdElement = document.getElementById('hf-adminid') as HTMLInputElement | null;
+  const emailElement = document.getElementById('hf-email') as HTMLInputElement | null;
+
+  if (!viz) {
+    // console.error('Tableau Viz element not found.');
+    return;
+  }
+
+  if (!adminIdElement || !emailElement) {
+    // console.error('Hidden input fields for adminid or email not found.');
+    return;
+  }
+
+  const adminId = adminIdElement.value;
+  const email = emailElement.value;
+
+  // Listen for the `firstinteractive` event from the Web Component
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  viz.addEventListener('firstinteractive', async (event: Event) => {
+    await viz.workbook.changeParameterValueAsync('adminid', adminId);
+    await viz.workbook.changeParameterValueAsync('email', email);
+  });
+}
+
+// Run the function after the page loads
+document.addEventListener('DOMContentLoaded', () => {
+  setTableauParams();
+});

DigitalLearningSolutions.Web/Views/TrackingSystem/Centre/SelfAssessmentReports/TableauCompetencyDashboard.cshtml

@@ -23,12 +23,13 @@
     <tableau-viz id='tableau-viz'
                  src='@srcUrl' token='@jwtToken' toolbar='bottom'>
         If the dashboard doesn't appear after a few seconds, <a href="#">reload the page</a>
-        <viz-parameter name="aid" value="@aid"></viz-parameter>
-        <viz-parameter name="email" value="@email"></viz-parameter>
     </tableau-viz>
+    <input type="hidden" id="hf-email" value="@email" />
+    <input type="hidden" id="hf-adminid" value="@aid" />
     @section scripts {
         @* We are not using Yarn/npm for the Tableau JS becaue of errors during installation relating to a missing dependency *@
         <script type="module" src="@tableauServerUrl/javascripts/api/tableau.embedding.3.latest.min.js"></script>
+        <script src="@Url.Content("~/js/trackingSystem/tableaureports.js")" asp-append-version="true"></script>
     }
 </feature>
 <feature name="@(FeatureFlags.TableauSelfAssessmentDashboards)" negate="true">