Skip to content

Commit

Permalink
only suggest template download when cohort is selected
Browse files Browse the repository at this point in the history
  • Loading branch information
@shema-surge
shema-surge committed Nov 21, 2024
1 parent 0a2aaed commit 9d8a69b
Show file tree
Hide file tree
Showing 3 changed files with 49 additions and 46 deletions.
84 changes: 43 additions & 41 deletions src/components/BulkRatingModal.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,18 +7,13 @@ import { toast } from "react-toastify"
import { GET_TEAMS_BY_COHORT } from "../Mutations/teamMutation"
import { GET_USER_COHORTS } from "../Mutations/cohortMutations"

type BulkRatingModalProps = {
bulkRateModal: boolean,
setBulkRateModal: React.Dispatch<React.SetStateAction<boolean>>
}

type AddRatingsByFileFormData = {
cohortId: string,
sprint: string,
file: File | null,
}

const BulkRatingModal = ({ bulkRateModal, setBulkRateModal }: BulkRatingModalProps) => {
const BulkRatingModal = ({ setBulkRateModal }: {setBulkRateModal: React.Dispatch<React.SetStateAction<boolean>> }) => {
const { t } = useTranslation()
const [formData, setFormData] = useState<AddRatingsByFileFormData>({
cohortId: '',
Expand All @@ -42,10 +37,13 @@ const BulkRatingModal = ({ bulkRateModal, setBulkRateModal }: BulkRatingModalPro

const [selectedTeam, setSelectedTeam] = useState<string>('')
const fileUploadRef = useRef<HTMLInputElement>(null)
const cohortInputRef = useRef<HTMLSelectElement>(null)
const sprintInputRef = useRef<HTMLSelectElement>(null)

const saveRatings = async (e: React.FormEvent) => {
try {
e.preventDefault()
console.log(formData)
if(!formData.cohortId) throw new Error("Please select a cohort")
if(!formData.sprint) throw new Error("Please select a sprint")
if(!formData.file) throw new Error("Please select a file")
Expand Down Expand Up @@ -135,7 +133,7 @@ const BulkRatingModal = ({ bulkRateModal, setBulkRateModal }: BulkRatingModalPro
}, [])

return (
<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`}>
<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`}>
<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">
<div className="flex flex-wrap items-center justify-center w-full card-title">
<h3 className="w-11/12 text-sm font-bold text-center dark:text-white">
Expand All @@ -148,10 +146,9 @@ const BulkRatingModal = ({ bulkRateModal, setBulkRateModal }: BulkRatingModalPro
<div className="flex flex-col">
<label>Choose a cohort</label>
<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"
defaultValue={""}
onChange={selectCohort}
>
<option>Choose a cohort</option>
<option value={""}>Choose a cohort</option>
{
cohorts && cohorts.getUserCohorts.length ?
cohorts.getUserCohorts.map((cohort: any)=>
Expand All @@ -171,13 +168,12 @@ const BulkRatingModal = ({ bulkRateModal, setBulkRateModal }: BulkRatingModalPro
</select>
<label>Choose a sprint</label>
<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"
defaultValue={""}
onChange={(e) => {
e.preventDefault()
setFormData({ ...formData, sprint: e.target.value })
}}
>
<option>Choose a sprint</option>
<option value={""}>Choose a sprint</option>
{
ratings && !ratings.getRatingsByCohort.length ?
<option data-testid="sprint-default-option" value={1}>Sprint 1</option>
Expand Down Expand Up @@ -207,11 +203,11 @@ const BulkRatingModal = ({ bulkRateModal, setBulkRateModal }: BulkRatingModalPro
}
</select>
</div>
<div>
<div className="flex flex-col gap-2">
<label>Upload a rating file (.xlsx or .xlx):</label>
<input
data-testid="file-input"
className="w-full mt-2 mb-5 bg-gray-600 rounded-md"
className="w-full bg-gray-600 rounded-md"
type="file"
ref={fileUploadRef}
onChange={(e) => {
Expand All @@ -221,32 +217,6 @@ const BulkRatingModal = ({ bulkRateModal, setBulkRateModal }: BulkRatingModalPro
accept=".xlsx, .xls"
>
</input>
<div className="flex flex-col gap-3 p-3 rounded-md text-sm bg-neutral-700">
<p className="">Would you like to download team template for easier rating?</p>
<div className="flex gap-2">
<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)}>
<option data-testid="team-default-option">Choose a team</option>
{
teams && teams.getTeamsByCohort.length > 0 ?
teams.getTeamsByCohort.map((team: any)=><option data-testid={`team-option-${team.id}`} key={team.id} value={team.id}>{team.name}</option>)
: ''
}
{
loadingTeams ?
<option data-testid="team-loading-option">Loading...</option>
: ''
}
{
teamsError ?
<option data-testid="team-error-option">No teams found...</option>
: ''
}
</select>
<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>
</div>
</div>
</div>

<div>
{
bulkRatings && bulkRatings.addRatingsByFile.RejectedRatings.length > 0 ?
Expand Down Expand Up @@ -280,14 +250,46 @@ const BulkRatingModal = ({ bulkRateModal, setBulkRateModal }: BulkRatingModalPro
: ''
}
</div>
<div className="flex justify-between w-full">
<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)}>
<div className="flex justify-between w-full my-2">
<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)}>
Cancel
</button>
<button className="w-[40%] md:w-1/4 p-3 text-white rounded-lg bg-primary text-sm font-serif font-semibold" type="submit">
Save
</button>
</div>
{
formData.cohortId ?
<>
<hr className="mt-5 border-b" />
<div className="flex flex-col gap-3 p-3 rounded-md text-sm bg-neutral-700">
<p className="">Would you like to download a team template .xlsx file for easier rating?</p>
<div className="flex gap-2">
<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)}>
<option data-testid="team-default-option">Choose a team</option>
{
teams && teams.getTeamsByCohort.length > 0 ?
teams.getTeamsByCohort.map((team: any) => <option data-testid={`team-option-${team.id}`} key={team.id} value={team.id}>{team.name}</option>)
: ''
}
{
loadingTeams ?
<option data-testid="team-loading-option">Loading...</option>
: ''
}
{
teamsError ?
<option data-testid="team-error-option">No teams found...</option>
: ''
}
</select>
<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>
</div>
</div>
</>
: ''
}
</div>
</form>
</div>
</div>
Expand Down
10 changes: 6 additions & 4 deletions src/pages/AdminTraineeDashboard.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -1588,10 +1588,12 @@ function AdminTraineeDashboard() {
</div>
{/* =========================== End:: RemoveTraineeModel =============================== */}
{/*============================ Start:: BulkRateModal =================================== */}
<BulkRatingModal
bulkRateModal={bulkRateModal}
setBulkRateModal={setBulkRateModal}
/>
{
bulkRateModal?
<BulkRatingModal
setBulkRateModal={setBulkRateModal}
/>: ''
}
{/*============================ End:: BulkRateModal =================================== */}
<div className="flex flex-col">
<div className="flex flex-row">
Expand Down
1 change: 0 additions & 1 deletion src/pages/ttlTraineeDashboard.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -451,7 +451,6 @@ const TtlTraineeDashboard = () => {
{
bulkRateModal?
<BulkRatingModal
bulkRateModal={bulkRateModal}
setBulkRateModal={setBulkRateModal}
/> : ''
}
Expand Down

0 comments on commit 9d8a69b

Please sign in to comment.