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",
|
flexWrap: "wrap",
|
||||||
}}
|
}}
|
||||||
>
|
>
|
||||||
<div style={{ width: "90%", overflowY: "scroll", marginTop: "2rem" }}>
|
<TableContainer
|
||||||
<TableContainer component={Paper}>
|
style={{ width: "90%", overflowY: "scroll", marginTop: "2rem" }}
|
||||||
<Table sx={{ minWidth: "32rem" }} size="medium">
|
component={Paper}
|
||||||
<TableHead>
|
>
|
||||||
<TableRow style={{ backgroundColor: colors.header_color }}>
|
<Table sx={{ minWidth: "32rem" }} size="medium">
|
||||||
<TableCell style={styles.text_light}>ID</TableCell>
|
<TableHead>
|
||||||
<TableCell align="center" style={styles.text_light}>
|
<TableRow style={{ backgroundColor: colors.header_color }}>
|
||||||
Name
|
<TableCell style={styles.text_light}>ID</TableCell>
|
||||||
</TableCell>
|
<TableCell align="center" style={styles.text_light}>
|
||||||
<TableCell align="center" style={styles.text_light}>
|
Name
|
||||||
Status
|
</TableCell>
|
||||||
</TableCell>
|
<TableCell align="center" style={styles.text_light}>
|
||||||
<TableCell align="center" style={styles.text_light}>
|
Status
|
||||||
Category
|
</TableCell>
|
||||||
</TableCell>
|
<TableCell align="center" style={styles.text_light}>
|
||||||
<TableCell align="center" style={styles.text_light}>
|
Category
|
||||||
Last Modified
|
</TableCell>
|
||||||
</TableCell>
|
<TableCell align="center" style={styles.text_light}>
|
||||||
</TableRow>
|
Last Modified
|
||||||
</TableHead>
|
</TableCell>
|
||||||
<TableBody>
|
</TableRow>
|
||||||
{equipment_instances.data ? (
|
</TableHead>
|
||||||
equipment_instances.data
|
<TableBody>
|
||||||
.filter((equipment) => equipment.category === filter_by)
|
{equipment_instances.data ? (
|
||||||
.map((equipment) => (
|
equipment_instances.data
|
||||||
<TableRow
|
.filter((equipment) => equipment.category === filter_by)
|
||||||
key={equipment.id}
|
.map((equipment) => (
|
||||||
sx={{
|
<TableRow
|
||||||
"&:last-child td, &:last-child th": { border: 0 },
|
key={equipment.id}
|
||||||
}}
|
sx={{
|
||||||
onClick={() => {
|
"&:last-child td, &:last-child th": { border: 0 },
|
||||||
SetSelectedItem(equipment.id);
|
}}
|
||||||
SetEditModalOpen(true);
|
onClick={() => {
|
||||||
}}
|
SetSelectedItem(equipment.id);
|
||||||
>
|
SetEditModalOpen(true);
|
||||||
<TableCell align="center" component="th" scope="row">
|
}}
|
||||||
{equipment.id}
|
>
|
||||||
</TableCell>
|
<TableCell align="center" component="th" scope="row">
|
||||||
<TableCell align="center" component="th" scope="row">
|
{equipment.id}
|
||||||
{equipment.equipment_name}
|
</TableCell>
|
||||||
</TableCell>
|
<TableCell align="center" component="th" scope="row">
|
||||||
|
{equipment.equipment_name}
|
||||||
|
</TableCell>
|
||||||
|
|
||||||
<TableCell align="center" component="th" scope="row">
|
<TableCell align="center" component="th" scope="row">
|
||||||
{equipment.status}
|
{equipment.status}
|
||||||
</TableCell>
|
</TableCell>
|
||||||
<TableCell align="center" component="th" scope="row">
|
<TableCell align="center" component="th" scope="row">
|
||||||
{equipment.category}
|
{equipment.category}
|
||||||
</TableCell>
|
</TableCell>
|
||||||
<TableCell align="right">
|
<TableCell align="right">
|
||||||
<div
|
<div
|
||||||
style={{
|
style={{
|
||||||
...styles.flex_column,
|
...styles.flex_column,
|
||||||
...{ alignItems: "center" },
|
...{ alignItems: "center" },
|
||||||
}}
|
}}
|
||||||
>
|
>
|
||||||
<div>{equipment.last_updated}</div>
|
<div>{equipment.last_updated}</div>
|
||||||
<div>
|
<div>
|
||||||
{equipment.last_updated_by
|
{equipment.last_updated_by
|
||||||
? "by " + equipment.last_updated_by
|
? "by " + equipment.last_updated_by
|
||||||
: ""}
|
: ""}
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
</TableCell>
|
</div>
|
||||||
</TableRow>
|
</TableCell>
|
||||||
))
|
</TableRow>
|
||||||
) : (
|
))
|
||||||
<></>
|
) : (
|
||||||
)}
|
<></>
|
||||||
</TableBody>
|
)}
|
||||||
</Table>
|
</TableBody>
|
||||||
</TableContainer>
|
</Table>
|
||||||
</div>
|
</TableContainer>
|
||||||
</div>
|
</div>
|
||||||
<Popup
|
<Popup
|
||||||
open={editmodalOpen}
|
open={editmodalOpen}
|
||||||
|
|
|
||||||
|
|
@ -65,74 +65,75 @@ export default function EquipmentInstancesListPage() {
|
||||||
flexWrap: "wrap",
|
flexWrap: "wrap",
|
||||||
}}
|
}}
|
||||||
>
|
>
|
||||||
<div style={{ width: "90%", overflowY: "scroll", marginTop: "2rem" }}>
|
<TableContainer
|
||||||
<TableContainer component={Paper}>
|
style={{ width: "90%", overflowY: "scroll", marginTop: "2rem" }}
|
||||||
<Table sx={{ minWidth: "32rem" }} size="medium">
|
component={Paper}
|
||||||
<TableHead>
|
>
|
||||||
<TableRow style={{ backgroundColor: colors.header_color }}>
|
<Table sx={{ minWidth: "32rem" }} size="medium">
|
||||||
<TableCell style={styles.text_light}>ID</TableCell>
|
<TableHead>
|
||||||
<TableCell align="center" style={styles.text_light}>
|
<TableRow style={{ backgroundColor: colors.header_color }}>
|
||||||
Name
|
<TableCell style={styles.text_light}>ID</TableCell>
|
||||||
</TableCell>
|
<TableCell align="center" style={styles.text_light}>
|
||||||
<TableCell align="center" style={styles.text_light}>
|
Name
|
||||||
Status
|
</TableCell>
|
||||||
</TableCell>
|
<TableCell align="center" style={styles.text_light}>
|
||||||
<TableCell align="center" style={styles.text_light}>
|
Status
|
||||||
Category
|
</TableCell>
|
||||||
</TableCell>
|
<TableCell align="center" style={styles.text_light}>
|
||||||
<TableCell align="center" style={styles.text_light}>
|
Category
|
||||||
Last Modified
|
</TableCell>
|
||||||
</TableCell>
|
<TableCell align="center" style={styles.text_light}>
|
||||||
</TableRow>
|
Last Modified
|
||||||
</TableHead>
|
</TableCell>
|
||||||
<TableBody>
|
</TableRow>
|
||||||
{equipment_instances.data ? (
|
</TableHead>
|
||||||
equipment_instances.data.map((equipment) => (
|
<TableBody>
|
||||||
<TableRow
|
{equipment_instances.data ? (
|
||||||
key={equipment.id}
|
equipment_instances.data.map((equipment) => (
|
||||||
sx={{ "&:last-child td, &:last-child th": { border: 0 } }}
|
<TableRow
|
||||||
onClick={() => {
|
key={equipment.id}
|
||||||
SetSelectedItem(equipment.id);
|
sx={{ "&:last-child td, &:last-child th": { border: 0 } }}
|
||||||
SetEditModalOpen(true);
|
onClick={() => {
|
||||||
}}
|
SetSelectedItem(equipment.id);
|
||||||
>
|
SetEditModalOpen(true);
|
||||||
<TableCell align="center" component="th" scope="row">
|
}}
|
||||||
{equipment.id}
|
>
|
||||||
</TableCell>
|
<TableCell align="center" component="th" scope="row">
|
||||||
<TableCell align="center" component="th" scope="row">
|
{equipment.id}
|
||||||
{equipment.equipment_name}
|
</TableCell>
|
||||||
</TableCell>
|
<TableCell align="center" component="th" scope="row">
|
||||||
|
{equipment.equipment_name}
|
||||||
|
</TableCell>
|
||||||
|
|
||||||
<TableCell align="center" component="th" scope="row">
|
<TableCell align="center" component="th" scope="row">
|
||||||
{equipment.status}
|
{equipment.status}
|
||||||
</TableCell>
|
</TableCell>
|
||||||
<TableCell align="center" component="th" scope="row">
|
<TableCell align="center" component="th" scope="row">
|
||||||
{equipment.category}
|
{equipment.category}
|
||||||
</TableCell>
|
</TableCell>
|
||||||
<TableCell align="right">
|
<TableCell align="right">
|
||||||
<div
|
<div
|
||||||
style={{
|
style={{
|
||||||
...styles.flex_column,
|
...styles.flex_column,
|
||||||
...{ alignItems: "center" },
|
...{ alignItems: "center" },
|
||||||
}}
|
}}
|
||||||
>
|
>
|
||||||
<div>{equipment.last_updated}</div>
|
<div>{equipment.last_updated}</div>
|
||||||
<div>
|
<div>
|
||||||
{equipment.last_updated_by
|
{equipment.last_updated_by
|
||||||
? "by " + equipment.last_updated_by
|
? "by " + equipment.last_updated_by
|
||||||
: ""}
|
: ""}
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
</TableCell>
|
</div>
|
||||||
</TableRow>
|
</TableCell>
|
||||||
))
|
</TableRow>
|
||||||
) : (
|
))
|
||||||
<></>
|
) : (
|
||||||
)}
|
<></>
|
||||||
</TableBody>
|
)}
|
||||||
</Table>
|
</TableBody>
|
||||||
</TableContainer>
|
</Table>
|
||||||
</div>
|
</TableContainer>
|
||||||
</div>
|
</div>
|
||||||
<Popup
|
<Popup
|
||||||
open={editmodalOpen}
|
open={editmodalOpen}
|
||||||
|
|
|
||||||
|
|
@ -65,74 +65,75 @@ export default function EquipmentListPage() {
|
||||||
flexWrap: "wrap",
|
flexWrap: "wrap",
|
||||||
}}
|
}}
|
||||||
>
|
>
|
||||||
<div style={{ width: "90%", overflowY: "scroll", marginTop: "2rem" }}>
|
<TableContainer
|
||||||
<TableContainer component={Paper}>
|
style={{ width: "90%", overflowY: "scroll", marginTop: "2rem" }}
|
||||||
<Table sx={{ minWidth: "32rem" }} size="medium">
|
component={Paper}
|
||||||
<TableHead>
|
>
|
||||||
<TableRow style={{ backgroundColor: colors.header_color }}>
|
<Table sx={{ minWidth: "32rem" }} size="medium">
|
||||||
<TableCell style={styles.text_light}>ID</TableCell>
|
<TableHead>
|
||||||
<TableCell align="center" style={styles.text_light}>
|
<TableRow style={{ backgroundColor: colors.header_color }}>
|
||||||
Name
|
<TableCell style={styles.text_light}>ID</TableCell>
|
||||||
</TableCell>
|
<TableCell align="center" style={styles.text_light}>
|
||||||
<TableCell align="center" style={styles.text_light}>
|
Name
|
||||||
Description
|
</TableCell>
|
||||||
</TableCell>
|
<TableCell align="center" style={styles.text_light}>
|
||||||
<TableCell align="center" style={styles.text_light}>
|
Description
|
||||||
Category
|
</TableCell>
|
||||||
</TableCell>
|
<TableCell align="center" style={styles.text_light}>
|
||||||
<TableCell align="center" style={styles.text_light}>
|
Category
|
||||||
Last Modified
|
</TableCell>
|
||||||
</TableCell>
|
<TableCell align="center" style={styles.text_light}>
|
||||||
</TableRow>
|
Last Modified
|
||||||
</TableHead>
|
</TableCell>
|
||||||
<TableBody>
|
</TableRow>
|
||||||
{equipments.data ? (
|
</TableHead>
|
||||||
equipments.data.map((equipment) => (
|
<TableBody>
|
||||||
<TableRow
|
{equipments.data ? (
|
||||||
key={equipment.id}
|
equipments.data.map((equipment) => (
|
||||||
sx={{ "&:last-child td, &:last-child th": { border: 0 } }}
|
<TableRow
|
||||||
onClick={() => {
|
key={equipment.id}
|
||||||
SetSelectedItem(equipment.id);
|
sx={{ "&:last-child td, &:last-child th": { border: 0 } }}
|
||||||
SetEditModalOpen(true);
|
onClick={() => {
|
||||||
}}
|
SetSelectedItem(equipment.id);
|
||||||
>
|
SetEditModalOpen(true);
|
||||||
<TableCell align="center" component="th" scope="row">
|
}}
|
||||||
{equipment.id}
|
>
|
||||||
</TableCell>
|
<TableCell align="center" component="th" scope="row">
|
||||||
<TableCell align="center" component="th" scope="row">
|
{equipment.id}
|
||||||
{equipment.name}
|
</TableCell>
|
||||||
</TableCell>
|
<TableCell align="center" component="th" scope="row">
|
||||||
|
{equipment.name}
|
||||||
|
</TableCell>
|
||||||
|
|
||||||
<TableCell align="center" component="th" scope="row">
|
<TableCell align="center" component="th" scope="row">
|
||||||
{equipment.description}
|
{equipment.description}
|
||||||
</TableCell>
|
</TableCell>
|
||||||
<TableCell align="center" component="th" scope="row">
|
<TableCell align="center" component="th" scope="row">
|
||||||
{equipment.category}
|
{equipment.category}
|
||||||
</TableCell>
|
</TableCell>
|
||||||
<TableCell align="right">
|
<TableCell align="right">
|
||||||
<div
|
<div
|
||||||
style={{
|
style={{
|
||||||
...styles.flex_column,
|
...styles.flex_column,
|
||||||
...{ alignItems: "center" },
|
...{ alignItems: "center" },
|
||||||
}}
|
}}
|
||||||
>
|
>
|
||||||
<div>{equipment.last_updated}</div>
|
<div>{equipment.last_updated}</div>
|
||||||
<div>
|
<div>
|
||||||
{equipment.last_updated_by
|
{equipment.last_updated_by
|
||||||
? "by " + equipment.last_updated_by
|
? "by " + equipment.last_updated_by
|
||||||
: ""}
|
: ""}
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
</TableCell>
|
</div>
|
||||||
</TableRow>
|
</TableCell>
|
||||||
))
|
</TableRow>
|
||||||
) : (
|
))
|
||||||
<></>
|
) : (
|
||||||
)}
|
<></>
|
||||||
</TableBody>
|
)}
|
||||||
</Table>
|
</TableBody>
|
||||||
</TableContainer>
|
</Table>
|
||||||
</div>
|
</TableContainer>
|
||||||
</div>
|
</div>
|
||||||
<Popup
|
<Popup
|
||||||
open={editmodalOpen}
|
open={editmodalOpen}
|
||||||
|
|
|
||||||
|
|
@ -60,78 +60,79 @@ export default function EquipmentLogsPage() {
|
||||||
flexWrap: "wrap",
|
flexWrap: "wrap",
|
||||||
}}
|
}}
|
||||||
>
|
>
|
||||||
<div style={{ width: "90%", overflowY: "scroll", marginTop: "2rem" }}>
|
<TableContainer
|
||||||
<TableContainer component={Paper}>
|
style={{ width: "90%", overflowY: "scroll", marginTop: "2rem" }}
|
||||||
<Table sx={{ minWidth: "32rem" }} size="medium">
|
component={Paper}
|
||||||
<TableHead>
|
>
|
||||||
<TableRow style={{ backgroundColor: colors.header_color }}>
|
<Table sx={{ minWidth: "32rem" }} size="medium">
|
||||||
<TableCell align="center" style={styles.text_light}>
|
<TableHead>
|
||||||
Transaction ID
|
<TableRow style={{ backgroundColor: colors.header_color }}>
|
||||||
</TableCell>
|
<TableCell align="center" style={styles.text_light}>
|
||||||
<TableCell align="center" style={styles.text_light}>
|
Transaction ID
|
||||||
SKU ID
|
</TableCell>
|
||||||
</TableCell>
|
<TableCell align="center" style={styles.text_light}>
|
||||||
<TableCell align="center" style={styles.text_light}>
|
SKU ID
|
||||||
Name
|
</TableCell>
|
||||||
</TableCell>
|
<TableCell align="center" style={styles.text_light}>
|
||||||
<TableCell align="center" style={styles.text_light}>
|
Name
|
||||||
Description
|
</TableCell>
|
||||||
</TableCell>
|
<TableCell align="center" style={styles.text_light}>
|
||||||
<TableCell align="center" style={styles.text_light}>
|
Description
|
||||||
Category
|
</TableCell>
|
||||||
</TableCell>
|
<TableCell align="center" style={styles.text_light}>
|
||||||
<TableCell align="center" style={styles.text_light}>
|
Category
|
||||||
Date Modified
|
</TableCell>
|
||||||
</TableCell>
|
<TableCell align="center" style={styles.text_light}>
|
||||||
</TableRow>
|
Date Modified
|
||||||
</TableHead>
|
</TableCell>
|
||||||
<TableBody>
|
</TableRow>
|
||||||
{equipment_logs.data ? (
|
</TableHead>
|
||||||
equipment_logs.data.map((equipment_log) => (
|
<TableBody>
|
||||||
<TableRow
|
{equipment_logs.data ? (
|
||||||
key={equipment_log.history_id}
|
equipment_logs.data.map((equipment_log) => (
|
||||||
sx={{ "&:last-child td, &:last-child th": { border: 0 } }}
|
<TableRow
|
||||||
>
|
key={equipment_log.history_id}
|
||||||
<TableCell align="center" component="th" scope="row">
|
sx={{ "&:last-child td, &:last-child th": { border: 0 } }}
|
||||||
{equipment_log.history_id}
|
>
|
||||||
</TableCell>
|
<TableCell align="center" component="th" scope="row">
|
||||||
<TableCell align="center" component="th" scope="row">
|
{equipment_log.history_id}
|
||||||
{equipment_log.id}
|
</TableCell>
|
||||||
</TableCell>
|
<TableCell align="center" component="th" scope="row">
|
||||||
<TableCell align="center" component="th" scope="row">
|
{equipment_log.id}
|
||||||
{equipment_log.name}
|
</TableCell>
|
||||||
</TableCell>
|
<TableCell align="center" component="th" scope="row">
|
||||||
|
{equipment_log.name}
|
||||||
|
</TableCell>
|
||||||
|
|
||||||
<TableCell align="center" component="th" scope="row">
|
<TableCell align="center" component="th" scope="row">
|
||||||
{equipment_log.description}
|
{equipment_log.description}
|
||||||
</TableCell>
|
</TableCell>
|
||||||
<TableCell align="center" component="th" scope="row">
|
<TableCell align="center" component="th" scope="row">
|
||||||
{equipment_log.category}
|
{equipment_log.category}
|
||||||
</TableCell>
|
</TableCell>
|
||||||
<TableCell align="right">
|
<TableCell align="right">
|
||||||
<div
|
<div
|
||||||
style={{
|
style={{
|
||||||
...styles.flex_column,
|
...styles.flex_column,
|
||||||
...{ alignItems: "center" },
|
...{ alignItems: "center" },
|
||||||
}}
|
}}
|
||||||
>
|
>
|
||||||
<div>{equipment_log.history_date}</div>
|
<div>{equipment_log.history_date}</div>
|
||||||
<div>
|
<div>
|
||||||
{equipment_log.history_user
|
{equipment_log.history_user
|
||||||
? "by " + equipment_log.history_user
|
? "by " + equipment_log.history_user
|
||||||
: ""}
|
: ""}
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
</TableCell>
|
</div>
|
||||||
</TableRow>
|
</TableCell>
|
||||||
))
|
</TableRow>
|
||||||
) : (
|
))
|
||||||
<></>
|
) : (
|
||||||
)}
|
<></>
|
||||||
</TableBody>
|
)}
|
||||||
</Table>
|
</TableBody>
|
||||||
</TableContainer>
|
</Table>
|
||||||
</div>
|
</TableContainer>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
|
|
|
||||||
|
|
@ -66,143 +66,144 @@ export default function TransactionsListPage() {
|
||||||
flexWrap: "wrap",
|
flexWrap: "wrap",
|
||||||
}}
|
}}
|
||||||
>
|
>
|
||||||
<div style={{ width: "90%", overflowY: "scroll", marginTop: "2rem" }}>
|
<TableContainer
|
||||||
<TableContainer component={Paper}>
|
style={{ width: "90%", overflowY: "scroll", marginTop: "2rem" }}
|
||||||
<Table sx={{ minWidth: "32rem" }} size="medium">
|
component={Paper}
|
||||||
<TableHead>
|
>
|
||||||
<TableRow style={{ backgroundColor: colors.header_color }}>
|
<Table sx={{ minWidth: "32rem" }} size="medium">
|
||||||
<TableCell align="center" style={styles.text_light}>
|
<TableHead>
|
||||||
ID
|
<TableRow style={{ backgroundColor: colors.header_color }}>
|
||||||
</TableCell>
|
<TableCell align="center" style={styles.text_light}>
|
||||||
<TableCell align="center" style={styles.text_light}>
|
ID
|
||||||
Borrower
|
</TableCell>
|
||||||
</TableCell>
|
<TableCell align="center" style={styles.text_light}>
|
||||||
<TableCell align="center" style={styles.text_light}>
|
Borrower
|
||||||
Teacher
|
</TableCell>
|
||||||
</TableCell>
|
<TableCell align="center" style={styles.text_light}>
|
||||||
<TableCell align="center" style={styles.text_light}>
|
Teacher
|
||||||
Status
|
</TableCell>
|
||||||
</TableCell>
|
<TableCell align="center" style={styles.text_light}>
|
||||||
<TableCell align="center" style={styles.text_light}>
|
Status
|
||||||
Equipments
|
</TableCell>
|
||||||
</TableCell>
|
<TableCell align="center" style={styles.text_light}>
|
||||||
</TableRow>
|
Equipments
|
||||||
</TableHead>
|
</TableCell>
|
||||||
<TableBody>
|
</TableRow>
|
||||||
{transactions.data ? (
|
</TableHead>
|
||||||
transactions.data.map((transaction) => (
|
<TableBody>
|
||||||
<TableRow
|
{transactions.data ? (
|
||||||
key={transaction.id}
|
transactions.data.map((transaction) => (
|
||||||
sx={{ "&:last-child td, &:last-child th": { border: 0 } }}
|
<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
|
{transaction.id}
|
||||||
align="center"
|
</TableCell>
|
||||||
component="th"
|
<TableCell
|
||||||
scope="row"
|
align="center"
|
||||||
onClick={() => {
|
component="th"
|
||||||
SetSelectedTransaction(transaction.id);
|
scope="row"
|
||||||
SetEditTransactionOpen(true);
|
onClick={() => {
|
||||||
}}
|
SetSelectedTransaction(transaction.id);
|
||||||
>
|
SetEditTransactionOpen(true);
|
||||||
{transaction.id}
|
}}
|
||||||
</TableCell>
|
>
|
||||||
<TableCell
|
{transaction.borrower.name}
|
||||||
align="center"
|
</TableCell>
|
||||||
component="th"
|
<TableCell
|
||||||
scope="row"
|
align="center"
|
||||||
onClick={() => {
|
component="th"
|
||||||
SetSelectedTransaction(transaction.id);
|
scope="row"
|
||||||
SetEditTransactionOpen(true);
|
onClick={() => {
|
||||||
}}
|
SetSelectedTransaction(transaction.id);
|
||||||
>
|
SetEditTransactionOpen(true);
|
||||||
{transaction.borrower.name}
|
}}
|
||||||
</TableCell>
|
>
|
||||||
<TableCell
|
{transaction.teacher.name}
|
||||||
align="center"
|
</TableCell>
|
||||||
component="th"
|
<TableCell
|
||||||
scope="row"
|
align="center"
|
||||||
onClick={() => {
|
component="th"
|
||||||
SetSelectedTransaction(transaction.id);
|
scope="row"
|
||||||
SetEditTransactionOpen(true);
|
onClick={() => {
|
||||||
}}
|
SetSelectedTransaction(transaction.id);
|
||||||
>
|
SetEditTransactionOpen(true);
|
||||||
{transaction.teacher.name}
|
}}
|
||||||
</TableCell>
|
>
|
||||||
<TableCell
|
{transaction.transaction_status}
|
||||||
align="center"
|
</TableCell>
|
||||||
component="th"
|
<TableCell style={{ overflowY: "scroll" }} align="center">
|
||||||
scope="row"
|
<TableContainer component={Paper}>
|
||||||
onClick={() => {
|
<Table sx={{ minWidth: "4rem" }} size="medium">
|
||||||
SetSelectedTransaction(transaction.id);
|
<TableHead>
|
||||||
SetEditTransactionOpen(true);
|
<TableRow
|
||||||
}}
|
style={{ backgroundColor: colors.header_color }}
|
||||||
>
|
>
|
||||||
{transaction.transaction_status}
|
<TableCell
|
||||||
</TableCell>
|
align="center"
|
||||||
<TableCell align="center">
|
style={styles.text_light}
|
||||||
<TableContainer component={Paper}>
|
>
|
||||||
<Table sx={{ minWidth: "4rem" }} size="medium">
|
ID
|
||||||
<TableHead>
|
</TableCell>
|
||||||
|
<TableCell
|
||||||
|
align="center"
|
||||||
|
style={styles.text_light}
|
||||||
|
>
|
||||||
|
Name
|
||||||
|
</TableCell>
|
||||||
|
</TableRow>
|
||||||
|
</TableHead>
|
||||||
|
<TableBody>
|
||||||
|
{transaction.equipments.map((equipment) => (
|
||||||
<TableRow
|
<TableRow
|
||||||
style={{ backgroundColor: colors.header_color }}
|
key={equipment.id}
|
||||||
|
sx={{
|
||||||
|
"&:last-child td, &:last-child th": {
|
||||||
|
border: 0,
|
||||||
|
},
|
||||||
|
}}
|
||||||
|
onClick={() => {
|
||||||
|
SetEditTransactionOpen(false);
|
||||||
|
SetEditEquipmentsOpen(true);
|
||||||
|
}}
|
||||||
>
|
>
|
||||||
<TableCell
|
<TableCell
|
||||||
align="center"
|
align="center"
|
||||||
style={styles.text_light}
|
component="th"
|
||||||
|
scope="row"
|
||||||
>
|
>
|
||||||
ID
|
{equipment.id}
|
||||||
</TableCell>
|
</TableCell>
|
||||||
<TableCell
|
<TableCell
|
||||||
align="center"
|
align="center"
|
||||||
style={styles.text_light}
|
component="th"
|
||||||
|
scope="row"
|
||||||
>
|
>
|
||||||
Name
|
{equipment.name}
|
||||||
</TableCell>
|
</TableCell>
|
||||||
</TableRow>
|
</TableRow>
|
||||||
</TableHead>
|
))}
|
||||||
<TableBody>
|
</TableBody>
|
||||||
{transaction.equipments.map((equipment) => (
|
</Table>
|
||||||
<TableRow
|
</TableContainer>
|
||||||
key={equipment.id}
|
</TableCell>
|
||||||
sx={{
|
</TableRow>
|
||||||
"&:last-child td, &:last-child th": {
|
))
|
||||||
border: 0,
|
) : (
|
||||||
},
|
<></>
|
||||||
}}
|
)}
|
||||||
onClick={() => {
|
</TableBody>
|
||||||
SetEditTransactionOpen(false);
|
</Table>
|
||||||
SetEditEquipmentsOpen(true);
|
</TableContainer>
|
||||||
}}
|
|
||||||
>
|
|
||||||
<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>
|
|
||||||
</div>
|
</div>
|
||||||
<Popup
|
<Popup
|
||||||
open={EditTransactionOpen}
|
open={EditTransactionOpen}
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue