Skip to content

Commit 36596ed

Browse files
aimee-mcneil-melvilleaimee-mcneil-melville
authored
7093 add sort toggle to prevent report filter dropdowns overlapping (#7406)
* add sortToggle form component * use sortToggle in expiring items * change to flatbutton with styling on selection * translations and more styling * add sort to standard reports schemas * fix import * fix toggled state
1 parent cd004ce commit 36596ed

File tree

11 files changed

+90
-40
lines changed

11 files changed

+90
-40
lines changed

‎client/packages/programs/src/JsonForms/common/JsonForm.tsx

+3
Original file line numberDiff line numberDiff line change
@@ -19,6 +19,8 @@ import { materialRenderers } from '@jsonforms/material-renderers';
1919
import {
2020
BooleanField,
2121
booleanTester,
22+
SortToggle,
23+
SortToggleTester,
2224
stringTester,
2325
TextField,
2426
selectTester,
@@ -204,6 +206,7 @@ const FormComponent = ({
204206

205207
const renderers = [
206208
{ tester: booleanTester, renderer: BooleanField },
209+
{ tester: SortToggleTester, renderer: SortToggle },
207210
{ tester: stringTester, renderer: TextField },
208211
{ tester: numberTester, renderer: NumberField },
209212
{ tester: selectTester, renderer: Selector },

‎client/packages/programs/src/JsonForms/common/components/SortToggle.tsx

+70
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,70 @@
1+
import React, { useState } from 'react';
2+
import { rankWith, ControlProps, uiTypeIs } from '@jsonforms/core';
3+
import { withJsonFormsControlProps } from '@jsonforms/react';
4+
import {
5+
alpha,
6+
DetailInputWithLabelRow,
7+
Theme,
8+
useTranslation,
9+
} from '@openmsupply-client/common';
10+
import { FORM_LABEL_WIDTH, DefaultFormRowSx } from '../styleConstants';
11+
import { FlatButton } from '@common/components';
12+
import { SortAscIcon, SortDescIcon } from '@common/icons';
13+
14+
export const SortToggleTester = rankWith(10, uiTypeIs('SortToggle'));
15+
16+
type SortDirection = 'asc' | 'desc' | null;
17+
18+
const UIComponent = (props: ControlProps) => {
19+
const { handleChange, label, path, enabled } = props;
20+
const t = useTranslation();
21+
const [sortDirection, setSortDirection] = useState<SortDirection>();
22+
23+
if (!props.visible) {
24+
return null;
25+
}
26+
27+
const selectedStyles = (theme: Theme) => ({
28+
fontWeight: 'bold',
29+
backgroundColor: alpha(theme.palette.primary.main, 0.3),
30+
'&:hover': {
31+
backgroundColor: alpha(theme.palette.primary.main, 0.3),
32+
},
33+
});
34+
35+
const getSelectedSx = (value: SortDirection) =>
36+
sortDirection === value ? selectedStyles : undefined;
37+
38+
const handleClick = (value: SortDirection) => {
39+
const newValue = sortDirection === value ? null : value;
40+
setSortDirection(newValue);
41+
handleChange(path, newValue);
42+
};
43+
44+
return (
45+
<DetailInputWithLabelRow
46+
label={label}
47+
DisabledInput={!enabled}
48+
labelWidthPercentage={FORM_LABEL_WIDTH}
49+
sx={DefaultFormRowSx}
50+
Input={
51+
<>
52+
<FlatButton
53+
label={t('report.ascending')}
54+
onClick={() => handleClick('asc')}
55+
startIcon={<SortAscIcon />}
56+
sx={[getSelectedSx('asc') || {}, { borderRadius: 24 }]}
57+
/>
58+
<FlatButton
59+
label={t('report.descending')}
60+
onClick={() => handleClick('desc')}
61+
startIcon={<SortDescIcon />}
62+
sx={[getSelectedSx('desc') || {}, { borderRadius: 24 }]}
63+
/>
64+
</>
65+
}
66+
/>
67+
);
68+
};
69+
70+
export const SortToggle = withJsonFormsControlProps(UIComponent);

‎client/packages/programs/src/JsonForms/common/components/index.ts

+1
Original file line numberDiff line numberDiff line change
@@ -11,3 +11,4 @@ export * from './Autocomplete';
1111
export * from './ConditionalSelect';
1212
export * from './Spacer';
1313
export * from './ToolbarLayout';
14+
export * from './SortToggle';

‎standard_reports/expiring-items/latest/argument_schemas/arguments.json

+2-2
Original file line numberDiff line numberDiff line change
@@ -26,8 +26,8 @@
2626
},
2727
"dir": {
2828
"description": "sort by dir",
29-
"type": "string",
30-
"enum": ["asc", "desc"]
29+
"type": ["string", "null"],
30+
"format": "SortToggle"
3131
},
3232
"monthlyConsumptionLookBackPeriod": {
3333
"description": "Average Monthly Consumption Look Back Period",

‎standard_reports/expiring-items/latest/argument_schemas/arguments_ui.json

+2-8
Original file line numberDiff line numberDiff line change
@@ -70,15 +70,9 @@
7070
}
7171
},
7272
{
73-
"type": "Control",
73+
"type": "SortToggle",
7474
"scope": "#/properties/dir",
75-
"label": "T#report.sort-direction",
76-
"options": {
77-
"show": [
78-
["asc", "T#report.ascending"],
79-
["desc", "T#report.descending"]
80-
]
81-
}
75+
"label": "T#report.sort-direction"
8276
}
8377
]
8478
}

‎standard_reports/item-usage/latest/argument_schemas/arguments.json

+2-2
Original file line numberDiff line numberDiff line change
@@ -35,8 +35,8 @@
3535
},
3636
"dir": {
3737
"description": "sort by dir",
38-
"type": "string",
39-
"enum": ["asc", "desc"]
38+
"type": ["string", "null"],
39+
"format": "SortToggle"
4040
}
4141
}
4242
}

