Adapt entry dialog to show existing values in edit mode

funidata · Jan 11, 2024 · 4d62dac · 4d62dac
1 parent be9242b
commit 4d62dac
Show file tree

Hide file tree

Showing 3 changed files with 36 additions and 17 deletions.
diff --git a/web/src/components/entry-dialog/EntryDialog.tsx b/web/src/components/entry-dialog/EntryDialog.tsx
@@ -29,24 +29,24 @@ export type EntryFormSchema = {
 
 type EntryDialogProps = DialogProps & {
   editEntry?: Entry;
+  date?: Dayjs;
 };
 
-const EntryDialog = ({ editEntry, ...props }: EntryDialogProps) => {
-  console.log("edit entry", editEntry);
+const EntryDialog = ({ editEntry, date, ...props }: EntryDialogProps) => {
   const theme = useTheme();
   const fullScreen = useMediaQuery(theme.breakpoints.down("md"));
   const [addWorkdayEntryMutation] = useMutation(AddWorkdayEntryDocument);
 
-  const { handleSubmit, control, reset } = useForm<EntryFormSchema>({
-    defaultValues: {
-      date: dayjs(),
-      duration: "",
-      product: "",
-      activity: "",
-      issue: "",
-      client: "",
-    },
-  });
+  const defaultValues: EntryFormSchema = {
+    date: date ? dayjs(date) : dayjs(),
+    duration: editEntry?.duration.toString() || "",
+    product: editEntry?.product || "",
+    activity: editEntry?.activity || "",
+    issue: editEntry?.issue || "",
+    client: editEntry?.client || "",
+  };
+
+  const { handleSubmit, control, reset } = useForm<EntryFormSchema>({ defaultValues });
 
   const onSubmit: SubmitHandler<EntryFormSchema> = async (formValues) => {
     const { date, duration, product, activity, issue, client } = formValues;

diff --git a/web/src/components/workday-accordion/EditEntryButton.tsx b/web/src/components/workday-accordion/EditEntryButton.tsx
@@ -1,14 +1,33 @@
 import EditIcon from "@mui/icons-material/Edit";
 import { IconButton } from "@mui/material";
+import { Dayjs } from "dayjs";
+import { useState } from "react";
 import { useTranslation } from "react-i18next";
+import { Entry } from "../../graphql/generated/graphql";
+import EntryDialog from "../entry-dialog/EntryDialog";
 
-const EditEntryButton = () => {
+type EditEntryButtonProps = {
+  entry: Entry;
+  date: Dayjs;
+};
+
+const EditEntryButton = ({ entry, date }: EditEntryButtonProps) => {
   const { t } = useTranslation();
+  const [open, setOpen] = useState(false);
+  const toggleOpen = () => setOpen((prev) => !prev);
 
   return (
-    <IconButton aria-label={t("controls.editEntry")} color="primary" size="small">
-      <EditIcon fontSize="inherit" />
-    </IconButton>
+    <>
+      <IconButton
+        aria-label={t("controls.editEntry")}
+        color="primary"
+        size="small"
+        onClick={toggleOpen}
+      >
+        <EditIcon fontSize="inherit" />
+      </IconButton>
+      <EntryDialog open={open} onClose={toggleOpen} editEntry={entry} date={date} />
+    </>
   );
 };
 

diff --git a/web/src/components/workday-accordion/EntryTable.tsx b/web/src/components/workday-accordion/EntryTable.tsx
@@ -36,7 +36,7 @@ const EntryTable = ({ workday }: EntryTableProps) => {
             <TableCell>{entry.issue}</TableCell>
             <TableCell>{entry.client}</TableCell>
             <TableCell>
-              <EditEntryButton />
+              <EditEntryButton entry={entry} date={dayjs(workday.date)} />
               <DeleteEntryButton entryKey={entry.key} date={dayjs(workday.date)} />
             </TableCell>
           </TableRow>