Skip to content

Commit

Permalink
[UPDATE] - Improved tutoring form"
Browse files Browse the repository at this point in the history
  • Loading branch information
nulzo committed Dec 2, 2023
1 parent 54b996c commit 56520f9
Show file tree
Hide file tree
Showing 4 changed files with 205 additions and 24 deletions.
76 changes: 76 additions & 0 deletions frontend/src/components/fields/DropField.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,76 @@
import { cva } from "class-variance-authority";

Check failure on line 1 in frontend/src/components/fields/DropField.tsx

View workflow job for this annotation

GitHub Actions / run-npm

'cva' is defined but never used
import { FormControl, FormField, FormItem, FormMessage } from "../ui/form";
import {
Select,
SelectValue,
SelectContent,
SelectItem,
SelectTrigger,
} from "../ui/select";
import { ChevronsUpIcon, EqualIcon, MinusIcon } from "lucide-react";

export default function DropField({ control, name, items, variant }: any) {
if(variant === 'difficulty'){

Check failure on line 13 in frontend/src/components/fields/DropField.tsx

View workflow job for this annotation

GitHub Actions / run-npm

Strings must use doublequote
return (
<FormField
control={control}
name={name}
key={name}
render={({ field }: any) => (
<FormItem className="mt-1">
<Select onValueChange={field.onChange} defaultValue={field.value}>
<FormControl>
<SelectTrigger>
<SelectValue className="text-xs" placeholder={field.value} />
</SelectTrigger>
</FormControl>
<SelectContent>
{items.map((item: any) => (
<SelectItem key={item.value} value={item.value} className="flex">
<div className="flex text-xs">
<div className=" flex items-center align-middle content-center mr-2">
{item.text === 'Easy' && <MinusIcon className="text-success" size={12}/>}

Check failure on line 32 in frontend/src/components/fields/DropField.tsx

View workflow job for this annotation

GitHub Actions / run-npm

Strings must use doublequote
{item.text === 'Medium' && <EqualIcon className="text-alert" size={12}/>}

Check failure on line 33 in frontend/src/components/fields/DropField.tsx

View workflow job for this annotation

GitHub Actions / run-npm

Strings must use doublequote
{item.text === 'Hard' && <ChevronsUpIcon className="text-warning" size={12}/>}

Check failure on line 34 in frontend/src/components/fields/DropField.tsx

View workflow job for this annotation

GitHub Actions / run-npm

Strings must use doublequote
</div>
<div className="text-xs">
{item.text}
</div>
</div>
</SelectItem>
))}
</SelectContent>
</Select>
<FormMessage className="text-red-100" />
</FormItem>
)}
/>
);
}
return (
<FormField
control={control}
name={name}
key={name}
render={({ field }: any) => (
<FormItem>
<Select onValueChange={field.onChange} defaultValue={field.value}>
<FormControl>
<SelectTrigger className="">
<SelectValue placeholder={field.value} />
</SelectTrigger>
</FormControl>
<SelectContent>
{items.map((item: any) => (
<SelectItem key={item.value} value={item.value}>
{item.text}
</SelectItem>
))}
</SelectContent>
</Select>
<FormMessage className="text-warning" />
</FormItem>
)}
/>
);
}
90 changes: 90 additions & 0 deletions frontend/src/components/fields/SearchFilterField.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,90 @@
import { CaretSortIcon } from "@radix-ui/react-icons";
import { Button } from "../ui/button";
import { FormControl, FormField, FormItem, FormMessage } from "../ui/form";
import { Popover, PopoverContent, PopoverTrigger } from "../ui/popover";
import { Command, CommandGroup, CommandInput, CommandItem } from "../ui/command";
import { CommandEmpty } from "cmdk";
import { ScrollArea } from "../ui/scroll-area";
import { CheckIcon } from "lucide-react";
import { cn } from "@/lib/utils";

