devops/encoach_frontend
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Added the assignment to the Session Card

Browse Source
This commit is contained in:
Tiago Ribeiro
2024-09-05 17:25:22 +01:00
parent ac980023b5
commit e312af36bb
1 changed files with 64 additions and 54 deletions
Download Patch File Download Diff File Expand all files Collapse all files

118
src/components/Medium/SessionCard.tsx
View File

@@ -40,61 +40,71 @@ export default function SessionCard({
}; };
return ( return (
<div className="border-mti-gray-anti-flash flex w-64 flex-col gap-3 rounded-xl border p-4 text-black"> <div className="border-mti-gray-anti-flash flex w-64 flex-col justify-between gap-3 rounded-xl border p-4 text-black">
<span className="flex gap-1"> <div className="flex flex-col gap-3">
<b>ID:</b> <span className="flex gap-1">
{session.sessionId} <b>ID:</b>
</span> {session.sessionId}
<span className="flex gap-1"> </span>
<b>Date:</b> <span className="flex gap-1">
{moment(session.date).format("DD/MM/YYYY - HH:mm")} <b>Date:</b>
</span> {moment(session.date).format("DD/MM/YYYY - HH:mm")}
<div className="flex w-full items-center justify-between"> </span>
<div className="-md:mt-2 grid w-full grid-cols-4 place-items-center justify-center gap-2"> {session.assignment && (
{session.selectedModules.sort(sortByModuleName).map((module) => ( <span className="flex flex-col gap-0">
<div <b>Assignment:</b>
key={module} {session.assignment.name}
data-tip={capitalize(module)} </span>
className={clsx( )}
"-md:px-4 tooltip flex w-fit items-center gap-2 rounded-xl py-2 text-white md:px-2 xl:px-4",
module === "reading" && "bg-ielts-reading",
module === "listening" && "bg-ielts-listening",
module === "writing" && "bg-ielts-writing",
module === "speaking" && "bg-ielts-speaking",
module === "level" && "bg-ielts-level",
)}>
{module === "reading" && <BsBook className="h-4 w-4" />}
{module === "listening" && <BsHeadphones className="h-4 w-4" />}
{module === "writing" && <BsPen className="h-4 w-4" />}
{module === "speaking" && <BsMegaphone className="h-4 w-4" />}
{module === "level" && <BsClipboard className="h-4 w-4" />}
</div>
))}
</div>
</div> </div>
<div className="flex items-center gap-2 w-full"> <div className="flex flex-col gap-3">
<button <div className="flex w-full items-center justify-between">
onClick={async () => await loadSession(session)} <div className="-md:mt-2 grid w-full grid-cols-4 place-items-center justify-center gap-2">
disabled={isLoading} {session.selectedModules.sort(sortByModuleName).map((module) => (
className="bg-mti-green-ultralight w-full hover:bg-mti-green-light rounded-lg p-2 px-4 transition duration-300 ease-in-out hover:text-white disabled:cursor-not-allowed"> <div
{!isLoading && "Resume"} key={module}
{isLoading && ( data-tip={capitalize(module)}
<div className="flex items-center justify-center"> className={clsx(
<BsArrowRepeat className="animate-spin text-white" size={25} /> "-md:px-4 tooltip flex w-fit items-center gap-2 rounded-xl py-2 text-white md:px-2 xl:px-4",
</div> module === "reading" && "bg-ielts-reading",
)} module === "listening" && "bg-ielts-listening",
</button> module === "writing" && "bg-ielts-writing",
<button module === "speaking" && "bg-ielts-speaking",
onClick={deleteSession} module === "level" && "bg-ielts-level",
disabled={isLoading} )}>
className="bg-mti-red-ultralight w-full hover:bg-mti-red-light rounded-lg p-2 px-4 transition duration-300 ease-in-out hover:text-white disabled:cursor-not-allowed"> {module === "reading" && <BsBook className="h-4 w-4" />}
{!isLoading && "Delete"} {module === "listening" && <BsHeadphones className="h-4 w-4" />}
{isLoading && ( {module === "writing" && <BsPen className="h-4 w-4" />}
<div className="flex items-center justify-center"> {module === "speaking" && <BsMegaphone className="h-4 w-4" />}
<BsArrowRepeat className="animate-spin text-white" size={25} /> {module === "level" && <BsClipboard className="h-4 w-4" />}
</div> </div>
)} ))}
</button> </div>
</div>
<div className="flex items-center gap-2 w-full">
<button
onClick={async () => await loadSession(session)}
disabled={isLoading}
className="bg-mti-green-ultralight w-full hover:bg-mti-green-light rounded-lg p-2 px-4 transition duration-300 ease-in-out hover:text-white disabled:cursor-not-allowed">
{!isLoading && "Resume"}
{isLoading && (
<div className="flex items-center justify-center">
<BsArrowRepeat className="animate-spin text-white" size={25} />
</div>
)}
</button>
<button
onClick={deleteSession}
disabled={isLoading}
className="bg-mti-red-ultralight w-full hover:bg-mti-red-light rounded-lg p-2 px-4 transition duration-300 ease-in-out hover:text-white disabled:cursor-not-allowed">
{!isLoading && "Delete"}
{isLoading && (
<div className="flex items-center justify-center">
<BsArrowRepeat className="animate-spin text-white" size={25} />
</div>
)}
</button>
</div>
</div> </div>
</div> </div>
); );