diff --git a/src/components/Table/Inputs/Select.tsx b/src/components/Table/Inputs/Select.tsx index c9383ec..ebfa8a2 100644 --- a/src/components/Table/Inputs/Select.tsx +++ b/src/components/Table/Inputs/Select.tsx @@ -3,18 +3,26 @@ import React, { useMemo, type ChangeEventHandler } from 'react'; export type DataItem = Record; interface Props { - onChange: (value: string | null) => void; + onChange: (value: string | string[] | null) => void; data: DataItem[]; keyData: string; + isMultiple?: boolean; } export default function Select({ data, keyData, + isMultiple = false, onChange, }: Props): JSX.Element { const options = useMemo(() => { - let options = data.map((item) => item[keyData]); + let options = []; + + if (isMultiple) { + options = data.flatMap((item) => item[keyData]); + } else { + options = data.map((item) => item[keyData]); + } options = [...new Set(options)]; @@ -33,13 +41,33 @@ export default function Select({ return options; }, [data, keyData]); + const onSelectChange: ChangeEventHandler = ({ + target, + }): void => { + if (!isMultiple) { + const value = target.value !== '' ? target.value : null; + onChange(value); + } + + const values = []; + + // FIXME: This looks awfull, when updating the input use something better. + for (let index = 0; index < target.options.length; index++) { + const option = target.options[index]; + if (!option.selected) continue; + + values.push(option.value); + } + + onChange(values); + }; + return ( diff --git a/src/components/Table/Table.tsx b/src/components/Table/Table.tsx index 0fa23c1..61e8a4c 100644 --- a/src/components/Table/Table.tsx +++ b/src/components/Table/Table.tsx @@ -26,7 +26,7 @@ interface Props { interface Filter { type: HeaderType; - value: string; + value: string | string[]; } export default function Table({ data, headers }: Props): JSX.Element { @@ -40,6 +40,11 @@ export default function Table({ data, headers }: Props): JSX.Element { return data === filter.value; case HeaderType.Select: return data === filter.value; + case HeaderType.Multiple: + if (typeof filter.value === 'string') { + return data.includes(filter.value); + } + return filter.value.every((filter: string) => data.includes(filter)); } return true; @@ -62,6 +67,7 @@ export default function Table({ data, headers }: Props): JSX.Element { type: HeaderType, value: any, ): void => { + console.log(value); setFilters((prev) => { if (value === null) { // eslint-disable-next-line @typescript-eslint/no-dynamic-delete @@ -134,6 +140,17 @@ export default function Table({ data, headers }: Props): JSX.Element { }} /> ); + case HeaderType.Multiple: + return ( +