mirror of
https://github.com/lemeow125/Borrowing-TrackerFrontend.git
synced 2024-11-17 06:19:27 +08:00
Add transaction view for student in dashboard page complete with filtering
This commit is contained in:
parent
d69945f789
commit
eaa55f3ba7
6 changed files with 253 additions and 8 deletions
|
|
@ -386,3 +386,27 @@ export async function TransactionUpdateAPI(
|
|||
return [false, ParseError(error)];
|
||||
});
|
||||
}
|
||||
|
||||
export async function TransactionsByStudentAPI() {
|
||||
const config = await GetConfig();
|
||||
return instance
|
||||
.get("api/v1/transactions/student/", config)
|
||||
.then((response) => {
|
||||
return response.data as TransactionListType;
|
||||
})
|
||||
.catch(() => {
|
||||
console.log("Error retrieving transactions for current student");
|
||||
});
|
||||
}
|
||||
|
||||
export async function TransactionsByTeacherAPI() {
|
||||
const config = await GetConfig();
|
||||
return instance
|
||||
.get("api/v1/transactions/teacher/", config)
|
||||
.then((response) => {
|
||||
return response.data as TransactionListType;
|
||||
})
|
||||
.catch(() => {
|
||||
console.log("Error retrieving transactions for current teacher");
|
||||
});
|
||||
}
|
||||
|
|
|
|||
|
|
@ -19,12 +19,17 @@ import ShoppingCartCheckoutIcon from "@mui/icons-material/ShoppingCartCheckout";
|
|||
import AssignmentReturnedIcon from "@mui/icons-material/AssignmentReturned";
|
||||
import CancelOutlinedIcon from "@mui/icons-material/CancelOutlined";
|
||||
import CancelIcon from "@mui/icons-material/Cancel";
|
||||
import ClearAllIcon from "@mui/icons-material/ClearAll";
|
||||
import { useState } from "react";
|
||||
|
||||
export default function StudentTransactionFilterMenu() {
|
||||
type props = {
|
||||
filter: string;
|
||||
setFilter: React.Dispatch<React.SetStateAction<string>>;
|
||||
};
|
||||
|
||||
export default function StudentTransactionFilterMenu(props: props) {
|
||||
const [addSKUmodalOpen, SetAddSKUModalOpen] = useState(false);
|
||||
const [additemmodalOpen, SetAddItemModalOpen] = useState(false);
|
||||
const [filter, setFilter] = useState("");
|
||||
return (
|
||||
<>
|
||||
<p
|
||||
|
|
@ -48,14 +53,44 @@ export default function StudentTransactionFilterMenu() {
|
|||
>
|
||||
<FormControl sx={{ width: "384px" }}>
|
||||
<InputLabel style={{ backgroundColor: "white" }}>
|
||||
Filter transactions by
|
||||
Filter Transactions
|
||||
</InputLabel>
|
||||
<Select
|
||||
value={filter}
|
||||
value={props.filter}
|
||||
onChange={(e: SelectChangeEvent<string>) =>
|
||||
setFilter(e.target.value)
|
||||
props.setFilter(e.target.value)
|
||||
}
|
||||
>
|
||||
<MenuItem value={""}>
|
||||
<Button
|
||||
style={{
|
||||
...styles.row,
|
||||
...{
|
||||
alignSelf: "center",
|
||||
justifyContent: "center",
|
||||
flexWrap: "wrap",
|
||||
},
|
||||
}}
|
||||
>
|
||||
<ClearAllIcon
|
||||
style={{
|
||||
height: 32,
|
||||
width: 32,
|
||||
fill: colors.font_dark,
|
||||
marginLeft: "1rem",
|
||||
marginRight: "1rem",
|
||||
}}
|
||||
/>
|
||||
<p
|
||||
style={{
|
||||
...styles.text_dark,
|
||||
...styles.text_M,
|
||||
}}
|
||||
>
|
||||
All
|
||||
</p>
|
||||
</Button>
|
||||
</MenuItem>
|
||||
<MenuItem value={"Pending Approval"}>
|
||||
<Button
|
||||
style={{
|
||||
|
|
|
|||
|
|
@ -1,3 +1,67 @@
|
|||
import { useQuery } from "@tanstack/react-query";
|
||||
import { TransactionsByStudentAPI } from "../../API/API";
|
||||
import styles from "../../../styles";
|
||||
import CircularProgress from "@mui/material/CircularProgress/CircularProgress";
|
||||
import React, { useState } from "react";
|
||||
import TransactionEntry from "../../TransactionEntry/TransactionEntry";
|
||||
import StudentTransactionFilterMenu from "./StudentTransactionFilterMenu";
|
||||
|
||||
export default function StudentTransactionListView() {
|
||||
return <div>{"StudentTransactionListView"}</div>;
|
||||
const transactions = useQuery({
|
||||
queryKey: ["transactions_student"],
|
||||
queryFn: TransactionsByStudentAPI,
|
||||
});
|
||||
const [filter, setFilter] = useState("");
|
||||
if (transactions.isLoading) {
|
||||
return (
|
||||
<div
|
||||
style={{
|
||||
...styles.flex_column,
|
||||
...{
|
||||
alignItems: "center",
|
||||
justifyContent: "center",
|
||||
paddingTop: "64px",
|
||||
},
|
||||
}}
|
||||
>
|
||||
<CircularProgress style={{ height: "128px", width: "128px" }} />
|
||||
<p
|
||||
style={{
|
||||
...styles.text_dark,
|
||||
...styles.text_L,
|
||||
}}
|
||||
>
|
||||
Loading
|
||||
</p>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
return (
|
||||
<div>
|
||||
<div style={styles.flex_column}>
|
||||
<StudentTransactionFilterMenu filter={filter} setFilter={setFilter} />
|
||||
<div style={{ marginTop: "16px" }} />
|
||||
<div
|
||||
style={{
|
||||
...styles.flex_column,
|
||||
...{ height: "30vh", overflowY: "scroll" },
|
||||
}}
|
||||
>
|
||||
{transactions.data ? (
|
||||
transactions.data
|
||||
.filter((transaction) =>
|
||||
filter !== "" ? transaction.transaction_status == filter : true
|
||||
)
|
||||
.map((transaction) => (
|
||||
<React.Fragment key={transaction.id}>
|
||||
<TransactionEntry transaction={transaction} />
|
||||
</React.Fragment>
|
||||
))
|
||||
) : (
|
||||
<></>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
|
|
|||
121
src/Components/TransactionEntry/TransactionEntry.tsx
Normal file
121
src/Components/TransactionEntry/TransactionEntry.tsx
Normal file
|
|
@ -0,0 +1,121 @@
|
|||
import styles from "../../styles";
|
||||
import { colors } from "../../styles";
|
||||
import { TransactionType } from "../Types/Types";
|
||||
export interface props {
|
||||
transaction: TransactionType;
|
||||
}
|
||||
|
||||
function StatusText(props: { status: string }) {
|
||||
let color;
|
||||
if (
|
||||
props.status === "Pending Approval" ||
|
||||
props.status === "Returned: Pending Checking"
|
||||
) {
|
||||
color = colors.orange;
|
||||
} else if (
|
||||
props.status === "Approved" ||
|
||||
props.status === "Finalized" ||
|
||||
props.status === "Borrowed"
|
||||
) {
|
||||
color = colors.green;
|
||||
} else {
|
||||
color = colors.red;
|
||||
}
|
||||
return (
|
||||
<p
|
||||
style={{
|
||||
...styles.text_dark,
|
||||
...styles.text_S,
|
||||
...{
|
||||
textAlign: "center",
|
||||
color: color,
|
||||
},
|
||||
}}
|
||||
>
|
||||
{props.status}
|
||||
</p>
|
||||
);
|
||||
}
|
||||
export default function TransactionEntry(props: props) {
|
||||
return (
|
||||
<div
|
||||
style={{
|
||||
alignSelf: "center",
|
||||
justifySelf: "center",
|
||||
width: "384px",
|
||||
backgroundColor: colors.header_color,
|
||||
borderRadius: 16,
|
||||
margin: "16px",
|
||||
padding: "16px",
|
||||
}}
|
||||
>
|
||||
<div style={styles.flex_row}>
|
||||
<p
|
||||
style={{
|
||||
...styles.text_dark,
|
||||
...styles.text_S,
|
||||
...{ textAlign: "left", flex: 1 },
|
||||
}}
|
||||
>
|
||||
ID: {props.transaction.id}
|
||||
</p>
|
||||
<p
|
||||
style={{
|
||||
...styles.text_dark,
|
||||
...styles.text_S,
|
||||
...{ textAlign: "right", flex: 2 },
|
||||
}}
|
||||
>
|
||||
Timestamp: {props.transaction.timestamp}
|
||||
</p>
|
||||
</div>
|
||||
<div style={styles.flex_row}>
|
||||
<div style={{ flex: 1 }}>
|
||||
<p
|
||||
style={{
|
||||
...styles.text_dark,
|
||||
...styles.text_S,
|
||||
...{ textAlign: "left", margin: 0 },
|
||||
}}
|
||||
>
|
||||
Borrower: {props.transaction.borrower.name}
|
||||
</p>
|
||||
<p
|
||||
style={{
|
||||
...styles.text_dark,
|
||||
...styles.text_S,
|
||||
...{ textAlign: "left", margin: 0 },
|
||||
}}
|
||||
>
|
||||
Teacher: {props.transaction.teacher.name}
|
||||
</p>
|
||||
</div>
|
||||
<div style={{ flex: 2 }}>
|
||||
<p
|
||||
style={{
|
||||
...styles.text_dark,
|
||||
...styles.text_S,
|
||||
...{ textAlign: "right", margin: 0 },
|
||||
}}
|
||||
>
|
||||
Equipments:{" "}
|
||||
</p>
|
||||
<div style={styles.flex_column}>
|
||||
{props.transaction.equipments.map((equipment) => (
|
||||
<p
|
||||
style={{
|
||||
...styles.text_dark,
|
||||
...styles.text_S,
|
||||
...{ textAlign: "right", margin: 0 },
|
||||
}}
|
||||
>
|
||||
- {equipment.name}
|
||||
</p>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<StatusText status={props.transaction.transaction_status} />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
|
@ -122,6 +122,7 @@ export type TransactionType = {
|
|||
name: string;
|
||||
}>;
|
||||
transaction_status: string;
|
||||
timestamp: string;
|
||||
};
|
||||
|
||||
export type TransactionListType = Array<TransactionType>;
|
||||
|
|
|
|||
|
|
@ -4,7 +4,7 @@ import RestrictedComponent from "../../Components/RestrictedComponent/Restricted
|
|||
import TechnicianWidgets from "../../Components/DashboardPage/Technician/TechnicianWidgets";
|
||||
import TechnicianEquipmentButtons from "../../Components/DashboardPage/Technician/TechnicianEquipmentButtons";
|
||||
import TechnicianLogButtons from "../../Components/DashboardPage/Technician/TechnicianLogButtons";
|
||||
import StudentTransactionFilterMenu from "../../Components/DashboardPage/Student/StudentTransactionFilterMenu";
|
||||
import StudentTransactionListView from "../../Components/DashboardPage/Student/StudentTransactionListView";
|
||||
export default function Dashboard() {
|
||||
return (
|
||||
<div style={styles.background}>
|
||||
|
|
@ -15,7 +15,7 @@ export default function Dashboard() {
|
|||
<TechnicianLogButtons />
|
||||
</RestrictedComponent>
|
||||
<RestrictedComponent allow_only={"Student"}>
|
||||
<StudentTransactionFilterMenu />
|
||||
<StudentTransactionListView />
|
||||
</RestrictedComponent>
|
||||
<RestrictedComponent allow_only={"Teacher"}>
|
||||
<p style={styles.text_dark}>Welcome teacher!</p>
|
||||
|
|
|
|||
Loading…
Reference in a new issue