keannu125/Borrowing-TrackerFrontend
1
0
Fork 0
mirror of https://github.com/lemeow125/Borrowing-TrackerFrontend.git synced 2024-11-16 22:09:29 +08:00
Code Issues Projects Releases Packages Wiki Activity Actions

Refactor status text color function and finalized transactionpdf component

Browse source
This commit is contained in:
Keannu Bernasol 2023-12-29 17:33:48 +08:00
parent db8b93a7db
commit b9bf114904
4 changed files with 127 additions and 80 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

18
src/Components/StatusTextColor/StatusTextColor.tsx Normal file
View file

@ -0,0 +1,18 @@
import { colors } from "../../styles";
export default function StatusTextColor(status: string) {
if (
status === "Pending Approval" ||
status === "Returned: Pending Checking"
) {
return colors.orange;
} else if (
status === "Approved" ||
status === "Finalized" ||
status === "Borrowed"
) {
return colors.green;
} else {
return colors.red;
}
}

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

@ -1,8 +1,8 @@
import styles from "../../styles";
import { colors } from "../../styles";
import { TransactionType } from "../Types/Types";
import StatusText from "../TransactionStatusText/TransactionStatusText";
import { useNavigate } from "react-router-dom";
import StatusTextColor from "../StatusTextColor/StatusTextColor";
export interface props {
transaction: TransactionType;
}
@ -119,7 +119,19 @@ export default function TransactionEntry(props: props) {
</div>
</div>
</div>
<StatusText status={props.transaction.transaction_status} />
<p
style={{
...styles.text_dark,
...styles.text_M,
...{
textAlign: "center",
margin: 0,
color: StatusTextColor(props.transaction.transaction_status),
},
}}
>
{`${props.transaction.transaction_status}`}
</p>
</div>
);
}

140
src/Components/TransactionPDF/TransactionPDF.tsx
View file

@ -1,56 +1,27 @@
import { StyleSheet, Document, Page, Text, View } from "@react-pdf/renderer";
import { Document, Page, Text, View } from "@react-pdf/renderer";
import { TransactionType } from "../Types/Types";
import styles, { colors } from "../../styles";
import { colors } from "../../styles";
import StatusTextColor from "../StatusTextColor/StatusTextColor";
type props = {
transaction: TransactionType;
};
const pdf_styles = StyleSheet.create({
container: {
alignSelf: "center",
justifySelf: "center",
width: "512px",
backgroundColor: colors.header_color,
borderRadius: 16,
margin: "8px",
padding: "8px",
},
flex_row: {
display: "flex",
flexDirection: "row",
},
flex_column: {
display: "flex",
flexDirection: "column",
},
text_dark: {
color: colors.font_dark,
fontWeight: "bold",
},
text_light: {
color: colors.font_light,
fontWeight: "bold",
},
text_red: {
color: colors.red,
fontWeight: "bold",
},
text_orange: {
color: colors.orange,
fontWeight: "bold",
},
text_green: {
color: colors.green,
fontWeight: "bold",
},
});
export default function TransactionPDF(props: props) {
return (
<Document>
<Page size={"A4"}>
<View style={pdf_styles.container}>
<View style={pdf_styles.flex_row}>
<View
style={{
alignSelf: "center",
justifyContent: "center",
width: "512px",
backgroundColor: colors.header_color,
borderRadius: 16,
margin: "8px",
padding: "8px",
}}
>
<View style={{ display: "flex", flexDirection: "row" }}>
<Text
style={{
color: colors.font_dark,
@ -59,7 +30,7 @@ export default function TransactionPDF(props: props) {
flex: 1,
}}
>
ID: {props.transaction.id}
Transaction ID: {props.transaction.id}
</Text>
<Text
style={{
@ -72,6 +43,85 @@ export default function TransactionPDF(props: props) {
{props.transaction.timestamp}
</Text>
</View>
<View style={{ paddingVertical: 8 }}></View>
<View style={{ display: "flex", flexDirection: "row" }}>
<View style={{ flex: 1 }}>
<Text
style={{
color: colors.font_dark,
fontSize: 16,
textAlign: "left",
margin: 0,
}}
>
Borrower: {props.transaction.borrower.name}{" "}
{`(ID:${props.transaction.borrower.id})`}
</Text>
<Text
style={{
color: colors.font_dark,
fontSize: 16,
textAlign: "left",
margin: 0,
}}
>
Teacher: {props.transaction.teacher.name}{" "}
{`(ID:${props.transaction.teacher.id})`}
</Text>
<Text
style={{
color: colors.font_dark,
fontSize: 16,
textAlign: "left",
margin: 0,
marginTop: 8,
flexWrap: "wrap",
}}
>
{props.transaction.remarks}
</Text>
</View>
<View style={{ flex: 1 }}>
<Text
style={{
color: colors.font_dark,
textAlign: "right",
fontSize: 16,
margin: 0,
flexWrap: "wrap",
}}
>
Equipments:
</Text>
<View style={{ display: "flex", flexDirection: "column" }}>
{props.transaction.equipments.map((equipment) => (
<Text
style={{
color: colors.font_dark,
textAlign: "right",
fontSize: 12,
margin: 0,
marginTop: 2,
flexWrap: "wrap",
}}
>
{` - ${equipment.name} (ID:${equipment.id})`}
</Text>
))}
</View>
</View>
</View>
<View style={{ alignContent: "center", justifyContent: "center" }}>
<Text
style={{
color: StatusTextColor(props.transaction.transaction_status),
textAlign: "center",
fontSize: 16,
}}
>
{`${props.transaction.transaction_status}`}
</Text>
</View>
</View>
</Page>
</Document>

33
src/Components/TransactionStatusText/TransactionStatusText.tsx
View file

@ -1,33 +0,0 @@
import styles, { colors } from "../../styles";
export default 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>
);
}