#81 (1) JsonForms skeleton #148

CarlosNZ · 2022-06-20T00:41:55Z

This just provides the basic skeleton for the JSON forms as outlined here.

Suggest we use this as a base for subsequent PRs, then merge them as one once this area is "complete"

Will create issues for remaining f/e items from #81.

Here we have:

the JsonForms package
the useJsonForms hook
5 initial custom components and their testers for over-riding default JsonForm UI elements:
- Text
- Selector (drop-down), for enums
- Group
- Label (for text display, non interactive)
- Date picker
- I got rather bogged down trying to get an Array component to work properly, but haven't solved that yet, although I have a new avenue to try next: https://jsonforms.discourse.group/t/overriding-array-expand-panel/827. But they currently look pretty ugly with the default renderer.
some hard-coded JSON data for demoing -- schema, uiSchema and "Patient" data, will be replaced with database queries once back-end document endpoint is ready

To test:

Just click on a name in the Patient list and the Modal will display the hard-coded "Patient" data using the associated schemas. There's a lot of clutter in the form currently, due to the default Array component.

CarlosNZ · 2022-06-20T01:53:38Z

client/packages/common/package.json

+    "@material-ui/icons": "^4.11.3",
+    "@mui/icons-material": "^5.8.0",


I don't think we need the icons, I'll try and remove in next PR

please! the icons packages is huge and we have deliberately created only the icons we need in order to avoid it

CarlosNZ · 2022-06-20T01:54:20Z

client/packages/common/src/ui/components/buttons/IconButton/IconButton.tsx

@@ -8,6 +8,7 @@ interface ButtonProps {
  label: string;
  width?: string;
  height?: string;
+  color?: 'primary' | 'secondary' | undefined;


You'll notice this isn't used in this PR -- I'm using it for the Arrays to create the "Add item" button -- in next PR

CarlosNZ · 2022-06-20T01:56:04Z

client/packages/common/src/utils/regex/RegexUtils.tsx

+  stringSubstitution: (
+    parameterisedString: string,
+    data: { [key: string]: any },
+    fallback = 'Not found'
+  ) =>
+    parameterisedString.replace(/\${(.*?)}/gm, (_: string, match: string) =>
+      extractProperty(data, match, fallback)
+    ),


A little copy-paste from Conforma ;)

Nice!

and.. oh, right. the name stringSubstitution referenced earlier did not make me expect this kind of functionality. Something like 'formatTemplateString' or 'templateSubstitution' 🤷 dunno

Yeah, good point, I've never been particularly happy with that name. Changed it to formatTemplateString

client/packages/common/src/ui/forms/JsonForms/components/Label.tsx

mark-prins · 2022-06-20T23:10:50Z

Suggest we use this as a base for subsequent PRs, then merge them as one once this area is "complete"

Don't see any reason to delay while waiting for a fully feature complete version. The demo server for the feature site has the webhook disabled, so will only be updated manually.

mark-prins

👍

That looks great! very strong start - form looks good.

One extra thing I wondered about is the massive (1) (2) etc - some time.. can they be made more subtle please?

mark-prins · 2022-06-20T23:27:29Z

client/packages/common/src/ui/forms/JsonForms/components/Date.tsx

+import { FormLabel, Box } from '@mui/material';
+import { BaseDatePickerInput } from '@openmsupply-client/common';
+
+export const dateTester = rankWith(5, isDateControl);


as a new user to this - what is a tester?
Can you add a comment to explain?
Could they be grouped in a testers file? Would that make it clearer? or is it helpful to have them next to the component?

Tester -- function that returns a number based on whether or not a predicate is true (In this case it will return 5 if isDateControl, otherwise it returns -1). Then for each form element, the tester that returns the highest number gets rendered by the component matched to that tester (in "renderers" prop), i.e.

{ tester: stringTester, renderer: TextField }, { tester: selectTester, renderer: Selector }, { tester: groupTester, renderer: Group }, { tester: labelTester, renderer: Label }, { tester: dateTester, renderer: Date }, { tester: arrayTester, renderer: Array }

