Skip to content

Commit

Permalink
fixed registration & client side: add tutorials
Browse files Browse the repository at this point in the history
  • Loading branch information
@dheidemann
dheidemann committed Nov 23, 2024
1 parent c235e21 commit 8c35316
Show file tree
Hide file tree
Showing 10 changed files with 478 additions and 461 deletions.
5 changes: 3 additions & 2 deletions frontend/app/(registration)/register/layout.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,9 +7,10 @@ interface RegistrationLayoutProps {

export default function RegistrationLayout({ children }: RegistrationLayoutProps) {
return (
<div className="flex min-h-screen flex-col">
<div className="h-screen flex flex-col justify-between">
<Header />
<main className="flex-1 space-y-4 pl-6 pr-6">{children}</main>
<div />
<main className="flex justify-center">{children}</main>
<Footer />
</div>
);
Expand Down
303 changes: 156 additions & 147 deletions frontend/app/(registration)/register/page.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
"use client";

import { useRouter } from "next/navigation";
import { useRouter, useSearchParams } from "next/navigation";
import {
AddStudentApplicationForEventDocument,
AddStudentApplicationForEventMutation,
Expand Down Expand Up @@ -38,12 +38,10 @@ import {
FormMessage,
} from "@/components/ui/form";
import { toast } from "sonner";

type Props = {
searchParams: {
e: string;
};
};
import { CardSkeleton } from "@/components/card-skeleton";
import {Dialog} from "@/components/ui/dialog";
import {useUmbrella, useUser} from "@/components/providers";
import {SignInDialog} from "@/components/sign-in-dialog";

const SingleChoiceFormSchema = (required: boolean) =>
z.object({
Expand All @@ -63,15 +61,20 @@ const MultipleChoiceFormSchema = (required: boolean) =>
: z.array(z.number()).optional(),
});

const Home = ({ searchParams }: Props) => {
export default function Registration() {
const searchParams = useSearchParams()
const router = useRouter();

const { user } = useUser();
const { setUmbrellaID } = useUmbrella()

const [regForm, setForm] = useState<RegistrationFormQuery["forms"][0] | null>(
null
);
const [progressValue, setProgressValue] = useState(0);
const [sliderValue, setSliderValue] = useState<number>(0);
const [index, setIndex] = useState(0);
const [loading, setLoading] = useState(true);
const router = useRouter();
const [responses, setResponses] = useState<NewQuestionResponsePair[]>([]);

useEffect(() => {
Expand All @@ -80,11 +83,12 @@ const Home = ({ searchParams }: Props) => {
}
}, [responses]);

const eventID = searchParams.e;
const eventID = parseInt(searchParams.get("e") ?? "0")
useEffect(() => {
setUmbrellaID(eventID)
const fetchData = async () => {
const vars: RegistrationFormQueryVariables = {
eventID: parseInt(eventID),
eventID: eventID
};

const data = await client.request<RegistrationFormQuery>(
Expand Down Expand Up @@ -139,8 +143,7 @@ const Home = ({ searchParams }: Props) => {
}

const application: NewUserToEventApplication = {
// TODO
userMail: "[email protected]",
userMail: user?.mail ?? "",
eventID: +eventID,
answers: responses,
};
Expand All @@ -158,7 +161,7 @@ const Home = ({ searchParams }: Props) => {
handleQuit();
} catch (err) {
toast("Ein Fehler ist aufgetreten");
console.error(err)
console.error(err);
}
};

Expand Down Expand Up @@ -203,154 +206,160 @@ const Home = ({ searchParams }: Props) => {
</div>
);

if (loading) {
return <div>Loading...</div>;
}

return (
<div className="grid h-screen place-items-center">
<div className="space-y-5">
<div>
<h1>{regForm?.title}</h1>
<p className="text-sm text-muted-foreground">
{regForm?.description}
</p>
</div>
<Progress value={progressValue} />
<Card className="w-[500px]">
<CardHeader>
<CardTitle>{regForm?.questions[index].title}</CardTitle>
</CardHeader>
{regForm?.questions[index].type === QuestionType.MultipleChoice && (
<Form {...mcForm}>
<form onSubmit={mcForm.handleSubmit(onMCSubmit)}>
<CardContent>
<div className="mt-8 mb-8">
<FormField
control={mcForm.control}
name="multipleChoice"
render={() => (
<FormItem>
{regForm?.questions[index].answers.map((answer) => (
<FormField
key={answer.ID}
control={mcForm.control}
name="multipleChoice"
render={({ field }) => (
<FormItem>
<>
<Dialog open={user ? false : true}>
<SignInDialog />
</Dialog>
{loading ? (
<CardSkeleton />
) : (
<div className="space-y-5">
<div>
<h1>{regForm?.title}</h1>
<p className="text-sm text-muted-foreground">
{regForm?.description}
</p>
</div>
<Progress value={progressValue} />
<Card className="w-[500px]">
<CardHeader>
<CardTitle>{regForm?.questions[index].title}</CardTitle>
</CardHeader>
{regForm?.questions[index].type === QuestionType.MultipleChoice && (
<Form {...mcForm}>
<form onSubmit={mcForm.handleSubmit(onMCSubmit)}>
<CardContent>
<div className="mt-8 mb-8">
<FormField
control={mcForm.control}
name="multipleChoice"
render={() => (
<FormItem>
{regForm?.questions[index].answers.map((answer) => (
<FormField
key={answer.ID}
control={mcForm.control}
name="multipleChoice"
render={({ field }) => (
<FormItem>
<div
key={answer.ID}
className="flex items-center space-x-2"
>
<FormControl>
<Checkbox
checked={field.value?.includes(
answer.ID
)}
onCheckedChange={(checked) => {
return checked
? field.onChange([
...(field.value || []),
answer.ID,
])
: field.onChange(
field.value?.filter(
(value) =>
value !== answer.ID
)
);
}}
/>
</FormControl>
<Label>{answer.title}</Label>
</div>
</FormItem>
)}
/>
))}
<FormMessage />
</FormItem>
)}
/>
</div>
</CardContent>
<CardFooter>
<FooterButtons />
</CardFooter>
</form>
</Form>
)}

{regForm?.questions[index].type === QuestionType.SingleChoice && (
<Form {...scForm}>
<form onSubmit={scForm.handleSubmit(onSCSubmit)}>
<CardContent>
<div className="mt-8 mb-8">
<FormField
control={scForm.control}
name="singleChoice"
render={({ field }) => (
<FormItem>
<RadioGroup
value={field.value?.toString()}
onValueChange={(value) =>
field.onChange(parseInt(value, 10))
}
>
{regForm.questions[index].answers.map(
(answer) => (
<div
key={answer.ID}
className="flex items-center space-x-2"
>
<FormControl>
<Checkbox
checked={field.value?.includes(
answer.ID
)}
onCheckedChange={(checked) => {
return checked
? field.onChange([
...(field.value || []),
answer.ID,
])
: field.onChange(
field.value?.filter(
(value) => value !== answer.ID
)
);
}}
/>
</FormControl>
<Label>{answer.title}</Label>
<RadioGroupItem
value={answer.ID.toString()}
/>
<label className="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70">
{answer.title}
</label>
</div>
</FormItem>
)
)}
/>
))}
<FormMessage />
</FormItem>
)}
/>
</div>
</CardContent>
<CardFooter>
<FooterButtons />
</CardFooter>
</form>
</Form>
)}
</RadioGroup>
<FormMessage />
</FormItem>
)}
/>
</div>
</CardContent>
<CardFooter>
<FooterButtons />
</CardFooter>
</form>
</Form>
)}

{regForm?.questions[index].type === QuestionType.SingleChoice && (
<Form {...scForm}>
<form onSubmit={scForm.handleSubmit(onSCSubmit)}>
{regForm?.questions[index].type === QuestionType.Scale && (
<form onSubmit={onScaleSubmit}>
<CardContent>
<div className="mt-8 mb-8">
<FormField
control={scForm.control}
name="singleChoice"
render={({ field }) => (
<FormItem>
<RadioGroup
value={field.value?.toString()}
onValueChange={(value) =>
field.onChange(parseInt(value, 10))
}
>
{regForm.questions[index].answers.map((answer) => (
<div
key={answer.ID}
className="flex items-center space-x-2"
>
<RadioGroupItem value={answer.ID.toString()} />
<label className="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70">
{answer.title}
</label>
</div>
))}
</RadioGroup>
<FormMessage />
</FormItem>
)}
<div className="mt-8 mb-8 space-y-4">
<div className="flex justify-between">
<span className="text-sm font-medium">
{regForm.questions[index].answers[1].title}
</span>
<span className="text-sm font-medium">
{regForm.questions[index].answers[0].title}
</span>
</div>
<Slider
value={[sliderValue]}
onValueChange={(value) => setSliderValue(value[0])}
min={regForm.questions[index].answers[1].points}
max={regForm.questions[index].answers[0].points}
step={1}
/>
</div>
</CardContent>
<CardFooter>
<FooterButtons />
</CardFooter>
</form>
</Form>
)}

{regForm?.questions[index].type === QuestionType.Scale && (
<form onSubmit={onScaleSubmit}>
<CardContent>
<div className="mt-8 mb-8 space-y-4">
<div className="flex justify-between">
<span className="text-sm font-medium">
{regForm.questions[index].answers[1].title}
</span>
<span className="text-sm font-medium">
{regForm.questions[index].answers[0].title}
</span>
</div>
<Slider
value={[sliderValue]}
onValueChange={(value) => setSliderValue(value[0])}
min={regForm.questions[index].answers[1].points}
max={regForm.questions[index].answers[0].points}
step={1}
/>
</div>
</CardContent>
<CardFooter>
<FooterButtons />
</CardFooter>
</form>
)}
</Card>
</div>
</div>
)}
</Card>
</div>
)}
</>
);
};

export default Home;
2 changes: 2 additions & 0 deletions frontend/components/event-dialog/event-dialog.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -243,7 +243,9 @@ export default function EventDialog() {
}
capacities={event?.tutorsAssigned?.map(t => t.room.capacity ?? 1) || []}
edit={edit}
newAssignments={newAssignments}
setNewAssignments={setNewAssignments}
deleteAssignments={deleteAssignments}
setDeleteAssignments={setDeleteAssignments}
/>
</div>
Expand Down
Loading

0 comments on commit 8c35316

Please sign in to comment.