Enable address editing #1564

roseeichelmann · 2024-09-20T17:40:26Z

Associated issues

Closes cityofaustin/atd-data-tech#19014

Testing

URL to test:
Netlify

Steps to test:

Go to a crash
Test editing the primary address/secondary address fields
When you type into an input your input should be auto capitalized
If you are editing and click on the swap address button before saving/canceling, you will be taken out of edit mode on that field
Test swapping the addresses

Ship list

Check migrations for any conflicts with latest migrations in main branch
Confirm Hasura role permissions for necessary access
Code reviewed
Product manager approved

…nd auto capitalize input

roseeichelmann · 2024-09-23T19:38:00Z

editor/src/Components/DataTable.js

@@ -160,8 +173,10 @@ const DataTable = ({
                                        autoFocus
                                        name={field}
                                        id={field}
-                                        onChange={e => handleInputChange(e)}
-                                        defaultValue={fieldValue}


im updating all of these inputs to be controlled components instead of uncontrolled

roseeichelmann · 2024-09-23T19:38:29Z

editor/src/Components/DataTable.js

-                                        onChange={e => handleInputChange(e)}
+                                        value={editValue
+                                          .toString()
+                                          .toUpperCase()}


updating these to be controlled components allows me to auto capitalize user input as they type

roseeichelmann · 2024-09-23T19:39:40Z

editor/src/views/Crashes/SwapAddressButton.js

  const [isConfirmModalOpen, setIsConfirmModalOpen] = useState(false);

  const crash = data?.crash;

  const toggleModal = () => {
+    // make sure we are not in edit mode on a field
+    setEditField("");


so that if we are in edit mode on a field and click the swap address button, we get out of edit mode

roseeichelmann · 2024-09-24T15:22:00Z

editor/src/Components/DataTable.js

+                                        value={editValue}
+                                        onChange={e =>
+                                          setEditValue(
+                                            e.target.value.toUpperCase()


auto capitalize user input

roseeichelmann · 2024-09-24T17:33:14Z

editor/package-lock.json

@@ -1,12 +1,12 @@
 {
  "name": "atd-vz-data",
-  "version": "1.47.0",
+  "version": "2.1.0",


from running npm install for the first time in awhile

chiaberry

I tried editing fields, quitting editing halfway through, opening them again, swapping addresses mid edit, and it all works as you described it should.

johnclary

yay, address editing! 🙌

and thanks for switching these over to controlled components. i'm seeing a few warnings that should be a quick fix.

also, one result of this change is that the previous value flashes on the screen while the save + refetch happens. can you see if there's a fix for this maybe in the handleFieldUpdate callback?

🙏

editor/src/Components/DataTable.js

johnclary · 2024-09-25T18:08:45Z

editor/src/Components/DataTable.js

@@ -33,13 +34,22 @@ const DataTable = ({
  const roles = getRoles();
  const isReadOnlyUser = isReadOnly(roles);

+  // Sets the state of the value for the current field being edited
+  const [editValue, setEditValue] = useState();


eslint is barking because null/undefined is not a valid value to pass to input elements. we need an empty string as the default value and whenever you reset the value.

i'm also getting this warning when i start editing a blank field:

Warning: A component is changing an uncontrolled input of type text to be controlled.

i think this might resolve itself if you make default input type a string.

johnclary · 2024-09-25T18:09:29Z

editor/src/Components/DataTable.js

  // Import Lookup tables and aggregate an object of uiType= "select" options
  const { data: lookupSelectOptions } = useQuery(GET_LOOKUPS);

+  const handleEditClick = (field, fieldValue) => {
+    setEditField(field);
+    setEditValue(fieldValue);


here to you need to set the edit value to "" if it is null

roseeichelmann · 2024-10-02T16:23:42Z

@johnclary this is ready for re-review!

johnclary

Rose, I just noticed a little bug when editing a yes/no field. The dropdown defaults to "Yes", even when the current value is "No".

E.g., here's the non-edit state:

And here's what is rendered after toggling the edit:

Can you check this?

mddilley

Looks great! I replicated the bug that John caught too, and, after that, this is good to go! I was able to edit every address field and all other select (non-boolean) and text type fields too.

roseeichelmann · 2024-10-02T23:24:27Z

@johnclary @mddilley thanks for catching that guys! it had to do with the way i was checking for falsey values in general instead of explicitly checking if the edit value was null to set it to an empty string in the handleEditClick

johnclary

🚢 🚢 🚢 🚢

mddilley

Awesome! I tested again with the updated handling and it is ✨

make fields editable

97a5d7c

roseeichelmann added the WIP Work in progress label Sep 20, 2024

roseeichelmann changed the base branch from main to 19016_swap_addresses September 20, 2024 17:40

roseeichelmann added 3 commits September 23, 2024 14:33

make the datatable inputs controlled components, add event handlers a…

59e25d7

…nd auto capitalize input

change var

27830ad

reset edit field on address swap button click

df19a3e

roseeichelmann commented Sep 23, 2024

View reviewed changes

roseeichelmann added 3 commits September 23, 2024 16:36

handle case where field value is null

4b53edf

dont need to upper case here

d017821

toUpperCase in on change instead of value

7f04709

roseeichelmann commented Sep 24, 2024

View reviewed changes

roseeichelmann added 2 commits September 24, 2024 10:22

update comment

d676094

debugging comment

c790a76

roseeichelmann changed the base branch from 19016_swap_addresses to main September 24, 2024 17:23

remove this console log

ef1a471

roseeichelmann changed the base branch from main to 19016_swap_addresses September 24, 2024 17:30

roseeichelmann removed the WIP Work in progress label Sep 24, 2024

roseeichelmann requested review from johnclary, frankhereford, mateoclarke, chiaberry, tillyw and mddilley September 24, 2024 17:32

roseeichelmann commented Sep 24, 2024

View reviewed changes

chiaberry approved these changes Sep 24, 2024

View reviewed changes

merge

649fd11

johnclary requested changes Sep 25, 2024

View reviewed changes

Base automatically changed from 19016_swap_addresses to main October 1, 2024 18:00

roseeichelmann added 3 commits October 1, 2024 23:49

fixes bug

3449372

set state to string instead of null

830d348

chain promise so old value doesnt flash on screen before refetch

9c13dd1

roseeichelmann requested a review from johnclary October 2, 2024 15:57

roseeichelmann added 4 commits October 2, 2024 10:59

Merge branch 'main' into 19014_enable_address_editing

5cdda0d

dont need this

3aeca4a

if null set to empty string

ec41697

unique key prop

4615121

johnclary requested changes Oct 2, 2024

View reviewed changes

mddilley reviewed Oct 2, 2024

View reviewed changes

fix boolean bug

f83f24e

roseeichelmann requested review from johnclary and mddilley October 2, 2024 23:19

johnclary approved these changes Oct 3, 2024

View reviewed changes

mddilley approved these changes Oct 3, 2024

View reviewed changes

roseeichelmann merged commit acab040 into main Oct 3, 2024
8 checks passed

roseeichelmann deleted the 19014_enable_address_editing branch October 3, 2024 16:02

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Enable address editing #1564

Enable address editing #1564

roseeichelmann commented Sep 20, 2024 •

edited

Loading

roseeichelmann Sep 23, 2024

roseeichelmann Sep 23, 2024

roseeichelmann Sep 23, 2024

roseeichelmann Sep 24, 2024

roseeichelmann Sep 24, 2024

chiaberry left a comment

johnclary left a comment

johnclary Sep 25, 2024

johnclary Sep 25, 2024 •

edited

Loading

johnclary Sep 25, 2024

roseeichelmann commented Oct 2, 2024

johnclary left a comment

mddilley left a comment •

edited

Loading

roseeichelmann commented Oct 2, 2024

johnclary left a comment

mddilley left a comment

Enable address editing #1564

Enable address editing #1564

Conversation

roseeichelmann commented Sep 20, 2024 • edited Loading

Associated issues

Testing

Ship list

roseeichelmann Sep 23, 2024

Choose a reason for hiding this comment

roseeichelmann Sep 23, 2024

Choose a reason for hiding this comment

roseeichelmann Sep 23, 2024

Choose a reason for hiding this comment

roseeichelmann Sep 24, 2024

Choose a reason for hiding this comment

roseeichelmann Sep 24, 2024

Choose a reason for hiding this comment

chiaberry left a comment

Choose a reason for hiding this comment

johnclary left a comment

Choose a reason for hiding this comment

johnclary Sep 25, 2024

Choose a reason for hiding this comment

johnclary Sep 25, 2024 • edited Loading

Choose a reason for hiding this comment

johnclary Sep 25, 2024

Choose a reason for hiding this comment

roseeichelmann commented Oct 2, 2024

johnclary left a comment

Choose a reason for hiding this comment

mddilley left a comment • edited Loading

Choose a reason for hiding this comment

roseeichelmann commented Oct 2, 2024

johnclary left a comment

Choose a reason for hiding this comment

mddilley left a comment

Choose a reason for hiding this comment

roseeichelmann commented Sep 20, 2024 •

edited

Loading

johnclary Sep 25, 2024 •

edited

Loading

mddilley left a comment •

edited

Loading