s459309/system-pri
3
3
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Add autosave, improve styles

Browse Source
This commit is contained in:
adam-skowronek 2023-01-16 20:04:07 +01:00
parent e0f2711b21
commit be8f065886
1 changed files with 235 additions and 62 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

297
frontend/src/views/GradeCard.tsx
View File

@ -1,4 +1,3 @@
import { useEffect } from 'react'
import { useForm, Controller } from 'react-hook-form' import { useForm, Controller } from 'react-hook-form'
import { useMutation, useQuery } from 'react-query' import { useMutation, useQuery } from 'react-query'
import { useParams } from 'react-router-dom' import { useParams } from 'react-router-dom'
@ -13,7 +12,7 @@ import { gradeOptions } from '../utils/gradeCard'
import styles from './GradeCard.module.css' import styles from './GradeCard.module.css'
const GradeCard = () => { const GradeCard = () => {
const { register, handleSubmit, setValue, control, formState } = useForm() const { handleSubmit, setValue, control } = useForm()
const { id } = useParams<{ id: string }>() const { id } = useParams<{ id: string }>()
const [supervisorId] = useLocalStorageState('userId') const [supervisorId] = useLocalStorageState('userId')
@ -133,10 +132,16 @@ const GradeCard = () => {
overflow: 'visible', overflow: 'visible',
textOverflow: 'initial', textOverflow: 'initial',
whiteSpace: 'initial', whiteSpace: 'initial',
display: '-webkit-box',
'-webkit-line-clamp': '2',
'-webkit-box-orient': 'vertical',
}), }),
placeholder: (styles: any) => ({ placeholder: (styles: any) => ({
...styles, ...styles,
color: 'black', color: 'black',
display: '-webkit-box',
'-webkit-line-clamp': '2',
'-webkit-box-orient': 'vertical',
}), }),
} }
} }
@ -144,9 +149,9 @@ const GradeCard = () => {
return ( return (
<div className={styles['grade-table']}> <div className={styles['grade-table']}>
<form onSubmit={handleSubmit(onSubmit)}> <form onSubmit={handleSubmit(onSubmit)}>
<div className="flex justify-end"> {/* <div className="flex justify-end">
<button className="btn btn-success mb-2">ZAPISZ</button> <button className="btn btn-success mb-2">ZAPISZ</button>
</div> </div> */}
<table className=" table-normal border-collapse"> <table className=" table-normal border-collapse">
<thead> <thead>
<tr> <tr>
@ -185,7 +190,10 @@ const GradeCard = () => {
?.label ?.label
} }
closeMenuOnSelect={true} closeMenuOnSelect={true}
onChange={(val) => onChange(val?.value)} onChange={(val) => {
onChange(val?.value)
handleSubmit(onSubmit)()
}}
styles={getStyles(value)} styles={getStyles(value)}
/> />
)} )}
@ -203,7 +211,10 @@ const GradeCard = () => {
?.label ?.label
} }
closeMenuOnSelect={true} closeMenuOnSelect={true}
onChange={(val) => onChange(val?.value)} onChange={(val) => {
onChange(val?.value)
handleSubmit(onSubmit)()
}}
styles={getStyles(value)} styles={getStyles(value)}
/> />
)} )}
@ -229,7 +240,10 @@ const GradeCard = () => {
?.label ?.label
} }
closeMenuOnSelect={true} closeMenuOnSelect={true}
onChange={(val) => onChange(val?.value)} onChange={(val) => {
onChange(val?.value)
handleSubmit(onSubmit)()
}}
styles={getStyles(value)} styles={getStyles(value)}
/> />
)} )}
@ -247,7 +261,10 @@ const GradeCard = () => {
?.label ?.label
} }
closeMenuOnSelect={true} closeMenuOnSelect={true}
onChange={(val) => onChange(val?.value)} onChange={(val) => {
onChange(val?.value)
handleSubmit(onSubmit)()
}}
styles={getStyles(value)} styles={getStyles(value)}
/> />
)} )}
@ -271,7 +288,10 @@ const GradeCard = () => {
?.label ?.label
} }
closeMenuOnSelect={true} closeMenuOnSelect={true}
onChange={(val) => onChange(val?.value)} onChange={(val) => {
onChange(val?.value)
handleSubmit(onSubmit)()
}}
styles={getStyles(value)} styles={getStyles(value)}
/> />
)} )}
@ -289,7 +309,10 @@ const GradeCard = () => {
?.label ?.label
} }
closeMenuOnSelect={true} closeMenuOnSelect={true}
onChange={(val) => onChange(val?.value)} onChange={(val) => {
onChange(val?.value)
handleSubmit(onSubmit)()
}}
styles={getStyles(value)} styles={getStyles(value)}
/> />
)} )}
@ -314,7 +337,10 @@ const GradeCard = () => {
?.label ?.label
} }
closeMenuOnSelect={true} closeMenuOnSelect={true}
onChange={(val) => onChange(val?.value)} onChange={(val) => {
onChange(val?.value)
handleSubmit(onSubmit)()
}}
styles={getStyles(value)} styles={getStyles(value)}
/> />
)} )}
@ -332,7 +358,10 @@ const GradeCard = () => {
?.label ?.label
} }
closeMenuOnSelect={true} closeMenuOnSelect={true}
onChange={(val) => onChange(val?.value)} onChange={(val) => {
onChange(val?.value)
handleSubmit(onSubmit)()
}}
styles={getStyles(value)} styles={getStyles(value)}
/> />
)} )}
@ -364,7 +393,10 @@ const GradeCard = () => {
?.label ?.label
} }
closeMenuOnSelect={true} closeMenuOnSelect={true}
onChange={(val) => onChange(val?.value)} onChange={(val) => {
onChange(val?.value)
handleSubmit(onSubmit)()
}}
styles={getStyles(value)} styles={getStyles(value)}
/> />
)} )}
@ -382,7 +414,10 @@ const GradeCard = () => {
?.label ?.label
} }
closeMenuOnSelect={true} closeMenuOnSelect={true}
onChange={(val) => onChange(val?.value)} onChange={(val) => {
onChange(val?.value)
handleSubmit(onSubmit)()
}}
styles={getStyles(value)} styles={getStyles(value)}
/> />
)} )}
@ -404,7 +439,10 @@ const GradeCard = () => {
?.label ?.label
} }
closeMenuOnSelect={true} closeMenuOnSelect={true}
onChange={(val) => onChange(val?.value)} onChange={(val) => {
onChange(val?.value)
handleSubmit(onSubmit)()
}}
styles={getStyles(value)} styles={getStyles(value)}
/> />
)} )}
@ -422,7 +460,10 @@ const GradeCard = () => {
?.label ?.label
} }
closeMenuOnSelect={true} closeMenuOnSelect={true}
onChange={(val) => onChange(val?.value)} onChange={(val) => {
onChange(val?.value)
handleSubmit(onSubmit)()
}}
styles={getStyles(value)} styles={getStyles(value)}
/> />
)} )}
@ -444,7 +485,10 @@ const GradeCard = () => {
?.label ?.label
} }
closeMenuOnSelect={true} closeMenuOnSelect={true}
onChange={(val) => onChange(val?.value)} onChange={(val) => {
onChange(val?.value)
handleSubmit(onSubmit)()
}}
styles={getStyles(value)} styles={getStyles(value)}
/> />
)} )}
@ -462,7 +506,10 @@ const GradeCard = () => {
?.label ?.label
} }
closeMenuOnSelect={true} closeMenuOnSelect={true}
onChange={(val) => onChange(val?.value)} onChange={(val) => {
onChange(val?.value)
handleSubmit(onSubmit)()
}}
styles={getStyles(value)} styles={getStyles(value)}
/> />
)} )}
@ -484,7 +531,10 @@ const GradeCard = () => {
?.label ?.label
} }
closeMenuOnSelect={true} closeMenuOnSelect={true}
onChange={(val) => onChange(val?.value)} onChange={(val) => {
onChange(val?.value)
handleSubmit(onSubmit)()
}}
styles={getStyles(value)} styles={getStyles(value)}
/> />
)} )}
@ -502,7 +552,10 @@ const GradeCard = () => {
?.label ?.label
} }
closeMenuOnSelect={true} closeMenuOnSelect={true}
onChange={(val) => onChange(val?.value)} onChange={(val) => {
onChange(val?.value)
handleSubmit(onSubmit)()
}}
styles={getStyles(value)} styles={getStyles(value)}
/> />
)} )}
@ -524,7 +577,10 @@ const GradeCard = () => {
?.label ?.label
} }
closeMenuOnSelect={true} closeMenuOnSelect={true}
onChange={(val) => onChange(val?.value)} onChange={(val) => {
onChange(val?.value)
handleSubmit(onSubmit)()
}}
styles={getStyles(value)} styles={getStyles(value)}
/> />
)} )}
@ -542,7 +598,10 @@ const GradeCard = () => {
?.label ?.label
} }
closeMenuOnSelect={true} closeMenuOnSelect={true}
onChange={(val) => onChange(val?.value)} onChange={(val) => {
onChange(val?.value)
handleSubmit(onSubmit)()
}}
styles={getStyles(value)} styles={getStyles(value)}
/> />
)} )}
@ -573,7 +632,10 @@ const GradeCard = () => {
?.label ?.label
} }
closeMenuOnSelect={true} closeMenuOnSelect={true}
onChange={(val) => onChange(val?.value)} onChange={(val) => {
onChange(val?.value)
handleSubmit(onSubmit)()
}}
styles={getStyles(value)} styles={getStyles(value)}
/> />
)} )}
@ -591,7 +653,10 @@ const GradeCard = () => {
?.label ?.label
} }
closeMenuOnSelect={true} closeMenuOnSelect={true}
onChange={(val) => onChange(val?.value)} onChange={(val) => {
onChange(val?.value)
handleSubmit(onSubmit)()
}}
styles={getStyles(value)} styles={getStyles(value)}
/> />
)} )}
@ -613,7 +678,10 @@ const GradeCard = () => {
?.label ?.label
} }
closeMenuOnSelect={true} closeMenuOnSelect={true}
onChange={(val) => onChange(val?.value)} onChange={(val) => {
onChange(val?.value)
handleSubmit(onSubmit)()
}}
styles={getStyles(value)} styles={getStyles(value)}
/> />
)} )}
@ -631,7 +699,10 @@ const GradeCard = () => {
?.label ?.label
} }
closeMenuOnSelect={true} closeMenuOnSelect={true}
onChange={(val) => onChange(val?.value)} onChange={(val) => {
onChange(val?.value)
handleSubmit(onSubmit)()
}}
styles={getStyles(value)} styles={getStyles(value)}
/> />
)} )}
@ -655,7 +726,10 @@ const GradeCard = () => {
?.label ?.label
} }
closeMenuOnSelect={true} closeMenuOnSelect={true}
onChange={(val) => onChange(val?.value)} onChange={(val) => {
onChange(val?.value)
handleSubmit(onSubmit)()
}}
styles={getStyles(value)} styles={getStyles(value)}
/> />
)} )}
@ -673,7 +747,10 @@ const GradeCard = () => {
?.label ?.label
} }
closeMenuOnSelect={true} closeMenuOnSelect={true}
onChange={(val) => onChange(val?.value)} onChange={(val) => {
onChange(val?.value)
handleSubmit(onSubmit)()
}}
styles={getStyles(value)} styles={getStyles(value)}
/> />
)} )}
@ -695,7 +772,10 @@ const GradeCard = () => {
?.label ?.label
} }
closeMenuOnSelect={true} closeMenuOnSelect={true}
onChange={(val) => onChange(val?.value)} onChange={(val) => {
onChange(val?.value)
handleSubmit(onSubmit)()
}}
styles={getStyles(value)} styles={getStyles(value)}
/> />
)} )}
@ -713,7 +793,10 @@ const GradeCard = () => {
?.label ?.label
} }
closeMenuOnSelect={true} closeMenuOnSelect={true}
onChange={(val) => onChange(val?.value)} onChange={(val) => {
onChange(val?.value)
handleSubmit(onSubmit)()
}}
styles={getStyles(value)} styles={getStyles(value)}
/> />
)} )}
@ -735,7 +818,10 @@ const GradeCard = () => {
?.label ?.label
} }
closeMenuOnSelect={true} closeMenuOnSelect={true}
onChange={(val) => onChange(val?.value)} onChange={(val) => {
onChange(val?.value)
handleSubmit(onSubmit)()
}}
styles={getStyles(value)} styles={getStyles(value)}
/> />
)} )}
@ -753,7 +839,10 @@ const GradeCard = () => {
?.label ?.label
} }
closeMenuOnSelect={true} closeMenuOnSelect={true}
onChange={(val) => onChange(val?.value)} onChange={(val) => {
onChange(val?.value)
handleSubmit(onSubmit)()
}}
styles={getStyles(value)} styles={getStyles(value)}
/> />
)} )}
@ -775,7 +864,10 @@ const GradeCard = () => {
?.label ?.label
} }
closeMenuOnSelect={true} closeMenuOnSelect={true}
onChange={(val) => onChange(val?.value)} onChange={(val) => {
onChange(val?.value)
handleSubmit(onSubmit)()
}}
styles={getStyles(value)} styles={getStyles(value)}
/> />
)} )}
@ -793,7 +885,10 @@ const GradeCard = () => {
?.label ?.label
} }
closeMenuOnSelect={true} closeMenuOnSelect={true}
onChange={(val) => onChange(val?.value)} onChange={(val) => {
onChange(val?.value)
handleSubmit(onSubmit)()
}}
styles={getStyles(value)} styles={getStyles(value)}
/> />
)} )}
@ -815,7 +910,10 @@ const GradeCard = () => {
?.label ?.label
} }
closeMenuOnSelect={true} closeMenuOnSelect={true}
onChange={(val) => onChange(val?.value)} onChange={(val) => {
onChange(val?.value)
handleSubmit(onSubmit)()
}}
styles={getStyles(value)} styles={getStyles(value)}
/> />
)} )}
@ -833,7 +931,10 @@ const GradeCard = () => {
?.label ?.label
} }
closeMenuOnSelect={true} closeMenuOnSelect={true}
onChange={(val) => onChange(val?.value)} onChange={(val) => {
onChange(val?.value)
handleSubmit(onSubmit)()
}}
styles={getStyles(value)} styles={getStyles(value)}
/> />
)} )}
@ -868,7 +969,10 @@ const GradeCard = () => {
?.label ?.label
} }
closeMenuOnSelect={true} closeMenuOnSelect={true}
onChange={(val) => onChange(val?.value)} onChange={(val) => {
onChange(val?.value)
handleSubmit(onSubmit)()
}}
styles={getStyles(value)} styles={getStyles(value)}
/> />
)} )}
@ -886,7 +990,10 @@ const GradeCard = () => {
?.label ?.label
} }
closeMenuOnSelect={true} closeMenuOnSelect={true}
onChange={(val) => onChange(val?.value)} onChange={(val) => {
onChange(val?.value)
handleSubmit(onSubmit)()
}}
styles={getStyles(value)} styles={getStyles(value)}
/> />
)} )}
@ -912,7 +1019,10 @@ const GradeCard = () => {
?.label ?.label
} }
closeMenuOnSelect={true} closeMenuOnSelect={true}
onChange={(val) => onChange(val?.value)} onChange={(val) => {
onChange(val?.value)
handleSubmit(onSubmit)()
}}
styles={getStyles(value)} styles={getStyles(value)}
/> />
)} )}
@ -930,7 +1040,10 @@ const GradeCard = () => {
?.label ?.label
} }
closeMenuOnSelect={true} closeMenuOnSelect={true}
onChange={(val) => onChange(val?.value)} onChange={(val) => {
onChange(val?.value)
handleSubmit(onSubmit)()
}}
styles={getStyles(value)} styles={getStyles(value)}
/> />
)} )}
@ -956,7 +1069,10 @@ const GradeCard = () => {
?.label ?.label
} }
closeMenuOnSelect={true} closeMenuOnSelect={true}
onChange={(val) => onChange(val?.value)} onChange={(val) => {
onChange(val?.value)
handleSubmit(onSubmit)()
}}
styles={getStyles(value)} styles={getStyles(value)}
/> />
)} )}
@ -974,7 +1090,10 @@ const GradeCard = () => {
?.label ?.label
} }
closeMenuOnSelect={true} closeMenuOnSelect={true}
onChange={(val) => onChange(val?.value)} onChange={(val) => {
onChange(val?.value)
handleSubmit(onSubmit)()
}}
styles={getStyles(value)} styles={getStyles(value)}
/> />
)} )}
@ -999,7 +1118,10 @@ const GradeCard = () => {
?.label ?.label
} }
closeMenuOnSelect={true} closeMenuOnSelect={true}
onChange={(val) => onChange(val?.value)} onChange={(val) => {
onChange(val?.value)
handleSubmit(onSubmit)()
}}
styles={getStyles(value)} styles={getStyles(value)}
/> />
)} )}
@ -1017,7 +1139,10 @@ const GradeCard = () => {
?.label ?.label
} }
closeMenuOnSelect={true} closeMenuOnSelect={true}
onChange={(val) => onChange(val?.value)} onChange={(val) => {
onChange(val?.value)
handleSubmit(onSubmit)()
}}
styles={getStyles(value)} styles={getStyles(value)}
/> />
)} )}
@ -1039,7 +1164,10 @@ const GradeCard = () => {
?.label ?.label
} }
closeMenuOnSelect={true} closeMenuOnSelect={true}
onChange={(val) => onChange(val?.value)} onChange={(val) => {
onChange(val?.value)
handleSubmit(onSubmit)()
}}
styles={getStyles(value)} styles={getStyles(value)}
/> />
)} )}
@ -1057,7 +1185,10 @@ const GradeCard = () => {
?.label ?.label
} }
closeMenuOnSelect={true} closeMenuOnSelect={true}
onChange={(val) => onChange(val?.value)} onChange={(val) => {
onChange(val?.value)
handleSubmit(onSubmit)()
}}
styles={getStyles(value)} styles={getStyles(value)}
/> />
)} )}
@ -1082,7 +1213,10 @@ const GradeCard = () => {
?.label ?.label
} }
closeMenuOnSelect={true} closeMenuOnSelect={true}
onChange={(val) => onChange(val?.value)} onChange={(val) => {
onChange(val?.value)
handleSubmit(onSubmit)()
}}
styles={getStyles(value)} styles={getStyles(value)}
/> />
)} )}
@ -1100,7 +1234,10 @@ const GradeCard = () => {
?.label ?.label
} }
closeMenuOnSelect={true} closeMenuOnSelect={true}
onChange={(val) => onChange(val?.value)} onChange={(val) => {
onChange(val?.value)
handleSubmit(onSubmit)()
}}
styles={getStyles(value)} styles={getStyles(value)}
/> />
)} )}
@ -1122,7 +1259,10 @@ const GradeCard = () => {
?.label ?.label
} }
closeMenuOnSelect={true} closeMenuOnSelect={true}
onChange={(val) => onChange(val?.value)} onChange={(val) => {
onChange(val?.value)
handleSubmit(onSubmit)()
}}
styles={getStyles(value)} styles={getStyles(value)}
/> />
)} )}
@ -1140,7 +1280,10 @@ const GradeCard = () => {
?.label ?.label
} }
closeMenuOnSelect={true} closeMenuOnSelect={true}
onChange={(val) => onChange(val?.value)} onChange={(val) => {
onChange(val?.value)
handleSubmit(onSubmit)()
}}
styles={getStyles(value)} styles={getStyles(value)}
/> />
)} )}
@ -1162,7 +1305,10 @@ const GradeCard = () => {
?.label ?.label
} }
closeMenuOnSelect={true} closeMenuOnSelect={true}
onChange={(val) => onChange(val?.value)} onChange={(val) => {
onChange(val?.value)
handleSubmit(onSubmit)()
}}
styles={getStyles(value)} styles={getStyles(value)}
/> />
)} )}
@ -1180,7 +1326,10 @@ const GradeCard = () => {
?.label ?.label
} }
closeMenuOnSelect={true} closeMenuOnSelect={true}
onChange={(val) => onChange(val?.value)} onChange={(val) => {
onChange(val?.value)
handleSubmit(onSubmit)()
}}
styles={getStyles(value)} styles={getStyles(value)}
/> />
)} )}
@ -1205,7 +1354,10 @@ const GradeCard = () => {
?.label ?.label
} }
closeMenuOnSelect={true} closeMenuOnSelect={true}
onChange={(val) => onChange(val?.value)} onChange={(val) => {
onChange(val?.value)
handleSubmit(onSubmit)()
}}
styles={getStyles(value)} styles={getStyles(value)}
/> />
)} )}
@ -1223,7 +1375,10 @@ const GradeCard = () => {
?.label ?.label
} }
closeMenuOnSelect={true} closeMenuOnSelect={true}
onChange={(val) => onChange(val?.value)} onChange={(val) => {
onChange(val?.value)
handleSubmit(onSubmit)()
}}
styles={getStyles(value)} styles={getStyles(value)}
/> />
)} )}
@ -1245,7 +1400,10 @@ const GradeCard = () => {
?.label ?.label
} }
closeMenuOnSelect={true} closeMenuOnSelect={true}
onChange={(val) => onChange(val?.value)} onChange={(val) => {
onChange(val?.value)
handleSubmit(onSubmit)()
}}
styles={getStyles(value)} styles={getStyles(value)}
/> />
)} )}
@ -1263,7 +1421,10 @@ const GradeCard = () => {
?.label ?.label
} }
closeMenuOnSelect={true} closeMenuOnSelect={true}
onChange={(val) => onChange(val?.value)} onChange={(val) => {
onChange(val?.value)
handleSubmit(onSubmit)()
}}
styles={getStyles(value)} styles={getStyles(value)}
/> />
)} )}
@ -1290,7 +1451,10 @@ const GradeCard = () => {
?.label ?.label
} }
closeMenuOnSelect={true} closeMenuOnSelect={true}
onChange={(val) => onChange(val?.value)} onChange={(val) => {
onChange(val?.value)
handleSubmit(onSubmit)()
}}
styles={getStyles(value)} styles={getStyles(value)}
/> />
)} )}
@ -1308,7 +1472,10 @@ const GradeCard = () => {
?.label ?.label
} }
closeMenuOnSelect={true} closeMenuOnSelect={true}
onChange={(val) => onChange(val?.value)} onChange={(val) => {
onChange(val?.value)
handleSubmit(onSubmit)()
}}
styles={getStyles(value)} styles={getStyles(value)}
/> />
)} )}
@ -1333,7 +1500,10 @@ const GradeCard = () => {
?.label ?.label
} }
closeMenuOnSelect={true} closeMenuOnSelect={true}
onChange={(val) => onChange(val?.value)} onChange={(val) => {
onChange(val?.value)
handleSubmit(onSubmit)()
}}
styles={getStyles(value)} styles={getStyles(value)}
/> />
)} )}
@ -1351,7 +1521,10 @@ const GradeCard = () => {
?.label ?.label
} }
closeMenuOnSelect={true} closeMenuOnSelect={true}
onChange={(val) => onChange(val?.value)} onChange={(val) => {
onChange(val?.value)
handleSubmit(onSubmit)()
}}
styles={getStyles(value)} styles={getStyles(value)}
/> />
)} )}
@ -1360,9 +1533,9 @@ const GradeCard = () => {
</tr> </tr>
</tbody> </tbody>
</table> </table>
<div className="flex justify-end"> {/* <div className="flex justify-end">
<button className="btn btn-success mt-2">ZAPISZ</button> <button className="btn btn-success mt-2">ZAPISZ</button>
</div> </div> */}
</form> </form>
</div> </div>
) )