mirror of
https://github.com/vitodeploy/vito.git
synced 2025-07-03 15:02:34 +00:00
#591 - profile, users and projects
This commit is contained in:
Saeed Vaziry
34
resources/js/pages/users/components/actions.tsx
Normal file
34
resources/js/pages/users/components/actions.tsx
Normal file
@ -0,0 +1,34 @@
|
||||
import { User } from '@/types/user';
|
||||
import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuSeparator, DropdownMenuTrigger } from '@/components/ui/dropdown-menu';
|
||||
import { Button } from '@/components/ui/button';
|
||||
import { MoreVerticalIcon } from 'lucide-react';
|
||||
import DeleteUser from '@/pages/users/components/delete-user';
|
||||
import Projects from '@/pages/users/components/projects';
|
||||
import UserForm from '@/pages/users/components/form';
|
||||
|
||||
export default function UserActions({ user }: { user: User }) {
|
||||
return (
|
||||
<DropdownMenu modal={false}>
|
||||
<DropdownMenuTrigger asChild>
|
||||
<Button variant="ghost" className="h-8 w-8 p-0">
|
||||
<span className="sr-only">Open menu</span>
|
||||
<MoreVerticalIcon />
|
||||
</Button>
|
||||
</DropdownMenuTrigger>
|
||||
<DropdownMenuContent align="end">
|
||||
<UserForm user={user}>
|
||||
<DropdownMenuItem onSelect={(e) => e.preventDefault()}>Edit</DropdownMenuItem>
|
||||
</UserForm>
|
||||
<Projects user={user}>
|
||||
<DropdownMenuItem onSelect={(e) => e.preventDefault()}>Projects</DropdownMenuItem>
|
||||
</Projects>
|
||||
<DropdownMenuSeparator />
|
||||
<DeleteUser user={user}>
|
||||
<DropdownMenuItem onSelect={(e) => e.preventDefault()} variant="destructive">
|
||||
Delete
|
||||
</DropdownMenuItem>
|
||||
</DeleteUser>
|
||||
</DropdownMenuContent>
|
||||
</DropdownMenu>
|
||||
);
|
||||
}
|
||||
58
resources/js/pages/users/components/delete-user.tsx
Normal file
58
resources/js/pages/users/components/delete-user.tsx
Normal file
@ -0,0 +1,58 @@
|
||||
import { User } from '@/types/user';
|
||||
import { FormEvent, ReactNode, useState } from 'react';
|
||||
import { useForm } from '@inertiajs/react';
|
||||
import {
|
||||
Dialog,
|
||||
DialogClose,
|
||||
DialogContent,
|
||||
DialogDescription,
|
||||
DialogFooter,
|
||||
DialogHeader,
|
||||
DialogTitle,
|
||||
DialogTrigger,
|
||||
} from '@/components/ui/dialog';
|
||||
import { Button } from '@/components/ui/button';
|
||||
import { LoaderCircleIcon } from 'lucide-react';
|
||||
|
||||
export default function DeleteUser({ user, children }: { user: User; children: ReactNode }) {
|
||||
const [open, setOpen] = useState(false);
|
||||
const form = useForm();
|
||||
|
||||
const submit = (e: FormEvent) => {
|
||||
e.preventDefault();
|
||||
form.delete(route('users.destroy', user.id), {
|
||||
onSuccess: () => {
|
||||
setOpen(false);
|
||||
},
|
||||
});
|
||||
};
|
||||
return (
|
||||
<Dialog open={open} onOpenChange={setOpen}>
|
||||
<DialogTrigger asChild>{children}</DialogTrigger>
|
||||
<DialogContent>
|
||||
<DialogHeader>
|
||||
<DialogTitle>Delete user</DialogTitle>
|
||||
<DialogDescription className="sr-only">
|
||||
Delete {user.name}[{user.email}]
|
||||
</DialogDescription>
|
||||
</DialogHeader>
|
||||
<p className="p-4">
|
||||
Are you sure you want to delete{' '}
|
||||
<b>
|
||||
{user.name} [{user.email}]
|
||||
</b>
|
||||
? This action cannot be undone.
|
||||
</p>
|
||||
<DialogFooter className="gap-2">
|
||||
<DialogClose asChild>
|
||||
<Button variant="outline">Cancel</Button>
|
||||
</DialogClose>
|
||||
<Button onClick={submit} variant="destructive" disabled={form.processing}>
|
||||
{form.processing && <LoaderCircleIcon className="animate-spin" />}
|
||||
Delete user
|
||||
</Button>
|
||||
</DialogFooter>
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
);
|
||||
}
|
||||
125
resources/js/pages/users/components/form.tsx
Normal file
125
resources/js/pages/users/components/form.tsx
Normal file
@ -0,0 +1,125 @@
|
||||
import {
|
||||
Dialog,
|
||||
DialogClose,
|
||||
DialogContent,
|
||||
DialogDescription,
|
||||
DialogFooter,
|
||||
DialogHeader,
|
||||
DialogTitle,
|
||||
DialogTrigger,
|
||||
} from '@/components/ui/dialog';
|
||||
import { FormEventHandler, ReactNode, useState } from 'react';
|
||||
import { Button } from '@/components/ui/button';
|
||||
import { CheckIcon, LoaderCircle } from 'lucide-react';
|
||||
import { useForm } from '@inertiajs/react';
|
||||
import { Form, FormField, FormFields } from '@/components/ui/form';
|
||||
import { Label } from '@/components/ui/label';
|
||||
import { Input } from '@/components/ui/input';
|
||||
import InputError from '@/components/ui/input-error';
|
||||
import { Select, SelectContent, SelectGroup, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select';
|
||||
import { User } from '@/types/user';
|
||||
import { Transition } from '@headlessui/react';
|
||||
|
||||
export default function UserForm({ user, children }: { user?: User; children: ReactNode }) {
|
||||
const [open, setOpen] = useState(false);
|
||||
|
||||
const form = useForm({
|
||||
name: user?.name || '',
|
||||
email: user?.email || '',
|
||||
password: '',
|
||||
role: user?.role || 'user',
|
||||
});
|
||||
|
||||
const submit: FormEventHandler = (e) => {
|
||||
e.preventDefault();
|
||||
|
||||
if (user) {
|
||||
form.patch(route('users.update', user.id));
|
||||
return;
|
||||
}
|
||||
|
||||
form.post(route('users.store'), {
|
||||
onSuccess() {
|
||||
setOpen(false);
|
||||
},
|
||||
});
|
||||
};
|
||||
|
||||
return (
|
||||
<Dialog open={open} onOpenChange={setOpen}>
|
||||
<DialogTrigger asChild>{children}</DialogTrigger>
|
||||
<DialogContent>
|
||||
<DialogHeader>
|
||||
<DialogTitle>{user ? `Edit ${user.name}` : 'Create user'}</DialogTitle>
|
||||
<DialogDescription className="sr-only">
|
||||
{user ? `Fill the form to edit ${user.name}` : 'Fill the form to create a new user'}
|
||||
</DialogDescription>
|
||||
</DialogHeader>
|
||||
<Form id="user-form" onSubmit={submit} className="p-4">
|
||||
<FormFields>
|
||||
<FormField>
|
||||
<Label htmlFor="name">Name</Label>
|
||||
<Input type="text" id="name" name="name" value={form.data.name} onChange={(e) => form.setData('name', e.target.value)} />
|
||||
<InputError message={form.errors.name} />
|
||||
</FormField>
|
||||
<FormField>
|
||||
<Label htmlFor="email">Email</Label>
|
||||
<Input type="email" id="email" name="email" value={form.data.email} onChange={(e) => form.setData('email', e.target.value)} />
|
||||
<InputError message={form.errors.email} />
|
||||
</FormField>
|
||||
<FormField>
|
||||
<Label htmlFor="password">Password</Label>
|
||||
<Input
|
||||
type="password"
|
||||
id="password"
|
||||
name="password"
|
||||
value={form.data.password}
|
||||
onChange={(e) => form.setData('password', e.target.value)}
|
||||
/>
|
||||
<InputError message={form.errors.password} />
|
||||
</FormField>
|
||||
<FormField>
|
||||
<Label htmlFor="role">Role</Label>
|
||||
<Select value={form.data.role} onValueChange={(value) => form.setData('role', value)}>
|
||||
<SelectTrigger id="role">
|
||||
<SelectValue placeholder="Select a role" />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
<SelectGroup>
|
||||
<SelectItem key="role-user" value="user">
|
||||
user
|
||||
</SelectItem>
|
||||
<SelectItem key="role-admin" value="admin">
|
||||
admin
|
||||
</SelectItem>
|
||||
</SelectGroup>
|
||||
</SelectContent>
|
||||
</Select>
|
||||
<InputError message={form.errors.role} />
|
||||
</FormField>
|
||||
</FormFields>
|
||||
</Form>
|
||||
<DialogFooter className="items-center">
|
||||
<Transition
|
||||
show={form.recentlySuccessful}
|
||||
enter="transition ease-in-out"
|
||||
enterFrom="opacity-0"
|
||||
leave="transition ease-in-out"
|
||||
leaveTo="opacity-0"
|
||||
>
|
||||
<CheckIcon className="text-success" />
|
||||
</Transition>
|
||||
<DialogClose asChild>
|
||||
<Button type="button" variant="outline">
|
||||
Cancel
|
||||
</Button>
|
||||
</DialogClose>
|
||||
<Button form="create-user-form" type="button" onClick={submit} disabled={form.processing}>
|
||||
{form.processing && <LoaderCircle className="animate-spin" />}
|
||||
Save
|
||||
</Button>
|
||||
</DialogFooter>
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
);
|
||||
}
|
||||
47
resources/js/pages/users/components/list.tsx
Normal file
47
resources/js/pages/users/components/list.tsx
Normal file
@ -0,0 +1,47 @@
|
||||
import { ColumnDef } from '@tanstack/react-table';
|
||||
import type { User } from '@/types/user';
|
||||
import { DataTable } from '@/components/data-table';
|
||||
import { usePage } from '@inertiajs/react';
|
||||
import UserActions from '@/pages/users/components/actions';
|
||||
import DateTime from '@/components/date-time';
|
||||
|
||||
const columns: ColumnDef<User>[] = [
|
||||
{
|
||||
accessorKey: 'name',
|
||||
header: 'Name',
|
||||
enableColumnFilter: true,
|
||||
},
|
||||
{
|
||||
accessorKey: 'email',
|
||||
header: 'Email',
|
||||
enableColumnFilter: true,
|
||||
},
|
||||
{
|
||||
accessorKey: 'created_at',
|
||||
header: 'Created At',
|
||||
enableSorting: true,
|
||||
cell: ({ row }) => <DateTime date={row.original.created_at} />,
|
||||
},
|
||||
{
|
||||
id: 'actions',
|
||||
enableColumnFilter: false,
|
||||
enableSorting: false,
|
||||
cell: ({ row }) => (
|
||||
<div className="flex items-center justify-end">
|
||||
<UserActions user={row.original} />
|
||||
</div>
|
||||
),
|
||||
},
|
||||
];
|
||||
|
||||
type Page = {
|
||||
users: {
|
||||
data: User[];
|
||||
};
|
||||
};
|
||||
|
||||
export default function UsersList() {
|
||||
const page = usePage<Page>();
|
||||
|
||||
return <DataTable columns={columns} data={page.props.users.data} />;
|
||||
}
|
||||
176
resources/js/pages/users/components/projects.tsx
Normal file
176
resources/js/pages/users/components/projects.tsx
Normal file
@ -0,0 +1,176 @@
|
||||
import { User } from '@/types/user';
|
||||
import { FormEvent, ReactNode, useState } from 'react';
|
||||
import { Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle } from '@/components/ui/dialog';
|
||||
import { DialogTrigger } from '@radix-ui/react-dialog';
|
||||
import { ColumnDef } from '@tanstack/react-table';
|
||||
import type { Project } from '@/types/project';
|
||||
import { DataTable } from '@/components/data-table';
|
||||
import { useForm, usePage } from '@inertiajs/react';
|
||||
import { Button } from '@/components/ui/button';
|
||||
import { LoaderCircleIcon, TrashIcon } from 'lucide-react';
|
||||
import { Sheet, SheetContent, SheetDescription, SheetFooter, SheetHeader, SheetTitle, SheetTrigger } from '@/components/ui/sheet';
|
||||
import { Form, FormField, FormFields } from '@/components/ui/form';
|
||||
import { Label } from '@/components/ui/label';
|
||||
import InputError from '@/components/ui/input-error';
|
||||
import { Select, SelectContent, SelectGroup, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select';
|
||||
import { SharedData } from '@/types';
|
||||
|
||||
function RemoveProject({ user, project }: { user: User; project: Project }) {
|
||||
const [open, setOpen] = useState(false);
|
||||
const form = useForm();
|
||||
|
||||
const submit = () => {
|
||||
form.delete(route('users.projects.destroy', { user: user.id, project: project.id }), {
|
||||
preserveScroll: true,
|
||||
onSuccess: () => {
|
||||
form.reset();
|
||||
},
|
||||
});
|
||||
};
|
||||
|
||||
return (
|
||||
<Dialog open={open} onOpenChange={setOpen}>
|
||||
<DialogTrigger asChild>
|
||||
<Button key={`remove-user-${user.id}`} variant="outline" size="sm" tabIndex={-1}>
|
||||
<TrashIcon />
|
||||
</Button>
|
||||
</DialogTrigger>
|
||||
<DialogContent>
|
||||
<DialogHeader>
|
||||
<DialogTitle>Remove from project</DialogTitle>
|
||||
<DialogDescription className="sr-only">
|
||||
Remove <b>{user.name}</b> from <b>{project.name}</b>
|
||||
</DialogDescription>
|
||||
</DialogHeader>
|
||||
<p className="p-4">
|
||||
Are you sure you want to remove <b>{user.name}</b> from <b>{project.name}</b>?
|
||||
</p>
|
||||
<DialogFooter>
|
||||
<DialogClose asChild>
|
||||
<Button variant="outline">Cancel</Button>
|
||||
</DialogClose>
|
||||
<Button variant="destructive" disabled={form.processing} onClick={submit}>
|
||||
{form.processing && <LoaderCircleIcon className="animate-spin" />}
|
||||
Remove
|
||||
</Button>
|
||||
</DialogFooter>
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
);
|
||||
}
|
||||
|
||||
function AddToProject({ user }: { user: User }) {
|
||||
const page = usePage<SharedData>();
|
||||
const [open, setOpen] = useState(false);
|
||||
const form = useForm({
|
||||
project: '',
|
||||
});
|
||||
|
||||
const submit = (e: FormEvent) => {
|
||||
e.preventDefault();
|
||||
form.post(route('users.projects.store', { user: user.id }), {
|
||||
onSuccess: () => {
|
||||
setOpen(false);
|
||||
},
|
||||
});
|
||||
};
|
||||
|
||||
return (
|
||||
<Dialog open={open} onOpenChange={setOpen}>
|
||||
<DialogTrigger asChild>
|
||||
<Button key={`add-project-${user.id}`}>Add to project</Button>
|
||||
</DialogTrigger>
|
||||
<DialogContent>
|
||||
<DialogHeader>
|
||||
<DialogTitle>Add to project</DialogTitle>
|
||||
<DialogDescription className="sr-only">
|
||||
Add <b>{user.name}</b> to a project
|
||||
</DialogDescription>
|
||||
</DialogHeader>
|
||||
<Form id="add-to-project-form" className="p-4" onSubmit={submit}>
|
||||
<FormFields>
|
||||
<FormField>
|
||||
<Label htmlFor="project">Project</Label>
|
||||
<Select value={form.data.project} onValueChange={(value) => form.setData('project', value)}>
|
||||
<SelectTrigger id="project">
|
||||
<SelectValue placeholder="Select a project" />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
<SelectGroup>
|
||||
{page.props.auth.projects.map((project: Project) => (
|
||||
<SelectItem key={`project-${project.id}`} value={project.id.toString()}>
|
||||
{project.name}
|
||||
</SelectItem>
|
||||
))}
|
||||
</SelectGroup>
|
||||
</SelectContent>
|
||||
</Select>
|
||||
<InputError message={form.errors.project} />
|
||||
</FormField>
|
||||
</FormFields>
|
||||
</Form>
|
||||
<DialogFooter>
|
||||
<DialogClose asChild>
|
||||
<Button variant="outline">Cancel</Button>
|
||||
</DialogClose>
|
||||
<Button form="add-to-project-form" disabled={form.processing} onClick={submit}>
|
||||
{form.processing && <LoaderCircleIcon className="animate-spin" />}
|
||||
Add
|
||||
</Button>
|
||||
</DialogFooter>
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
);
|
||||
}
|
||||
|
||||
const columns = (user: User): ColumnDef<Project>[] => {
|
||||
return [
|
||||
{
|
||||
accessorKey: 'id',
|
||||
header: 'ID',
|
||||
enableColumnFilter: true,
|
||||
enableSorting: true,
|
||||
enableHiding: true,
|
||||
},
|
||||
{
|
||||
accessorKey: 'name',
|
||||
header: 'Name',
|
||||
enableColumnFilter: true,
|
||||
enableSorting: true,
|
||||
},
|
||||
{
|
||||
id: 'actions',
|
||||
enableColumnFilter: false,
|
||||
enableSorting: false,
|
||||
cell: ({ row }) => {
|
||||
return (
|
||||
<div className="flex items-center justify-end" key={row.id}>
|
||||
<RemoveProject user={user} project={row.original} />
|
||||
</div>
|
||||
);
|
||||
},
|
||||
},
|
||||
];
|
||||
};
|
||||
|
||||
export default function Projects({ user, children }: { user: User; children: ReactNode }) {
|
||||
return (
|
||||
<Sheet>
|
||||
<SheetTrigger asChild>{children}</SheetTrigger>
|
||||
<SheetContent className="sm:max-w-3xl">
|
||||
<SheetHeader>
|
||||
<SheetTitle>Projects</SheetTitle>
|
||||
<SheetDescription className="sr-only">
|
||||
All projects that <b>{user.name}</b> has access
|
||||
</SheetDescription>
|
||||
</SheetHeader>
|
||||
{user.projects && <DataTable columns={columns(user)} data={user.projects} modal />}
|
||||
<SheetFooter>
|
||||
<div className="flex items-center">
|
||||
<AddToProject user={user} />
|
||||
</div>
|
||||
</SheetFooter>
|
||||
</SheetContent>
|
||||
</Sheet>
|
||||
);
|
||||
}
|
||||
25
resources/js/pages/users/index.tsx
Normal file
25
resources/js/pages/users/index.tsx
Normal file
@ -0,0 +1,25 @@
|
||||
import SettingsLayout from '@/layouts/settings/layout';
|
||||
import { Head } from '@inertiajs/react';
|
||||
import Container from '@/components/container';
|
||||
import Heading from '@/components/heading';
|
||||
import UsersList from '@/pages/users/components/list';
|
||||
import { Button } from '@/components/ui/button';
|
||||
import UserForm from '@/pages/users/components/form';
|
||||
|
||||
export default function Users() {
|
||||
return (
|
||||
<SettingsLayout>
|
||||
<Head title="Users" />
|
||||
|
||||
<Container className="max-w-5xl">
|
||||
<div className="flex items-start justify-between">
|
||||
<Heading title="Users" description="Here you can manage all users" />
|
||||
<UserForm>
|
||||
<Button>Create user</Button>
|
||||
</UserForm>
|
||||
</div>
|
||||
<UsersList />
|
||||
</Container>
|
||||
</SettingsLayout>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user