m/umami
1
0
Fork 0
mirror of https://github.com/kremalicious/umami.git synced 2024-11-22 01:46:58 +01:00
Code Issues Packages Projects Releases Wiki Activity

Merge pull request #2379 from Maxime-J/ordered-filter-values

Browse Source 
Sort filter values
This commit is contained in:
Mike Cao 2023-11-30 15:48:48 -10:00 committed by GitHub
commit a7cb0eaa20
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 20 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

24
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,30 @@ 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 format = val => {
formatted[val] = formatValue(val, name);
return formatted[val];
};
if (values.length !== 1) {
const { compare } = new Intl.Collator(locale, { numeric: true });
values.sort((a, b) => compare(formatted[a] ?? format(a), formatted[b] ?? format(b)));
} else {
format(values[0]);
}
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 +75,7 @@ export default function FieldFilterForm({
}}
>
{value => {
return <Item key={value}>{formatValue(value, name)}</Item>;
return <Item key={value}>{formattedValues[value]}</Item>;
}}
</Dropdown>
</Flexbox>