mirror of
https://github.com/vitodeploy/vito.git
synced 2025-07-04 15:32:35 +00:00
projects
This commit is contained in:
Saeed Vaziry
30
resources/js/pages/projects/components/actions.tsx
Normal file
30
resources/js/pages/projects/components/actions.tsx
Normal file
@ -0,0 +1,30 @@
|
||||
import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuSeparator, DropdownMenuTrigger } from '@/components/ui/dropdown-menu';
|
||||
import { Button } from '@/components/ui/button';
|
||||
import { MoreVerticalIcon } from 'lucide-react';
|
||||
import { Project } from '@/types/project';
|
||||
import DeleteProject from '@/pages/projects/components/delete-project';
|
||||
import UsersAction from '@/pages/projects/components/users-action';
|
||||
|
||||
export default function ProjectActions({ project }: { project: Project }) {
|
||||
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">
|
||||
<UsersAction project={project}>
|
||||
<DropdownMenuItem onSelect={(e) => e.preventDefault()}>Users</DropdownMenuItem>
|
||||
</UsersAction>
|
||||
<DropdownMenuSeparator />
|
||||
<DeleteProject project={project}>
|
||||
<DropdownMenuItem onSelect={(e) => e.preventDefault()} variant="destructive">
|
||||
Delete Project
|
||||
</DropdownMenuItem>
|
||||
</DeleteProject>
|
||||
</DropdownMenuContent>
|
||||
</DropdownMenu>
|
||||
);
|
||||
}
|
||||
54
resources/js/pages/projects/components/columns.tsx
Normal file
54
resources/js/pages/projects/components/columns.tsx
Normal file
@ -0,0 +1,54 @@
|
||||
'use client';
|
||||
|
||||
import { ColumnDef } from '@tanstack/react-table';
|
||||
import type { Project } from '@/types/project';
|
||||
import ProjectActions from '@/pages/projects/components/actions';
|
||||
import { usePage } from '@inertiajs/react';
|
||||
import { SharedData } from '@/types';
|
||||
import { Badge } from '@/components/ui/badge';
|
||||
|
||||
const CurrentProject = ({ project }: { project: Project }) => {
|
||||
const page = usePage<SharedData>();
|
||||
return <>{project.id === page.props.auth.currentProject?.id && <Badge variant="default">current</Badge>}</>;
|
||||
};
|
||||
|
||||
export const columns: ColumnDef<Project>[] = [
|
||||
{
|
||||
accessorKey: 'id',
|
||||
header: 'ID',
|
||||
enableColumnFilter: true,
|
||||
enableSorting: true,
|
||||
enableHiding: true,
|
||||
},
|
||||
{
|
||||
accessorKey: 'name',
|
||||
header: 'Name',
|
||||
enableColumnFilter: true,
|
||||
enableSorting: true,
|
||||
cell: ({ row }) => {
|
||||
return (
|
||||
<div className="flex items-center space-x-1">
|
||||
<span>{row.original.name}</span> <CurrentProject project={row.original} />
|
||||
</div>
|
||||
);
|
||||
},
|
||||
},
|
||||
{
|
||||
accessorKey: 'created_at_by_timezone',
|
||||
header: 'Created at',
|
||||
enableColumnFilter: true,
|
||||
enableSorting: true,
|
||||
},
|
||||
{
|
||||
id: 'actions',
|
||||
enableColumnFilter: false,
|
||||
enableSorting: false,
|
||||
cell: ({ row }) => {
|
||||
return (
|
||||
<div className="flex items-center justify-end">
|
||||
<ProjectActions project={row.original} />
|
||||
</div>
|
||||
);
|
||||
},
|
||||
},
|
||||
];
|
||||
68
resources/js/pages/projects/components/create-project.tsx
Normal file
68
resources/js/pages/projects/components/create-project.tsx
Normal file
@ -0,0 +1,68 @@
|
||||
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 { 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';
|
||||
|
||||
export default function CreateProject({ children }: { children: ReactNode }) {
|
||||
const [open, setOpen] = useState(false);
|
||||
|
||||
const form = useForm({
|
||||
name: '',
|
||||
});
|
||||
|
||||
const submit: FormEventHandler = (e) => {
|
||||
e.preventDefault();
|
||||
|
||||
form.post(route('projects.store'), {
|
||||
onSuccess() {
|
||||
setOpen(false);
|
||||
},
|
||||
});
|
||||
};
|
||||
|
||||
return (
|
||||
<Dialog open={open} onOpenChange={setOpen}>
|
||||
<DialogTrigger asChild>{children}</DialogTrigger>
|
||||
<DialogContent>
|
||||
<DialogHeader>
|
||||
<DialogTitle>Create project</DialogTitle>
|
||||
<DialogDescription>Fill the form to create a new project</DialogDescription>
|
||||
</DialogHeader>
|
||||
<Form id="create-project-form" onSubmit={submit}>
|
||||
<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>
|
||||
</FormFields>
|
||||
</Form>
|
||||
<DialogFooter>
|
||||
<DialogClose asChild>
|
||||
<Button type="button" variant="outline">
|
||||
Cancel
|
||||
</Button>
|
||||
</DialogClose>
|
||||
<Button form="create-project-form" type="button" onClick={submit} disabled={form.processing}>
|
||||
{form.processing && <LoaderCircle className="animate-spin" />}
|
||||
Create
|
||||
</Button>
|
||||
</DialogFooter>
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
);
|
||||
}
|
||||
63
resources/js/pages/projects/components/delete-project.tsx
Normal file
63
resources/js/pages/projects/components/delete-project.tsx
Normal file
@ -0,0 +1,63 @@
|
||||
import { FormEvent, ReactNode } from 'react';
|
||||
import {
|
||||
Dialog,
|
||||
DialogClose,
|
||||
DialogContent,
|
||||
DialogDescription,
|
||||
DialogFooter,
|
||||
DialogHeader,
|
||||
DialogTitle,
|
||||
DialogTrigger,
|
||||
} from '@/components/ui/dialog';
|
||||
import { Button } from '@/components/ui/button';
|
||||
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 { LoaderCircleIcon } from 'lucide-react';
|
||||
import { Project } from '@/types/project';
|
||||
|
||||
export default function DeleteProject({ project, children }: { project: Project; children: ReactNode }) {
|
||||
const form = useForm({
|
||||
name: '',
|
||||
});
|
||||
|
||||
const submit = (e: FormEvent) => {
|
||||
e.preventDefault();
|
||||
form.delete(route('projects.destroy', project.id));
|
||||
};
|
||||
|
||||
return (
|
||||
<Dialog>
|
||||
<DialogTrigger asChild>{children}</DialogTrigger>
|
||||
<DialogContent>
|
||||
<DialogHeader>
|
||||
<DialogTitle>Delete {project.name}</DialogTitle>
|
||||
<DialogDescription>Delete project and all its resources.</DialogDescription>
|
||||
</DialogHeader>
|
||||
|
||||
<Form id="delete-project-form" onSubmit={submit}>
|
||||
<FormFields>
|
||||
<FormField>
|
||||
<Label htmlFor="project-name">Name</Label>
|
||||
<Input id="project-name" value={form.data.name} onChange={(e) => form.setData('name', e.target.value)} />
|
||||
<InputError message={form.errors.name} />
|
||||
</FormField>
|
||||
</FormFields>
|
||||
</Form>
|
||||
|
||||
<DialogFooter className="gap-2">
|
||||
<DialogClose asChild>
|
||||
<Button variant="secondary">Cancel</Button>
|
||||
</DialogClose>
|
||||
|
||||
<Button form="delete-project-form" variant="destructive" disabled={form.processing}>
|
||||
{form.processing && <LoaderCircleIcon className="size-4 animate-spin" />}
|
||||
Delete Project
|
||||
</Button>
|
||||
</DialogFooter>
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
);
|
||||
}
|
||||
164
resources/js/pages/projects/components/users-action.tsx
Normal file
164
resources/js/pages/projects/components/users-action.tsx
Normal file
@ -0,0 +1,164 @@
|
||||
import { Project } from '@/types/project';
|
||||
import { ColumnDef } from '@tanstack/react-table';
|
||||
import { User } from '@/types/user';
|
||||
import {
|
||||
Dialog,
|
||||
DialogClose,
|
||||
DialogContent,
|
||||
DialogDescription,
|
||||
DialogFooter,
|
||||
DialogHeader,
|
||||
DialogTitle,
|
||||
DialogTrigger,
|
||||
} from '@/components/ui/dialog';
|
||||
import { FormEvent, ReactNode, useState } from 'react';
|
||||
import { DataTable } from '@/components/data-table';
|
||||
import { Button } from '@/components/ui/button';
|
||||
import { Form, FormField, FormFields } from '@/components/ui/form';
|
||||
import { Label } from '@/components/ui/label';
|
||||
import InputError from '@/components/ui/input-error';
|
||||
import UserSelect from '@/components/user-select';
|
||||
import { useForm } from '@inertiajs/react';
|
||||
import { LoaderCircleIcon, TrashIcon } from 'lucide-react';
|
||||
|
||||
function AddUser({ project }: { project: Project }) {
|
||||
const [open, setOpen] = useState(false);
|
||||
|
||||
const form = useForm({
|
||||
user: 0,
|
||||
});
|
||||
|
||||
const submit = (e: FormEvent) => {
|
||||
e.preventDefault();
|
||||
form.post(route('projects.users', project.id), {
|
||||
onSuccess: () => {
|
||||
setOpen(false);
|
||||
},
|
||||
});
|
||||
};
|
||||
|
||||
return (
|
||||
<Dialog open={open} onOpenChange={setOpen}>
|
||||
<DialogTrigger asChild>
|
||||
<Button variant="outline">Add user</Button>
|
||||
</DialogTrigger>
|
||||
<DialogContent className="sm:max-w-xl">
|
||||
<DialogHeader>
|
||||
<DialogTitle>Add user</DialogTitle>
|
||||
<DialogDescription>Here you can add new user to {project.name}</DialogDescription>
|
||||
</DialogHeader>
|
||||
<Form id="add-user-form" onSubmit={submit}>
|
||||
<FormFields>
|
||||
<FormField>
|
||||
<Label htmlFor="user">User</Label>
|
||||
<UserSelect onChange={(user: User) => form.setData('user', user.id)} />
|
||||
<InputError message={form.errors.user} />
|
||||
</FormField>
|
||||
</FormFields>
|
||||
</Form>
|
||||
<DialogFooter className="gap-2">
|
||||
<DialogClose asChild>
|
||||
<Button variant="outline">Cancel</Button>
|
||||
</DialogClose>
|
||||
<Button form="add-user-form">Add</Button>
|
||||
</DialogFooter>
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
);
|
||||
}
|
||||
|
||||
function RemoveUser({ project, user }: { project: Project; user: User }) {
|
||||
const [open, setOpen] = useState(false);
|
||||
|
||||
const form = useForm({
|
||||
user: user.id,
|
||||
});
|
||||
|
||||
const submit = (e: FormEvent) => {
|
||||
e.preventDefault();
|
||||
form.delete(route('projects.users', project.id), {
|
||||
onSuccess: () => {
|
||||
setOpen(false);
|
||||
},
|
||||
});
|
||||
};
|
||||
|
||||
return (
|
||||
<Dialog open={open} onOpenChange={setOpen}>
|
||||
<DialogTrigger asChild>
|
||||
<Button variant="outline" size="sm">
|
||||
<TrashIcon />
|
||||
</Button>
|
||||
</DialogTrigger>
|
||||
<DialogContent>
|
||||
<DialogHeader>
|
||||
<DialogTitle>Remove user</DialogTitle>
|
||||
<DialogDescription>Remove user from {project.name}.</DialogDescription>
|
||||
</DialogHeader>
|
||||
|
||||
<DialogFooter className="gap-2">
|
||||
<DialogClose asChild>
|
||||
<Button variant="secondary">Cancel</Button>
|
||||
</DialogClose>
|
||||
|
||||
<Button onClick={submit} variant="destructive" disabled={form.processing}>
|
||||
{form.processing && <LoaderCircleIcon className="animate-spin" />}
|
||||
Remove user
|
||||
</Button>
|
||||
</DialogFooter>
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
);
|
||||
}
|
||||
|
||||
const getColumns = (project: Project): ColumnDef<User>[] => [
|
||||
{
|
||||
accessorKey: 'id',
|
||||
header: 'ID',
|
||||
enableColumnFilter: true,
|
||||
enableSorting: true,
|
||||
enableHiding: true,
|
||||
},
|
||||
{
|
||||
accessorKey: 'name',
|
||||
header: 'Name',
|
||||
enableColumnFilter: true,
|
||||
enableSorting: true,
|
||||
},
|
||||
{
|
||||
accessorKey: 'email',
|
||||
header: 'Email',
|
||||
enableColumnFilter: true,
|
||||
enableSorting: true,
|
||||
},
|
||||
{
|
||||
id: 'actions',
|
||||
enableColumnFilter: false,
|
||||
enableSorting: false,
|
||||
cell: ({ row }) => {
|
||||
return (
|
||||
<div className="flex items-center justify-end">
|
||||
<RemoveUser user={row.original} project={project} />
|
||||
</div>
|
||||
);
|
||||
},
|
||||
},
|
||||
];
|
||||
|
||||
export default function UsersAction({ project, children }: { project: Project; children: ReactNode }) {
|
||||
return (
|
||||
<Dialog>
|
||||
<DialogTrigger asChild>{children}</DialogTrigger>
|
||||
<DialogContent className="sm:max-w-3xl">
|
||||
<DialogHeader>
|
||||
<DialogTitle>Users</DialogTitle>
|
||||
<DialogDescription>Users assigned to this project</DialogDescription>
|
||||
</DialogHeader>
|
||||
<DataTable columns={getColumns(project)} data={project.users} />
|
||||
<DialogFooter className="gap-2">
|
||||
<AddUser project={project} />
|
||||
</DialogFooter>
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
);
|
||||
}
|
||||
36
resources/js/pages/projects/index.tsx
Normal file
36
resources/js/pages/projects/index.tsx
Normal file
@ -0,0 +1,36 @@
|
||||
import SettingsLayout from '@/layouts/settings/layout';
|
||||
import { Head, usePage } from '@inertiajs/react';
|
||||
import { DataTable } from '@/components/data-table';
|
||||
import { columns } from '@/pages/projects/components/columns';
|
||||
import { Project } from '@/types/project';
|
||||
import Container from '@/components/container';
|
||||
import Heading from '@/components/heading';
|
||||
import React from 'react';
|
||||
import CreateProject from '@/pages/projects/components/create-project';
|
||||
import { Button } from '@/components/ui/button';
|
||||
|
||||
export default function Projects() {
|
||||
const page = usePage<{
|
||||
projects: {
|
||||
data: Project[];
|
||||
};
|
||||
}>();
|
||||
|
||||
return (
|
||||
<SettingsLayout>
|
||||
<Head title="Projects" />
|
||||
|
||||
<Container className="max-w-3xl">
|
||||
<div className="flex items-start justify-between">
|
||||
<Heading title="Projects" description="Here you can manage your projects" />
|
||||
<div className="flex items-center gap-2">
|
||||
<CreateProject>
|
||||
<Button variant="outline">Create project</Button>
|
||||
</CreateProject>
|
||||
</div>
|
||||
</div>
|
||||
<DataTable columns={columns} data={page.props.projects.data} />
|
||||
</Container>
|
||||
</SettingsLayout>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user