mehedi
/
skilld-admin
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat: organization edit page

This commit is contained in:
mehedi-hasan 2024-05-03 20:08:09 +06:00
parent 1a384dce5f
commit 1c7f752f11
8 changed files with 118 additions and 31 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
src/app/(dashboard)/dashboard/organizations/add/page.tsx
View File

@ -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 AddOrganizationForm from "@/components/add-organization-form";
import OrganizationForm from "@/components/organization-form";
import Breadcrumb from "@/components/breadcrumb";
const breadcrumbItems = [
@ -25,7 +27,11 @@ export default function SettingsDisplayPage() {
</CardHeader>
<CardContent>
<AddOrganizationForm />
<OrganizationForm
onSubmit={() => {}}
btn1_content="Create"
btn2_content="Create and add another"
/>
</CardContent>
</Card>
</div>

46
src/app/(dashboard)/dashboard/organizations/edit/[id]/page.tsx Normal file
View File

@ -0,0 +1,46 @@
"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 OrganizationForm from "@/components/organization-form";
import Breadcrumb from "@/components/breadcrumb";
import { dummyOrganizations } from "@/constants/data";
import { Organization } from "@/types/organization";
const breadcrumbItems = [
{ title: "Dashboard", link: "/dashboard" },
{ title: "Organizations", link: "/dashboard/organizations" },
{ title: "Edit" },
];
export default function Page({ params }: { params: { id: string } }) {
const organization = dummyOrganizations.find((organization) => organization.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 Organization
</CardTitle>
<Separator />
</CardHeader>
<CardContent>
<OrganizationForm organization={organization as Organization}
onSubmit={() => {}}
btn1_content="Save and continue editing"
btn2_content="Save changes" />
</CardContent>
</Card>
</div>
</div>
<ScrollBar />
</ScrollArea>
);
}

19
src/app/(dashboard)/dashboard/users/add/page.tsx
View File

@ -1,13 +1,8 @@
import AddUserForm from "@/components/user-form";
"use client";
import UserForm from "@/components/user-form";
import Breadcrumb from "@/components/breadcrumb";
import { Button } from "@/components/ui/button";
import {
Card,
CardContent,
CardFooter,
CardHeader,
CardTitle,
} from "@/components/ui/card";
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
import { ScrollArea, ScrollBar } from "@/components/ui/scroll-area";
import { Separator } from "@/components/ui/separator";
@ -32,7 +27,11 @@ export default function SettingsDisplayPage() {
</CardHeader>
<CardContent>
<AddUserForm />
<UserForm
onSubmit={() => {}}
btn1_content="Create"
btn2_content="Create and add another"
/>
</CardContent>
</Card>
</div>

11
src/app/(dashboard)/dashboard/users/edit/[id]/page.tsx
View File

@ -1,3 +1,5 @@
"use client";
import UserForm from "@/components/user-form";
import Breadcrumb from "@/components/breadcrumb";
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
@ -13,11 +15,9 @@ const breadcrumbItems = [
];
export default function Page({ params }: { params: { id: string } }) {
console.log(params);
const user = dummyUsers.find((user) => user.id === +params.id);
console.log(user);
return (
<ScrollArea className="h-[calc(100vh-53px)]">
@ -33,7 +33,12 @@ export default function Page({ params }: { params: { id: string } }) {
</CardHeader>
<CardContent>
<UserForm user={user as User} />
<UserForm
user={user as User}
onSubmit={() => {}}
btn1_content="Save and continue editing"
btn2_content="Save changes"
/>
</CardContent>
</Card>
</div>

24
src/components/add-organization-form.tsx → src/components/organization-form.tsx
View File

@ -15,6 +15,7 @@ import {
} from "@/components/ui/form";
import { toast } from "@/components/ui/use-toast";
import { Input } from "./ui/input";
import { Organization } from "@/types/organization";
const displayFormSchema = z.object({
name: z.string().trim().min(1, "Name is required."),
@ -27,10 +28,23 @@ const defaultValues: Partial<DisplayFormValues> = {
name: "",
};
export default function AddOrganizationForm() {
type Props = {
organization?: Organization;
onSubmit: () => void;
btn1_content: string;
btn2_content: string;
};
export default function OrganizationForm({
organization,
onSubmit: onFormSubmit,
btn1_content,
btn2_content,
}: Props) {
const form = useForm<DisplayFormValues>({
resolver: zodResolver(displayFormSchema),
defaultValues,
defaultValues: {
name: organization?.name || "",
},
});
function onSubmit(data: DisplayFormValues) {
@ -42,6 +56,8 @@ export default function AddOrganizationForm() {
</pre>
),
});
onFormSubmit();
}
return (
@ -63,10 +79,10 @@ export default function AddOrganizationForm() {
<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>

13
src/components/organizations-table/cell-action.tsx
View File

@ -13,6 +13,7 @@ import { Organization } from "@/types/organization";
import { User } from "@/types/user";
import { BookCheck, Edit, MoreHorizontal, Trash } from "lucide-react";
import Link from "next/link";
import { useRouter } from "next/navigation";
import { useState } from "react";
@ -48,13 +49,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/organizations/edit/${data.id}`}
className="flex items-center gap-2 px-2 py-1.5 w-full"
>
<Edit className="mr-2 h-4 w-4" /> Update
<Edit className="h-4 w-4" /> Edit
</Link>
</DropdownMenuItem>
<DropdownMenuItem
className="cursor-pointer"

20
src/components/user-form.tsx
View File

@ -62,7 +62,19 @@ const displayFormSchema = z.object({
type DisplayFormValues = z.infer<typeof displayFormSchema>;
export default function UserForm({ user }: { user?: User }) {
type Props = {
user?: User;
onSubmit: () => void;
btn1_content: string;
btn2_content: string;
};
export default function UserForm({
user,
onSubmit: onFormSubmit,
btn1_content,
btn2_content,
}: Props) {
const form = useForm<DisplayFormValues>({
resolver: zodResolver(displayFormSchema),
defaultValues: {
@ -89,6 +101,8 @@ export default function UserForm({ user }: { user?: User }) {
</pre>
),
});
onFormSubmit();
}
return (
@ -209,10 +223,10 @@ export default function UserForm({ user }: { user?: User }) {
/>
<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>

4
src/components/users-table/cell-action.tsx
View File

@ -53,10 +53,10 @@ export const CellAction: React.FC<CellActionProps> = ({ data }) => {
<UserCheck className="mr-2 h-4 w-4" /> Approve User
</DropdownMenuItem>
<DropdownMenuItem className="cursor-pointer">
<DropdownMenuItem className="cursor-pointer p-0">
<Link
href={`/dashboard/users/edit/${data.id}`}
className="flex items-center gap-2"
className="flex items-center gap-2 px-2 py-1.5 w-full"
>
<Edit className="h-4 w-4" /> Edit
</Link>