keannu125/Borrowing-TrackerFrontend
1
0
Fork 0
mirror of https://github.com/lemeow125/Borrowing-TrackerFrontend.git synced 2024-11-17 06:19:27 +08:00
Code Issues Projects Releases Packages Wiki Activity Actions

Merge branch 'feature/additional_styles' of https://git.keannu1.duckdns.org/keannu125/Borrowing-TrackerFrontend into feature/additional_styles

Browse source
This commit is contained in:
psofia 2024-01-06 15:29:02 +08:00
commit dd53596719
2 changed files with 19 additions and 14 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

25
src/Pages/AddTransactionPage/AddTransactionPage.tsx
View file

@ -121,12 +121,12 @@ export default function AddTransactionPage() {
marginRight: "1rem", marginRight: "1rem",
}} }}
/> />
<p style={{ ...styles.text_dark, ...styles.text_L }}>New Transaction</p> <p style={{ ...styles.text_dark, ...styles.text_L }}>Borrowing Form</p>
</div> </div>
<div style={styles.flex_column}> <div style={{...styles.flex_column, marginLeft: "1rem", marginRight: "1rem"}}>
<FormControl style={{ marginTop: "8px" }}> <FormControl style={{ marginTop: "8px" }}>
<FormLabel style={styles.text_dark}>Items Requested</FormLabel> <FormLabel style={{...styles.text_dark, ...styles.bform_label2}}>Items Requested</FormLabel>
<Select <Select
multiple multiple
value={transaction.equipments} value={transaction.equipments}
@ -136,7 +136,7 @@ export default function AddTransactionPage() {
equipments: event.target.value as number[], equipments: event.target.value as number[],
}) })
} }
input={<OutlinedInput label="Name" />} input={<OutlinedInput />}
> >
{equipments.data {equipments.data
?.filter((equipment) => equipment.status == "Available") ?.filter((equipment) => equipment.status == "Available")
@ -148,7 +148,7 @@ export default function AddTransactionPage() {
</Select> </Select>
</FormControl> </FormControl>
<FormControl style={{ marginTop: "8px" }}> <FormControl style={{ marginTop: "8px" }}>
<FormLabel style={styles.text_dark}>Assigned Teacher</FormLabel> <FormLabel style={{...styles.text_dark, ...styles.bform_label2}}>Assigned Teacher</FormLabel>
<Select <Select
value={transaction.teacher} value={transaction.teacher}
onChange={(event) => onChange={(event) =>
@ -158,7 +158,8 @@ export default function AddTransactionPage() {
}) })
} }
label={"Assigned Teacher"} label={"Assigned Teacher"}
input={<OutlinedInput label="Assigned Teacher" />} input={<OutlinedInput />}
> >
{teachers.data?.map((teacher) => ( {teachers.data?.map((teacher) => (
<MenuItem key={teacher.id} value={teacher.id}> <MenuItem key={teacher.id} value={teacher.id}>
@ -168,20 +169,19 @@ export default function AddTransactionPage() {
</Select> </Select>
</FormControl> </FormControl>
<FormControl style={{ marginTop: "8px" }}> <FormControl style={{ marginTop: "8px" }}>
<FormLabel style={styles.text_dark}>Subject</FormLabel> <FormLabel style={{...styles.text_dark, ...styles.bform_label}}>Subject</FormLabel>
<TextField <TextField
style={styles.input_form} style={styles.input_form}
onChange={(e: React.ChangeEvent<HTMLInputElement>) => { onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
SetTransaction({ ...transaction, subject: e.target.value }); SetTransaction({ ...transaction, subject: e.target.value });
setError(""); setError("");
}} }}
label={"Subject"}
value={transaction.subject} value={transaction.subject}
placeholder={"The subject requiring the equipments"} placeholder={"The subject requiring the equipments"}
/> />
</FormControl> </FormControl>
<FormControl style={{ marginTop: "8px" }}> <FormControl style={{ marginTop: "8px" }}>
<FormLabel style={styles.text_dark}>Remarks</FormLabel> <FormLabel style={{...styles.text_dark, ...styles.bform_label}}>Remarks</FormLabel>
<TextField <TextField
multiline multiline
style={styles.input_form} style={styles.input_form}
@ -189,13 +189,12 @@ export default function AddTransactionPage() {
SetTransaction({ ...transaction, remarks: e.target.value }); SetTransaction({ ...transaction, remarks: e.target.value });
setError(""); setError("");
}} }}
label={"Remarks"}
value={transaction.remarks} value={transaction.remarks}
placeholder={"Optionally add a brief description of the request"} placeholder={"Optionally add a brief description of the request"}
/> />
</FormControl> </FormControl>
<FormControl style={{ marginTop: "8px" }}> <FormControl style={{ marginTop: "8px" }}>
<FormLabel style={styles.text_dark}>Consumables</FormLabel> <FormLabel style={{...styles.text_dark, ...styles.bform_label}}>Consumables</FormLabel>
<TextField <TextField
multiline multiline
style={styles.input_form} style={styles.input_form}
@ -203,13 +202,12 @@ export default function AddTransactionPage() {
SetTransaction({ ...transaction, consumables: e.target.value }); SetTransaction({ ...transaction, consumables: e.target.value });
setError(""); setError("");
}} }}
label={"Consumables"}
value={transaction.consumables} value={transaction.consumables}
placeholder={"Write down any consumables here"} placeholder={"Write down any consumables here"}
/> />
</FormControl> </FormControl>
<FormControl style={{ marginTop: "8px" }}> <FormControl style={{ marginTop: "8px" }}>
<FormLabel style={styles.text_dark}>Additional Members</FormLabel> <FormLabel style={{...styles.text_dark, ...styles.bform_label}}>Additional Members</FormLabel>
<TextField <TextField
multiline multiline
style={styles.input_form} style={styles.input_form}
@ -220,7 +218,6 @@ export default function AddTransactionPage() {
}); });
setError(""); setError("");
}} }}
label={"Additional Members"}
value={transaction.additional_members} value={transaction.additional_members}
placeholder={ placeholder={
"Write down any additional members borrowing on behalf of this transaction" "Write down any additional members borrowing on behalf of this transaction"

8
src/styles.tsx
View file

@ -131,6 +131,14 @@ const styles: { [key: string]: React.CSSProperties } = {
marginTop: "10px", marginTop: "10px",
}, },
bform_label2: {
display: "flex",
justifyContent: "left",
marginTop: "10px",
marginBottom: "10px",
},
}; };