m/umami
1
0
Fork 0
mirror of https://github.com/kremalicious/umami.git synced 2024-06-24 10:16:25 +02:00
Code Issues Packages Projects Releases Wiki Activity

sort formatted filter values

Browse Source
This commit is contained in:
Maxime-J 2023-11-03 11:53:23 +00:00
parent 8a4623eb7b
commit d5eddeae24
1 changed files with 16 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

20
src/app/(main)/reports/[id]/FieldFilterForm.js
View File

@ -1,6 +1,6 @@
import { useState } from 'react';
import { useState, useMemo } from 'react';
import { Form, FormRow, Item, Flexbox, Dropdown, Button } from 'react-basics';
import { useMessages, useFilters, useFormat } from 'components/hooks';
import { useMessages, useFilters, useFormat, useLocale } from 'components/hooks';
import styles from './FieldFilterForm.module.css';
export default function FieldFilterForm({
@ -16,14 +16,26 @@ export default function FieldFilterForm({
const [value, setValue] = useState();
const { getFilters } = useFilters();
const { formatValue } = useFormat();
const { locale } = useLocale();
const filters = getFilters(type);
const formattedValues = useMemo(() => {
const formatted = {};
const { compare } = new Intl.Collator(locale, { numeric: true });
const format = val => {
formatted[val] = formatValue(val, name);
return formatted[val];
};
values.sort((a, b) => compare(formatted[a] ?? format(a), formatted[b] ?? format(b)));
return formatted;
}, [values]);
const renderFilterValue = value => {
return filters.find(f => f.value === value)?.label;
};
const renderValue = value => {
return formatValue(value, name);
return formattedValues[value];
};
const handleAdd = () => {
@ -59,7 +71,7 @@ export default function FieldFilterForm({
}}
>
{value => {
return <Item key={value}>{formatValue(value, name)}</Item>;
return <Item key={value}>{formattedValues[value]}</Item>;
}}
</Dropdown>
</Flexbox>