diff --git a/src/components/ObjectEditor.tsx b/src/components/ObjectEditor.tsx index 17f61df64b375227cc7a5e862fda6c67e19d13db..89b9b60de66bd9025914d918658499afa591f7c0 100644 --- a/src/components/ObjectEditor.tsx +++ b/src/components/ObjectEditor.tsx @@ -186,7 +186,7 @@ export default function ObjectEditor<ItemT>({ </Button> </ButtonGroup> </Stack> - <Stack spacing={2}> + <Stack spacing={1}> {fieldConfigs.map((fconf) => { const value = getNestedValue(item, fconf.name) || ""; const error = fieldErrors.get(fconf.name); diff --git a/src/pages/CombinedList.tsx b/src/pages/CombinedList.tsx index 64199d80b52278fef2b56ddc8596cfed004a3f52..f8c30cf3810370bec8a30af39a1be65852d471b0 100644 --- a/src/pages/CombinedList.tsx +++ b/src/pages/CombinedList.tsx @@ -1,4 +1,4 @@ -import React from "react"; +import React, { useState } from "react"; import { useLoaderData } from "react-router-dom"; import { combinedReadCombinedPayments, @@ -10,14 +10,14 @@ import { BasicUser, Kst, Ledger } from "../client/types.gen"; import GenericDataTable from "../components/GenericDataTable"; import { Button, - Checkbox, - FormControl, - InputLabel, - ListItemText, - MenuItem, - Select, + Dialog, + DialogContent, + DialogTitle, } from "@mui/material"; -import Index from "."; +import EditReimbursement from "./EditReimbursement"; +import EditBills from "./EditBills"; +import EditCreditPayment from "./EditCreditPayment"; +import EditInternalTransfer from "./EditInternalTransfer"; export async function addLoader() { const kstList = await kstsReadKsts({}); @@ -29,13 +29,93 @@ export async function addLoader() { return { kst, ledger, user }; } +const withWrapper = + (EditFunction: (id: string) => JSX.Element) => + ({ propIdString, onClose }: { propIdString: string; onClose: () => void }) => { + const content = EditFunction(propIdString); + + return ( + <div> + {content} + <Button onClick={onClose}>Close</Button> + </div> + ); + }; +const EditReimbursementWrapper = withWrapper(EditReimbursement); +const EditBillsWrapper = withWrapper(EditBills); +const EditCreditPaymentWrapper = withWrapper(EditCreditPayment); +const EditInternalTransferWrapper = withWrapper(EditInternalTransfer); + const CombinedList: React.FC = () => { const { kst, ledger, user } = useLoaderData() as { kst: Kst[]; ledger: Ledger[]; user: BasicUser; }; + + // State for overlay + const [open, setOpen] = useState(false); + const [editContent, setEditContent] = useState<React.ReactNode | null>(null); + + const handleClose = () => { + setOpen(false); + setEditContent(null); + }; + + const handleEdit = (type: string, itemId: string) => { + let content; + console.log(itemId); + switch (type) { + case "Reimbursement": + content = ( + <EditReimbursementWrapper + propIdString={itemId} + onClose={handleClose} + /> + ); + break; + case "Bill": + content = ( + <EditBillsWrapper + propIdString={itemId} + onClose={handleClose} + /> + ); + break; + case "CreditPayment": + content = ( + <EditCreditPaymentWrapper + propIdString={itemId} + onClose={handleClose} + /> + ); + break; + case "InternalTransfer": + content = ( + <EditInternalTransferWrapper + propIdString={itemId} + onClose={handleClose} + /> + ); + break; + default: + content = <div>Unknown Type</div>; + break; + } + setEditContent(content); + setOpen(true); + }; + const columns = [ + { + name: "type", + label: "Type", + options: { + filterType: "checkbox", + filterOptions: ["Reimbursement", "Bill", "CreditPayment", "InternalTransfer"], + }, + }, + { name: "id", label: "ID" }, { name: "name", label: "Name" }, { name: "creditor__amount", label: "Amount" }, { @@ -52,23 +132,34 @@ const CombinedList: React.FC = () => { { name: "creditor__currency", label: "Currency" }, { name: "reciept", label: "Receipt" }, { name: "creator", label: "Creator" }, - { - name: "type", - label: "Type", - options: { - filterType: "checkbox", - filterOptions: ["Reimbursement", "Bill", "CreditPayment"], - }, - }, - { name: "id", label: "ID" }, + { name: "reference", label: "Reference" }, { name: "iban", label: "IBAN" }, { name: "comment", label: "Comment" }, { name: "reimbursement__recipient", label: "Recipient" }, - { name: "edit", label: "edit", options: { filter: false, sort: false } }, + { + name: "edit", + label: "Edit", + options: { + filter: false, + sort: false, + customBodyRender: (value: any, tableMeta: any) => { + const itemType = tableMeta.rowData[0]; // Assuming "type" is column 9 + const itemId = tableMeta.rowData[1]; // Assuming "id" is column 10 + return ( + <Button + variant="contained" + color="primary" + onClick={() => handleEdit(itemType, itemId)} + > + Edit + </Button> + ); + }, + }, + }, ]; - // Define the data fetching function for Credit Payments const fetchCombinedPayments = async ({ search, sort, @@ -84,13 +175,10 @@ const CombinedList: React.FC = () => { ...filters, }; - console.log("Fetching Credit Payments with:", body); - try { const response = await combinedReadCombinedPayments({ query: body }); const results = response.data?.items || []; - // Transform the fetched data to match the table's columns const transformedData = results.map((item: any) => ({ name: item.name, creditor__amount: item.creditor?.amount, @@ -111,16 +199,7 @@ const CombinedList: React.FC = () => { reference: item.reference, iban: item.iban, comment: item.comment, - recipient: item.reimbursement__recipient, - edit: ( - <Button - variant="contained" - color="primary" - href={`/${item.type}/${item.id}`} - > - Edit - </Button> - ), + reimbursement__recipient: item.reimbursement__recipient, })); return transformedData; @@ -131,11 +210,17 @@ const CombinedList: React.FC = () => { }; return ( - <GenericDataTable - title="Combined Payments List" - columns={columns} - fetchData={fetchCombinedPayments} - /> + <> + <GenericDataTable + title="Combined Payments List" + columns={columns} + fetchData={fetchCombinedPayments} + /> + <Dialog open={open} onClose={handleClose} maxWidth="md" fullWidth> + <DialogTitle>Edit Item</DialogTitle> + <DialogContent>{editContent}</DialogContent> + </Dialog> + </> ); }; diff --git a/src/pages/EditBills.tsx b/src/pages/EditBills.tsx index 171b8254d07f4cd780dcc60c1630735264ab2599..9a30e2a00c7ff3cb3b0cebe7c2772584b7bfb654 100644 --- a/src/pages/EditBills.tsx +++ b/src/pages/EditBills.tsx @@ -75,8 +75,9 @@ function generateFieldConfigs( ]; } -export default function EditBills() { - const { idstring } = useParams<{ idstring: string }>(); // Get ID from URL params +export default function EditBills(propIdString: string ) { + const { idstring: urlidstring } = useParams<{ idstring: string }>(); + const idstring = urlidstring || propIdString; const { kst, ledger, user } = useLoaderData() as { kst: Kst[]; ledger: Ledger[]; diff --git a/src/pages/EditCreditPayment.tsx b/src/pages/EditCreditPayment.tsx index 77ffec048644058f6b8af913c41255bde6ffbc33..3e1cb61bc8d62bfd3ce9212402cca9ca38738412 100644 --- a/src/pages/EditCreditPayment.tsx +++ b/src/pages/EditCreditPayment.tsx @@ -60,8 +60,9 @@ function generateFieldConfigs( ]; } -export default function EditCreditPayment() { - const { idstring } = useParams<{ idstring: string }>(); // Get ID from URL params +export default function EditCreditPayment(propIdString: string = "") { + const { idstring: urlidstring } = useParams<{ idstring: string }>(); + const idstring = urlidstring || propIdString; const { kst, ledger, user } = useLoaderData() as { kst: Kst[]; ledger: Ledger[]; diff --git a/src/pages/EditInternalTransfer.tsx b/src/pages/EditInternalTransfer.tsx index acf570f5d58d02c07fb0fbcd258b2615e8415af9..8c9fbbb169452cce8c6ee1a368dae2012fc97a5b 100644 --- a/src/pages/EditInternalTransfer.tsx +++ b/src/pages/EditInternalTransfer.tsx @@ -46,8 +46,9 @@ function generateFieldConfigs( ]; } -export default function EditInternalTransfers() { - const { idstring } = useParams<{ idstring: string }>(); // Get ID from URL params +export default function EditInternalTransfers(propIdString: string = "") { + const { idstring: urlidstring } = useParams<{ idstring: string }>(); + const idstring = urlidstring || propIdString; const { kst, ledger, user } = useLoaderData() as { kst: Kst[]; ledger: Ledger[]; diff --git a/src/pages/EditReimbursement.tsx b/src/pages/EditReimbursement.tsx index 2306467f5f38bf598a5f63511066a8705b96dbed..3229887a98d993c24ded0fea47c3942cc3be9b51 100644 --- a/src/pages/EditReimbursement.tsx +++ b/src/pages/EditReimbursement.tsx @@ -48,8 +48,9 @@ function generateFieldConfigs( ]; } -export default function EditReimbursement() { - const { idstring } = useParams<{ idstring: string }>(); // Get ID from URL params +export default function EditReimbursement(propIdString: string ) { + const { idstring: urlidstring } = useParams<{ idstring: string }>(); + const idstring = urlidstring || propIdString; const { kst, ledger, user } = useLoaderData() as { kst: Kst[]; ledger: Ledger[]; @@ -86,7 +87,7 @@ export default function EditReimbursement() { recipient: data?.recipient || "", }); } catch (error) { - console.error("Failed to load credit payment data:", error); + console.error("Failed to load Reimbursement data:", error); } finally { setLoading(false); } diff --git a/src/pages/UncheckedPayments.tsx b/src/pages/UncheckedPayments.tsx index ae7e5cb07450cd2de37659dcd1e0247389e5647b..ef9798b7d24dfbc99282f4441948b100cac74514 100644 --- a/src/pages/UncheckedPayments.tsx +++ b/src/pages/UncheckedPayments.tsx @@ -1,4 +1,4 @@ -import React from "react"; +import React, { useState } from "react"; import { useLoaderData } from "react-router-dom"; import { combinedReadCombinedPayments, @@ -19,15 +19,15 @@ import { BasicUser, CombinedCreditor, Kst, Ledger } from "../client/types.gen"; import GenericDataTable from "../components/GenericDataTable"; import { Button, - Checkbox, - FormControl, - InputLabel, - ListItemText, - MenuItem, - Select, + Dialog, + DialogContent, + DialogTitle, } from "@mui/material"; -import Index from "."; -import { BillPublic_InputSchema } from "../client"; +import EditReimbursement from "./EditReimbursement"; +import EditBills from "./EditBills"; +import EditCreditPayment from "./EditCreditPayment"; +import EditInternalTransfer from "./EditInternalTransfer"; + export async function addLoader() { const kstList = await kstsReadKsts({}); @@ -39,13 +39,98 @@ export async function addLoader() { return { kst, ledger, user }; } +const withWrapper = + (EditFunction: (id: string) => JSX.Element) => + ({ propIdString, onClose }: { propIdString: string; onClose: () => void }) => { + const content = EditFunction(propIdString); + + return ( + <div> + {content} + <Button onClick={onClose}>Close</Button> + </div> + ); + }; +const EditReimbursementWrapper = withWrapper(EditReimbursement); +const EditBillsWrapper = withWrapper(EditBills); +const EditCreditPaymentWrapper = withWrapper(EditCreditPayment); +const EditInternalTransferWrapper = withWrapper(EditInternalTransfer); + const CombinedList: React.FC = () => { const { kst, ledger, user } = useLoaderData() as { kst: Kst[]; ledger: Ledger[]; user: BasicUser; }; + + // State for overlay + const [open, setOpen] = useState(false); + const [editContent, setEditContent] = useState<React.ReactNode | null>(null); + + const handleClose = () => { + setOpen(false); + setEditContent(null); + }; + + const handleEdit = (type: string, itemId: string) => { + let content; + console.log(itemId); + switch (type) { + case "Reimbursement": + content = ( + <EditReimbursementWrapper + propIdString={itemId} + onClose={handleClose} + /> + ); + break; + case "Bill": + content = ( + <EditBillsWrapper + propIdString={itemId} + onClose={handleClose} + /> + ); + break; + case "CreditPayment": + content = ( + <EditCreditPaymentWrapper + propIdString={itemId} + onClose={handleClose} + /> + ); + break; + case "InternalTransfer": + content = ( + <EditInternalTransferWrapper + propIdString={itemId} + onClose={handleClose} + /> + ); + break; + default: + content = <div>Unknown Type</div>; + break; + } + setEditContent(content); + setOpen(true); + }; + const columns = [ + { + name: "type", + label: "Type", + options: { + filterType: "checkbox", + filterOptions: [ + "Reimbursement", + "Bill", + "CreditPayment", + "InternalTransfer", + ], + }, + }, + { name: "id", label: "ID" }, { name: "name", label: "Name" }, { name: "creditor__amount", label: "Amount" }, { @@ -62,26 +147,33 @@ const CombinedList: React.FC = () => { { name: "creditor__currency", label: "Currency" }, { name: "reciept", label: "Receipt" }, { name: "creator", label: "Creator" }, - { - name: "type", - label: "Type", - options: { - filterType: "checkbox", - filterOptions: [ - "Reimbursement", - "Bill", - "CreditPayment", - "InternalTransfer", - ], - }, - }, - { name: "id", label: "ID" }, + { name: "reference", label: "Reference" }, { name: "iban", label: "IBAN" }, { name: "comment", label: "Comment" }, { name: "reimbursement__recipient", label: "Recipient" }, { name: "check", label: "Check" }, - { name: "edit", label: "edit", options: { filter: false, sort: false } }, + { + name: "edit", + label: "Edit", + options: { + filter: false, + sort: false, + customBodyRender: (value: any, tableMeta: any) => { + const itemType = tableMeta.rowData[0]; // Assuming "type" is column 9 + const itemId = tableMeta.rowData[1]; // Assuming "id" is column 10 + return ( + <Button + variant="contained" + color="primary" + onClick={() => handleEdit(itemType, itemId)} + > + Edit + </Button> + ); + }, + }, + }, ]; // Define the data fetching function for Credit Payments @@ -257,11 +349,17 @@ const CombinedList: React.FC = () => { }; return ( - <GenericDataTable - title="Combined Payments List" - columns={columns} - fetchData={fetchCombinedPayments} - /> + <> + <GenericDataTable + title="Combined Payments List" + columns={columns} + fetchData={fetchCombinedPayments} + /> + <Dialog open={open} onClose={handleClose} maxWidth="md" fullWidth> + <DialogTitle>Edit Item</DialogTitle> + <DialogContent>{editContent}</DialogContent> + </Dialog> + </> ); };