feat: edit skill page
This commit is contained in:
parent
723ccc7919
commit
3c068397d6
|
@ -1,4 +1,4 @@
|
|||
"use client"
|
||||
"use client";
|
||||
|
||||
import AddAPICommunicationForm from "@/components/api-communication-form";
|
||||
import Breadcrumb from "@/components/breadcrumb";
|
||||
|
@ -12,7 +12,7 @@ const breadcrumbItems = [
|
|||
{ title: "Add" },
|
||||
];
|
||||
|
||||
export default function SettingsDisplayPage() {
|
||||
export default function Page() {
|
||||
return (
|
||||
<ScrollArea className="h-[calc(100vh-53px)]">
|
||||
<div className="flex-1 space-y-4 p-4 md:p-8 pt-6">
|
||||
|
@ -27,9 +27,11 @@ export default function SettingsDisplayPage() {
|
|||
</CardHeader>
|
||||
|
||||
<CardContent>
|
||||
<AddAPICommunicationForm onSubmit={() => {}}
|
||||
<AddAPICommunicationForm
|
||||
onSubmit={() => {}}
|
||||
btn1_content="Create"
|
||||
btn2_content="Create and add another" />
|
||||
btn2_content="Create and add another"
|
||||
/>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
|
|
|
@ -10,7 +10,7 @@ const breadcrumbItems = [
|
|||
{ title: "Create Commit" },
|
||||
];
|
||||
|
||||
export default function SettingsDisplayPage() {
|
||||
export default function Page() {
|
||||
return (
|
||||
<ScrollArea className="h-[calc(100vh-53px)]">
|
||||
<div className="flex-1 space-y-4 p-4 md:p-8 pt-6">
|
||||
|
|
|
@ -5,7 +5,7 @@ import { ScrollArea, ScrollBar } from "@/components/ui/scroll-area";
|
|||
import { Separator } from "@/components/ui/separator";
|
||||
import AddCriteriaForm from "@/components/criteria-form";
|
||||
|
||||
export default function SettingsDisplayPage() {
|
||||
export default function Page() {
|
||||
return (
|
||||
<ScrollArea className="h-[calc(100vh-53px)]">
|
||||
<div className="flex-1 space-y-4 p-4 md:p-8 pt-6 w-full h-full flex justify-center items-center">
|
||||
|
|
|
@ -10,7 +10,7 @@ const breadcrumbItems = [
|
|||
{ title: "Add" },
|
||||
];
|
||||
|
||||
export default function SettingsDisplayPage() {
|
||||
export default function Page() {
|
||||
return (
|
||||
<ScrollArea className="h-[calc(100vh-53px)]">
|
||||
<div className="flex-1 space-y-4 p-4 md:p-8 pt-6">
|
||||
|
|
|
@ -1,4 +1,4 @@
|
|||
"use client"
|
||||
"use client";
|
||||
|
||||
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
|
||||
import { ScrollArea, ScrollBar } from "@/components/ui/scroll-area";
|
||||
|
@ -12,7 +12,7 @@ const breadcrumbItems = [
|
|||
{ title: "Add" },
|
||||
];
|
||||
|
||||
export default function SettingsDisplayPage() {
|
||||
export default function Page() {
|
||||
return (
|
||||
<ScrollArea className="h-[calc(100vh-53px)]">
|
||||
<div className="flex-1 space-y-4 p-4 md:p-8 pt-6">
|
||||
|
|
|
@ -1,7 +1,9 @@
|
|||
"use client";
|
||||
|
||||
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
|
||||
import { ScrollArea, ScrollBar } from "@/components/ui/scroll-area";
|
||||
import { Separator } from "@/components/ui/separator";
|
||||
import AddSkillForm from "@/components/add-skill-form";
|
||||
import SkillForm from "@/components/skill-form";
|
||||
import Breadcrumb from "@/components/breadcrumb";
|
||||
|
||||
const breadcrumbItems = [
|
||||
|
@ -10,7 +12,7 @@ const breadcrumbItems = [
|
|||
{ title: "Add" },
|
||||
];
|
||||
|
||||
export default function SettingsDisplayPage() {
|
||||
export default function Page() {
|
||||
return (
|
||||
<ScrollArea className="h-[calc(100vh-53px)]">
|
||||
<div className="flex-1 space-y-4 p-4 md:p-8 pt-6">
|
||||
|
@ -25,7 +27,11 @@ export default function SettingsDisplayPage() {
|
|||
</CardHeader>
|
||||
|
||||
<CardContent>
|
||||
<AddSkillForm />
|
||||
<SkillForm
|
||||
onSubmit={() => {}}
|
||||
btn1_content="Create"
|
||||
btn2_content="Create and add another"
|
||||
/>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
|
|
|
@ -0,0 +1,47 @@
|
|||
"use client";
|
||||
|
||||
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
|
||||
import { ScrollArea, ScrollBar } from "@/components/ui/scroll-area";
|
||||
import { Separator } from "@/components/ui/separator";
|
||||
import SkillForm from "@/components/skill-form";
|
||||
import Breadcrumb from "@/components/breadcrumb";
|
||||
import { dummySkills } from "@/constants/data";
|
||||
import { Skill } from "@/types/skill";
|
||||
|
||||
const breadcrumbItems = [
|
||||
{ title: "Dashboard", link: "/dashboard" },
|
||||
{ title: "Skills", link: "/dashboard/skills" },
|
||||
{ title: "Edit" },
|
||||
];
|
||||
|
||||
export default function Page({ params }: { params: { id: string } }) {
|
||||
const skill = dummySkills.find((skill) => skill.id === +params.id);
|
||||
|
||||
return (
|
||||
<ScrollArea className="h-[calc(100vh-53px)]">
|
||||
<div className="flex-1 space-y-4 p-4 md:p-8 pt-6">
|
||||
<Breadcrumb items={breadcrumbItems} />
|
||||
<div className="w-full h-full flex justify-center items-center">
|
||||
<Card className="max-w-[700px] w-full">
|
||||
<CardHeader>
|
||||
<CardTitle className="mb-4 font-bold text-xl">
|
||||
Edit Skill
|
||||
</CardTitle>
|
||||
<Separator />
|
||||
</CardHeader>
|
||||
|
||||
<CardContent>
|
||||
<SkillForm
|
||||
skill={skill as Skill}
|
||||
onSubmit={() => {}}
|
||||
btn1_content="Save and continue editing"
|
||||
btn2_content="Save changes"
|
||||
/>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
<ScrollBar />
|
||||
</div>
|
||||
</ScrollArea>
|
||||
);
|
||||
}
|
|
@ -12,7 +12,7 @@ const breadcrumbItems = [
|
|||
{ title: "Add" },
|
||||
];
|
||||
|
||||
export default function SettingsDisplayPage() {
|
||||
export default function Page() {
|
||||
return (
|
||||
<ScrollArea className="h-[calc(100vh-53px)]">
|
||||
<div className="flex-1 space-y-4 p-4 md:p-8 pt-6">
|
||||
|
|
|
@ -15,6 +15,7 @@ import {
|
|||
} from "@/components/ui/form";
|
||||
import { toast } from "@/components/ui/use-toast";
|
||||
import { Input } from "./ui/input";
|
||||
import { Skill } from "@/types/skill";
|
||||
|
||||
const displayFormSchema = z.object({
|
||||
name: z.string().trim().min(1, "Name is required."),
|
||||
|
@ -22,15 +23,28 @@ const displayFormSchema = z.object({
|
|||
|
||||
type DisplayFormValues = z.infer<typeof displayFormSchema>;
|
||||
|
||||
// This can come from your database or API.
|
||||
const defaultValues: Partial<DisplayFormValues> = {
|
||||
name: "",
|
||||
// const defaultValues: Partial<DisplayFormValues> = {
|
||||
// name: "",
|
||||
// };
|
||||
|
||||
type Props = {
|
||||
skill?: Skill;
|
||||
onSubmit: () => void;
|
||||
btn1_content: string;
|
||||
btn2_content: string;
|
||||
};
|
||||
|
||||
export default function AddSkillForm() {
|
||||
export default function SkillForm({
|
||||
skill,
|
||||
onSubmit: onFormSubmit,
|
||||
btn1_content,
|
||||
btn2_content,
|
||||
}: Props) {
|
||||
const form = useForm<DisplayFormValues>({
|
||||
resolver: zodResolver(displayFormSchema),
|
||||
defaultValues,
|
||||
defaultValues: {
|
||||
name: skill?.name || "",
|
||||
},
|
||||
});
|
||||
|
||||
function onSubmit(data: DisplayFormValues) {
|
||||
|
@ -63,10 +77,10 @@ export default function AddSkillForm() {
|
|||
|
||||
<div className="flex items-center gap-4 flex-col sm:flex-row">
|
||||
<Button className="w-full" size="lg">
|
||||
Create
|
||||
{btn1_content}
|
||||
</Button>
|
||||
<Button variant="secondary" className="w-full" size="lg">
|
||||
Create and add another
|
||||
{btn2_content}
|
||||
</Button>
|
||||
</div>
|
||||
</form>
|
|
@ -14,6 +14,7 @@ import { EvaluationStart } from "@/types/evaluation-start";
|
|||
import { Skill } from "@/types/skill";
|
||||
|
||||
import { Edit, GitCommit, MoreHorizontal, Trash } from "lucide-react";
|
||||
import Link from "next/link";
|
||||
import { useRouter } from "next/navigation";
|
||||
import { useState } from "react";
|
||||
|
||||
|
@ -49,13 +50,13 @@ export const CellAction: React.FC<CellActionProps> = ({ data }) => {
|
|||
<DropdownMenuContent align="end">
|
||||
<DropdownMenuLabel>Actions</DropdownMenuLabel>
|
||||
|
||||
<DropdownMenuItem
|
||||
className="cursor-pointer"
|
||||
// onClick={() =>
|
||||
// router.push(`#`)
|
||||
// }
|
||||
<DropdownMenuItem className="cursor-pointer p-0">
|
||||
<Link
|
||||
href={`/dashboard/skills/edit/${data.id}`}
|
||||
className="flex items-center gap-2 px-2 py-1.5 w-full"
|
||||
>
|
||||
<Edit className="mr-2 h-4 w-4" /> Edit
|
||||
<Edit className="h-4 w-4" /> Edit
|
||||
</Link>
|
||||
</DropdownMenuItem>
|
||||
<DropdownMenuItem
|
||||
className="cursor-pointer"
|
||||
|
|
Loading…
Reference in New Issue