From 89f94a382d5d696ae310ffc5a580cba44ee8f177 Mon Sep 17 00:00:00 2001 From: Aimee <163234798+aimee-mcneil-melville@users.noreply.github.com> Date: Wed, 16 Apr 2025 15:52:27 +1200 Subject: [PATCH 1/7] add sortToggle form component --- .../src/JsonForms/common/JsonForm.tsx | 3 ++ .../common/components/SortToggle.tsx | 53 +++++++++++++++++++ .../src/JsonForms/common/components/index.ts | 1 + 3 files changed, 57 insertions(+) create mode 100644 client/packages/programs/src/JsonForms/common/components/SortToggle.tsx diff --git a/client/packages/programs/src/JsonForms/common/JsonForm.tsx b/client/packages/programs/src/JsonForms/common/JsonForm.tsx index 0defd48404..5136abab79 100644 --- a/client/packages/programs/src/JsonForms/common/JsonForm.tsx +++ b/client/packages/programs/src/JsonForms/common/JsonForm.tsx @@ -19,6 +19,8 @@ import { materialRenderers } from '@jsonforms/material-renderers'; import { BooleanField, booleanTester, + SortToggle, + SortToggleTester, stringTester, TextField, selectTester, @@ -204,6 +206,7 @@ const FormComponent = ({ const renderers = [ { tester: booleanTester, renderer: BooleanField }, + { tester: SortToggleTester, renderer: SortToggle }, { tester: stringTester, renderer: TextField }, { tester: numberTester, renderer: NumberField }, { tester: selectTester, renderer: Selector }, diff --git a/client/packages/programs/src/JsonForms/common/components/SortToggle.tsx b/client/packages/programs/src/JsonForms/common/components/SortToggle.tsx new file mode 100644 index 0000000000..5f7054d87a --- /dev/null +++ b/client/packages/programs/src/JsonForms/common/components/SortToggle.tsx @@ -0,0 +1,53 @@ +import React from 'react'; +import { rankWith, ControlProps, uiTypeIs } from '@jsonforms/core'; +import { withJsonFormsControlProps } from '@jsonforms/react'; +// import { useTranslation, LocaleKey } from '@openmsupply-client/common'; +// import { FORM_LABEL_WIDTH, DefaultFormRowSx } from '../styleConstants'; +import { ButtonWithIcon } from '@common/components'; +import { SortAscIcon, SortDescIcon } from '@common/icons'; +import { DetailInputWithLabelRow } from 'packages/common/src'; + +export const SortToggleTester = rankWith(10, uiTypeIs('SortToggle')); + +const UIComponent = (props: ControlProps) => { + const { data, handleChange, label, path, enabled } = props; + // const t = useTranslation(); + + if (!props.visible) { + return null; + } + + const handleClick = (event: React.MouseEvent) => { + const value = event.currentTarget.value; + const newValue = data === value ? null : value; + handleChange(path, newValue); + console.log('CHANGE', value); + }; + + return ( + <> + + } + value={'asc'} + /> + } + value={'desc'} + /> + + } + /> + + ); +}; + +export const SortToggle = withJsonFormsControlProps(UIComponent); diff --git a/client/packages/programs/src/JsonForms/common/components/index.ts b/client/packages/programs/src/JsonForms/common/components/index.ts index 3f022f7f83..d1b0419754 100644 --- a/client/packages/programs/src/JsonForms/common/components/index.ts +++ b/client/packages/programs/src/JsonForms/common/components/index.ts @@ -11,3 +11,4 @@ export * from './Autocomplete'; export * from './ConditionalSelect'; export * from './Spacer'; export * from './ToolbarLayout'; +export * from './SortToggle'; From da31b8c940628643140e272bb1133a15aa4ff322 Mon Sep 17 00:00:00 2001 From: Aimee <163234798+aimee-mcneil-melville@users.noreply.github.com> Date: Wed, 16 Apr 2025 15:52:40 +1200 Subject: [PATCH 2/7] use sortToggle in expiring items --- .../latest/argument_schemas/arguments.json | 4 ++-- .../latest/argument_schemas/arguments_ui.json | 10 ++-------- 2 files changed, 4 insertions(+), 10 deletions(-) diff --git a/standard_reports/expiring-items/latest/argument_schemas/arguments.json b/standard_reports/expiring-items/latest/argument_schemas/arguments.json index 966800d394..aebf3e08e2 100644 --- a/standard_reports/expiring-items/latest/argument_schemas/arguments.json +++ b/standard_reports/expiring-items/latest/argument_schemas/arguments.json @@ -26,8 +26,8 @@ }, "dir": { "description": "sort by dir", - "type": "string", - "enum": ["asc", "desc"] + "type": "boolean", + "format": "SortToggle" }, "monthlyConsumptionLookBackPeriod": { "description": "Average Monthly Consumption Look Back Period", diff --git a/standard_reports/expiring-items/latest/argument_schemas/arguments_ui.json b/standard_reports/expiring-items/latest/argument_schemas/arguments_ui.json index 9a72400b3b..9e4fdb97c9 100644 --- a/standard_reports/expiring-items/latest/argument_schemas/arguments_ui.json +++ b/standard_reports/expiring-items/latest/argument_schemas/arguments_ui.json @@ -70,15 +70,9 @@ } }, { - "type": "Control", + "type": "SortToggle", "scope": "#/properties/dir", - "label": "T#report.sort-direction", - "options": { - "show": [ - ["asc", "T#report.ascending"], - ["desc", "T#report.descending"] - ] - } + "label": "T#report.sort-direction" } ] } From acfbdd328479224a7d175b9e768caeb186440781 Mon Sep 17 00:00:00 2001 From: Aimee <163234798+aimee-mcneil-melville@users.noreply.github.com> Date: Thu, 17 Apr 2025 13:26:17 +1200 Subject: [PATCH 3/7] change to flatbutton with styling on selection --- .../common/components/SortToggle.tsx | 47 ++++++++++++------- .../latest/argument_schemas/arguments.json | 2 +- 2 files changed, 31 insertions(+), 18 deletions(-) diff --git a/client/packages/programs/src/JsonForms/common/components/SortToggle.tsx b/client/packages/programs/src/JsonForms/common/components/SortToggle.tsx index 5f7054d87a..85020ddf1e 100644 --- a/client/packages/programs/src/JsonForms/common/components/SortToggle.tsx +++ b/client/packages/programs/src/JsonForms/common/components/SortToggle.tsx @@ -1,27 +1,40 @@ -import React from 'react'; +import React, { useState } from 'react'; import { rankWith, ControlProps, uiTypeIs } from '@jsonforms/core'; import { withJsonFormsControlProps } from '@jsonforms/react'; // import { useTranslation, LocaleKey } from '@openmsupply-client/common'; // import { FORM_LABEL_WIDTH, DefaultFormRowSx } from '../styleConstants'; -import { ButtonWithIcon } from '@common/components'; +import { FlatButton } from '@common/components'; import { SortAscIcon, SortDescIcon } from '@common/icons'; -import { DetailInputWithLabelRow } from 'packages/common/src'; +import { alpha, DetailInputWithLabelRow, Theme } from 'packages/common/src'; export const SortToggleTester = rankWith(10, uiTypeIs('SortToggle')); +type SortDirection = 'asc' | 'desc' | null; + const UIComponent = (props: ControlProps) => { - const { data, handleChange, label, path, enabled } = props; + const { handleChange, label, path, enabled } = props; // const t = useTranslation(); + const [sortDirection, setSortDirection] = useState(); if (!props.visible) { return null; } - const handleClick = (event: React.MouseEvent) => { - const value = event.currentTarget.value; - const newValue = data === value ? null : value; - handleChange(path, newValue); - console.log('CHANGE', value); + const selectedStyles = (theme: Theme) => ({ + fontWeight: 'bold', + backgroundColor: alpha(theme.palette.primary.main, 0.3), + '&:hover': { + backgroundColor: alpha(theme.palette.primary.main, 0.3), + }, + }); + + const getSelectedSx = (value: SortDirection) => + sortDirection === value ? selectedStyles : undefined; + + const handleClick = (value: SortDirection) => { + const newValue = sortDirection === value ? null : value; + setSortDirection(newValue); + handleChange(path, sortDirection); }; return ( @@ -31,17 +44,17 @@ const UIComponent = (props: ControlProps) => { DisabledInput={!enabled} Input={ <> - } - value={'asc'} + onClick={() => handleClick('asc')} + startIcon={} + sx={[getSelectedSx('asc') || {}, { borderRadius: 24 }]} /> - } - value={'desc'} + onClick={() => handleClick('desc')} + startIcon={} + sx={[getSelectedSx('desc') || {}, { borderRadius: 24 }]} /> } diff --git a/standard_reports/expiring-items/latest/argument_schemas/arguments.json b/standard_reports/expiring-items/latest/argument_schemas/arguments.json index aebf3e08e2..5df2abb05f 100644 --- a/standard_reports/expiring-items/latest/argument_schemas/arguments.json +++ b/standard_reports/expiring-items/latest/argument_schemas/arguments.json @@ -26,7 +26,7 @@ }, "dir": { "description": "sort by dir", - "type": "boolean", + "type": ["string", "null"], "format": "SortToggle" }, "monthlyConsumptionLookBackPeriod": { From 2cdc6758b8b6130faf8520d8475b13847d86b688 Mon Sep 17 00:00:00 2001 From: Aimee <163234798+aimee-mcneil-melville@users.noreply.github.com> Date: Thu, 17 Apr 2025 15:24:12 +1200 Subject: [PATCH 4/7] translations and more styling --- .../common/components/SortToggle.tsx | 50 +++++++++---------- 1 file changed, 25 insertions(+), 25 deletions(-) diff --git a/client/packages/programs/src/JsonForms/common/components/SortToggle.tsx b/client/packages/programs/src/JsonForms/common/components/SortToggle.tsx index 85020ddf1e..e567d7a459 100644 --- a/client/packages/programs/src/JsonForms/common/components/SortToggle.tsx +++ b/client/packages/programs/src/JsonForms/common/components/SortToggle.tsx @@ -1,8 +1,8 @@ import React, { useState } from 'react'; import { rankWith, ControlProps, uiTypeIs } from '@jsonforms/core'; import { withJsonFormsControlProps } from '@jsonforms/react'; -// import { useTranslation, LocaleKey } from '@openmsupply-client/common'; -// import { FORM_LABEL_WIDTH, DefaultFormRowSx } from '../styleConstants'; +import { useTranslation } from '@openmsupply-client/common'; +import { FORM_LABEL_WIDTH, DefaultFormRowSx } from '../styleConstants'; import { FlatButton } from '@common/components'; import { SortAscIcon, SortDescIcon } from '@common/icons'; import { alpha, DetailInputWithLabelRow, Theme } from 'packages/common/src'; @@ -13,7 +13,7 @@ type SortDirection = 'asc' | 'desc' | null; const UIComponent = (props: ControlProps) => { const { handleChange, label, path, enabled } = props; - // const t = useTranslation(); + const t = useTranslation(); const [sortDirection, setSortDirection] = useState(); if (!props.visible) { @@ -38,28 +38,28 @@ const UIComponent = (props: ControlProps) => { }; return ( - <> - - handleClick('asc')} - startIcon={} - sx={[getSelectedSx('asc') || {}, { borderRadius: 24 }]} - /> - handleClick('desc')} - startIcon={} - sx={[getSelectedSx('desc') || {}, { borderRadius: 24 }]} - /> - - } - /> - + + handleClick('asc')} + startIcon={} + sx={[getSelectedSx('asc') || {}, { borderRadius: 24 }]} + /> + handleClick('desc')} + startIcon={} + sx={[getSelectedSx('desc') || {}, { borderRadius: 24 }]} + /> + + } + /> ); }; From ef440ba90b77cf699af5c96515912f7cae82ceac Mon Sep 17 00:00:00 2001 From: Aimee <163234798+aimee-mcneil-melville@users.noreply.github.com> Date: Thu, 17 Apr 2025 15:24:48 +1200 Subject: [PATCH 5/7] add sort to standard reports schemas --- .../item-usage/latest/argument_schemas/arguments.json | 4 ++-- .../latest/argument_schemas/arguments_ui.json | 10 ++-------- .../latest/argument_schemas/arguments.json | 4 ++-- .../latest/argument_schemas/arguments_ui.json | 10 ++-------- .../latest/argument_schemas/arguments.json | 4 ++-- .../latest/argument_schemas/arguments_ui.json | 10 ++-------- 6 files changed, 12 insertions(+), 30 deletions(-) diff --git a/standard_reports/item-usage/latest/argument_schemas/arguments.json b/standard_reports/item-usage/latest/argument_schemas/arguments.json index da53700e38..f354aa003f 100644 --- a/standard_reports/item-usage/latest/argument_schemas/arguments.json +++ b/standard_reports/item-usage/latest/argument_schemas/arguments.json @@ -35,8 +35,8 @@ }, "dir": { "description": "sort by dir", - "type": "string", - "enum": ["asc", "desc"] + "type": ["string", "null"], + "format": "SortToggle" } } } diff --git a/standard_reports/item-usage/latest/argument_schemas/arguments_ui.json b/standard_reports/item-usage/latest/argument_schemas/arguments_ui.json index ed99017357..04d1045f8d 100644 --- a/standard_reports/item-usage/latest/argument_schemas/arguments_ui.json +++ b/standard_reports/item-usage/latest/argument_schemas/arguments_ui.json @@ -46,15 +46,9 @@ } }, { - "type": "Control", + "type": "SortToggle", "scope": "#/properties/dir", - "label": "T#report.sort-direction", - "options": { - "show": [ - ["asc", "T#report.ascending"], - ["desc", "T#report.descending"] - ] - } + "label": "T#report.sort-direction" } ] } diff --git a/standard_reports/stock-detail/latest/argument_schemas/arguments.json b/standard_reports/stock-detail/latest/argument_schemas/arguments.json index 99cdd40fd5..60e01cfb38 100644 --- a/standard_reports/stock-detail/latest/argument_schemas/arguments.json +++ b/standard_reports/stock-detail/latest/argument_schemas/arguments.json @@ -23,8 +23,8 @@ }, "dir": { "description": "sort by dir", - "type": "string", - "enum": ["asc", "desc"] + "type": ["string", "null"], + "format": "SortToggle" } } } diff --git a/standard_reports/stock-detail/latest/argument_schemas/arguments_ui.json b/standard_reports/stock-detail/latest/argument_schemas/arguments_ui.json index 6058f344c5..755149c7f4 100644 --- a/standard_reports/stock-detail/latest/argument_schemas/arguments_ui.json +++ b/standard_reports/stock-detail/latest/argument_schemas/arguments_ui.json @@ -28,15 +28,9 @@ } }, { - "type": "Control", + "type": "SortToggle", "scope": "#/properties/dir", - "label": "T#report.sort-direction", - "options": { - "show": [ - ["asc", "T#report.ascending"], - ["desc", "T#report.descending"] - ] - } + "label": "T#report.sort-direction" } ] } diff --git a/standard_reports/stock-status/latest/argument_schemas/arguments.json b/standard_reports/stock-status/latest/argument_schemas/arguments.json index 6b0ba031a5..3f303e19b8 100644 --- a/standard_reports/stock-status/latest/argument_schemas/arguments.json +++ b/standard_reports/stock-status/latest/argument_schemas/arguments.json @@ -30,8 +30,8 @@ }, "dir": { "description": "sort by dir", - "type": "string", - "enum": ["asc", "desc"] + "type": ["string", "null"], + "format": "SortToggle" } } } diff --git a/standard_reports/stock-status/latest/argument_schemas/arguments_ui.json b/standard_reports/stock-status/latest/argument_schemas/arguments_ui.json index 25f5b3ae07..3017c2af00 100644 --- a/standard_reports/stock-status/latest/argument_schemas/arguments_ui.json +++ b/standard_reports/stock-status/latest/argument_schemas/arguments_ui.json @@ -53,15 +53,9 @@ } }, { - "type": "Control", + "type": "SortToggle", "scope": "#/properties/dir", - "label": "T#report.sort-direction", - "options": { - "show": [ - ["asc", "T#report.ascending"], - ["desc", "T#report.descending"] - ] - } + "label": "T#report.sort-direction" } ] } From 9453b77e4778af6f7fd34fdd548b925bc33e5699 Mon Sep 17 00:00:00 2001 From: Aimee <163234798+aimee-mcneil-melville@users.noreply.github.com> Date: Thu, 17 Apr 2025 15:27:36 +1200 Subject: [PATCH 6/7] fix import --- .../src/JsonForms/common/components/SortToggle.tsx | 8 ++++++-- 1 file changed, 6 insertions(+), 2 deletions(-) diff --git a/client/packages/programs/src/JsonForms/common/components/SortToggle.tsx b/client/packages/programs/src/JsonForms/common/components/SortToggle.tsx index e567d7a459..a6cd389174 100644 --- a/client/packages/programs/src/JsonForms/common/components/SortToggle.tsx +++ b/client/packages/programs/src/JsonForms/common/components/SortToggle.tsx @@ -1,11 +1,15 @@ import React, { useState } from 'react'; import { rankWith, ControlProps, uiTypeIs } from '@jsonforms/core'; import { withJsonFormsControlProps } from '@jsonforms/react'; -import { useTranslation } from '@openmsupply-client/common'; +import { + alpha, + DetailInputWithLabelRow, + Theme, + useTranslation, +} from '@openmsupply-client/common'; import { FORM_LABEL_WIDTH, DefaultFormRowSx } from '../styleConstants'; import { FlatButton } from '@common/components'; import { SortAscIcon, SortDescIcon } from '@common/icons'; -import { alpha, DetailInputWithLabelRow, Theme } from 'packages/common/src'; export const SortToggleTester = rankWith(10, uiTypeIs('SortToggle')); From dc9726440f36253763a2f36e48be60e824df9b76 Mon Sep 17 00:00:00 2001 From: Aimee <163234798+aimee-mcneil-melville@users.noreply.github.com> Date: Mon, 28 Apr 2025 15:43:59 +1200 Subject: [PATCH 7/7] fix toggled state --- .../programs/src/JsonForms/common/components/SortToggle.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/client/packages/programs/src/JsonForms/common/components/SortToggle.tsx b/client/packages/programs/src/JsonForms/common/components/SortToggle.tsx index a6cd389174..c8bd4e4670 100644 --- a/client/packages/programs/src/JsonForms/common/components/SortToggle.tsx +++ b/client/packages/programs/src/JsonForms/common/components/SortToggle.tsx @@ -38,7 +38,7 @@ const UIComponent = (props: ControlProps) => { const handleClick = (value: SortDirection) => { const newValue = sortDirection === value ? null : value; setSortDirection(newValue); - handleChange(path, sortDirection); + handleChange(path, newValue); }; return (