Add edit entry buttons in entry table

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

Hide file tree

Showing 6 changed files with 32 additions and 4 deletions.
diff --git a/web/src/components/entry-dialog/EntryDialog.tsx b/web/src/components/entry-dialog/EntryDialog.tsx
@@ -15,7 +15,7 @@ import { DatePicker } from "@mui/x-date-pickers";
 import { Dayjs } from "dayjs";
 import { Controller, SubmitHandler, useForm } from "react-hook-form";
 import dayjs from "../../common/dayjs";
-import { AddWorkdayEntryDocument } from "../../graphql/generated/graphql";
+import { AddWorkdayEntryDocument, Entry } from "../../graphql/generated/graphql";
 import DimensionSelect from "./DimensionSelect";
 
 export type EntryFormSchema = {
@@ -27,7 +27,12 @@ export type EntryFormSchema = {
   client: string;
 };
 
-const EntryDialog = (props: DialogProps) => {
+type EntryDialogProps = DialogProps & {
+  editEntry?: Entry;
+};
+
+const EntryDialog = ({ editEntry, ...props }: EntryDialogProps) => {
+  console.log("edit entry", editEntry);
   const theme = useTheme();
   const fullScreen = useMediaQuery(theme.breakpoints.down("md"));
   const [addWorkdayEntryMutation] = useMutation(AddWorkdayEntryDocument);
@@ -36,6 +41,10 @@ const EntryDialog = (props: DialogProps) => {
     defaultValues: {
       date: dayjs(),
       duration: "",
+      product: "",
+      activity: "",
+      issue: "",
+      client: "",
     },
   });
 

diff --git a/web/src/components/DeleteEntryButton.tsx → ...s/workday-accordion/DeleteEntryButton.tsx b/web/src/components/DeleteEntryButton.tsx → ...s/workday-accordion/DeleteEntryButton.tsx
@@ -4,7 +4,7 @@ import { IconButton, Menu, MenuItem } from "@mui/material";
 import { Dayjs } from "dayjs";
 import { MouseEvent, useState } from "react";
 import { useTranslation } from "react-i18next";
-import { RemoveWorkdayEntryDocument } from "../graphql/generated/graphql";
+import { RemoveWorkdayEntryDocument } from "../../graphql/generated/graphql";
 
 type DeleteEntryButtonProps = {
   entryKey: string;

diff --git a/web/src/components/workday-accordion/EditEntryButton.tsx b/web/src/components/workday-accordion/EditEntryButton.tsx
@@ -0,0 +1,15 @@
+import EditIcon from "@mui/icons-material/Edit";
+import { IconButton } from "@mui/material";
+import { useTranslation } from "react-i18next";
+
+const EditEntryButton = () => {
+  const { t } = useTranslation();
+
+  return (
+    <IconButton aria-label={t("controls.editEntry")} color="primary" size="small">
+      <EditIcon fontSize="inherit" />
+    </IconButton>
+  );
+};
+
+export default EditEntryButton;
diff --git a/web/src/components/workday-accordion/EntryTable.tsx b/web/src/components/workday-accordion/EntryTable.tsx
@@ -2,7 +2,8 @@ import { Table, TableBody, TableCell, TableHead, TableRow } from "@mui/material"
 import { useTranslation } from "react-i18next";
 import dayjs from "../../common/dayjs";
 import { Workday } from "../../graphql/generated/graphql";
-import DeleteEntryButton from "../DeleteEntryButton";
+import DeleteEntryButton from "./DeleteEntryButton";
+import EditEntryButton from "./EditEntryButton";
 
 type EntryTableProps = {
   workday: Workday;
@@ -35,6 +36,7 @@ const EntryTable = ({ workday }: EntryTableProps) => {
             <TableCell>{entry.issue}</TableCell>
             <TableCell>{entry.client}</TableCell>
             <TableCell>
+              <EditEntryButton />
               <DeleteEntryButton entryKey={entry.key} date={dayjs(workday.date)} />
             </TableCell>
           </TableRow>

diff --git a/web/src/i18n/en.ts b/web/src/i18n/en.ts
@@ -2,6 +2,7 @@ const en = {
   controls: {
     confirm: "Confirm",
     deleteEntry: "Delete entry",
+    editEntry: "Edit entry",
   },
   dimensionNames: {
     product: "Product",

diff --git a/web/src/i18n/fi.ts b/web/src/i18n/fi.ts
@@ -2,6 +2,7 @@ const fi = {
   controls: {
     confirm: "Vahvista",
     deleteEntry: "Poista merkintä",
+    editEntry: "Muokkaa merkintää",
   },
   dimensionNames: {
     product: "Tuote",