Skip to content

Commit

Permalink
Merge pull request #34 from avantifellows/UIchanges
Browse files Browse the repository at this point in the history 
UI-Changes
  • Loading branch information
@suryabulusu
suryabulusu authored Mar 7, 2024
2 parents d8df1d8 + a9d950b commit 4a48579
Show file tree
Hide file tree
Showing 12 changed files with 170 additions and 250 deletions.
4 changes: 3 additions & 1 deletion src/components/Navbar.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,9 @@ const Navbar = ({ item1, item2 }: { item1: string; item2: string }) => {
fill
/>
</div>
<p className={`md:text-2xl md:first-letter:text-3xl text-xs `}>
<p
className={`md:text-2xl md:first-letter:text-3xl md:first-letter:text-bold text-xs `}
>
SESSION MANAGER
</p>
</div>
Expand Down
24 changes: 13 additions & 11 deletions src/components/Steps/StudentDetails.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -16,6 +16,7 @@ export default function StudentDetails({
data,
setActiveStep,
setData,
type,
}: ActiveFormProps) {
const { register, handleSubmit, control } = useForm<QuizCreatorForm>({
defaultValues: { ...data.student },
Expand All @@ -34,41 +35,42 @@ export default function StudentDetails({
onSubmit={handleSubmit(onSubmit)}
>
<div className="flex md:w-full md:justify-start md:ml-1 ">
<label htmlFor="program" className="text-gray-400 text-md">
<label htmlFor="program" className="text-gray-400 text-md mt-2 ">
Program
</label>
</div>
<SelectField
control={control}
isDisabled={type === "edit" ? true : false}
name_="program"
options={ProgramOptions}
/>
<div className="flex md:w-full md:justify-start m-1 ">
<label htmlFor="program" className="text-gray-400 text-md ">
<div className="flex md:w-full md:justify-start ">
<label htmlFor="program" className="text-gray-400 text-md mt-2 ">
Batch
</label>
</div>
<SelectField control={control} name_="batch" options={BatchOptions} />
<div className="flex md:w-full md:justify-start m-1 ">
<label htmlFor="program" className="text-gray-400 text-md ">
<div className="flex md:w-full md:justify-start ">
<label htmlFor="program" className="text-gray-400 text-md mt-2 ">
Grade
</label>
</div>
<SelectField control={control} name_="grade" options={GradeOptions} />
<div className="flex md:w-full justify-start m-1 ">
<label htmlFor="program" className="text-gray-400 text-md ">
<div className="flex md:w-full justify-start ">
<label htmlFor="program" className="text-gray-400 text-md mt-2">
Course
</label>
</div>
<SelectField control={control} name_="course" options={CourseOptions} />
<div className="flex md:w-full justify-start m-1 ">
<label htmlFor="program" className="text-gray-400 text-md ">
<div className="flex md:w-full justify-start ">
<label htmlFor="program" className="text-gray-400 text-md mt-2">
Stream
</label>
</div>
<SelectField control={control} name_="stream" options={StreamOptions} />
<div className="flex md:w-full justify-start m-1 ">
<label htmlFor="program" className="text-gray-400 text-md ">
<div className="flex md:w-full justify-start ">
<label htmlFor="program" className="text-gray-400 text-md mt-2">
Test Takers Count
</label>
</div>
Expand Down
56 changes: 34 additions & 22 deletions src/components/Steps/TestDetails.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -38,8 +38,8 @@ export function TestDetails({
className="flex flex-col items-center m-[60px]"
onSubmit={handleSubmit(onSubmit)}
>
<div className="flex md:w-full md:justify-start m-1 ">
<label className="text-gray-400 text-md ">Test Name</label>
<div className="flex md:w-full md:justify-start ">
<label className="text-gray-400 text-md mt-2 ">Test Name</label>
</div>
<input
required
Expand All @@ -50,66 +50,74 @@ export function TestDetails({
{...register("name")}
disabled={type === "edit"}
/>
<div className="flex md:w-full md:justify-start m-1 ">
<label className="text-gray-400 text-md ">Test Type</label>
<div className="flex md:w-full md:justify-start ">
<label className="text-gray-400 text-md mt-2 ">Test Type</label>
</div>
<SelectField
control={control}
isDisabled={type === "edit" ? true : false}
name_="type"
options={TestTypeOptions}
placeholder="Test Type"
/>
<div className="flex md:w-full md:justify-start m-1 ">
<label className="text-gray-400 text-md ">Test Format</label>
<div className="flex md:w-full md:justify-start ">
<label className="text-gray-400 text-md mt-2 ">Test Format</label>
</div>
<SelectField
control={control}
name_="format"
options={TestFormatOptions}
placeholder="Test Format"
/>
<div className="flex md:w-full md:justify-start m-1 ">
<label className="text-gray-400 text-md ">Test Purpose</label>
<div className="flex md:w-full md:justify-start ">
<label className="text-gray-400 text-md mt-2">Test Purpose</label>
</div>
<SelectField
control={control}
name_="purpose"
options={TestPurposeOptions}
placeholder="Test Purpose"
/>
<div className="flex md:w-full md:justify-start m-1 ">
<label className="text-gray-400 text-md ">Test Platform</label>
<div className="flex md:w-full md:justify-start ">
<label className="text-gray-400 text-md mt-2">Test Platform</label>
</div>
<SelectField
control={control}
isDisabled={type === "edit" ? true : false}
name_="platform"
options={TestPlatformOptions}
placeholder="Test Platform"
/>
<div className="flex md:w-full md:justify-start m-1 ">
<label className="text-gray-400 text-md ">Marking Scheme</label>
<div className="flex md:w-full md:justify-start ">
<label className="text-gray-400 text-md mt-2 ">
Marking Scheme
</label>
</div>
{/* program, */}
<SelectField
isDisabled={type === "edit" ? true : false}
control={control}
name_="markingScheme"
options={MarkingSchemeOptions}
placeholder="Marking Scheme"
/>
<div className="flex md:w-full md:justify-start m-1 ">
<label className="text-gray-400 text-md ">Optional Limit</label>
<div className="flex md:w-full md:justify-start ">
<label className="text-gray-400 text-md mt-2">
Optional Limit
</label>
</div>
<SelectField
control={control}
isDisabled={type === "edit" ? true : false}
name_="optionalLimit"
options={OptionalLimitOptions}
placeholder="Optional Limit"
/>

{data.test.id ? (
<>
<div className="flex md:w-full md:justify-start m-1 ">
<label className="text-gray-400 text-md ">Test id</label>
<div className="flex md:w-full md:justify-start ">
<label className="text-gray-400 text-md mt-2">Test id</label>
</div>
<input
required
Expand All @@ -120,8 +128,10 @@ export function TestDetails({
{...register("id")}
disabled={type === "edit"}
/>
<div className="flex md:w-full md:justify-start m-1 ">
<label className="text-gray-400 text-md ">Session Id</label>
<div className="flex md:w-full md:justify-start ">
<label className="text-gray-400 text-md mt-2 ">
Session Id
</label>
</div>
<input
required
Expand All @@ -132,8 +142,10 @@ export function TestDetails({
{...register("sessionId")}
disabled={type === "edit"}
/>
<div className="flex md:w-full md:justify-start m-1 ">
<label className="text-gray-400 text-md ">Session Link</label>
<div className="flex md:w-full md:justify-start ">
<label className="text-gray-400 text-md mt-2">
Session Link
</label>
</div>
<input
required
Expand All @@ -148,8 +160,8 @@ export function TestDetails({
) : (
<></>
)}
<div className="flex md:w-full md:justify-start m-1 ">
<label className="text-gray-400 text-md ">CMS TEST ID</label>
<div className="flex md:w-full md:justify-start ">
<label className="text-gray-400 text-md mt-2">CMS TEST ID</label>
</div>
<input
required
Expand Down
2 changes: 1 addition & 1 deletion src/components/Steps/Timeline.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -45,7 +45,7 @@ export default function Timeline({
>
<div>
<div className="flex sm:mb-5 sm:space-x-5 mb-3 space-x-1 flex-col sm:flex-row space-y-3 sm:space-y-0">
<label className="text-xs sm:text-sm">Start Date</label>
<label className="text-xs sm:text-sm ">Start Date</label>
<input
className="bg-gray-50 border border-gray-300 text-gray-900 sm:text-sm rounded sm:w-full sm:p-2.5 w-20"
placeholder="Start Date"
Expand Down
48 changes: 27 additions & 21 deletions src/components/displayTable/DataDisplay.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,39 +2,40 @@ import TableRow from "./Row";
import ReactPaginate from "react-paginate";
import { DbTypes } from "@/types/ResponseTypes";
import { useRouter } from "next/router";
import { useState } from "react";
import { useEffect, useState } from "react";

const DataDisplay = ({
data: initialData,
data,
hasMore,
currentPage,
currentPageNoIds,
}: {
data: DbTypes[];
hasMore: boolean;
currentPage: number;
currentPageNoIds: number;
}) => {
const [data, setData] = useState(initialData);
const router = useRouter();
const itemsPerPage = 5;
const [expandedRow, setExpandedRow] = useState<number | null>(null);

useEffect(() => {
setExpandedRow(null);
}, [currentPage]);

return (
<div className="inline-block min-w-full py-2 sm:px-6 lg:px-8">
<div className="overflow-x-auto">
<table className="min-w-full border text-center">
<thead className="">
<tr>
<th className="border p-2">S.No</th>
<th className="border p-2">Batch</th>
<th className="border p-2">Test Name</th>
<th className="border p-2">Start Date</th>
<th className="border p-2">End Date</th>
<th className="border p-2">Test Taker</th>
<th className="border p-2">Report Link</th>
<th className="border p-2">Portal Link</th>
<th className="border p-2">Admin Testing Link</th>
<th className="border p-2">Actions</th>
<table className="min-w-full text-center">
<thead>
<tr className="border-black border-2 p-2">
<th className="border-none p-2">S.No</th>
<th className="border-none p-2">Batch</th>
<th className="border-none p-2">Test Name</th>
<th className="border-none p-2">Start Date</th>
<th className="border-none p-2">End Date</th>
<th className="border-none p-2">Test Taker</th>
<th className="border-none p-2">Report Link</th>
<th className="border-none p-2">Portal Link</th>
<th className="border-none p-2">Admin Testing Link</th>
<th className="border-none p-2">Actions</th>
</tr>
</thead>
<tbody>
Expand All @@ -44,20 +45,25 @@ const DataDisplay = ({
index={i}
key={i}
currentPage={currentPage}
itemsPerPage={itemsPerPage}
itemsPerPage={10}
isExpanded={i === expandedRow}
toggleExpand={() =>
setExpandedRow(expandedRow === i ? null : i)
}
/>
))}
</tbody>
</table>
<ReactPaginate
initialPage={currentPage}
previousLabel={"Previous"}
nextLabel={"Next"}
breakClassName={"break-me px-2 py-1"}
marginPagesDisplayed={0}
pageRangeDisplayed={0}
pageCount={hasMore ? currentPage + 2 : currentPage + 1}
onPageChange={({ selected }) => {
router.push(`/?pageData=${selected}&pageNoIds=${currentPageNoIds}`);
router.push(`/?pageNo=${selected}`);
}}
containerClassName={
"pagination flex flex-wrap justify-between items-center my-4"
Expand Down
75 changes: 0 additions & 75 deletions src/components/displayTable/DataDisplayNoIds.tsx
View file

This file was deleted.

Loading

0 comments on commit 4a48579

Please sign in to comment.