From da0c200a4c4a1f1478e8fdff67c73adb82251219 Mon Sep 17 00:00:00 2001 From: kmiola <kmiola@ethz.ch> Date: Wed, 13 Nov 2024 15:00:02 +0000 Subject: [PATCH] site works, input possible, valid input not possible, will create new branch to try with easier post: create Item --- src/main.tsx | 6 ++ src/pages/Belegformular.tsx | 115 ++++++++++++++++++++++++++++++++++++ src/pages/root.tsx | 5 ++ 3 files changed, 126 insertions(+) create mode 100644 src/pages/Belegformular.tsx diff --git a/src/main.tsx b/src/main.tsx index 0c19667..552b7bc 100644 --- a/src/main.tsx +++ b/src/main.tsx @@ -9,6 +9,7 @@ import Index from './pages/index'; import ThemeWrapper from './ThemeWrapper'; import CreditPaymentsPage from './pages/CreditPaymentsList'; +import Belegformular from './pages/Belegformular'; @@ -22,6 +23,11 @@ const router = createBrowserRouter([ index: true, element: <Index />, }, + { + path: 'belegformular', + element: <Belegformular />, // Add this route + + }, { path: 'creditinvoices', element: <CreditPaymentsPage />, // Add this route diff --git a/src/pages/Belegformular.tsx b/src/pages/Belegformular.tsx new file mode 100644 index 0000000..699a5a1 --- /dev/null +++ b/src/pages/Belegformular.tsx @@ -0,0 +1,115 @@ +import React, { useEffect, useState } from 'react'; +import { Container, CircularProgress, Typography, Card, Stack, Button, TextField } from '@mui/material'; +import { reimbursementsCreateReimbursement } from '../client/services.gen'; +import { ReimbursementsCreateReimbursementResponse } from '../client/types.gen'; + +import { client } from '../client/services.gen'; + +// Configure the client +client.setConfig({ + baseUrl: import.meta.env.VITE_API_BASE_URL, + headers: { + Origin: `localhost`, + }, +}); + +export default function Belegformular() { + + // State to hold form values + const [formData, setFormData] = useState<ReimbursementsCreateReimbursementResponse>({ + kst_id: '', + ledger_id: '', + amount: '', + accounting_year: '', + currency: '', + comment: '', + qcomment: '', + recipt: '', + creator: '', + recipient: '' + }); + const [error, setError] = useState<string | null>(null); + const [success, setSuccess] = useState<string | null>(null); + + // Update form data as the user types + const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => { + setFormData({ + ...formData, + [e.target.name]: e.target.value, + }); + }; + + // Submit form data to the API + const handleSubmit = async () => { + setError(null); + setSuccess(null); + + try { + // Call API to create a new credit payment entry + await reimbursementsCreateReimbursement(formData); + setSuccess('Credit payment entry created successfully!'); + + // Reset form data after successful submission + setFormData({ + kst_id: '', + ledger_id: '', + amount: '', + accounting_year: '', + currency: '', + comment: '', + qcomment: '', + recipt: '', + creator: '', + recipient: '' + }); + } catch (err) { + setError('Failed to create credit payment entry.'); + console.error('Error creating credit payment entry:', err); + } + }; + + return ( + <Container> + <Typography variant="h4" component="h2" gutterBottom> + Enter details for a new Rückerstattung + </Typography> + + {/* Display Success or Error messages */} + {success && <Alert severity="success">{success}</Alert>} + {error && <Alert severity="error">{error}</Alert>} + + <Stack spacing={2} sx={{ mt: 2 }}> + {/* Form fields for each property */} + <TextField + label="kst_id" + name="id" + value={formData.kst_id} + onChange={handleChange} + fullWidth + required + /> + <TextField + label="Currency" + name="currency" + value={formData.currency} + onChange={handleChange} + fullWidth + required + /> + <TextField + label="Name" + name="name" + value={formData.creator} + onChange={handleChange} + fullWidth + required + /> + + {/* Submit button */} + <Button variant="contained" onClick={handleSubmit}> + Submit Payment + </Button> + </Stack> + </Container> + ); +} \ No newline at end of file diff --git a/src/pages/root.tsx b/src/pages/root.tsx index ce6e64a..0417b48 100644 --- a/src/pages/root.tsx +++ b/src/pages/root.tsx @@ -13,6 +13,11 @@ const navContent = [ name: "Credit Invoices", icon: <Payment /> }, + { + path: "/Belegformular", + name: "Belegformular", + icon: <Payment /> + }, { path: "/cart", -- GitLab