diff --git a/src/app/(main)/reports/[id]/FieldFilterForm.js b/src/app/(main)/reports/[id]/FieldFilterForm.js
index 96ac06b0..ea80f82a 100644
--- a/src/app/(main)/reports/[id]/FieldFilterForm.js
+++ b/src/app/(main)/reports/[id]/FieldFilterForm.js
@@ -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 - {formatValue(value, name)}
;
+ return - {formattedValues[value]}
;
}}