Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Enable address editing #1564

Merged
merged 19 commits into from
Oct 3, 2024
Merged

Enable address editing #1564

Show file tree
Hide file tree
Changes from 18 commits
Commits
Show all changes
19 commits
Select commit Hold shift + click to select a range
97a5d7c
make fields editable
roseeichelmann Sep 20, 2024
59e25d7
make the datatable inputs controlled components, add event handlers a…
roseeichelmann Sep 23, 2024
27830ad
change var
roseeichelmann Sep 23, 2024
df19a3e
reset edit field on address swap button click
roseeichelmann Sep 23, 2024
4b53edf
handle case where field value is null
roseeichelmann Sep 23, 2024
d017821
dont need to upper case here
roseeichelmann Sep 23, 2024
7f04709
toUpperCase in on change instead of value
roseeichelmann Sep 24, 2024
d676094
update comment
roseeichelmann Sep 24, 2024
c790a76
debugging comment
roseeichelmann Sep 24, 2024
ef1a471
remove this console log
roseeichelmann Sep 24, 2024
649fd11
merge
roseeichelmann Sep 25, 2024
3449372
fixes bug
roseeichelmann Oct 2, 2024
830d348
set state to string instead of null
roseeichelmann Oct 2, 2024
9c13dd1
chain promise so old value doesnt flash on screen before refetch
roseeichelmann Oct 2, 2024
5cdda0d
Merge branch 'main' into 19014_enable_address_editing
roseeichelmann Oct 2, 2024
3aeca4a
dont need this
roseeichelmann Oct 2, 2024
ec41697
if null set to empty string
roseeichelmann Oct 2, 2024
4615121
unique key prop
roseeichelmann Oct 2, 2024
f83f24e
fix boolean bug
roseeichelmann Oct 2, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 2 additions & 2 deletions editor/package-lock.json
View file
Open in desktop

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

44 changes: 35 additions & 9 deletions editor/src/Components/DataTable.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import React from "react";
import React, { useState } from "react";
import { useQuery } from "@apollo/react-hooks";
import { useAuth0, isReadOnly } from "../auth/authContext";
import { formatCostToDollars, formatDateTimeString } from "../helpers/format";
Expand Down Expand Up @@ -33,13 +33,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("");

// 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 ? fieldValue : "");
};

const handleCancelClick = e => {
e.preventDefault();

setEditField("");
setEditValue("");
};

