generated from CodeChefVIT/template
-
Notifications
You must be signed in to change notification settings - Fork 2
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge pull request #14 from NishantGupt786/master
pr
- Loading branch information
Showing
5 changed files
with
374 additions
and
3 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
340 changes: 340 additions & 0 deletions
340
devsoc24-portal-fe/src/app/edit-project/edit-subject-form.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,340 @@ | ||
import { zodResolver } from "@hookform/resolvers/zod"; | ||
import { useForm, Controller } from "react-hook-form"; | ||
import { type z } from "zod"; | ||
import { | ||
Form, | ||
FormControl, | ||
FormField, | ||
FormItem, | ||
FormMessage, | ||
} from "@/components/ui/form"; | ||
import { Label } from "@/components/ui/label"; | ||
import { Input } from "@/components/ui/input"; | ||
import { Textarea } from "@/components/ui/textarea"; | ||
import { Button } from "@/components/ui/button"; | ||
import { ideaSchema } from "@/schemas/idea"; | ||
import { ToastContainer, toast } from "react-toastify"; | ||
import axios from "axios"; | ||
import { useRouter } from "next/navigation"; | ||
|
||
interface FormValues { | ||
title: string; | ||
track: string; | ||
description: string; | ||
figma_link?: string; | ||
github_link?: string; | ||
others: string; | ||
} | ||
|
||
interface SubmitProjectResponse { | ||
message: string; | ||
status: string; | ||
data: unknown; | ||
} | ||
|
||
interface GetIdea{ | ||
data: FormValues; | ||
message: string; | ||
status: string; | ||
} | ||
|
||
import send from "@/assets/images/Send.svg"; | ||
import Image from "next/image"; | ||
import { useEffect } from "react"; | ||
const tracks = ["Track 1", "Track 2", "Track 3"]; | ||
|
||
export default function EditProjectForm() { | ||
useEffect(() => { | ||
async function getIdeaSubmission() { | ||
try { | ||
const res = await axios.get<GetIdea>(`${process.env.NEXT_PUBLIC_API_URL}/project`, { | ||
withCredentials: true, | ||
}); | ||
console.log(res.data.data); | ||
form.reset(res.data.data); | ||
} catch (error) { | ||
console.log("Error getting idea submission:", error) | ||
} | ||
} | ||
void getIdeaSubmission(); | ||
}, []); | ||
|
||
const form = useForm<FormValues>({ | ||
resolver: zodResolver(ideaSchema), | ||
defaultValues: { | ||
title: "", | ||
track: "", | ||
description: "", | ||
figma_link: "", | ||
github_link: "", | ||
others: "", | ||
}, | ||
mode: "onChange", | ||
}); | ||
|
||
async function onSubmit(data: FormValues) { | ||
try { | ||
console.log(data); | ||
const toastId = toast.loading("Project Submitted", { autoClose: false }); | ||
const res = await axios.patch<SubmitProjectResponse>( | ||
`${process.env.NEXT_PUBLIC_API_URL}/project/update`, | ||
data, | ||
{ | ||
withCredentials: true, | ||
}, | ||
); | ||
|
||
if (res.data.status === "success") { | ||
toast.update(toastId, { | ||
render: ( | ||
<div className=""> | ||
<h2 className="font-semibold">Project Submitted</h2> | ||
</div> | ||
), | ||
type: "success", | ||
isLoading: false, | ||
autoClose: 2000, | ||
}); | ||
} else { | ||
toast.update(toastId, { | ||
render: ( | ||
<div className=""> | ||
<h2 className="font-semibold">Failed to submit project</h2> | ||
<p>Please try again.</p> | ||
</div> | ||
), | ||
type: "error", | ||
isLoading: false, | ||
autoClose: 2000, | ||
}); | ||
} | ||
} catch (error) { | ||
console.error("Error submitting idea:", error); | ||
toast.error("Failed to submit idea"); | ||
} | ||
} | ||
|
||
return ( | ||
<> | ||
<ToastContainer /> | ||
<Form {...form}> | ||
<form onSubmit={form.handleSubmit(onSubmit)}> | ||
<div className="flex justify-start gap-16 max-[931px]:flex-col max-[931px]:gap-6"> | ||
<div className="flex w-96 flex-col gap-6 max-[445px]:w-[87vw]"> | ||
<div> | ||
<FormField | ||
control={form.control} | ||
name="title" | ||
render={({ field }) => ( | ||
<FormItem> | ||
<FormControl> | ||
<div className="grid w-full max-w-sm items-center gap-4"> | ||
<Label | ||
htmlFor="project-name" | ||
className="text-[#0019FF]" | ||
> | ||
Project Name | ||
<span className="text-[#FF0000]">*</span> | ||
</Label> | ||
<Input | ||
type="text" | ||
id="project-name" | ||
{...field} | ||
placeholder="Shuttle tracker" | ||
className={`h-14 bg-white pl-5 ${ | ||
form.getFieldState("title").invalid | ||
? "border-red-500 focus:border-input focus:!ring-red-500" | ||
: "" | ||
}`} | ||
/> | ||
</div> | ||
</FormControl> | ||
<FormMessage /> | ||
</FormItem> | ||
)} | ||
></FormField> | ||
</div> | ||
<div> | ||
<FormField | ||
control={form.control} | ||
name="track" | ||
render={({}) => ( | ||
<Controller | ||
name="track" | ||
control={form.control} | ||
render={({ field }) => ( | ||
<FormItem> | ||
<FormControl> | ||
<div className="grid w-full max-w-sm items-center gap-4"> | ||
<Label | ||
htmlFor="project-track" | ||
className="text-[#0019FF] " | ||
> | ||
Project Track | ||
<span className="text-[#FF0000]">*</span> | ||
</Label> | ||
<select | ||
value={form.watch("track")} | ||
onChange={(e) => | ||
form.setValue("track", e.target.value) | ||
} | ||
className="rounded-md border border-gray-200 p-4 focus:border-transparent focus:outline-none focus:ring-2 focus:ring-blue-600" | ||
> | ||
<option value="">Select Project Track</option> | ||
{tracks.map((track) => ( | ||
<option key={track} value={track}> | ||
{track} | ||
</option> | ||
))} | ||
</select> | ||
</div> | ||
</FormControl> | ||
<FormMessage /> | ||
</FormItem> | ||
)} | ||
/> | ||
)} | ||
></FormField> | ||
</div> | ||
<div> | ||
<FormField | ||
control={form.control} | ||
name="description" | ||
render={({ field }) => ( | ||
<FormItem> | ||
<FormControl> | ||
<div className="grid w-full max-w-sm items-center gap-4"> | ||
<Label | ||
htmlFor="description" | ||
className="text-[#0019FF]" | ||
> | ||
Description of Project | ||
<span className="text-[#FF0000]">*</span> | ||
</Label> | ||
|
||
<Textarea | ||
id="description" | ||
{...field} | ||
placeholder="Don't forget to include your inspiration, learnings, project construction method, and difficulties you encountered in your writing. " | ||
className="col-span-12 mb-6 max-h-72 min-h-40 pl-5 text-black md:col-span-6 md:mb-0" | ||
/> | ||
</div> | ||
</FormControl> | ||
<FormMessage /> | ||
</FormItem> | ||
)} | ||
></FormField> | ||
|
||
<p className="pr-2 text-right">500 max words</p> | ||
</div> | ||
</div> | ||
<div className="flex w-96 flex-col gap-6 max-[445px]:w-[87vw]"> | ||
<div> | ||
<FormField | ||
control={form.control} | ||
name="figma_link" | ||
render={({ field }) => ( | ||
<FormItem> | ||
<FormControl> | ||
<div className="grid w-full max-w-sm items-center gap-4"> | ||
<Label htmlFor="figmaLink" className="text-[#0019FF]"> | ||
Figma Link | ||
</Label> | ||
<Input | ||
type="text" | ||
id="figmaLink" | ||
placeholder="Figma link" | ||
{...field} | ||
className={`h-14 bg-white pl-5 ${ | ||
form.getFieldState("figma_link").invalid | ||
? "border-red-500 focus:border-input focus:!ring-red-500" | ||
: "" | ||
}`} | ||
/> | ||
</div> | ||
</FormControl> | ||
<FormMessage /> | ||
</FormItem> | ||
)} | ||
></FormField> | ||
</div> | ||
<div> | ||
<FormField | ||
control={form.control} | ||
name="github_link" | ||
render={({ field }) => ( | ||
<FormItem> | ||
<FormControl> | ||
<div className="grid w-full max-w-sm items-center gap-4"> | ||
<Label | ||
htmlFor="githubLink" | ||
className="text-[#0019FF]" | ||
> | ||
GitHub Link | ||
</Label> | ||
<Input | ||
type="text" | ||
id="githubLink" | ||
{...field} | ||
placeholder="Github link" | ||
className={`h-14 bg-white pl-5 ${ | ||
form.getFieldState("github_link").invalid | ||
? "border-red-500 focus:border-input focus:!ring-red-500" | ||
: "" | ||
}`} | ||
/> | ||
</div> | ||
</FormControl> | ||
<FormMessage /> | ||
</FormItem> | ||
)} | ||
></FormField> | ||
</div> | ||
<div> | ||
<FormField | ||
control={form.control} | ||
name="others" | ||
render={({ field }) => ( | ||
<FormItem> | ||
<FormControl> | ||
<div className="grid w-full max-w-sm items-center gap-4"> | ||
<Label | ||
htmlFor="otherLinks" | ||
className="text-[#0019FF]" | ||
> | ||
Other Links | ||
</Label> | ||
|
||
<Textarea | ||
id="otherLinks" | ||
placeholder="Other links" | ||
{...field} | ||
className="col-span-12 mb-6 min-h-10 pl-5 text-black md:col-span-6 md:mb-0" | ||
/> | ||
</div> | ||
</FormControl> | ||
<FormMessage /> | ||
</FormItem> | ||
)} | ||
></FormField> | ||
|
||
<p> | ||
Canva PPTs, Videos, Drive or Supporting Material can be shared | ||
</p> | ||
</div> | ||
</div> | ||
</div> | ||
|
||
<Button | ||
className="my-5 bg-[#0019FF]" | ||
type="submit" | ||
// disabled={isSubmitting} | ||
> | ||
<Image src={send as HTMLImageElement} alt="b" /> | ||
<span className="pl-2">Submit Idea</span> | ||
</Button> | ||
</form> | ||
</Form> | ||
</> | ||
); | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,31 @@ | ||
"use client"; | ||
import Image from "next/image"; | ||
import Logo from "@/components/logo"; | ||
import Dashtitle from "@/assets/images/titleDashboard.svg"; | ||
import { ArrowLeft } from "lucide-react"; | ||
import Link from "next/link"; | ||
import EditProjectForm from "./edit-subject-form"; | ||
|
||
export default function Page() { | ||
return ( | ||
<> | ||
<main className="flex h-[200%] flex-col items-start overflow-x-hidden bg-[#F4F5FA] min-[931px]:h-[100vh] min-[931px]:min-h-screen"> | ||
<div className="flex h-[10%] w-full items-center gap-x-8 bg-background px-3 py-2"> | ||
<Logo className="h-9/10 w-auto" /> | ||
<Image src={Dashtitle as HTMLImageElement} alt="title" /> | ||
</div> | ||
<div className="flex h-[100vh] w-[4.7rem] items-start justify-center gap-x-8 bg-background px-6 py-2 pt-12 max-[445px]:w-[3.7rem]"> | ||
<Link href="/"> | ||
<ArrowLeft className="text-[#0019FF]" /> | ||
</Link> | ||
</div> | ||
<div className="absolute ml-[4.7rem] mt-[11vh] flex w-[91.9vw] flex-col bg-[#F4F5FA] pl-5 pt-5 max-[931px]:justify-center max-[445px]:ml-[3.7rem] "> | ||
<p className="mb-4 text-4xl font-medium text-black"> | ||
Project Updation For Devsoc24 | ||
</p> | ||
<EditProjectForm /> | ||
</div> | ||
</main> | ||
</> | ||
); | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters