Widget: DCTList: Difference between revisions
From LINKS Community Center
Eschmidt (talk | contribs) No edit summary |
Eschmidt (talk | contribs) No edit summary |
||
| Line 104: | Line 104: | ||
/** | /** | ||
* @param {DCT} dct | * @param {DCT} dct | ||
* @param {DCT} filterState | * @param {Partial<DCT>} filterState | ||
*/ | */ | ||
function dctFilter(dct, filterState) { | function dctFilter(dct, filterState) { | ||
return dct.dataSources.some(source => filterState.dataSources.includes(source)); | // if the property is empty, don't apply the filter (return true) | ||
const sourcesCheck = filterState.dataSources | |||
? dct.dataSources.some(source => filterState.dataSources.includes(source)) | |||
: true; | |||
return sourcesCheck; | |||
} | } | ||
function | function applyFilters() { | ||
if (!table) return; | if (!table) return; | ||
const selectedSources = Array.from( | /** @type {Partial<DCT>} */ | ||
const filterState = {}; | |||
table.setFilter(dctFilter, | // Build filter from the current filter form state | ||
// Alternative: keep a copy and update | |||
const selectedSources = Array.from(document.querySelectorAll('#data-source-filter input[type="checkbox"]:checked')).map(checkbox => checkbox.value); | |||
filterState.dataSources = selectedSources; | |||
table.setFilter(dctFilter, filterState); | |||
} | } | ||
| Line 167: | Line 177: | ||
tabulator.on('dataFiltered', (filters, rows) => { | tabulator.on('dataFiltered', (filters, rows) => { | ||
console.log(filters) | console.log(filters) | ||
}); | }); | ||
document.getElementById('data-source-filter').addEventListener('change', event => { | document.getElementById('data-source-filter').addEventListener('change', event => { | ||
applyFilters(); | |||
}, { passive: true }); | }, { passive: true }); | ||
}); | }); | ||
function | function selectAllSources() { | ||
document.querySelectorAll('#data-source-filter input[type="checkbox"]').forEach( | document.querySelectorAll('#data-source-filter input[type="checkbox"]').forEach(checkbox => checkbox.checked = true); | ||
applyFilters(); | |||
} | } | ||
function | function deselectAllSources() { | ||
document.querySelectorAll('#data-source-filter input[type="checkbox"]').forEach( | document.querySelectorAll('#data-source-filter input[type="checkbox"]').forEach(checkbox => checkbox.checked = false); | ||
applyFilters(); | |||
} | } | ||
</script> | </script> | ||
| Line 195: | Line 201: | ||
<div id="data-source-filter-wrapper"> | <div id="data-source-filter-wrapper"> | ||
<h3>Data Sources</h3> | <h3>Data Sources</h3> | ||
<button type="button" onclick=" | <button type="button" onclick="selectAllSources()">Select all</button> | ||
<button type="button" onclick=" | <button type="button" onclick="deselectAllSources()">Deselect all</button> | ||
<div id="data-source-filter"></div> | <div id="data-source-filter"></div> | ||
</div> | </div> | ||
Revision as of 15:40, 8 June 2022
Development verstion of the DCT List.
Not ready for production!