From 0cee08f6fa38aba8996305ce7887b390255956c0 Mon Sep 17 00:00:00 2001
From: kmiola <kmiola@ethz.ch>
Date: Fri, 15 Nov 2024 21:57:41 +0000
Subject: [PATCH] add ledger dropdown

---
 src/pages/Belegformular.tsx | 72 ++++++++++++++++++++++++++++---------
 1 file changed, 56 insertions(+), 16 deletions(-)

diff --git a/src/pages/Belegformular.tsx b/src/pages/Belegformular.tsx
index 939a0b5..45c64dc 100644
--- a/src/pages/Belegformular.tsx
+++ b/src/pages/Belegformular.tsx
@@ -1,7 +1,7 @@
 import React, { useState, useEffect } from 'react';
 import { Container, CircularProgress, Typography, Select, MenuItem, FormControl, InputLabel, Stack, Button, TextField, Alert } from '@mui/material';
-import { kstsReadKsts, reimbursementsCreateReimbursement } from '../client/services.gen';
-import { KstsPublic, KstPublic, ReimbursementsCreateReimbursementData } from '../client/types.gen';
+import { kstsReadKsts, reimbursementsCreateReimbursement, ledgersReadLedgers } from '../client/services.gen';
+import { KstsPublic, KstPublic, ReimbursementsCreateReimbursementData, LedgersPublic, LedgerPublic } from '../client/types.gen';
 import { SelectChangeEvent } from '@mui/material/Select';
 
 import { client } from '../client/services.gen';
@@ -16,8 +16,11 @@ client.setConfig({
 
 const Belegformular: React.FC = () => {
   const [kstItems, setKstItems] = useState<KstPublic[]>([]);
+  const [ledgerItems, setLedgerItems] = useState<LedgerPublic[]>([]);
   const [loadingKst, setLoadingKst] = useState(true);
+  const [loadingLedger, setLoadingLedger] = useState(true);
   const [errorKst, setErrorKst] = useState<string | null>(null);
+  const [errorLedger, setErrorLedger] = useState<string | null>(null);
 
   const [formData, setFormData] = useState<ReimbursementsCreateReimbursementData>({
     body: {
@@ -61,15 +64,44 @@ const Belegformular: React.FC = () => {
       }
       setKstItems(KstList.items);
     } catch (err) {
-      setErrorKst('Failed to load credit payments');
-      console.error('Error fetching credit payments:', err);
+      setErrorKst('Failed to load KSTs');
+      console.error('Error fetching KSTs:', err);
     } finally {
       setLoadingKst(false);
     }
   };
 
+  const fetchLedgers = async () => {
+    setErrorLedger(null);
+    setLoadingLedger(true);
+
+    try {
+      const responseLedger = await ledgersReadLedgers();
+
+      // Check if response is HTML, indicating a possible error
+      if (typeof responseLedger.data !== 'object' || !('items' in responseLedger.data)) {
+        console.error('Unexpected response format:', responseLedger.data);
+        setErrorLedger('Received unexpected response format from the server.');
+        return;
+      }
+
+      const LedgerList = responseLedger.data as LedgersPublic;
+      if (!LedgerList.items) {
+        setErrorLedger('No Ledgers found');
+        return;
+      }
+      setLedgerItems(LedgerList.items);
+    } catch (err) {
+      setErrorLedger('Failed to load Ledgers');
+      console.error('Error fetching Ledgers:', err);
+    } finally {
+      setLoadingLedger(false);
+    }
+  };
+
   useEffect(() => {
     fetchKsts();
+    fetchLedgers();
   }, []);
 
   const handleChange = (e: React.ChangeEvent<{ name?: string; value: unknown }>) => {
@@ -95,7 +127,7 @@ const Belegformular: React.FC = () => {
         ...prevFormData.body,
         creditor: {
           ...prevFormData.body.creditor,
-          kst_id: value,
+          [name]: value,
         },
       },
     }));
@@ -167,7 +199,7 @@ const Belegformular: React.FC = () => {
           <InputLabel id="kst-id-label">KST ID</InputLabel>
           <Select
             labelId="kst-id-label"
-            name="creditor.kst_id"
+            name="kst_id"
             value={formData.body.creditor.kst_id}
             onChange={handleSelectChange}
           >
@@ -181,16 +213,24 @@ const Belegformular: React.FC = () => {
             <Typography color="error">{validationErrors['creditor.kst_id']}</Typography>
           )}
         </FormControl>
-        <TextField
-          label="Ledger-ID"
-          name="creditor.ledger_id"
-          value={formData.body.creditor.ledger_id}
-          onChange={handleChange}
-          fullWidth
-          required
-          error={!!validationErrors['creditor.ledger_id']}
-          helperText={validationErrors['creditor.ledger_id']}
-        />
+        <FormControl fullWidth required error={!!validationErrors['creditor.ledger_id']}>
+          <InputLabel id="ledger-id-label">Ledger ID</InputLabel>
+          <Select
+            labelId="ledger-id-label"
+            name="ledger_id"
+            value={formData.body.creditor.ledger_id}
+            onChange={handleSelectChange}
+          >
+            {ledgerItems.map((item) => (
+              <MenuItem key={item.id} value={item.id}>
+                {item.namede}
+              </MenuItem>
+            ))}
+          </Select>
+          {validationErrors['creditor.ledger_id'] && (
+            <Typography color="error">{validationErrors['creditor.ledger_id']}</Typography>
+          )}
+        </FormControl>
         <TextField
           label="Amount"
           name="creditor.amount"
-- 
GitLab