Add event dispatch that was asked for in the task

This commit is contained in:
2025-10-20 17:10:04 +02:00
parent 1179694c00
commit eec6dc6b8b

View File

@@ -12,10 +12,10 @@ import {
import { import {
CSVRecord CSVRecord
} from './types'; } from './types';
import persistance from './persistance';
import { import {
readCSV readCSV
} from './csv'; } from './csv';
import persistance from './persistance';
// ┌ ┐ // ┌ ┐
@@ -106,7 +106,7 @@ fileInput.addEventListener( 'change', event => {
document.getElementById( 'table-header--' + i )!.addEventListener( 'click', () => { document.getElementById( 'table-header--' + i )!.addEventListener( 'click', () => {
// TODO: Decide on sorting cycling // TODO: Decide on sorting cycling
// TODO: Add indicator as well // TODO: Add indicator as well
// TODO: Want to hide infos and do an else for file infos and selected columns info? // TODO: Want to hide infos and do an else static info for file infos and selected columns info?
if ( selectedColumn === column ) { if ( selectedColumn === column ) {
ascendingSort.set( !ascendingSort.get() ); ascendingSort.set( !ascendingSort.get() );
} else { } else {
@@ -167,12 +167,11 @@ fileInput.addEventListener( 'change', event => {
alert( 'No file selected' ); alert( 'No file selected' );
} }
} ); } );
// TODO: Task says need to fire custom event on filter card... sure, why not.
// It doesn't say that we need to use it though!
// TODO: Maybe add an overlay that is shown during load? // TODO: Maybe add an overlay that is shown during load?
//
// ┌ ┐ // ┌ ┐
// │ Sorting │ // │ Sorting │
// └ ┘ // └ ┘
@@ -226,6 +225,14 @@ filter.bind( filterInput, val => val );
// Add listener to change of filter value. // Add listener to change of filter value.
filter.onChange( () => { filter.onChange( () => {
// TODO: Task says need to fire custom event on filter card... sure, why not.
// It doesn't say that we need to use it though!
// SO: Do you think this is good enough?
document.dispatchEvent( new CustomEvent( 'explorer:filter', {
'detail': 'Filtering has changed',
'cancelable': false
} ) );
if ( columnDatatype.get() === 'string' ) { if ( columnDatatype.get() === 'string' ) {
dataList.filter( a => { dataList.filter( a => {
return ( a[ selectedColumn ] as string ).includes( filter.get() ); return ( a[ selectedColumn ] as string ).includes( filter.get() );