I thought since we're generally going to have testers coupled to components in a one-to-one manner, it made sense to keep each tester with its associated component.

I did make a more generic tester for matching custom fields (in uiSchema) to components, but it wasn't being used in here. I might include it in a later PR.

oh, right. thanks - wasn't clear to me from the name alone!

mark-prins · 2022-06-20T23:28:00Z

client/packages/common/src/ui/forms/JsonForms/components/Date.tsx

+        <BaseDatePickerInput
+          value={data}
+          onChange={e => handleChange(path, e)}
+          inputFormat="dd/MM/yyyy"


The hard-coded format : can it be intl based? can it be configurable?

This is actually just copied straight from common/src/ui/components/inputs/DatePickers/DatePickerInput/DatePickerInput.tsx 😉

So yeah, we should localise them both at some point.

mark-prins · 2022-06-20T23:28:26Z

client/packages/common/src/ui/forms/JsonForms/components/Group.tsx

+import { MaterialLayoutRenderer } from '@jsonforms/material-renderers';
+import { Box, Typography } from '@mui/material';
+
+export const groupTester = rankWith(4, uiTypeIs('Group'));


yeah, these things aren't making sense. what is 4 here?

mark-prins · 2022-06-20T23:31:57Z

client/packages/common/src/ui/forms/JsonForms/components/Group.tsx

+        marginBottom: 2,
+      }}
+    >
+      <Typography width="40%" fontSize="1.2em" textAlign="right">


we may have to use ems throughout 🤔

Could the font size here come from the theme?

Yup, have re-styled the "subtitle" variant in theme with this fontSize -- didn't look like it was being used elsewhere.

Would like to organise the typography a bit better overall at some point: msupply-foundation/openmsupply-client#1149

mark-prins · 2022-06-20T23:32:27Z

client/packages/common/src/ui/forms/JsonForms/components/Group.tsx