return (
Expand All @@ -55,6 +64,7 @@ const DataTable = ({
<SwapAddressButton
crash={data?.crash}
crashRefetch={crashRefetch}
setEditField={setEditField}
/>
)}
</CardHeader>
Expand Down Expand Up @@ -136,7 +146,9 @@ const DataTable = ({
return (
<tr
key={i}
onClick={() => canClickToEdit && setEditField(field)}
onClick={() =>
canClickToEdit && handleEditClick(field, fieldValue)
}
style={{
cursor: canClickToEdit ? "pointer" : "auto",
}}
Expand All @@ -158,12 +170,17 @@ const DataTable = ({
autoFocus
name={field}
id={field}
onChange={e => handleInputChange(e)}
defaultValue={fieldValue}
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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

onChange={e =>
setEditValue(e.target.value)
}
value={editValue}
type="select"
>
{selectOptions.map(option => (
johnclary marked this conversation as resolved.
Show resolved Hide resolved
<option value={option[`id`]}>
<option
value={option[`id`]}
key={option["id"]}
>
{option[`label`]}
</option>
))}
Expand All @@ -175,8 +192,12 @@ const DataTable = ({
name={field}
id={field}
type="text"
defaultValue={fieldValue}
onChange={e => handleInputChange(e)}
value={editValue}
onChange={e =>
setEditValue(
e.target.value.toUpperCase()
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

auto capitalize user input

)
}
autoComplete="off"
// disable 1password autofill
data-1p-ignore
Expand All @@ -185,9 +206,11 @@ const DataTable = ({
{fieldUiType === "boolean" && (
<Input
autoFocus
defaultValue={fieldValue}
value={editValue}
type="select"
onChange={e => handleInputChange(e)}
onChange={e =>
setEditValue(e.target.value)
}
>
<option value={true}>YES</option>
<option value={false}>NO</option>
Expand All @@ -200,6 +223,9 @@ const DataTable = ({
color="primary"
size="sm"
className="btn-pill mr-1"
onClick={e =>
handleInputChange(editValue)
}
>
<i className="fa fa-check edit-toggle" />
</Button>
Expand Down
12 changes: 7 additions & 5 deletions editor/src/views/Crashes/Crash.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -63,9 +63,9 @@ function Crash(props) {
if (crashLoading) return "Loading...";
if (crashError) return `Error! ${crashError.message}`;

const handleInputChange = e => {
const handleInputChange = editValue => {
const newFormState = Object.assign(formData, {
[editField]: e.target.value,
[editField]: editValue ? editValue.toString().toUpperCase() : null,
updated_by: localStorage.getItem("hasura_user_email"),
});
setFormData(newFormState);
Expand All @@ -88,9 +88,11 @@ function Crash(props) {
changes: { ...formData, ...secondaryFormData },
},
})
.then(res => crashRefetch());

setEditField("");
.then(res => crashRefetch())
.then(res => {
setEditField("");
setFormData({});
});
};

const crashRecord = {
Expand Down
4 changes: 3 additions & 1 deletion editor/src/views/Crashes/SwapAddressButton.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,12 +4,14 @@ import ConfirmModal from "../../Components/ConfirmModal";
import { useMutation } from "@apollo/react-hooks";
import { UPDATE_CRASH } from "../../queries/crashes";

const SwapAddressButton = ({ crash, crashRefetch }) => {
const SwapAddressButton = ({ crash, crashRefetch, setEditField }) => {
const [isConfirmModalOpen, setIsConfirmModalOpen] = useState(false);

const [updateCrash] = useMutation(UPDATE_CRASH);

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

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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

setIsConfirmModalOpen(!isConfirmModalOpen);
};

Expand Down
32 changes: 16 additions & 16 deletions editor/src/views/Crashes/crashDataMap.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -133,46 +133,46 @@ export const createCrashDataMap = isTempRecord => {
},
rpt_block_num: {
label: "Street Number",
editable: false,
editable: true,
uiType: "text",
},
rpt_street_name: {
label: "Street Name",
editable: false,
editable: true,
uiType: "text",
},
rpt_street_desc: {
label: "Street Description",
editable: false,
editable: true,
uiType: "text",
},
rpt_road_part_id: {
label: "Roadway Part",
editable: false,
editable: true,
uiType: "select",
lookupOptions: "lookups_road_part",
},
rpt_rdwy_sys_id: {
label: "Roadway System",
editable: false,
editable: true,
uiType: "select",
lookupOptions: "lookups_rwy_sys",
},
rpt_hwy_num: {
label: "Highway Number",
editable: false,
editable: true,
uiType: "text",
},
rpt_street_pfx: {
label: "Street Prefix",
editable: false,
editable: true,
uiType: "text",
},
// TODO: We'll probably want to validate that they are using values from the table
// for the rpt_street_sfx & rpt_sec_street_sfx fields but the values are currently text, not ID lookups so we'll punt
rpt_street_sfx: {
label: "Street Suffix",
editable: false,
editable: true,
uiType: "text",
},
},
Expand All @@ -187,44 +187,44 @@ export const createCrashDataMap = isTempRecord => {
},
rpt_sec_block_num: {
label: "Secondary Street Number",
editable: false,
editable: true,
uiType: "text",
},
rpt_sec_street_name: {
label: "Secondary Street Name",
editable: false,
editable: true,
uiType: "text",
},
rpt_sec_street_desc: {
label: "Secondary Street Description",
editable: false,
editable: true,
uiType: "text",
},
rpt_sec_road_part_id: {
label: "Secondary Roadway Part",
editable: false,
editable: true,
uiType: "select",
lookupOptions: "lookups_road_part",
},
rpt_sec_rdwy_sys_id: {
label: "Secondary Roadway System",
editable: false,
editable: true,
uiType: "select",
lookupOptions: "lookups_rwy_sys",
},
rpt_sec_hwy_num: {
label: "Secondary Highway Number",
editable: false,
editable: true,
uiType: "text",
},
rpt_sec_street_pfx: {
label: "Secondary Street Prefix",
editable: false,
editable: true,
uiType: "text",
},
rpt_sec_street_sfx: {
label: "Secondary Street Suffix",
editable: false,
editable: true,
uiType: "text",
},
},
Expand Down