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

Changes Dashboard, Form, Added divs lang gyud. fix fix lang gamay

Browse source
This commit is contained in:
Pongot, Jophiel 2024-01-09 06:17:30 +08:00
parent f00432aab7
commit 0574bb2a41
4 changed files with 84 additions and 41 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
src/Components/API/API.tsx
View file

@ -23,7 +23,7 @@ import {
TransactionCreateType,
} from "../Types/Types";
const debug = false;
const debug = true;
let backendURL;
if (debug) {

2
src/Components/DashboardPage/Teacher/TeacherTransactionListView.tsx
View file

@ -48,7 +48,7 @@ export default function TeacherTransactionListView() {
<div
style={{
...styles.flex_column,
...{ height: "50vh", overflowY: "scroll", width: "85%", marginInline: "6.5%" },
...{ height: "50vh", overflowY: "scroll", width: "100%", },
}}
>
{transactions.data ? (

3
src/Components/TransactionEntry/TransactionEntry.tsx
View file

@ -22,7 +22,8 @@ export default function TransactionEntry(props: props) {
borderRadius: 16,
marginTop: "10px",
paddingTop: "15px",
width: "100%"
width: "100%",
maxWidth: "550px"
}}
onClick={props.onClick}

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

@ -3,7 +3,6 @@ import styles from "../../styles";
import { colors } from "../../styles";
import TextField from "@mui/material/TextField";
import AddToQueueIcon from "@mui/icons-material/AddToQueue";
import Button from "../../Components/Button/Button";
import { toast } from "react-toastify";
import {
AvailableEquipmentInstancesAPI,
@ -21,6 +20,9 @@ import {
MenuItem,
OutlinedInput,
Autocomplete,
Alert,
Stack
} from "@mui/material";
import React from "react";
import Header from "../../Components/Header/Header";
@ -125,7 +127,13 @@ export default function AddTransactionPage() {
<p style={{ ...styles.text_dark, ...styles.text_L }}>Borrowing Form</p>
</div>
<div style={{...styles.flex_column, marginLeft: "1rem", marginRight: "1rem"}}>
<div
style={{
...styles.flex_column,
marginLeft: "1rem",
marginRight: "1rem",
}}
>
<FormControl style={{ marginTop: "8px" }}>
<FormLabel
style={{
@ -207,26 +215,7 @@ export default function AddTransactionPage() {
placeholder={"The subject requiring the equipments"}
/>
</FormControl>
<FormControl style={{ marginTop: "8px" }}>
<FormLabel
style={{
...styles.text_dark,
...{ marginLeft: "4px", marginBottom: "4px", textAlign: "left" },
}}
>
Remarks
</FormLabel>
<TextField
multiline
style={styles.input_form}
onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
SetTransaction({ ...transaction, remarks: e.target.value });
setError("");
}}
value={transaction.remarks}
placeholder={"Optionally add a brief description of the request"}
/>
</FormControl>
<FormControl style={{ marginTop: "8px" }}>
<FormLabel
style={{
@ -244,7 +233,9 @@ export default function AddTransactionPage() {
setError("");
}}
value={transaction.consumables}
placeholder={"Write down any consumables here"}
placeholder={
"ex. Filter Papers, Acids, Solvent, Cleaning Agents"
}
/>
</FormControl>
<FormControl style={{ marginTop: "8px" }}>
@ -268,24 +259,63 @@ export default function AddTransactionPage() {
}}
value={transaction.additional_members}
placeholder={
"Write down any additional members borrowing on behalf of this transaction"
"1. Full Name ex. (Daniel John Padilla)\n2. Kathryn Bernardo \n3. ..."
}
/>
</FormControl>
<FormControl style={{ marginTop: "8px" }}>
<FormLabel
style={{
...styles.text_dark,
...{ marginLeft: "4px", marginBottom: "4px", textAlign: "left" },
}}
>
Remarks (optional)
</FormLabel>
<TextField
multiline
style={styles.input_form}
onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
SetTransaction({ ...transaction, remarks: e.target.value });
setError("");
}}
value={transaction.remarks}
placeholder={"Add a brief description of the request or N/A."}
/>
</FormControl>
</div>
<p style={{ ...styles.text_dark, ...styles.text_M }}>{error}</p>
<div
style={{
backgroundColor: colors.button_border,
marginTop: "16px",
display: "flex",
flex: 1,
alignContent: "center",
width: "100%",
height: "2px",
marginBottom: 8,
marginTop: "1rem"
}}
/>
<Button
type={"dark"}
label={"Create Transaction"}
>
<Stack
sx={{
width: "100%",
}}
spacing={2}
>
<Alert
icon={false}
severity="warning"
sx={{ alignItems: "center", justifyContent: "center" }}
>
NOTE: please be reminded that borrowing of lab apparatus can only be
made once. Further requests of additional apparatus will not be
entertained.
</Alert>
</Stack>
</div>
<p style={{ ...styles.text_dark, ...styles.text_M }}>{error}</p>
<button
onClick={async () => {
console.log(JSON.stringify(transaction));
const data = await TransactionCreateAPI(transaction);
@ -309,9 +339,6 @@ export default function AddTransactionPage() {
queryClient.invalidateQueries({
queryKey: ["equipment_instances"],
});
queryClient.invalidateQueries({
queryKey: ["equipment_instances_available"],
});
queryClient.invalidateQueries({
queryKey: ["transactions"],
});
@ -320,7 +347,22 @@ export default function AddTransactionPage() {
setError(JSON.stringify(data[1]));
}
}}
/>
style={{
display: "flex",
padding: "25px 38px",
justifyContent: "center",
alignItems: "center",
background: "#A7DA96",
height: "40px",
width: "100%",
marginTop: "1rem",
marginBottom: "1rem",
}}
>
<p style={{ ...styles.text_light, ...styles.text_M, ...{ flex: 1 } }}>Create Transaction</p>
</button>
</div>
);
}