+  return (
+    <Box
+      sx={{
+        maxWidth: 500,


the maxWidth is fairly specific, just wondering if that will cause problems later.

I've moved these values into a "styleConstants" file so we can update them easily if we need to.

Also -- if we need a wider "Group" in future, we can always make "width" a new property in uiSchema which the component can use, or have an alternative component "WideGroup". (for one that spans 2 columns, perhaps?)

client/packages/common/src/ui/forms/JsonForms/useJsonForms.tsx

mark-prins · 2022-06-20T23:45:11Z

client/packages/common/src/utils/regex/RegexUtils.tsx

+  stringSubstitution: (
+    parameterisedString: string,
+    data: { [key: string]: any },
+    fallback = 'Not found'
+  ) =>
+    parameterisedString.replace(/\${(.*?)}/gm, (_: string, match: string) =>
+      extractProperty(data, match, fallback)
+    ),


Nice!

and.. oh, right. the name stringSubstitution referenced earlier did not make me expect this kind of functionality. Something like 'formatTemplateString' or 'templateSubstitution' 🤷 dunno

mark-prins · 2022-06-20T23:46:48Z

client/packages/system/src/Patient/DetailModal/DetailModal.tsx

-  if (isLoading) return <BasicSpinner />;
-
-  return !!data ? (
+  return !error ? (


controversial maybe.. flip the logic?

return error ? null : (<blah />);

Yeah sure -- that's just a small personal preference -- in ternarys I generally like to put the "expected" or "preferred" outcome first so the "bad" outcome is tucked nicely out of the way.

yeah me too - and then I fight with the desire to put the positive assertion in the conditional - preferring if error to if !error - and also for having the small bit first, so that it's easier to read. In cases like this where the first condition is big, it's hard to see the little null.
as you were then.. real no need to change

client/packages/system/src/Patient/api/operations.graphql

mark-prins · 2022-06-20T23:49:49Z

client/packages/system/src/Patient/ListView/ListView.tsx

@@ -9,8 +9,8 @@ import {
  Fade,
  NothingHere,
  createQueryParamsStore,
-  useFormatDateTime,
-  ColumnAlign,
+  // useFormatDateTime,


can you add the DOB back in? It's working and wanted, and I'm not sure why it is removed

CarlosNZ · 2022-06-21T01:43:37Z

One extra thing I wondered about is the massive (1) (2) etc - some time.. can they be made more subtle please?

Yes, that's what I've been trying to fix with the Array component. I've made a much nicer, more consistent UI using an Accordion -- but I still haven't cracked how to reliably (I can do it unreliably lol!) pass everything through to the inner elements. So that'll be in another PR.

clemens-msupply

Only had a look at the UI and looks great! yes please go ahead and merge I will have a more detailed look later

CarlosNZ added 15 commits May 31, 2022 15:47

Init react-json-schema-forms

6f10d4e

Simple demo

fcf3235

WIP

9f08a99

Merge branch 'feature/programs' into JSON-forms

4f1589b

WIP

da17e98

WIP

a591fa3

Merge from new PR

05ca3dd

Merge branch 'feature/programs' into JSON-forms

ef2a1c5

WIP

321321b

Merge branch 'feature/programs' into JSON-forms

1bc7b7d

WIP

193c4ea

Start Array component

2e87ff5

Get + button working

88f376a

Tidy up for PR

5a4d2b1

Update from feature base

6e2db90

CarlosNZ mentioned this pull request Jun 20, 2022

JSON Document integration #81

Closed

16 tasks

Fix render error

d1c8ac4

CarlosNZ commented Jun 20, 2022

View reviewed changes

mark-prins approved these changes Jun 20, 2022

View reviewed changes

clemens-msupply approved these changes Jun 21, 2022

View reviewed changes

CarlosNZ added 5 commits June 21, 2022 15:18

PR suggestions

88dfe68

Move group width into constants

3493e00

More PR suggestions

66b9a2b

Merge branch 'feature/programs' into JSON-forms

d2fbe0d

Update yarn.lock

6d870ec

CarlosNZ merged commit 483b2e4 into feature/programs Jun 22, 2022

CarlosNZ deleted the JSON-forms branch June 22, 2022 02:58

andreievg mentioned this pull request Jun 27, 2022

Sync v5 #156

Closed

25 tasks

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

#81 (1) JsonForms skeleton #148

#81 (1) JsonForms skeleton #148

CarlosNZ commented Jun 20, 2022 •

edited

Loading

CarlosNZ Jun 20, 2022

mark-prins Jun 20, 2022

CarlosNZ Jun 20, 2022

CarlosNZ Jun 20, 2022

mark-prins Jun 20, 2022

CarlosNZ Jun 21, 2022

mark-prins commented Jun 20, 2022

mark-prins left a comment

mark-prins Jun 20, 2022

CarlosNZ Jun 21, 2022

mark-prins Jun 22, 2022

mark-prins Jun 20, 2022

CarlosNZ Jun 21, 2022

mark-prins Jun 20, 2022

mark-prins Jun 20, 2022

CarlosNZ Jun 21, 2022

mark-prins Jun 20, 2022

CarlosNZ Jun 21, 2022

mark-prins Jun 20, 2022

mark-prins Jun 20, 2022

CarlosNZ Jun 21, 2022

mark-prins Jun 22, 2022

mark-prins Jun 20, 2022

CarlosNZ Jun 21, 2022

CarlosNZ commented Jun 21, 2022

clemens-msupply left a comment

		"@material-ui/icons": "^4.11.3",
		"@mui/icons-material": "^5.8.0",

#81 (1) JsonForms skeleton #148

#81 (1) JsonForms skeleton #148

Conversation

CarlosNZ commented Jun 20, 2022 • edited Loading

To test:

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

mark-prins commented Jun 20, 2022

mark-prins left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

CarlosNZ commented Jun 21, 2022

clemens-msupply left a comment

Choose a reason for hiding this comment

CarlosNZ commented Jun 20, 2022 •

edited

Loading