@@ -7,18 +7,13 @@ import { toast } from "react-toastify"
77import { GET_TEAMS_BY_COHORT } from "../Mutations/teamMutation"
88import { GET_USER_COHORTS } from "../Mutations/cohortMutations"
99
10- type BulkRatingModalProps = {
11- bulkRateModal : boolean ,
12- setBulkRateModal : React . Dispatch < React . SetStateAction < boolean > >
13- }
14-
1510type AddRatingsByFileFormData = {
1611 cohortId : string ,
1712 sprint : string ,
1813 file : File | null ,
1914}
2015
21- const BulkRatingModal = ( { bulkRateModal , setBulkRateModal } : BulkRatingModalProps ) => {
16+ const BulkRatingModal = ( { setBulkRateModal } : { setBulkRateModal : React . Dispatch < React . SetStateAction < boolean > > } ) => {
2217 const { t } = useTranslation ( )
2318 const [ formData , setFormData ] = useState < AddRatingsByFileFormData > ( {
2419 cohortId : '' ,
@@ -42,10 +37,13 @@ const BulkRatingModal = ({ bulkRateModal, setBulkRateModal }: BulkRatingModalPro
4237
4338 const [ selectedTeam , setSelectedTeam ] = useState < string > ( '' )
4439 const fileUploadRef = useRef < HTMLInputElement > ( null )
40+ const cohortInputRef = useRef < HTMLSelectElement > ( null )
41+ const sprintInputRef = useRef < HTMLSelectElement > ( null )
4542
4643 const saveRatings = async ( e : React . FormEvent ) => {
4744 try {
4845 e . preventDefault ( )
46+ console . log ( formData )
4947 if ( ! formData . cohortId ) throw new Error ( "Please select a cohort" )
5048 if ( ! formData . sprint ) throw new Error ( "Please select a sprint" )
5149 if ( ! formData . file ) throw new Error ( "Please select a file" )
@@ -135,7 +133,7 @@ const BulkRatingModal = ({ bulkRateModal, setBulkRateModal }: BulkRatingModalPro
135133 } , [ ] )
136134
137135 return (
138- < div className = { `${ bulkRateModal ? "block" : "hidden" } h-screen w-screen z-20 bg-black bg-opacity-30 backdrop-blur-sm fixed top-0 left-0 flex items-center justify-center px-4` } >
136+ < div className = { `h-screen w-screen z-20 bg-black bg-opacity-30 backdrop-blur-sm fixed top-0 left-0 flex items-center justify-center px-4` } >
139137 < div className = "w-full p-4 pb-8 bg-indigo-100 rounded-lg dark:bg-dark-bg sm:w-3/4 xl:w-4/12" >
140138 < div className = "flex flex-wrap items-center justify-center w-full card-title" >
141139 < h3 className = "w-11/12 text-sm font-bold text-center dark:text-white" >
@@ -148,10 +146,9 @@ const BulkRatingModal = ({ bulkRateModal, setBulkRateModal }: BulkRatingModalPro
148146 < div className = "flex flex-col" >
149147 < label > Choose a cohort</ label >
150148 < select data-testid = "select-cohort" className = "p-2 my-2 text-sm text-black dark:text-white rounded-lg bg-white dark:bg-dark border-2 border-primary"
151- defaultValue = { "" }
152149 onChange = { selectCohort }
153150 >
154- < option > Choose a cohort</ option >
151+ < option value = { "" } > Choose a cohort</ option >
155152 {
156153 cohorts && cohorts . getUserCohorts . length ?
157154 cohorts . getUserCohorts . map ( ( cohort : any ) =>
@@ -171,13 +168,12 @@ const BulkRatingModal = ({ bulkRateModal, setBulkRateModal }: BulkRatingModalPro
171168 </ select >
172169 < label > Choose a sprint</ label >
173170 < select data-testid = "select-sprint" className = "p-2 my-2 text-sm text-black dark:text-white rounded-lg bg-white dark:bg-dark border-2 border-primary"
174- defaultValue = { "" }
175171 onChange = { ( e ) => {
176172 e . preventDefault ( )
177173 setFormData ( { ...formData , sprint : e . target . value } )
178174 } }
179175 >
180- < option > Choose a sprint</ option >
176+ < option value = { "" } > Choose a sprint</ option >
181177 {
182178 ratings && ! ratings . getRatingsByCohort . length ?
183179 < option data-testid = "sprint-default-option" value = { 1 } > Sprint 1</ option >
@@ -207,11 +203,11 @@ const BulkRatingModal = ({ bulkRateModal, setBulkRateModal }: BulkRatingModalPro
207203 }
208204 </ select >
209205 </ div >
210- < div >
206+ < div className = "flex flex-col gap-2" >
211207 < label > Upload a rating file (.xlsx or .xlx):</ label >
212208 < input
213209 data-testid = "file-input"
214- className = "w-full mt-2 mb-5 bg-gray-600 rounded-md"
210+ className = "w-full bg-gray-600 rounded-md"
215211 type = "file"
216212 ref = { fileUploadRef }
217213 onChange = { ( e ) => {
@@ -221,32 +217,6 @@ const BulkRatingModal = ({ bulkRateModal, setBulkRateModal }: BulkRatingModalPro
221217 accept = ".xlsx, .xls"
222218 >
223219 </ input >
224- < div className = "flex flex-col gap-3 p-3 rounded-md text-sm bg-neutral-700" >
225- < p className = "" > Would you like to download team template for easier rating?</ p >
226- < div className = "flex gap-2" >
227- < select data-testid = "select-team" className = "p-1 text-sm text-black dark:text-white rounded-lg bg-white dark:bg-dark border-2 border-primary" defaultValue = { "" } onChange = { ( e ) => setSelectedTeam ( e . target . value ) } >
228- < option data-testid = "team-default-option" > Choose a team</ option >
229- {
230- teams && teams . getTeamsByCohort . length > 0 ?
231- teams . getTeamsByCohort . map ( ( team : any ) => < option data-testid = { `team-option-${ team . id } ` } key = { team . id } value = { team . id } > { team . name } </ option > )
232- : ''
233- }
234- {
235- loadingTeams ?
236- < option data-testid = "team-loading-option" > Loading...</ option >
237- : ''
238- }
239- {
240- teamsError ?
241- < option data-testid = "team-error-option" > No teams found...</ option >
242- : ''
243- }
244- </ select >
245- < button data-testid = "download-button" type = "button" onClick = { downloadTeamFile } className = "py-1 px-2 text-white rounded-lg bg-green-700 text-sm font-serif font-semibold" > Download</ button >
246- </ div >
247- </ div >
248- </ div >
249-
250220 < div >
251221 {
252222 bulkRatings && bulkRatings . addRatingsByFile . RejectedRatings . length > 0 ?
@@ -280,14 +250,46 @@ const BulkRatingModal = ({ bulkRateModal, setBulkRateModal }: BulkRatingModalPro
280250 : ''
281251 }
282252 </ div >
283- < div className = "flex justify-between w-full" >
284- < button className = "w-[40%] md:w-1/4 p-3 text-white rounded-lg bg-primary text-sm font-serif font-semibold" type = "button" onClick = { ( ) => setBulkRateModal ( false ) } >
253+ < div className = "flex justify-between w-full my-2 " >
254+ < button className = "w-[40%] md:w-1/4 p-3 text-white rounded-lg bg-primary text-sm font-serif font-semibold" type = "button" onClick = { ( ) => setBulkRateModal ( false ) } >
285255 Cancel
286256 </ button >
287257 < button className = "w-[40%] md:w-1/4 p-3 text-white rounded-lg bg-primary text-sm font-serif font-semibold" type = "submit" >
288258 Save
289259 </ button >
290260 </ div >
261+ {
262+ formData . cohortId ?
263+ < >
264+ < hr className = "mt-5 border-b" />
265+ < div className = "flex flex-col gap-3 p-3 rounded-md text-sm bg-neutral-700" >
266+ < p className = "" > Would you like to download a team template .xlsx file for easier rating?</ p >
267+ < div className = "flex gap-2" >
268+ < select data-testid = "select-team" className = "p-1 text-sm text-black dark:text-white rounded-lg bg-white dark:bg-dark border-2 border-primary" defaultValue = { "" } onChange = { ( e ) => setSelectedTeam ( e . target . value ) } >
269+ < option data-testid = "team-default-option" > Choose a team</ option >
270+ {
271+ teams && teams . getTeamsByCohort . length > 0 ?
272+ teams . getTeamsByCohort . map ( ( team : any ) => < option data-testid = { `team-option-${ team . id } ` } key = { team . id } value = { team . id } > { team . name } </ option > )
273+ : ''
274+ }
275+ {
276+ loadingTeams ?
277+ < option data-testid = "team-loading-option" > Loading...</ option >
278+ : ''
279+ }
280+ {
281+ teamsError ?
282+ < option data-testid = "team-error-option" > No teams found...</ option >
283+ : ''
284+ }
285+ </ select >
286+ < button data-testid = "download-button" type = "button" onClick = { downloadTeamFile } className = "py-1 px-2 text-white rounded-lg bg-green-700 text-sm font-serif font-semibold" > Download</ button >
287+ </ div >
288+ </ div >
289+ </ >
290+ : ''
291+ }
292+ </ div >
291293 </ form >
292294 </ div >
293295 </ div >
0 commit comments