‎standard_reports/item-usage/latest/argument_schemas/arguments_ui.json

+2-8
Original file line numberDiff line numberDiff line change
@@ -46,15 +46,9 @@
4646
}
4747
},
4848
{
49-
"type": "Control",
49+
"type": "SortToggle",
5050
"scope": "#/properties/dir",
51-
"label": "T#report.sort-direction",
52-
"options": {
53-
"show": [
54-
["asc", "T#report.ascending"],
55-
["desc", "T#report.descending"]
56-
]
57-
}
51+
"label": "T#report.sort-direction"
5852
}
5953
]
6054
}

‎standard_reports/stock-detail/latest/argument_schemas/arguments.json

+2-2
Original file line numberDiff line numberDiff line change
@@ -23,8 +23,8 @@
2323
},
2424
"dir": {
2525
"description": "sort by dir",
26-
"type": "string",
27-
"enum": ["asc", "desc"]
26+
"type": ["string", "null"],
27+
"format": "SortToggle"
2828
}
2929
}
3030
}

‎standard_reports/stock-detail/latest/argument_schemas/arguments_ui.json

+2-8
Original file line numberDiff line numberDiff line change
@@ -28,15 +28,9 @@
2828
}
2929
},
3030
{
31-
"type": "Control",
31+
"type": "SortToggle",
3232
"scope": "#/properties/dir",
33-
"label": "T#report.sort-direction",
34-
"options": {
35-
"show": [
36-
["asc", "T#report.ascending"],
37-
["desc", "T#report.descending"]
38-
]
39-
}
33+
"label": "T#report.sort-direction"
4034
}
4135
]
4236
}

‎standard_reports/stock-status/latest/argument_schemas/arguments.json

+2-2
Original file line numberDiff line numberDiff line change
@@ -30,8 +30,8 @@
3030
},
3131
"dir": {
3232
"description": "sort by dir",
33-
"type": "string",
34-
"enum": ["asc", "desc"]
33+
"type": ["string", "null"],
34+
"format": "SortToggle"
3535
}
3636
}
3737
}

‎standard_reports/stock-status/latest/argument_schemas/arguments_ui.json

+2-8
Original file line numberDiff line numberDiff line change
@@ -53,15 +53,9 @@
5353
}
5454
},
5555
{
56-
"type": "Control",
56+
"type": "SortToggle",
5757
"scope": "#/properties/dir",
58-
"label": "T#report.sort-direction",
59-
"options": {
60-
"show": [
61-
["asc", "T#report.ascending"],
62-
["desc", "T#report.descending"]
63-
]
64-
}
58+
"label": "T#report.sort-direction"
6559
}
6660
]
6761
}

0 commit comments

Comments
 (0)