mirror of
https://github.com/lemeow125/Borrowing-TrackerFrontend.git
synced 2025-06-29 00:45:49 +08:00
Merge branch 'master' of https://git.keannu1.duckdns.org/keannu125/Borrowing-TrackerFrontend into feature/additional_styles
This commit is contained in:
Jerilyn Yare
commit
94d41b3194
11 changed files with 262 additions and 200 deletions
|
|
@ -20,6 +20,7 @@ import {
|
|||
CircularProgress,
|
||||
MenuItem,
|
||||
OutlinedInput,
|
||||
Autocomplete,
|
||||
} from "@mui/material";
|
||||
import React from "react";
|
||||
import Header from "../../Components/Header/Header";
|
||||
|
|
@ -32,10 +33,10 @@ export default function AddTransactionPage() {
|
|||
equipments: [] as number[],
|
||||
teacher: 0,
|
||||
subject: "",
|
||||
remarks: " ",
|
||||
remarks: "",
|
||||
transaction_status: "Pending Approval",
|
||||
consumables: " ",
|
||||
additional_members: " ",
|
||||
consumables: "",
|
||||
additional_members: "",
|
||||
borrower: 0,
|
||||
});
|
||||
/*
|
||||
|
|
@ -126,29 +127,50 @@ export default function AddTransactionPage() {
|
|||
|
||||
<div style={{...styles.flex_column, marginLeft: "1rem", marginRight: "1rem"}}>
|
||||
<FormControl style={{ marginTop: "8px" }}>
|
||||
<FormLabel style={{...styles.text_dark, ...styles.bform_label2}}>Items Requested</FormLabel>
|
||||
<Select
|
||||
<FormLabel
|
||||
style={{
|
||||
...{...styles.text_dark, ...styles.bform_label2},
|
||||
...{ marginLeft: "4px", marginBottom: "8px", textAlign: "left" },
|
||||
}}
|
||||
>
|
||||
Items Requested
|
||||
</FormLabel>
|
||||
<Autocomplete
|
||||
multiple
|
||||
value={transaction.equipments}
|
||||
onChange={(event) =>
|
||||
id="equipment-autocomplete"
|
||||
options={equipments.data?.sort((a, b) => a.id - b.id) || []}
|
||||
getOptionLabel={(option) =>
|
||||
`${option.equipment_name} (ID:${option.id})`
|
||||
}
|
||||
value={
|
||||
equipments.data?.filter((equipment) =>
|
||||
transaction.equipments.includes(equipment.id)
|
||||
) || []
|
||||
}
|
||||
onChange={(_event, newValue) => {
|
||||
SetTransaction({
|
||||
...transaction,
|
||||
equipments: event.target.value as number[],
|
||||
})
|
||||
}
|
||||
input={<OutlinedInput />}
|
||||
>
|
||||
{equipments.data
|
||||
?.filter((equipment) => equipment.status == "Available")
|
||||
.map((equipment) => (
|
||||
<MenuItem key={equipment.id} value={equipment.id}>
|
||||
{`${equipment.equipment_name} (ID:${equipment.id})`}
|
||||
</MenuItem>
|
||||
))}
|
||||
</Select>
|
||||
equipments: newValue.map((item) => item.id),
|
||||
});
|
||||
}}
|
||||
renderInput={(params) => (
|
||||
<TextField
|
||||
{...params}
|
||||
variant="outlined"
|
||||
label="Items Requested"
|
||||
/>
|
||||
)}
|
||||
/>
|
||||
</FormControl>
|
||||
<FormControl style={{ marginTop: "8px" }}>
|
||||
<FormLabel style={{...styles.text_dark, ...styles.bform_label2}}>Assigned Teacher</FormLabel>
|
||||
<FormLabel
|
||||
style={{
|
||||
...styles.text_dark,
|
||||
...{ marginLeft: "4px", marginBottom: "4px", textAlign: "left" },
|
||||
}}
|
||||
>
|
||||
Assigned Teacher
|
||||
</FormLabel>
|
||||
<Select
|
||||
value={transaction.teacher}
|
||||
onChange={(event) =>
|
||||
|
|
@ -157,9 +179,7 @@ export default function AddTransactionPage() {
|
|||
teacher: event.target.value as number,
|
||||
})
|
||||
}
|
||||
label={"Assigned Teacher"}
|
||||
input={<OutlinedInput />}
|
||||
|
||||
>
|
||||
{teachers.data?.map((teacher) => (
|
||||
<MenuItem key={teacher.id} value={teacher.id}>
|
||||
|
|
@ -169,7 +189,14 @@ export default function AddTransactionPage() {
|
|||
</Select>
|
||||
</FormControl>
|
||||
<FormControl style={{ marginTop: "8px" }}>
|
||||
<FormLabel style={{...styles.text_dark, ...styles.bform_label}}>Subject</FormLabel>
|
||||
<FormLabel
|
||||
style={{
|
||||
...styles.text_dark,
|
||||
...{ marginLeft: "4px", marginBottom: "4px", textAlign: "left" },
|
||||
}}
|
||||
>
|
||||
Subject
|
||||
</FormLabel>
|
||||
<TextField
|
||||
style={styles.input_form}
|
||||
onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
|
||||
|
|
@ -181,7 +208,14 @@ export default function AddTransactionPage() {
|
|||
/>
|
||||
</FormControl>
|
||||
<FormControl style={{ marginTop: "8px" }}>
|
||||
<FormLabel style={{...styles.text_dark, ...styles.bform_label}}>Remarks</FormLabel>
|
||||
<FormLabel
|
||||
style={{
|
||||
...styles.text_dark,
|
||||
...{ marginLeft: "4px", marginBottom: "4px", textAlign: "left" },
|
||||
}}
|
||||
>
|
||||
Remarks
|
||||
</FormLabel>
|
||||
<TextField
|
||||
multiline
|
||||
style={styles.input_form}
|
||||
|
|
@ -194,7 +228,14 @@ export default function AddTransactionPage() {
|
|||
/>
|
||||
</FormControl>
|
||||
<FormControl style={{ marginTop: "8px" }}>
|
||||
<FormLabel style={{...styles.text_dark, ...styles.bform_label}}>Consumables</FormLabel>
|
||||
<FormLabel
|
||||
style={{
|
||||
...styles.text_dark,
|
||||
...{ marginLeft: "4px", marginBottom: "4px", textAlign: "left" },
|
||||
}}
|
||||
>
|
||||
Consumables
|
||||
</FormLabel>
|
||||
<TextField
|
||||
multiline
|
||||
style={styles.input_form}
|
||||
|
|
@ -207,7 +248,14 @@ export default function AddTransactionPage() {
|
|||
/>
|
||||
</FormControl>
|
||||
<FormControl style={{ marginTop: "8px" }}>
|
||||
<FormLabel style={{...styles.text_dark, ...styles.bform_label}}>Additional Members</FormLabel>
|
||||
<FormLabel
|
||||
style={{
|
||||
...styles.text_dark,
|
||||
...{ marginLeft: "4px", marginBottom: "4px", textAlign: "left" },
|
||||
}}
|
||||
>
|
||||
Additional Members
|
||||
</FormLabel>
|
||||
<TextField
|
||||
multiline
|
||||
style={styles.input_form}
|
||||
|
|
@ -261,6 +309,9 @@ export default function AddTransactionPage() {
|
|||
queryClient.invalidateQueries({
|
||||
queryKey: ["equipment_instances"],
|
||||
});
|
||||
queryClient.invalidateQueries({
|
||||
queryKey: ["equipment_instances_available"],
|
||||
});
|
||||
queryClient.invalidateQueries({
|
||||
queryKey: ["transactions"],
|
||||
});
|
||||
|
|
|
|||
|
|
@ -81,7 +81,6 @@ export default function EquipmentInstancesListPage() {
|
|||
width: "100%",
|
||||
minHeight: "100%",
|
||||
minWidth: "100%",
|
||||
flexWrap: "wrap",
|
||||
}}
|
||||
>
|
||||
{/* ADDED/INSERTED BUTTON,POPUP, TWO CATEGORY BUTTONS*/}
|
||||
|
|
@ -200,76 +199,73 @@ export default function EquipmentInstancesListPage() {
|
|||
</p>
|
||||
</Button>
|
||||
|
||||
<div style={{ alignSelf: "flex-start", paddingLeft: "32px" }}>
|
||||
<div
|
||||
<div
|
||||
style={{
|
||||
...styles.flex_row,
|
||||
...{ alignItems: "center", justifySelf: "flex-start" },
|
||||
}}
|
||||
>
|
||||
<SearchIcon
|
||||
style={{
|
||||
...styles.flex_row,
|
||||
...{ alignItems: "center", justifySelf: "flex-start" },
|
||||
height: 32,
|
||||
width: 32,
|
||||
fill: colors.font_dark,
|
||||
marginLeft: "1rem",
|
||||
marginRight: "1rem",
|
||||
}}
|
||||
/>
|
||||
<Autocomplete
|
||||
sx={{
|
||||
display: "inline-block",
|
||||
"& input": {
|
||||
width: "256x",
|
||||
bgcolor: "background.paper",
|
||||
color: (theme) =>
|
||||
theme.palette.getContrastText(theme.palette.background.paper),
|
||||
},
|
||||
}}
|
||||
value={filter}
|
||||
onChange={(_event, newValue) => {
|
||||
setFilter(newValue);
|
||||
}}
|
||||
freeSolo
|
||||
id="custom-input-demo"
|
||||
options={["Available", "Broken", "Glassware", "Miscellaneous"]}
|
||||
renderInput={(params) => (
|
||||
<div ref={params.InputProps.ref}>
|
||||
<input type="text" {...params.inputProps} />
|
||||
</div>
|
||||
)}
|
||||
/>
|
||||
<p
|
||||
style={{
|
||||
...styles.text_M,
|
||||
...styles.text_dark,
|
||||
...{ marginLeft: "4px" },
|
||||
}}
|
||||
>
|
||||
<SearchIcon
|
||||
style={{
|
||||
height: 32,
|
||||
width: 32,
|
||||
fill: colors.font_dark,
|
||||
marginLeft: "1rem",
|
||||
marginRight: "1rem",
|
||||
}}
|
||||
/>
|
||||
<Autocomplete
|
||||
sx={{
|
||||
display: "inline-block",
|
||||
"& input": {
|
||||
width: "256x",
|
||||
bgcolor: "background.paper",
|
||||
color: (theme) =>
|
||||
theme.palette.getContrastText(
|
||||
theme.palette.background.paper
|
||||
),
|
||||
},
|
||||
}}
|
||||
value={filter}
|
||||
onChange={(_event, newValue) => {
|
||||
setFilter(newValue);
|
||||
}}
|
||||
freeSolo
|
||||
id="custom-input-demo"
|
||||
options={["Available", "Broken", "Glassware", "Miscellaneous"]}
|
||||
renderInput={(params) => (
|
||||
<div ref={params.InputProps.ref}>
|
||||
<input type="text" {...params.inputProps} />
|
||||
</div>
|
||||
)}
|
||||
/>
|
||||
<p
|
||||
style={{
|
||||
...styles.text_M,
|
||||
...styles.text_dark,
|
||||
...{ marginLeft: "4px" },
|
||||
}}
|
||||
>
|
||||
Results Found:{" "}
|
||||
{
|
||||
equipment_instances?.data?.filter((equipment) =>
|
||||
filter !== null
|
||||
? // If filter is not null, we filter if it matches any criteria
|
||||
equipment.equipment_name
|
||||
.toLowerCase()
|
||||
.includes(filter.toLowerCase()) ||
|
||||
equipment.category
|
||||
.toLowerCase()
|
||||
.includes(filter.toLowerCase()) ||
|
||||
equipment.last_updated
|
||||
.toLowerCase()
|
||||
.includes(filter?.toLowerCase()) ||
|
||||
equipment.status.toLowerCase() == filter.toLowerCase()
|
||||
: // If filter keyword is null then we just pass through everything as if we did not filter at all
|
||||
true
|
||||
).length
|
||||
}
|
||||
</p>
|
||||
</div>
|
||||
Results Found:{" "}
|
||||
{
|
||||
equipment_instances?.data?.filter((equipment) =>
|
||||
filter !== null
|
||||
? // If filter is not null, we filter if it matches any criteria
|
||||
equipment.equipment_name
|
||||
.toLowerCase()
|
||||
.includes(filter.toLowerCase()) ||
|
||||
equipment.category
|
||||
.toLowerCase()
|
||||
.includes(filter.toLowerCase()) ||
|
||||
equipment.last_updated
|
||||
.toLowerCase()
|
||||
.includes(filter?.toLowerCase()) ||
|
||||
equipment.status.toLowerCase() == filter.toLowerCase()
|
||||
: // If filter keyword is null then we just pass through everything as if we did not filter at all
|
||||
true
|
||||
).length
|
||||
}
|
||||
</p>
|
||||
</div>
|
||||
<div style={{ alignSelf: "flex-start", paddingLeft: "32px" }}></div>
|
||||
<TableContainer
|
||||
style={{ width: "90%", overflowY: "scroll", marginTop: "2rem" }}
|
||||
component={Paper}
|
||||
|
|
|
|||
|
|
@ -65,79 +65,75 @@ export default function EquipmentTallyPage() {
|
|||
width: "100%",
|
||||
minHeight: "100%",
|
||||
minWidth: "100%",
|
||||
flexWrap: "wrap",
|
||||
}}
|
||||
>
|
||||
<div style={{ alignSelf: "flex-start", paddingLeft: "32px" }}>
|
||||
<div
|
||||
<div
|
||||
style={{
|
||||
...styles.flex_row,
|
||||
...{ alignItems: "center", justifySelf: "flex-start" },
|
||||
}}
|
||||
>
|
||||
<SearchIcon
|
||||
style={{
|
||||
...styles.flex_row,
|
||||
...{ alignItems: "center", justifySelf: "flex-start" },
|
||||
height: 32,
|
||||
width: 32,
|
||||
fill: colors.font_dark,
|
||||
marginLeft: "1rem",
|
||||
marginRight: "1rem",
|
||||
}}
|
||||
/>
|
||||
<Autocomplete
|
||||
sx={{
|
||||
display: "inline-block",
|
||||
"& input": {
|
||||
width: "256x",
|
||||
bgcolor: "background.paper",
|
||||
color: (theme) =>
|
||||
theme.palette.getContrastText(theme.palette.background.paper),
|
||||
},
|
||||
}}
|
||||
value={filter}
|
||||
onChange={(_event, newValue) => {
|
||||
setFilter(newValue);
|
||||
}}
|
||||
freeSolo
|
||||
id="custom-input-demo"
|
||||
options={["Glassware", "Miscellaneous"]}
|
||||
renderInput={(params) => (
|
||||
<div ref={params.InputProps.ref}>
|
||||
<input type="text" {...params.inputProps} />
|
||||
</div>
|
||||
)}
|
||||
/>
|
||||
<p
|
||||
style={{
|
||||
...styles.text_M,
|
||||
...styles.text_dark,
|
||||
...{ marginLeft: "4px" },
|
||||
}}
|
||||
>
|
||||
<SearchIcon
|
||||
style={{
|
||||
height: 32,
|
||||
width: 32,
|
||||
fill: colors.font_dark,
|
||||
marginLeft: "1rem",
|
||||
marginRight: "1rem",
|
||||
}}
|
||||
/>
|
||||
<Autocomplete
|
||||
sx={{
|
||||
display: "inline-block",
|
||||
"& input": {
|
||||
width: "256x",
|
||||
bgcolor: "background.paper",
|
||||
color: (theme) =>
|
||||
theme.palette.getContrastText(
|
||||
theme.palette.background.paper
|
||||
),
|
||||
},
|
||||
}}
|
||||
value={filter}
|
||||
onChange={(_event, newValue) => {
|
||||
setFilter(newValue);
|
||||
}}
|
||||
freeSolo
|
||||
id="custom-input-demo"
|
||||
options={["Glassware", "Miscellaneous"]}
|
||||
renderInput={(params) => (
|
||||
<div ref={params.InputProps.ref}>
|
||||
<input type="text" {...params.inputProps} />
|
||||
</div>
|
||||
)}
|
||||
/>
|
||||
<p
|
||||
style={{
|
||||
...styles.text_M,
|
||||
...styles.text_dark,
|
||||
...{ marginLeft: "4px" },
|
||||
}}
|
||||
>
|
||||
Results Found:{" "}
|
||||
{
|
||||
equipments?.data?.filter((equipment) =>
|
||||
filter !== null
|
||||
? // If filter is not null, we filter if it matches any criteria
|
||||
equipment.name
|
||||
.toLowerCase()
|
||||
.includes(filter.toLowerCase()) ||
|
||||
equipment.category
|
||||
.toLowerCase()
|
||||
.includes(filter.toLowerCase()) ||
|
||||
equipment.last_updated
|
||||
.toLowerCase()
|
||||
.includes(filter?.toLowerCase()) ||
|
||||
equipment.category.toLowerCase() == filter.toLowerCase()
|
||||
: // If filter keyword is null then we just pass through everything as if we did not filter at all
|
||||
true
|
||||
).length
|
||||
}
|
||||
</p>
|
||||
</div>
|
||||
Results Found:{" "}
|
||||
{
|
||||
equipment_instances?.data?.filter((equipment) =>
|
||||
filter !== null
|
||||
? // If filter is not null, we filter if it matches any criteria
|
||||
equipment.equipment_name
|
||||
.toLowerCase()
|
||||
.includes(filter.toLowerCase()) ||
|
||||
equipment.category
|
||||
.toLowerCase()
|
||||
.includes(filter.toLowerCase()) ||
|
||||
equipment.last_updated
|
||||
.toLowerCase()
|
||||
.includes(filter?.toLowerCase()) ||
|
||||
equipment.status.toLowerCase() == filter.toLowerCase()
|
||||
: // If filter keyword is null then we just pass through everything as if we did not filter at all
|
||||
true
|
||||
).length
|
||||
}
|
||||
</p>
|
||||
</div>
|
||||
<div style={{ alignSelf: "flex-start", paddingLeft: "32px" }}></div>
|
||||
<TableContainer
|
||||
style={{ width: "90%", overflowY: "scroll", marginTop: "2rem" }}
|
||||
component={Paper}
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue