feat: added add organization form

This commit is contained in:
mehedi-hasan 2024-04-20 01:49:39 +06:00
parent cda17be557
commit 0a797a7fab
5 changed files with 117 additions and 17 deletions

View File

@ -0,0 +1,26 @@
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";
export default function SettingsDisplayPage() {
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">
<Card className="max-w-[700px] w-full">
<CardHeader>
<CardTitle className="mb-4 font-bold text-xl">
Create Organization
</CardTitle>
<Separator />
</CardHeader>
<CardContent>
<AddOrganizationForm />
</CardContent>
</Card>
</div>
<ScrollBar />
</ScrollArea>
);
}

View File

@ -1,3 +1,4 @@
import AddUserForm from "@/components/add-user-form";
import { Button } from "@/components/ui/button"; import { Button } from "@/components/ui/button";
import { import {
Card, Card,
@ -8,7 +9,6 @@ import {
} from "@/components/ui/card"; } from "@/components/ui/card";
import { ScrollArea, ScrollBar } from "@/components/ui/scroll-area"; import { ScrollArea, ScrollBar } from "@/components/ui/scroll-area";
import { Separator } from "@/components/ui/separator"; import { Separator } from "@/components/ui/separator";
import UsersAddForm from "@/components/users-add-form";
export default function SettingsDisplayPage() { export default function SettingsDisplayPage() {
return ( return (
@ -23,13 +23,8 @@ export default function SettingsDisplayPage() {
</CardHeader> </CardHeader>
<CardContent> <CardContent>
<UsersAddForm /> <AddUserForm />
</CardContent> </CardContent>
{/* <CardFooter>
<Button className="w-full" size="lg">
Submit
</Button>
</CardFooter> */}
</Card> </Card>
</div> </div>
<ScrollBar /> <ScrollBar />

View File

@ -0,0 +1,79 @@
"use client";
import { zodResolver } from "@hookform/resolvers/zod";
import { useForm } from "react-hook-form";
import { z } from "zod";
import { Button } from "@/components/ui/button";
import {
Form,
FormControl,
FormField,
FormItem,
FormLabel,
FormMessage,
} from "@/components/ui/form";
import { toast } from "@/components/ui/use-toast";
import { Input } from "./ui/input";
const displayFormSchema = z.object({
name: z.string().trim().min(1, "Name is required."),
});
type DisplayFormValues = z.infer<typeof displayFormSchema>;
// This can come from your database or API.
const defaultValues: Partial<DisplayFormValues> = {
name: "",
};
export default function AddOrganizationForm() {
const form = useForm<DisplayFormValues>({
resolver: zodResolver(displayFormSchema),
defaultValues,
});
function onSubmit(data: DisplayFormValues) {
toast({
title: "You submitted the following values:",
description: (
<pre className="mt-2 w-[340px] rounded-md bg-slate-950 p-4">
<code className="text-white">{JSON.stringify(data, null, 2)}</code>
</pre>
),
});
}
return (
<Form {...form}>
<form onSubmit={form.handleSubmit(onSubmit)} className="space-y-8">
<FormField
control={form.control}
name="name"
render={({ field }) => (
<FormItem>
<FormLabel>Name</FormLabel>
<FormControl>
<Input placeholder="Enter Name..." {...field} />
</FormControl>
{/* <FormDescription>
This is your public display name. It can be your real name or a
pseudonym. You can only change this once every 30 days.
</FormDescription> */}
<FormMessage />
</FormItem>
)}
/>
<div className="flex items-center gap-4">
<Button className="w-full" size="lg">
Create
</Button>
<Button variant="secondary" className="w-full" size="lg">
Create and add another
</Button>
</div>
</form>
</Form>
);
}

View File

@ -18,7 +18,7 @@ import {
import { toast } from "@/components/ui/use-toast"; import { toast } from "@/components/ui/use-toast";
import { Input } from "./ui/input"; import { Input } from "./ui/input";
const items = [ const roles = [
{ {
id: "ROLE_SUPER_ADMIN", id: "ROLE_SUPER_ADMIN",
label: "ROLE_SUPER_ADMIN", label: "ROLE_SUPER_ADMIN",
@ -68,7 +68,7 @@ const defaultValues: Partial<DisplayFormValues> = {
roles: ["ROLE_USER"], roles: ["ROLE_USER"],
}; };
export default function UsersAddForm() { export default function AddUserForm() {
const form = useForm<DisplayFormValues>({ const form = useForm<DisplayFormValues>({
resolver: zodResolver(displayFormSchema), resolver: zodResolver(displayFormSchema),
defaultValues, defaultValues,
@ -172,33 +172,33 @@ export default function UsersAddForm() {
Select the items you want to display in the sidebar. Select the items you want to display in the sidebar.
</FormDescription> */} </FormDescription> */}
</div> </div>
{items.map((item) => ( {roles.map((role) => (
<FormField <FormField
key={item.id} key={role.id}
control={form.control} control={form.control}
name="roles" name="roles"
render={({ field }) => { render={({ field }) => {
return ( return (
<FormItem <FormItem
key={item.id} key={role.id}
className="flex flex-row items-start space-x-3 space-y-0" className="flex flex-row items-start space-x-3 space-y-0"
> >
<FormControl> <FormControl>
<Checkbox <Checkbox
checked={field.value?.includes(item.id)} checked={field.value?.includes(role.id)}
onCheckedChange={(checked) => { onCheckedChange={(checked) => {
return checked return checked
? field.onChange([...field.value, item.id]) ? field.onChange([...field.value, role.id])
: field.onChange( : field.onChange(
field.value?.filter( field.value?.filter(
(value) => value !== item.id (value) => value !== role.id
) )
); );
}} }}
/> />
</FormControl> </FormControl>
<FormLabel className="font-normal"> <FormLabel className="font-normal">
{item.label} {role.label}
</FormLabel> </FormLabel>
</FormItem> </FormItem>
); );

View File

@ -20,7 +20,7 @@ const ToolsTable = ({ organizations }: { organizations: Organization[] }) => {
description="Manage Organizations" description="Manage Organizations"
/> />
<Link <Link
href="#" href="/dashboard/organizations/add"
className={buttonVariants({ className={buttonVariants({
variant: "default", variant: "default",
// size: "sm", // size: "sm",