Widget: DCTList: Difference between revisions

From LINKS Community Center
Jump to: navigation, search
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 updateFilter() {
     function applyFilters() {
         if (!table) return;
         if (!table) return;


         const selectedSources = Array.from(
        /** @type {Partial<DCT>} */
            document.querySelectorAll('#data-source-filter input[type="checkbox"]:checked')
        const filterState = {};
        ).map(checkbox => checkbox.value);
 
         table.setFilter(dctFilter, { dataSources: selectedSources });
        // 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)
            //filters - array of filters currently applied
            //rows - array of row components that pass the filters
         });
         });


         document.getElementById('data-source-filter').addEventListener('change', event => {
         document.getElementById('data-source-filter').addEventListener('change', event => {
             updateFilter();
             applyFilters();
         }, { passive: true });
         }, { passive: true });


     });
     });


     function selectAll() {
     function selectAllSources() {
         document.querySelectorAll('#data-source-filter input[type="checkbox"]').forEach(el => el.checked = true);
         document.querySelectorAll('#data-source-filter input[type="checkbox"]').forEach(checkbox => checkbox.checked = true);
         // Setting 'checked' attribute doesn't trigger 'change' event.
         applyFilters();
        updateFilter();
     }
     }
   
 
     function deselectAll() {
     function deselectAllSources() {
         document.querySelectorAll('#data-source-filter input[type="checkbox"]').forEach(el => el.checked = false);
         document.querySelectorAll('#data-source-filter input[type="checkbox"]').forEach(checkbox => checkbox.checked = false);
         // Setting 'checked' attribute doesn't trigger 'change' event.
         applyFilters();
        updateFilter();
     }
     }
     </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="selectAll()">Select all</button>
             <button type="button" onclick="selectAllSources()">Select all</button>
             <button type="button" onclick="deselectAll()">Deselect all</button>
             <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!