feat: edit account page

This commit is contained in:
mehedi-hasan 2024-05-03 20:33:39 +06:00
parent 1c7f752f11
commit 3081b2fed7
5 changed files with 115 additions and 47 deletions

View File

@ -1,4 +1,6 @@
import AddAccountForm from "@/components/add-account-form"; "use client"
import AccountForm from "@/components/account-form";
import Breadcrumb from "@/components/breadcrumb"; import Breadcrumb from "@/components/breadcrumb";
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"; import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
import { ScrollArea, ScrollBar } from "@/components/ui/scroll-area"; import { ScrollArea, ScrollBar } from "@/components/ui/scroll-area";
@ -10,25 +12,29 @@ const breadcrumbItems = [
{ title: "Add" }, { title: "Add" },
]; ];
export default function SettingsDisplayPage() { export default function Page() {
return ( return (
<ScrollArea className="h-[calc(100vh-53px)]"> <ScrollArea className="h-[calc(100vh-53px)]">
<div className="flex-1 space-y-4 p-4 md:p-8 pt-6"> <div className="flex-1 space-y-4 p-4 md:p-8 pt-6">
<Breadcrumb items={breadcrumbItems} /> <Breadcrumb items={breadcrumbItems} />
<div className="w-full h-full flex justify-center items-center"> <div className="w-full h-full flex justify-center items-center">
<Card className="max-w-[700px] w-full"> <Card className="max-w-[700px] w-full">
<CardHeader> <CardHeader>
<CardTitle className="mb-4 font-bold text-xl"> <CardTitle className="mb-4 font-bold text-xl">
Create Account Create Account
</CardTitle> </CardTitle>
<Separator /> <Separator />
</CardHeader> </CardHeader>
<CardContent> <CardContent>
<AddAccountForm /> <AccountForm
</CardContent> onSubmit={() => {}}
</Card> btn1_content="Create"
</div> btn2_content="Create and add another"
/>
</CardContent>
</Card>
</div>
</div> </div>
<ScrollBar /> <ScrollBar />
</ScrollArea> </ScrollArea>

View File

@ -0,0 +1,48 @@
"use client";
import AccountForm from "@/components/account-form";
import Breadcrumb from "@/components/breadcrumb";
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
import { ScrollArea, ScrollBar } from "@/components/ui/scroll-area";
import { Separator } from "@/components/ui/separator";
import { dummyAccounts } from "@/constants/data";
import { Account } from "@/types/account";
const breadcrumbItems = [
{ title: "Dashboard", link: "/dashboard" },
{ title: "Accounts", link: "/dashboard/accounts" },
{ title: "Edit" },
];
export default function Page({ params }: { params: { id: string } }) {
const account = dummyAccounts.find((account) => account.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 Account
</CardTitle>
<Separator />
</CardHeader>
<CardContent>
<AccountForm
account={account as Account}
onSubmit={() => {}}
btn1_content="Save and continue editing"
btn2_content="Save changes"
/>
</CardContent>
</Card>
</div>
</div>
<ScrollBar />
</ScrollArea>
);
}

View File

@ -22,20 +22,15 @@ import {
SelectTrigger, SelectTrigger,
SelectValue, SelectValue,
} from "./ui/select"; } from "./ui/select";
import { Account } from "@/types/account";
const displayFormSchema = z.object({ const displayFormSchema = z.object({
email: z email: z.string().trim().min(1, { message: "Please select a user." }).email(),
.string({
required_error: "Please select a user.",
})
.trim()
.email(),
balance: z.string().trim().min(1, "Balance is required."), balance: z.string().trim().min(1, "Balance is required."),
organization: z organization: z
.string({ .string()
required_error: "Please select an organization.", .trim()
}) .min(1, { message: "Please select an organization." }),
.trim(),
}); });
type DisplayFormValues = z.infer<typeof displayFormSchema>; type DisplayFormValues = z.infer<typeof displayFormSchema>;
@ -47,10 +42,26 @@ const defaultValues: Partial<DisplayFormValues> = {
organization: "", organization: "",
}; };
export default function AddAccountForm() { type Props = {
account?: Account;
onSubmit: () => void;
btn1_content: string;
btn2_content: string;
};
export default function AccountForm({
account,
onSubmit: onFormSubmit,
btn1_content,
btn2_content,
}: Props) {
const form = useForm<DisplayFormValues>({ const form = useForm<DisplayFormValues>({
resolver: zodResolver(displayFormSchema), resolver: zodResolver(displayFormSchema),
defaultValues, defaultValues: {
balance: account?.balance ? String(account?.balance) : "",
email: account?.email || "",
organization: account?.organization || "",
},
}); });
function onSubmit(data: DisplayFormValues) { function onSubmit(data: DisplayFormValues) {
@ -73,21 +84,19 @@ export default function AddAccountForm() {
render={({ field }) => ( render={({ field }) => (
<FormItem> <FormItem>
<FormLabel>User</FormLabel> <FormLabel>User</FormLabel>
<Select onValueChange={field.onChange} defaultValue={field.value}> <Select onValueChange={field.onChange} value={field.value}>
<FormControl> <FormControl>
<SelectTrigger> <SelectTrigger>
<SelectValue placeholder="Select a user" /> <SelectValue placeholder="Select a user" />
</SelectTrigger> </SelectTrigger>
</FormControl> </FormControl>
<SelectContent> <SelectContent>
<SelectItem value="johndoe@gmail.com"> <SelectItem value="john@gmail.com">john@gmail.com</SelectItem>
johndoe@gmail.com <SelectItem value="sarah@example.com">
sarah@example.com
</SelectItem> </SelectItem>
<SelectItem value="adramov@gmail.com"> <SelectItem value="michael@example.com">
adramov@gmail.com michael@example.com
</SelectItem>
<SelectItem value="hello@gmail.com">
hello@gmail.com
</SelectItem> </SelectItem>
</SelectContent> </SelectContent>
</Select> </Select>
@ -123,8 +132,11 @@ export default function AddAccountForm() {
</SelectTrigger> </SelectTrigger>
</FormControl> </FormControl>
<SelectContent> <SelectContent>
<SelectItem value="Skilld">Skilld</SelectItem> <SelectItem value="XYZ Tech Inc.">XYZ Tech Inc.</SelectItem>
<SelectItem value="Ecareers">Ecareers</SelectItem> <SelectItem value="ABC Solutions">ABC Solutions</SelectItem>
<SelectItem value="Acme Corporation">
Acme Corporation
</SelectItem>
</SelectContent> </SelectContent>
</Select> </Select>
<FormMessage /> <FormMessage />
@ -134,10 +146,10 @@ export default function AddAccountForm() {
<div className="flex items-center gap-4 flex-col sm:flex-row"> <div className="flex items-center gap-4 flex-col sm:flex-row">
<Button className="w-full" size="lg"> <Button className="w-full" size="lg">
Create {btn1_content}
</Button> </Button>
<Button variant="secondary" className="w-full" size="lg"> <Button variant="secondary" className="w-full" size="lg">
Create and add another {btn2_content}
</Button> </Button>
</div> </div>
</form> </form>

View File

@ -14,6 +14,7 @@ import { Organization } from "@/types/organization";
import { User } from "@/types/user"; import { User } from "@/types/user";
import { BookCheck, Edit, MoreHorizontal, Trash } from "lucide-react"; import { BookCheck, Edit, MoreHorizontal, Trash } from "lucide-react";
import Link from "next/link";
import { useRouter } from "next/navigation"; import { useRouter } from "next/navigation";
import { useState } from "react"; import { useState } from "react";
@ -49,14 +50,15 @@ export const CellAction: React.FC<CellActionProps> = ({ data }) => {
<DropdownMenuContent align="end"> <DropdownMenuContent align="end">
<DropdownMenuLabel>Actions</DropdownMenuLabel> <DropdownMenuLabel>Actions</DropdownMenuLabel>
<DropdownMenuItem <DropdownMenuItem className="cursor-pointer p-0">
className="cursor-pointer" <Link
// onClick={() => href={`/dashboard/accounts/edit/${data.id}`}
// router.push(`#`) className="flex items-center gap-2 px-2 py-1.5 w-full"
// } >
> <Edit className="h-4 w-4" /> Edit
<Edit className="mr-2 h-4 w-4" /> Update </Link>
</DropdownMenuItem> </DropdownMenuItem>
<DropdownMenuItem <DropdownMenuItem
className="cursor-pointer" className="cursor-pointer"
onClick={() => setIsDeleteModalOpen(true)} onClick={() => setIsDeleteModalOpen(true)}

View File

@ -89,7 +89,7 @@ export const dummyAccounts: Account[] = [
{ {
id: 2, id: 2,
email: "sarah@example.com", email: "sarah@example.com",
balance: 0, balance: 2000,
organization: "ABC Solutions", organization: "ABC Solutions",
accountHistory: "None", accountHistory: "None",
created_at: new Date().toISOString(), created_at: new Date().toISOString(),