Skip to content

Commit

Permalink
Merge pull request #1081 from cityofaustin/9498_edit_delete_note
Browse files Browse the repository at this point in the history 
9498 edit delete note
  • Loading branch information
@roseeichelmann
roseeichelmann authored Jul 26, 2022
2 parents ed1bdc3 + a9d41d2 commit 07accb6
Show file tree
Hide file tree
Showing 3 changed files with 161 additions and 18 deletions.
27 changes: 27 additions & 0 deletions atd-vze/src/queries/notes.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -30,3 +30,30 @@ export const INSERT_NOTE = gql`
}
}
`;

export const UPDATE_NOTE = gql`
mutation UpdateNote($note: String!, $id: Int!) {
update_notes_by_pk(
pk_columns: {id: $id}
_set: {text: $note}
) {
crash_id
text
date
user_email
}
}
`;

export const DELETE_NOTE = gql`
mutation DeleteNote($id: Int!) {
delete_notes_by_pk(
id: $id
) {
crash_id
text
date
user_email
}
}
`
150 changes: 133 additions & 17 deletions atd-vze/src/views/Crashes/Notes.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,14 +3,16 @@ import { useQuery, useMutation } from "@apollo/react-hooks";
import { Card, CardHeader, CardBody, CardFooter, Table, Input, Button } from "reactstrap";
import moment from "moment";
import { notesDataMap } from "./notesDataMap";
import { GET_NOTES, INSERT_NOTE } from "../../queries/notes";
import { GET_NOTES, INSERT_NOTE, UPDATE_NOTE, DELETE_NOTE } from "../../queries/notes";
import { useAuth0, isReadOnly } from "../../auth/authContext";

// declare a notes component
const Notes = ({ crashId }) => {

// add a state variable to manage value when new note is entered
const [newNote, setNewNote] = useState("");
const [editedNote, setEditedNote] = useState("");
const [editRow, setEditRow] = useState("");

// disable edit features if role is "readonly"
const { getRoles } = useAuth0();
Expand All @@ -21,8 +23,10 @@ const Notes = ({ crashId }) => {
variables: { crashId },
});

// declare insert mutation function
// declare mutation functions
const [addNote] = useMutation(INSERT_NOTE);
const [editNote] = useMutation(UPDATE_NOTE);
const [deleteNote] = useMutation(DELETE_NOTE);

if (loading) return "Loading...";
if (error) return `Error! ${error.message}`;
Expand All @@ -46,20 +50,64 @@ const Notes = ({ crashId }) => {
}).catch(error => console.error(error));
};

// function to handle edit button click
const handleEditClick = (row) => {
setEditedNote(row.text);
setEditRow(row);
};

// function to handle save edit button click
const handleCheckClick = (row) => {
const id = row.id
editNote({
variables: {
note: editedNote,
id: id
}
}).then(response => {
setEditedNote("");
refetch();
}).catch(error => console.error(error));
};

// function to handle cancel button click
const handleCancelClick = () => {
setEditRow("");
setEditedNote("");
}

// function to handle delete note button click
const handleDeleteClick = (row) => {
const id = row.id
deleteNote({
variables: {
id: id
}
}).then(response => {
refetch();
}).catch(error => console.error(error));
};

// render notes card and table
return (
<Card>
<CardHeader>{fieldConfig.title}</CardHeader>
<CardBody>
<Table>
<Table style={{width: "100%"}}>
{/* display label for each field in table header*/}
<tr>
{/* display label for each field in table header */}
{Object.keys(fieldConfig.fields).map(field => (
<th key={`th_${fieldConfig.fields[field].label}`}>
{fieldConfig.fields[field].label}
</th>
))}
<th>
<th style={{width: "10%"}}>
{fieldConfig.fields.date.label}
</th>
<th style={{width: "24%"}}>
{fieldConfig.fields.user_email.label}
</th>
<th style={{width: "54%"}}>
{fieldConfig.fields.text.label}
</th>
<th style={{width: "6%"}}>
</th>
<th style={{width: "6%"}}>
</th>
</tr>
<tbody>
Expand All @@ -78,33 +126,101 @@ const Notes = ({ crashId }) => {
onChange={e => setNewNote(e.target.value)}
/>
</td>
<td>
<td style={{padding: "12px 4px 12px 12px"}}>
<Button
type="submit"
color="primary"
onClick={handleAddNoteClick}
className="btn-pill mt-2"
size="sm"
style={{width: "50px"}}
>
Add
</Button>
</td>
<td>
</td>
</tr>}
{/* iterate through each row in notes table */}
{data.notes.map(row => {
const isEditing = editRow === row;
return (
<tr key={`table-${tableName}-${row[keyField]}`}>
{/* iterate through each field in the row and render its value */}
{Object.keys(fieldConfig.fields).map((field, i) => {
return (
<td key={i}>
{/* format value if the field is a date */}
{field === "date"
? moment(row[field]).format("MM/DD/YYYY")
: row[field]}
{/* if user is editing display editing input text box */}
{isEditing && field === "text"
? <Input
type="textarea"
defaultValue={row.text}
onChange={e => setEditedNote(e.target.value)}
/>
: field === "date"
? moment(row[field]).format("MM/DD/YYYY")
: row[field]
}
</td>
);
})}
<td>
</td>
{/* display edit button if user has edit permissions */}
{!isReadOnly(roles) && !isEditing &&
<td style={{padding: "12px 4px 12px 12px"}}>
<Button
type="submit"
color="secondary"
size="sm"
className="btn-pill mt-2"
style={{width: "50px"}}
onClick={e => handleEditClick(row)}
>
<i className="fa fa-pencil edit-toggle" />
</Button>
</td>}
{/* display delete button if user has edit permissions */}
{!isReadOnly(roles) && !isEditing &&
<td style={{padding: "12px 4px 12px 4px"}}>
<Button
type="submit"
color="secondary"
className="btn-pill mt-2"
size="sm"
style={{width: "50px"}}
onClick={e => handleDeleteClick(row)}
>
<i className="fa fa-trash" />
</Button>
</td>}
{/* display accept button if user is editing */}
{!isReadOnly(roles) && isEditing &&
<td style={{padding: "12px 4px 12px 12px"}}>
<Button
color="primary"
className="btn-pill mt-2"
size="sm"
style={{width: "50px"}}
onClick={e => handleCheckClick(row)}
>
<i className="fa fa-check edit-toggle" />
</Button>
</td>
}
{/* display cancel button if user is editing */}
{!isReadOnly(roles) && isEditing &&
<td style={{padding: "12px 4px 12px 4px"}}>
<Button
type="submit"
color="danger"
className="btn-pill mt-2"
size="sm"
style={{width: "50px"}}
onClick={e => handleCancelClick(e)}
>
<i className="fa fa-times edit-toggle" />
</Button>
</td>
}
</tr>
);
})}
Expand Down
2 changes: 1 addition & 1 deletion atd-vze/src/views/Crashes/notesDataMap.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,7 @@ export const notesDataMap = [
},
text: {
label: "Note",
editable: false,
editable: true,
},
},
},
Expand Down

0 comments on commit 07accb6

Please sign in to comment.