Skip to content

Commit 9d8a69b

Browse files
committed
only suggest template download when cohort is selected
1 parent 0a2aaed commit 9d8a69b

File tree

3 files changed

+49
-46
lines changed

3 files changed

+49
-46
lines changed

src/components/BulkRatingModal.tsx

Lines changed: 43 additions & 41 deletions
Original file line numberDiff line numberDiff line change
@@ -7,18 +7,13 @@ import { toast } from "react-toastify"
77
import { GET_TEAMS_BY_COHORT } from "../Mutations/teamMutation"
88
import { GET_USER_COHORTS } from "../Mutations/cohortMutations"
99

10-
type BulkRatingModalProps = {
11-
bulkRateModal: boolean,
12-
setBulkRateModal: React.Dispatch<React.SetStateAction<boolean>>
13-
}
14-
1510
type 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>

src/pages/AdminTraineeDashboard.tsx

Lines changed: 6 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1588,10 +1588,12 @@ function AdminTraineeDashboard() {
15881588
</div>
15891589
{/* =========================== End:: RemoveTraineeModel =============================== */}
15901590
{/*============================ Start:: BulkRateModal =================================== */}
1591-
<BulkRatingModal
1592-
bulkRateModal={bulkRateModal}
1593-
setBulkRateModal={setBulkRateModal}
1594-
/>
1591+
{
1592+
bulkRateModal?
1593+
<BulkRatingModal
1594+
setBulkRateModal={setBulkRateModal}
1595+
/>: ''
1596+
}
15951597
{/*============================ End:: BulkRateModal =================================== */}
15961598
<div className="flex flex-col">
15971599
<div className="flex flex-row">

src/pages/ttlTraineeDashboard.tsx

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -451,7 +451,6 @@ const TtlTraineeDashboard = () => {
451451
{
452452
bulkRateModal?
453453
<BulkRatingModal
454-
bulkRateModal={bulkRateModal}
455454
setBulkRateModal={setBulkRateModal}
456455
/> : ''
457456
}

0 commit comments

Comments
 (0)