mirror of
https://github.com/lemeow125/Borrowing-TrackerFrontend.git
synced 2024-11-17 06:19:27 +08:00
Improved all rendered tables by removing redundant div
This commit is contained in:
parent
d2521a628d
commit
9bb312808e
5 changed files with 402 additions and 397 deletions
|
|
@ -67,78 +67,79 @@ export default function EquipmentInstancesFilteredListPage() {
|
|||
flexWrap: "wrap",
|
||||
}}
|
||||
>
|
||||
<div style={{ width: "90%", overflowY: "scroll", marginTop: "2rem" }}>
|
||||
<TableContainer component={Paper}>
|
||||
<Table sx={{ minWidth: "32rem" }} size="medium">
|
||||
<TableHead>
|
||||
<TableRow style={{ backgroundColor: colors.header_color }}>
|
||||
<TableCell style={styles.text_light}>ID</TableCell>
|
||||
<TableCell align="center" style={styles.text_light}>
|
||||
Name
|
||||
</TableCell>
|
||||
<TableCell align="center" style={styles.text_light}>
|
||||
Status
|
||||
</TableCell>
|
||||
<TableCell align="center" style={styles.text_light}>
|
||||
Category
|
||||
</TableCell>
|
||||
<TableCell align="center" style={styles.text_light}>
|
||||
Last Modified
|
||||
</TableCell>
|
||||
</TableRow>
|
||||
</TableHead>
|
||||
<TableBody>
|
||||
{equipment_instances.data ? (
|
||||
equipment_instances.data
|
||||
.filter((equipment) => equipment.category === filter_by)
|
||||
.map((equipment) => (
|
||||
<TableRow
|
||||
key={equipment.id}
|
||||
sx={{
|
||||
"&:last-child td, &:last-child th": { border: 0 },
|
||||
}}
|
||||
onClick={() => {
|
||||
SetSelectedItem(equipment.id);
|
||||
SetEditModalOpen(true);
|
||||
}}
|
||||
>
|
||||
<TableCell align="center" component="th" scope="row">
|
||||
{equipment.id}
|
||||
</TableCell>
|
||||
<TableCell align="center" component="th" scope="row">
|
||||
{equipment.equipment_name}
|
||||
</TableCell>
|
||||
<TableContainer
|
||||
style={{ width: "90%", overflowY: "scroll", marginTop: "2rem" }}
|
||||
component={Paper}
|
||||
>
|
||||
<Table sx={{ minWidth: "32rem" }} size="medium">
|
||||
<TableHead>
|
||||
<TableRow style={{ backgroundColor: colors.header_color }}>
|
||||
<TableCell style={styles.text_light}>ID</TableCell>
|
||||
<TableCell align="center" style={styles.text_light}>
|
||||
Name
|
||||
</TableCell>
|
||||
<TableCell align="center" style={styles.text_light}>
|
||||
Status
|
||||
</TableCell>
|
||||
<TableCell align="center" style={styles.text_light}>
|
||||
Category
|
||||
</TableCell>
|
||||
<TableCell align="center" style={styles.text_light}>
|
||||
Last Modified
|
||||
</TableCell>
|
||||
</TableRow>
|
||||
</TableHead>
|
||||
<TableBody>
|
||||
{equipment_instances.data ? (
|
||||
equipment_instances.data
|
||||
.filter((equipment) => equipment.category === filter_by)
|
||||
.map((equipment) => (
|
||||
<TableRow
|
||||
key={equipment.id}
|
||||
sx={{
|
||||
"&:last-child td, &:last-child th": { border: 0 },
|
||||
}}
|
||||
onClick={() => {
|
||||
SetSelectedItem(equipment.id);
|
||||
SetEditModalOpen(true);
|
||||
}}
|
||||
>
|
||||
<TableCell align="center" component="th" scope="row">
|
||||
{equipment.id}
|
||||
</TableCell>
|
||||
<TableCell align="center" component="th" scope="row">
|
||||
{equipment.equipment_name}
|
||||
</TableCell>
|
||||
|
||||
<TableCell align="center" component="th" scope="row">
|
||||
{equipment.status}
|
||||
</TableCell>
|
||||
<TableCell align="center" component="th" scope="row">
|
||||
{equipment.category}
|
||||
</TableCell>
|
||||
<TableCell align="right">
|
||||
<div
|
||||
style={{
|
||||
...styles.flex_column,
|
||||
...{ alignItems: "center" },
|
||||
}}
|
||||
>
|
||||
<div>{equipment.last_updated}</div>
|
||||
<div>
|
||||
{equipment.last_updated_by
|
||||
? "by " + equipment.last_updated_by
|
||||
: ""}
|
||||
</div>
|
||||
<TableCell align="center" component="th" scope="row">
|
||||
{equipment.status}
|
||||
</TableCell>
|
||||
<TableCell align="center" component="th" scope="row">
|
||||
{equipment.category}
|
||||
</TableCell>
|
||||
<TableCell align="right">
|
||||
<div
|
||||
style={{
|
||||
...styles.flex_column,
|
||||
...{ alignItems: "center" },
|
||||
}}
|
||||
>
|
||||
<div>{equipment.last_updated}</div>
|
||||
<div>
|
||||
{equipment.last_updated_by
|
||||
? "by " + equipment.last_updated_by
|
||||
: ""}
|
||||
</div>
|
||||
</TableCell>
|
||||
</TableRow>
|
||||
))
|
||||
) : (
|
||||
<></>
|
||||
)}
|
||||
</TableBody>
|
||||
</Table>
|
||||
</TableContainer>
|
||||
</div>
|
||||
</div>
|
||||
</TableCell>
|
||||
</TableRow>
|
||||
))
|
||||
) : (
|
||||
<></>
|
||||
)}
|
||||
</TableBody>
|
||||
</Table>
|
||||
</TableContainer>
|
||||
</div>
|
||||
<Popup
|
||||
open={editmodalOpen}
|
||||
|
|
|
|||
|
|
@ -65,74 +65,75 @@ export default function EquipmentInstancesListPage() {
|
|||
flexWrap: "wrap",
|
||||
}}
|
||||
>
|
||||
<div style={{ width: "90%", overflowY: "scroll", marginTop: "2rem" }}>
|
||||
<TableContainer component={Paper}>
|
||||
<Table sx={{ minWidth: "32rem" }} size="medium">
|
||||
<TableHead>
|
||||
<TableRow style={{ backgroundColor: colors.header_color }}>
|
||||
<TableCell style={styles.text_light}>ID</TableCell>
|
||||
<TableCell align="center" style={styles.text_light}>
|
||||
Name
|
||||
</TableCell>
|
||||
<TableCell align="center" style={styles.text_light}>
|
||||
Status
|
||||
</TableCell>
|
||||
<TableCell align="center" style={styles.text_light}>
|
||||
Category
|
||||
</TableCell>
|
||||
<TableCell align="center" style={styles.text_light}>
|
||||
Last Modified
|
||||
</TableCell>
|
||||
</TableRow>
|
||||
</TableHead>
|
||||
<TableBody>
|
||||
{equipment_instances.data ? (
|
||||
equipment_instances.data.map((equipment) => (
|
||||
<TableRow
|
||||
key={equipment.id}
|
||||
sx={{ "&:last-child td, &:last-child th": { border: 0 } }}
|
||||
onClick={() => {
|
||||
SetSelectedItem(equipment.id);
|
||||
SetEditModalOpen(true);
|
||||
}}
|
||||
>
|
||||
<TableCell align="center" component="th" scope="row">
|
||||
{equipment.id}
|
||||
</TableCell>
|
||||
<TableCell align="center" component="th" scope="row">
|
||||
{equipment.equipment_name}
|
||||
</TableCell>
|
||||
<TableContainer
|
||||
style={{ width: "90%", overflowY: "scroll", marginTop: "2rem" }}
|
||||
component={Paper}
|
||||
>
|
||||
<Table sx={{ minWidth: "32rem" }} size="medium">
|
||||
<TableHead>
|
||||
<TableRow style={{ backgroundColor: colors.header_color }}>
|
||||
<TableCell style={styles.text_light}>ID</TableCell>
|
||||
<TableCell align="center" style={styles.text_light}>
|
||||
Name
|
||||
</TableCell>
|
||||
<TableCell align="center" style={styles.text_light}>
|
||||
Status
|
||||
</TableCell>
|
||||
<TableCell align="center" style={styles.text_light}>
|
||||
Category
|
||||
</TableCell>
|
||||
<TableCell align="center" style={styles.text_light}>
|
||||
Last Modified
|
||||
</TableCell>
|
||||
</TableRow>
|
||||
</TableHead>
|
||||
<TableBody>
|
||||
{equipment_instances.data ? (
|
||||
equipment_instances.data.map((equipment) => (
|
||||
<TableRow
|
||||
key={equipment.id}
|
||||
sx={{ "&:last-child td, &:last-child th": { border: 0 } }}
|
||||
onClick={() => {
|
||||
SetSelectedItem(equipment.id);
|
||||
SetEditModalOpen(true);
|
||||
}}
|
||||
>
|
||||
<TableCell align="center" component="th" scope="row">
|
||||
{equipment.id}
|
||||
</TableCell>
|
||||
<TableCell align="center" component="th" scope="row">
|
||||
{equipment.equipment_name}
|
||||
</TableCell>
|
||||
|
||||
<TableCell align="center" component="th" scope="row">
|
||||
{equipment.status}
|
||||
</TableCell>
|
||||
<TableCell align="center" component="th" scope="row">
|
||||
{equipment.category}
|
||||
</TableCell>
|
||||
<TableCell align="right">
|
||||
<div
|
||||
style={{
|
||||
...styles.flex_column,
|
||||
...{ alignItems: "center" },
|
||||
}}
|
||||
>
|
||||
<div>{equipment.last_updated}</div>
|
||||
<div>
|
||||
{equipment.last_updated_by
|
||||
? "by " + equipment.last_updated_by
|
||||
: ""}
|
||||
</div>
|
||||
<TableCell align="center" component="th" scope="row">
|
||||
{equipment.status}
|
||||
</TableCell>
|
||||
<TableCell align="center" component="th" scope="row">
|
||||
{equipment.category}
|
||||
</TableCell>
|
||||
<TableCell align="right">
|
||||
<div
|
||||
style={{
|
||||
...styles.flex_column,
|
||||
...{ alignItems: "center" },
|
||||
}}
|
||||
>
|
||||
<div>{equipment.last_updated}</div>
|
||||
<div>
|
||||
{equipment.last_updated_by
|
||||
? "by " + equipment.last_updated_by
|
||||
: ""}
|
||||
</div>
|
||||
</TableCell>
|
||||
</TableRow>
|
||||
))
|
||||
) : (
|
||||
<></>
|
||||
)}
|
||||
</TableBody>
|
||||
</Table>
|
||||
</TableContainer>
|
||||
</div>
|
||||
</div>
|
||||
</TableCell>
|
||||
</TableRow>
|
||||
))
|
||||
) : (
|
||||
<></>
|
||||
)}
|
||||
</TableBody>
|
||||
</Table>
|
||||
</TableContainer>
|
||||
</div>
|
||||
<Popup
|
||||
open={editmodalOpen}
|
||||
|
|
|
|||
|
|
@ -65,74 +65,75 @@ export default function EquipmentListPage() {
|
|||
flexWrap: "wrap",
|
||||
}}
|
||||
>
|
||||
<div style={{ width: "90%", overflowY: "scroll", marginTop: "2rem" }}>
|
||||
<TableContainer component={Paper}>
|
||||
<Table sx={{ minWidth: "32rem" }} size="medium">
|
||||
<TableHead>
|
||||
<TableRow style={{ backgroundColor: colors.header_color }}>
|
||||
<TableCell style={styles.text_light}>ID</TableCell>
|
||||
<TableCell align="center" style={styles.text_light}>
|
||||
Name
|
||||
</TableCell>
|
||||
<TableCell align="center" style={styles.text_light}>
|
||||
Description
|
||||
</TableCell>
|
||||
<TableCell align="center" style={styles.text_light}>
|
||||
Category
|
||||
</TableCell>
|
||||
<TableCell align="center" style={styles.text_light}>
|
||||
Last Modified
|
||||
</TableCell>
|
||||
</TableRow>
|
||||
</TableHead>
|
||||
<TableBody>
|
||||
{equipments.data ? (
|
||||
equipments.data.map((equipment) => (
|
||||
<TableRow
|
||||
key={equipment.id}
|
||||
sx={{ "&:last-child td, &:last-child th": { border: 0 } }}
|
||||
onClick={() => {
|
||||
SetSelectedItem(equipment.id);
|
||||
SetEditModalOpen(true);
|
||||
}}
|
||||
>
|
||||
<TableCell align="center" component="th" scope="row">
|
||||
{equipment.id}
|
||||
</TableCell>
|
||||
<TableCell align="center" component="th" scope="row">
|
||||
{equipment.name}
|
||||
</TableCell>
|
||||
<TableContainer
|
||||
style={{ width: "90%", overflowY: "scroll", marginTop: "2rem" }}
|
||||
component={Paper}
|
||||
>
|
||||
<Table sx={{ minWidth: "32rem" }} size="medium">
|
||||
<TableHead>
|
||||
<TableRow style={{ backgroundColor: colors.header_color }}>
|
||||
<TableCell style={styles.text_light}>ID</TableCell>
|
||||
<TableCell align="center" style={styles.text_light}>
|
||||
Name
|
||||
</TableCell>
|
||||
<TableCell align="center" style={styles.text_light}>
|
||||
Description
|
||||
</TableCell>
|
||||
<TableCell align="center" style={styles.text_light}>
|
||||
Category
|
||||
</TableCell>
|
||||
<TableCell align="center" style={styles.text_light}>
|
||||
Last Modified
|
||||
</TableCell>
|
||||
</TableRow>
|
||||
</TableHead>
|
||||
<TableBody>
|
||||
{equipments.data ? (
|
||||
equipments.data.map((equipment) => (
|
||||
<TableRow
|
||||
key={equipment.id}
|
||||
sx={{ "&:last-child td, &:last-child th": { border: 0 } }}
|
||||
onClick={() => {
|
||||
SetSelectedItem(equipment.id);
|
||||
SetEditModalOpen(true);
|
||||
}}
|
||||
>
|
||||
<TableCell align="center" component="th" scope="row">
|
||||
{equipment.id}
|
||||
</TableCell>
|
||||
<TableCell align="center" component="th" scope="row">
|
||||
{equipment.name}
|
||||
</TableCell>
|
||||
|
||||
<TableCell align="center" component="th" scope="row">
|
||||
{equipment.description}
|
||||
</TableCell>
|
||||
<TableCell align="center" component="th" scope="row">
|
||||
{equipment.category}
|
||||
</TableCell>
|
||||
<TableCell align="right">
|
||||
<div
|
||||
style={{
|
||||
...styles.flex_column,
|
||||
...{ alignItems: "center" },
|
||||
}}
|
||||
>
|
||||
<div>{equipment.last_updated}</div>
|
||||
<div>
|
||||
{equipment.last_updated_by
|
||||
? "by " + equipment.last_updated_by
|
||||
: ""}
|
||||
</div>
|
||||
<TableCell align="center" component="th" scope="row">
|
||||
{equipment.description}
|
||||
</TableCell>
|
||||
<TableCell align="center" component="th" scope="row">
|
||||
{equipment.category}
|
||||
</TableCell>
|
||||
<TableCell align="right">
|
||||
<div
|
||||
style={{
|
||||
...styles.flex_column,
|
||||
...{ alignItems: "center" },
|
||||
}}
|
||||
>
|
||||
<div>{equipment.last_updated}</div>
|
||||
<div>
|
||||
{equipment.last_updated_by
|
||||
? "by " + equipment.last_updated_by
|
||||
: ""}
|
||||
</div>
|
||||
</TableCell>
|
||||
</TableRow>
|
||||
))
|
||||
) : (
|
||||
<></>
|
||||
)}
|
||||
</TableBody>
|
||||
</Table>
|
||||
</TableContainer>
|
||||
</div>
|
||||
</div>
|
||||
</TableCell>
|
||||
</TableRow>
|
||||
))
|
||||
) : (
|
||||
<></>
|
||||
)}
|
||||
</TableBody>
|
||||
</Table>
|
||||
</TableContainer>
|
||||
</div>
|
||||
<Popup
|
||||
open={editmodalOpen}
|
||||
|
|
|
|||
|
|
@ -60,78 +60,79 @@ export default function EquipmentLogsPage() {
|
|||
flexWrap: "wrap",
|
||||
}}
|
||||
>
|
||||
<div style={{ width: "90%", overflowY: "scroll", marginTop: "2rem" }}>
|
||||
<TableContainer component={Paper}>
|
||||
<Table sx={{ minWidth: "32rem" }} size="medium">
|
||||
<TableHead>
|
||||
<TableRow style={{ backgroundColor: colors.header_color }}>
|
||||
<TableCell align="center" style={styles.text_light}>
|
||||
Transaction ID
|
||||
</TableCell>
|
||||
<TableCell align="center" style={styles.text_light}>
|
||||
SKU ID
|
||||
</TableCell>
|
||||
<TableCell align="center" style={styles.text_light}>
|
||||
Name
|
||||
</TableCell>
|
||||
<TableCell align="center" style={styles.text_light}>
|
||||
Description
|
||||
</TableCell>
|
||||
<TableCell align="center" style={styles.text_light}>
|
||||
Category
|
||||
</TableCell>
|
||||
<TableCell align="center" style={styles.text_light}>
|
||||
Date Modified
|
||||
</TableCell>
|
||||
</TableRow>
|
||||
</TableHead>
|
||||
<TableBody>
|
||||
{equipment_logs.data ? (
|
||||
equipment_logs.data.map((equipment_log) => (
|
||||
<TableRow
|
||||
key={equipment_log.history_id}
|
||||
sx={{ "&:last-child td, &:last-child th": { border: 0 } }}
|
||||
>
|
||||
<TableCell align="center" component="th" scope="row">
|
||||
{equipment_log.history_id}
|
||||
</TableCell>
|
||||
<TableCell align="center" component="th" scope="row">
|
||||
{equipment_log.id}
|
||||
</TableCell>
|
||||
<TableCell align="center" component="th" scope="row">
|
||||
{equipment_log.name}
|
||||
</TableCell>
|
||||
<TableContainer
|
||||
style={{ width: "90%", overflowY: "scroll", marginTop: "2rem" }}
|
||||
component={Paper}
|
||||
>
|
||||
<Table sx={{ minWidth: "32rem" }} size="medium">
|
||||
<TableHead>
|
||||
<TableRow style={{ backgroundColor: colors.header_color }}>
|
||||
<TableCell align="center" style={styles.text_light}>
|
||||
Transaction ID
|
||||
</TableCell>
|
||||
<TableCell align="center" style={styles.text_light}>
|
||||
SKU ID
|
||||
</TableCell>
|
||||
<TableCell align="center" style={styles.text_light}>
|
||||
Name
|
||||
</TableCell>
|
||||
<TableCell align="center" style={styles.text_light}>
|
||||
Description
|
||||
</TableCell>
|
||||
<TableCell align="center" style={styles.text_light}>
|
||||
Category
|
||||
</TableCell>
|
||||
<TableCell align="center" style={styles.text_light}>
|
||||
Date Modified
|
||||
</TableCell>
|
||||
</TableRow>
|
||||
</TableHead>
|
||||
<TableBody>
|
||||
{equipment_logs.data ? (
|
||||
equipment_logs.data.map((equipment_log) => (
|
||||
<TableRow
|
||||
key={equipment_log.history_id}
|
||||
sx={{ "&:last-child td, &:last-child th": { border: 0 } }}
|
||||
>
|
||||
<TableCell align="center" component="th" scope="row">
|
||||
{equipment_log.history_id}
|
||||
</TableCell>
|
||||
<TableCell align="center" component="th" scope="row">
|
||||
{equipment_log.id}
|
||||
</TableCell>
|
||||
<TableCell align="center" component="th" scope="row">
|
||||
{equipment_log.name}
|
||||
</TableCell>
|
||||
|
||||
<TableCell align="center" component="th" scope="row">
|
||||
{equipment_log.description}
|
||||
</TableCell>
|
||||
<TableCell align="center" component="th" scope="row">
|
||||
{equipment_log.category}
|
||||
</TableCell>
|
||||
<TableCell align="right">
|
||||
<div
|
||||
style={{
|
||||
...styles.flex_column,
|
||||
...{ alignItems: "center" },
|
||||
}}
|
||||
>
|
||||
<div>{equipment_log.history_date}</div>
|
||||
<div>
|
||||
{equipment_log.history_user
|
||||
? "by " + equipment_log.history_user
|
||||
: ""}
|
||||
</div>
|
||||
<TableCell align="center" component="th" scope="row">
|
||||
{equipment_log.description}
|
||||
</TableCell>
|
||||
<TableCell align="center" component="th" scope="row">
|
||||
{equipment_log.category}
|
||||
</TableCell>
|
||||
<TableCell align="right">
|
||||
<div
|
||||
style={{
|
||||
...styles.flex_column,
|
||||
...{ alignItems: "center" },
|
||||
}}
|
||||
>
|
||||
<div>{equipment_log.history_date}</div>
|
||||
<div>
|
||||
{equipment_log.history_user
|
||||
? "by " + equipment_log.history_user
|
||||
: ""}
|
||||
</div>
|
||||
</TableCell>
|
||||
</TableRow>
|
||||
))
|
||||
) : (
|
||||
<></>
|
||||
)}
|
||||
</TableBody>
|
||||
</Table>
|
||||
</TableContainer>
|
||||
</div>
|
||||
</div>
|
||||
</TableCell>
|
||||
</TableRow>
|
||||
))
|
||||
) : (
|
||||
<></>
|
||||
)}
|
||||
</TableBody>
|
||||
</Table>
|
||||
</TableContainer>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
|
|
|
|||
|
|
@ -66,143 +66,144 @@ export default function TransactionsListPage() {
|
|||
flexWrap: "wrap",
|
||||
}}
|
||||
>
|
||||
<div style={{ width: "90%", overflowY: "scroll", marginTop: "2rem" }}>
|
||||
<TableContainer component={Paper}>
|
||||
<Table sx={{ minWidth: "32rem" }} size="medium">
|
||||
<TableHead>
|
||||
<TableRow style={{ backgroundColor: colors.header_color }}>
|
||||
<TableCell align="center" style={styles.text_light}>
|
||||
ID
|
||||
</TableCell>
|
||||
<TableCell align="center" style={styles.text_light}>
|
||||
Borrower
|
||||
</TableCell>
|
||||
<TableCell align="center" style={styles.text_light}>
|
||||
Teacher
|
||||
</TableCell>
|
||||
<TableCell align="center" style={styles.text_light}>
|
||||
Status
|
||||
</TableCell>
|
||||
<TableCell align="center" style={styles.text_light}>
|
||||
Equipments
|
||||
</TableCell>
|
||||
</TableRow>
|
||||
</TableHead>
|
||||
<TableBody>
|
||||
{transactions.data ? (
|
||||
transactions.data.map((transaction) => (
|
||||
<TableRow
|
||||
key={transaction.id}
|
||||
sx={{ "&:last-child td, &:last-child th": { border: 0 } }}
|
||||
<TableContainer
|
||||
style={{ width: "90%", overflowY: "scroll", marginTop: "2rem" }}
|
||||
component={Paper}
|
||||
>
|
||||
<Table sx={{ minWidth: "32rem" }} size="medium">
|
||||
<TableHead>
|
||||
<TableRow style={{ backgroundColor: colors.header_color }}>
|
||||
<TableCell align="center" style={styles.text_light}>
|
||||
ID
|
||||
</TableCell>
|
||||
<TableCell align="center" style={styles.text_light}>
|
||||
Borrower
|
||||
</TableCell>
|
||||
<TableCell align="center" style={styles.text_light}>
|
||||
Teacher
|
||||
</TableCell>
|
||||
<TableCell align="center" style={styles.text_light}>
|
||||
Status
|
||||
</TableCell>
|
||||
<TableCell align="center" style={styles.text_light}>
|
||||
Equipments
|
||||
</TableCell>
|
||||
</TableRow>
|
||||
</TableHead>
|
||||
<TableBody>
|
||||
{transactions.data ? (
|
||||
transactions.data.map((transaction) => (
|
||||
<TableRow
|
||||
key={transaction.id}
|
||||
sx={{ "&:last-child td, &:last-child th": { border: 0 } }}
|
||||
>
|
||||
<TableCell
|
||||
align="center"
|
||||
component="th"
|
||||
scope="row"
|
||||
onClick={() => {
|
||||
SetSelectedTransaction(transaction.id);
|
||||
SetEditTransactionOpen(true);
|
||||
}}
|
||||
>
|
||||
<TableCell
|
||||
align="center"
|
||||
component="th"
|
||||
scope="row"
|
||||
onClick={() => {
|
||||
SetSelectedTransaction(transaction.id);
|
||||
SetEditTransactionOpen(true);
|
||||
}}
|
||||
>
|
||||
{transaction.id}
|
||||
</TableCell>
|
||||
<TableCell
|
||||
align="center"
|
||||
component="th"
|
||||
scope="row"
|
||||
onClick={() => {
|
||||
SetSelectedTransaction(transaction.id);
|
||||
SetEditTransactionOpen(true);
|
||||
}}
|
||||
>
|
||||
{transaction.borrower.name}
|
||||
</TableCell>
|
||||
<TableCell
|
||||
align="center"
|
||||
component="th"
|
||||
scope="row"
|
||||
onClick={() => {
|
||||
SetSelectedTransaction(transaction.id);
|
||||
SetEditTransactionOpen(true);
|
||||
}}
|
||||
>
|
||||
{transaction.teacher.name}
|
||||
</TableCell>
|
||||
<TableCell
|
||||
align="center"
|
||||
component="th"
|
||||
scope="row"
|
||||
onClick={() => {
|
||||
SetSelectedTransaction(transaction.id);
|
||||
SetEditTransactionOpen(true);
|
||||
}}
|
||||
>
|
||||
{transaction.transaction_status}
|
||||
</TableCell>
|
||||
<TableCell align="center">
|
||||
<TableContainer component={Paper}>
|
||||
<Table sx={{ minWidth: "4rem" }} size="medium">
|
||||
<TableHead>
|
||||
{transaction.id}
|
||||
</TableCell>
|
||||
<TableCell
|
||||
align="center"
|
||||
component="th"
|
||||
scope="row"
|
||||
onClick={() => {
|
||||
SetSelectedTransaction(transaction.id);
|
||||
SetEditTransactionOpen(true);
|
||||
}}
|
||||
>
|
||||
{transaction.borrower.name}
|
||||
</TableCell>
|
||||
<TableCell
|
||||
align="center"
|
||||
component="th"
|
||||
scope="row"
|
||||
onClick={() => {
|
||||
SetSelectedTransaction(transaction.id);
|
||||
SetEditTransactionOpen(true);
|
||||
}}
|
||||
>
|
||||
{transaction.teacher.name}
|
||||
</TableCell>
|
||||
<TableCell
|
||||
align="center"
|
||||
component="th"
|
||||
scope="row"
|
||||
onClick={() => {
|
||||
SetSelectedTransaction(transaction.id);
|
||||
SetEditTransactionOpen(true);
|
||||
}}
|
||||
>
|
||||
{transaction.transaction_status}
|
||||
</TableCell>
|
||||
<TableCell style={{ overflowY: "scroll" }} align="center">
|
||||
<TableContainer component={Paper}>
|
||||
<Table sx={{ minWidth: "4rem" }} size="medium">
|
||||
<TableHead>
|
||||
<TableRow
|
||||
style={{ backgroundColor: colors.header_color }}
|
||||
>
|
||||
<TableCell
|
||||
align="center"
|
||||
style={styles.text_light}
|
||||
>
|
||||
ID
|
||||
</TableCell>
|
||||
<TableCell
|
||||
align="center"
|
||||
style={styles.text_light}
|
||||
>
|
||||
Name
|
||||
</TableCell>
|
||||
</TableRow>
|
||||
</TableHead>
|
||||
<TableBody>
|
||||
{transaction.equipments.map((equipment) => (
|
||||
<TableRow
|
||||
style={{ backgroundColor: colors.header_color }}
|
||||
key={equipment.id}
|
||||
sx={{
|
||||
"&:last-child td, &:last-child th": {
|
||||
border: 0,
|
||||
},
|
||||
}}
|
||||
onClick={() => {
|
||||
SetEditTransactionOpen(false);
|
||||
SetEditEquipmentsOpen(true);
|
||||
}}
|
||||
>
|
||||
<TableCell
|
||||
align="center"
|
||||
style={styles.text_light}
|
||||
component="th"
|
||||
scope="row"
|
||||
>
|
||||
ID
|
||||
{equipment.id}
|
||||
</TableCell>
|
||||
<TableCell
|
||||
align="center"
|
||||
style={styles.text_light}
|
||||
component="th"
|
||||
scope="row"
|
||||
>
|
||||
Name
|
||||
{equipment.name}
|
||||
</TableCell>
|
||||
</TableRow>
|
||||
</TableHead>
|
||||
<TableBody>
|
||||
{transaction.equipments.map((equipment) => (
|
||||
<TableRow
|
||||
key={equipment.id}
|
||||
sx={{
|
||||
"&:last-child td, &:last-child th": {
|
||||
border: 0,
|
||||
},
|
||||
}}
|
||||
onClick={() => {
|
||||
SetEditTransactionOpen(false);
|
||||
SetEditEquipmentsOpen(true);
|
||||
}}
|
||||
>
|
||||
<TableCell
|
||||
align="center"
|
||||
component="th"
|
||||
scope="row"
|
||||
>
|
||||
{equipment.id}
|
||||
</TableCell>
|
||||
<TableCell
|
||||
align="center"
|
||||
component="th"
|
||||
scope="row"
|
||||
>
|
||||
{equipment.name}
|
||||
</TableCell>
|
||||
</TableRow>
|
||||
))}
|
||||
</TableBody>
|
||||
</Table>
|
||||
</TableContainer>
|
||||
</TableCell>
|
||||
</TableRow>
|
||||
))
|
||||
) : (
|
||||
<></>
|
||||
)}
|
||||
</TableBody>
|
||||
</Table>
|
||||
</TableContainer>
|
||||
</div>
|
||||
))}
|
||||
</TableBody>
|
||||
</Table>
|
||||
</TableContainer>
|
||||
</TableCell>
|
||||
</TableRow>
|
||||
))
|
||||
) : (
|
||||
<></>
|
||||
)}
|
||||
</TableBody>
|
||||
</Table>
|
||||
</TableContainer>
|
||||
</div>
|
||||
<Popup
|
||||
open={EditTransactionOpen}
|
||||
|
|
|
|||
Loading…
Reference in a new issue