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

Update dropdown menu for new transaction

Browse source
This commit is contained in:
Keannu Bernasol 2024-01-07 10:52:53 +08:00
parent 433207f8e4
commit 48d0e8f133
4 changed files with 107 additions and 24 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

32
package-lock.json generated
View file

@ -24,12 +24,14 @@
"react-router-dom": "^6.18.0",
"react-toastify": "^9.1.3",
"react-virtuoso": "^4.6.2",
"react-window": "^1.8.10",
"reactjs-popup": "^2.0.6",
"styled-components": "^6.1.1"
},
"devDependencies": {
"@types/react": "^18.2.15",
"@types/react-dom": "^18.2.7",
"@types/react-window": "^1.8.8",
"@typescript-eslint/eslint-plugin": "^6.0.0",
"@typescript-eslint/parser": "^6.0.0",
"@vitejs/plugin-react": "^4.0.3",
@ -1762,6 +1764,15 @@
"@types/react": "*"
}
},
"node_modules/@types/react-window": {
"version": "1.8.8",
"resolved": "https://registry.npmjs.org/@types/react-window/-/react-window-1.8.8.tgz",
"integrity": "sha512-8Ls660bHR1AUA2kuRvVG9D/4XpRC6wjAaPT9dil7Ckc76eP9TKWZwwmgfq8Q1LANX3QNDnoU4Zp48A3w+zK69Q==",
"dev": true,
"dependencies": {
"@types/react": "*"
}
},
"node_modules/@types/scheduler": {
"version": "0.16.5",
"resolved": "https://registry.npmjs.org/@types/scheduler/-/scheduler-0.16.5.tgz",
@ -3373,6 +3384,11 @@
"resolved": "https://registry.npmjs.org/media-engine/-/media-engine-1.0.3.tgz",
"integrity": "sha512-aa5tG6sDoK+k70B9iEX1NeyfT8ObCKhNDs6lJVpwF6r8vhUfuKMslIcirq6HIUYuuUYLefcEQOn9bSBOvawtwg=="
},
"node_modules/memoize-one": {
"version": "5.2.1",
"resolved": "https://registry.npmjs.org/memoize-one/-/memoize-one-5.2.1.tgz",
"integrity": "sha512-zYiwtZUcYyXKo/np96AGZAckk+FWWsUdJ3cHGGmld7+AhvcWmQyGCYUh1hc4Q/pkOhb65dQR/pqCyK0cOaHz4Q=="
},
"node_modules/merge2": {
"version": "1.4.1",
"resolved": "https://registry.npmjs.org/merge2/-/merge2-1.4.1.tgz",
@ -3908,6 +3924,22 @@
"react-dom": ">=16 || >=17 || >= 18"
}
},
"node_modules/react-window": {
"version": "1.8.10",
"resolved": "https://registry.npmjs.org/react-window/-/react-window-1.8.10.tgz",
"integrity": "sha512-Y0Cx+dnU6NLa5/EvoHukUD0BklJ8qITCtVEPY1C/nL8wwoZ0b5aEw8Ff1dOVHw7fCzMt55XfJDd8S8W8LCaUCg==",
"dependencies": {
"@babel/runtime": "^7.0.0",
"memoize-one": ">=3.1.1 <6"
},
"engines": {
"node": ">8.0.0"
},
"peerDependencies": {
"react": "^15.0.0 || ^16.0.0 || ^17.0.0 || ^18.0.0",
"react-dom": "^15.0.0 || ^16.0.0 || ^17.0.0 || ^18.0.0"
}
},
"node_modules/reactjs-popup": {
"version": "2.0.6",
"resolved": "https://registry.npmjs.org/reactjs-popup/-/reactjs-popup-2.0.6.tgz",

2
package.json
View file

@ -26,12 +26,14 @@
"react-router-dom": "^6.18.0",
"react-toastify": "^9.1.3",
"react-virtuoso": "^4.6.2",
"react-window": "^1.8.10",
"reactjs-popup": "^2.0.6",
"styled-components": "^6.1.1"
},
"devDependencies": {
"@types/react": "^18.2.15",
"@types/react-dom": "^18.2.7",
"@types/react-window": "^1.8.8",
"@typescript-eslint/eslint-plugin": "^6.0.0",
"@typescript-eslint/parser": "^6.0.0",
"@vitejs/plugin-react": "^4.0.3",

0
src/CountTransactionEquipments/test
View file

97
src/Pages/AddTransactionPage/AddTransactionPage.tsx
View file

@ -20,6 +20,7 @@ import {
CircularProgress,
MenuItem,
OutlinedInput,
Autocomplete,
} from "@mui/material";
import React from "react";
import Header from "../../Components/Header/Header";
@ -126,29 +127,50 @@ export default function AddTransactionPage() {
<div style={styles.flex_column}>
<FormControl style={{ marginTop: "8px" }}>
<FormLabel style={styles.text_dark}>Items Requested</FormLabel>
<Select
<FormLabel
style={{
...styles.text_dark,
...{ marginLeft: "4px", marginBottom: "8px", textAlign: "left" },
}}
>
Items Requested
</FormLabel>
<Autocomplete
multiple
value={transaction.equipments}
onChange={(event) =>
id="equipment-autocomplete"
options={equipments.data || []}
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 label="Name" />}
>
{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}>Assigned Teacher</FormLabel>
<FormLabel
style={{
...styles.text_dark,
...{ marginLeft: "4px", marginBottom: "4px", textAlign: "left" },
}}
>
Assigned Teacher
</FormLabel>
<Select
value={transaction.teacher}
onChange={(event) =>
@ -157,8 +179,7 @@ export default function AddTransactionPage() {
teacher: event.target.value as number,
})
}
label={"Assigned Teacher"}
input={<OutlinedInput label="Assigned Teacher" />}
input={<OutlinedInput />}
>
{teachers.data?.map((teacher) => (
<MenuItem key={teacher.id} value={teacher.id}>
@ -168,7 +189,14 @@ export default function AddTransactionPage() {
</Select>
</FormControl>
<FormControl style={{ marginTop: "8px" }}>
<FormLabel style={styles.text_dark}>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 +209,14 @@ export default function AddTransactionPage() {
/>
</FormControl>
<FormControl style={{ marginTop: "8px" }}>
<FormLabel style={styles.text_dark}>Remarks</FormLabel>
<FormLabel
style={{
...styles.text_dark,
...{ marginLeft: "4px", marginBottom: "4px", textAlign: "left" },
}}
>
Remarks
</FormLabel>
<TextField
multiline
style={styles.input_form}
@ -195,7 +230,14 @@ export default function AddTransactionPage() {
/>
</FormControl>
<FormControl style={{ marginTop: "8px" }}>
<FormLabel style={styles.text_dark}>Consumables</FormLabel>
<FormLabel
style={{
...styles.text_dark,
...{ marginLeft: "4px", marginBottom: "4px", textAlign: "left" },
}}
>
Consumables
</FormLabel>
<TextField
multiline
style={styles.input_form}
@ -209,7 +251,14 @@ export default function AddTransactionPage() {
/>
</FormControl>
<FormControl style={{ marginTop: "8px" }}>
<FormLabel style={styles.text_dark}>Additional Members</FormLabel>
<FormLabel
style={{
...styles.text_dark,
...{ marginLeft: "4px", marginBottom: "4px", textAlign: "left" },
}}
>
Additional Members
</FormLabel>
<TextField
multiline
style={styles.input_form}