export default function SearchFilterField({ control, name, key, items, form }: any){
return(
<FormField
control={control}
name={name}
key={key}
render={({ field }: any) => (
<FormItem className="flex flex-col mt-1" key="issue_form_item">
<Popover>
<PopoverTrigger asChild>
<FormControl>
<Button
variant="dropdown"
role="combobox"
key="issue_button"
className={cn(
"m-0 p-2 text-xs",
!field.value &&
"text-muted-foreground font-normal",
)}
>
{field.value
? items?.data.find(
(tutor: any) =>
tutor.name === field.value,
)?.name
: "select an issue"}
<CaretSortIcon
key="issue_sort_icon"
className="h-3 w-3 shrink-0"
/>
</Button>
</FormControl>
</PopoverTrigger>
<PopoverContent
key="issue_content"
className="h-full p-0"
>
<Command>
<CommandInput
placeholder="search..."
className="h-8 my-1"
key="issue_input"
/>
<CommandEmpty>nothing found...</CommandEmpty>
<CommandGroup key="issue_command_group">
<ScrollArea className="h-fit rounded-md border">
{items?.data.map((tutor: any) => (
<CommandItem
value={tutor.name}
key={`${tutor.name}${tutor.MSOID}`}
onSelect={() => {
{
form.setValue("tutor", tutor.name);
}
}}
>
{tutor.name}
<CheckIcon
key={`issue-${tutor.name}-check-icon`}
className={cn(
"ml-auto h-3 w-3",
tutor.name === field.value
? "opacity-100"
: "opacity-0",
)}
/>
</CommandItem>
))}
</ScrollArea>
</CommandGroup>
</Command>
</PopoverContent>
</Popover>
<FormMessage className="text-warning" />
</FormItem>
)}
/>
)

Check failure on line 89 in frontend/src/components/fields/SearchFilterField.tsx

View workflow job for this annotation

GitHub Actions / run-npm

Missing semicolon
}
1 change: 0 additions & 1 deletion frontend/src/components/tables/TicketTable.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -123,7 +123,6 @@ export default function TicketTable({ tickets }: any) {
rowSelection,
},
});
console.log(tickets);
if (tickets) {
return (
<div className="w-full px-4 pb-4">
Expand Down
62 changes: 39 additions & 23 deletions frontend/src/forms/TutorTicketForm.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -7,13 +7,13 @@ import {
AlertDialogTrigger,
} from "@/components/ui/alert-dialog";
import { Separator } from "@/components/ui/separator";
import { Switch } from "@/components/ui/switch";
import {
DropdownMenuTrigger,
DropdownMenuContent,
DropdownMenu,
DropdownMenuItem,
DropdownMenuLabel,
DropdownMenuCheckboxItem,
} from "../components/ui/dropdown-menu";
import { CopyIcon, FlagIcon } from "lucide-react";
import { DotsHorizontalIcon } from "@radix-ui/react-icons";
Expand All @@ -24,15 +24,11 @@ import { z } from "zod";
import { zodResolver } from "@hookform/resolvers/zod";
import { Form } from "@/components/ui/form";
import { ScrollArea } from "@/components/ui/scroll-area";
// import LoadingSelect from "@/components/loading/loading_select";
// import { useMutation } from "@tanstack/react-query";
// import { useToast } from "@/components/ui/use-toast";
// import { createTicket } from "@/API/tickets/ticketRequests";
// import { useNavigate } from "react-router-dom";
// import useFetchTutor from "@/API/tutors/useFetchTutor";
import TextareaField from "../components/fields/TextareaField";
import DropdownField from "../components/fields/DropdownField";
import useFetchTutor from "@/API/tutors/useFetchTutor";
import SearchFilterField from "@/components/fields/SearchFilterField";
import DropField from "@/components/fields/DropField";

function DetailLink({ label, content }: any) {
return (
Expand All @@ -46,7 +42,8 @@ function DetailLink({ label, content }: any) {
const FormSchema = z.object({
description: z.string().min(4).max(500),
status: z.string().min(1).max(10),
tutor: z.string().min(2).max(50)
tutor: z.string(),
was_successful: z.boolean()
});

function onSubmit(data: z.infer<typeof FormSchema>) {
Expand All @@ -62,7 +59,8 @@ export default function TutorTicketForm({ ticket }: any) {
defaultValues: {
description: ticket.description,
status: ticket.status,
tutor: "Tutor"
tutor: "",
was_successful: ticket.was_successful
},
});

Expand Down Expand Up @@ -150,14 +148,16 @@ export default function TutorTicketForm({ ticket }: any) {
</Button>
</DropdownMenuTrigger>
<DropdownMenuContent align="end">
<DropdownMenuLabel>Actions</DropdownMenuLabel>
<DropdownMenuItem
onClick={() =>
navigator.clipboard.writeText(ticket.id)
<DropdownMenuCheckboxItem
key={form.id}
className="capitalize"
checked={form.getValues('was_successful')}
onCheckedChange={(e) =>
{form.setValue('was_successful', !form.getValues('was_successful'))}
}
>
...
</DropdownMenuItem>
Successful
</DropdownMenuCheckboxItem>
</DropdownMenuContent>
</DropdownMenu>
</div>
Expand Down Expand Up @@ -226,23 +226,39 @@ export default function TutorTicketForm({ ticket }: any) {
</div>
<Separator />
<DetailLink label="Primary Tutor" content={
<DropdownField
<SearchFilterField
control={form.control}
name={"tutor"}
value={ticket.tutor}
items={tutors?.data?.map((tutor: any) => ({value: tutor.name, text: tutor.name}))}
form={form}
key={form.id}
items={tutors}
/>} />
<DetailLink
label="Assistant Tutor"
content={ticket.course}
content={
<SearchFilterField
control={form.control}
name={"tutor"}
value={ticket.tutor}
form={form}
key={form.id}
items={tutors}
/>}
/>
<DetailLink
label="Difficulty"
content={ticket.course}
/>
<DetailLink
label="Outcome"
content={<Switch className="mt-1" />}
content={<DropField
variant="difficulty"
control={form.control}
name={"status"}
value={ticket.status}
items={[
{ value: "EASY", text: "Easy" },
{ value: "MEDIUM", text: "Medium" },
{ value: "HARD", text: "Hard" },
]}
/>}
/>
</div>
</div>
Expand Down

0 comments on commit 56520f9

Please sign in to comment.