diff --git a/src/js/components/filters.js b/src/js/components/filters.js index b0055659..e9694227 100644 --- a/src/js/components/filters.js +++ b/src/js/components/filters.js @@ -73,7 +73,8 @@ class Filters { // url.hash = '#report-content'; /* Update the url */ - location.href = url; + const styledUrl = url.href.replaceAll('%2C', ','); + location.href = styledUrl; } /* Update the list of technologies */ diff --git a/src/js/techreport/tableLinked.js b/src/js/techreport/tableLinked.js index fd2b792c..fb568626 100644 --- a/src/js/techreport/tableLinked.js +++ b/src/js/techreport/tableLinked.js @@ -9,11 +9,11 @@ class TableLinked { this.submetric = ''; // TODO: Fetch the default one from somewhere this.data = data; this.dataArray = []; - this.selectedTechs = this.getTechsFromURL()?.split(',') || []; + this.selectedTechs = DataUtils.getTechsFromURL()?.split(',') || []; this.rows = filters.rows || 10; this.updateContent(); - this.updateSelectionText(this.getTechsFromURL()); + this.updateSelectionText(DataUtils.getTechsFromURL()); const rowCount = document.getElementById('rowsPerPage'); rowCount?.addEventListener('change', (e) => this.updateRowsPerPage(e)); @@ -35,8 +35,6 @@ class TableLinked { this.dataArray = this.dataArray.filter(row => row.length > 0); - console.log('set content', content, this.dataArray); - const isContent = content?.length > 0 || this.dataArray?.length > 0; if(tbody && isContent) { @@ -159,11 +157,6 @@ class TableLinked { } } - getTechsFromURL() { - const url = new URL(window.location); - return url.searchParams.get('selected') || null; - } - addColumnCheckbox(app) { const cell = document.createElement('td'); const formattedApp = DataUtils.formatAppName(app); @@ -192,7 +185,7 @@ class TableLinked { // Set selected content isTechSelected(app) { - const urlSelected = this.getTechsFromURL(); + const urlSelected = DataUtils.getTechsFromURL(); return urlSelected?.includes(app) || false; } @@ -243,7 +236,8 @@ class TableLinked { updateURL(param, value) { const url = new URL(window.location); url.searchParams.set(param, value); - window.history.replaceState(null, null, url); + const styledUrl = url.href.replaceAll('%2C', ','); + window.history.replaceState(null, null, styledUrl); } updateSelectionText(allSelectedApps) { diff --git a/src/js/techreport/utils/data.js b/src/js/techreport/utils/data.js index 2b064e5f..3f819262 100644 --- a/src/js/techreport/utils/data.js +++ b/src/js/techreport/utils/data.js @@ -139,10 +139,12 @@ const fetchCategoryData = (rows, filters, callback) => { const lastTechNr = pageNr * rows; const paginatedTechs = category?.technologies?.slice(firstTechNr, lastTechNr); - const technologyFormatted = encodeURI(paginatedTechs?.join('%2C')); + const techsFromUrl = getTechsFromURL(); + const technologyFormatted = paginatedTechs?.join(','); + const technologyUrl = encodeURI(techsFromUrl || technologyFormatted); const compare = document.querySelector('[data-name="selected-apps"]'); - compare.setAttribute('href', `/reports/techreport/tech?tech=${technologyFormatted}`); + compare.setAttribute('href', `/reports/techreport/tech?tech=${technologyUrl}`); let allResults = {}; paginatedTechs.forEach(tech => allResults[tech] = []); @@ -194,6 +196,11 @@ const fetchCategoryData = (rows, filters, callback) => { }); } +const getTechsFromURL = () => { + const url = new URL(window.location); + return url.searchParams.get('selected') || null; +} + export const DataUtils = { parseVitalsData, parseLighthouseData, @@ -203,4 +210,5 @@ export const DataUtils = { getLighthouseScoreCategories, formatAppName, fetchCategoryData, + getTechsFromURL, };