#591 - profile, users and projects

resources/js/pages/projects/components/actions.tsx

@@ -4,6 +4,7 @@ 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';
+import ProjectForm from '@/pages/projects/components/project-form';
 
 export default function ProjectActions({ project }: { project: Project }) {
   return (
@@ -15,6 +16,9 @@ export default function ProjectActions({ project }: { project: Project }) {
         </Button>
       </DropdownMenuTrigger>
       <DropdownMenuContent align="end">
+        <ProjectForm project={project}>
+          <DropdownMenuItem onSelect={(e) => e.preventDefault()}>Edit</DropdownMenuItem>
+        </ProjectForm>
         <UsersAction project={project}>
           <DropdownMenuItem onSelect={(e) => e.preventDefault()}>Users</DropdownMenuItem>
         </UsersAction>

resources/js/pages/projects/components/columns.tsx

@@ -1,11 +1,10 @@
-'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';
+import DateTime from '@/components/date-time';
 
 const CurrentProject = ({ project }: { project: Project }) => {
   const page = usePage<SharedData>();
@@ -34,10 +33,13 @@ export const columns: ColumnDef<Project>[] = [
     },
   },
   {
-    accessorKey: 'created_at_by_timezone',
+    accessorKey: 'created_at',
     header: 'Created at',
     enableColumnFilter: true,
     enableSorting: true,
+    cell: ({ row }) => {
+      return <DateTime date={row.original.created_at} />;
+    },
   },
   {
     id: 'actions',

resources/js/pages/projects/components/delete-project.tsx

@@ -34,10 +34,11 @@ export default function DeleteProject({ project, children }: { project: Project;
       <DialogContent>
         <DialogHeader>
           <DialogTitle>Delete {project.name}</DialogTitle>
-          <DialogDescription>Delete project and all its resources.</DialogDescription>
+          <DialogDescription className="sr-only">Delete project and all its resources.</DialogDescription>
         </DialogHeader>
 
-        <Form id="delete-project-form" onSubmit={submit}>
+        <Form id="delete-project-form" onSubmit={submit} className="p-4">
+          <p>Are you sure you want to delete this project? This action cannot be undone.</p>
           <FormFields>
             <FormField>
               <Label htmlFor="project-name">Name</Label>
@@ -49,7 +50,7 @@ export default function DeleteProject({ project, children }: { project: Project;
 
         <DialogFooter className="gap-2">
           <DialogClose asChild>
-            <Button variant="secondary">Cancel</Button>
+            <Button variant="outline">Cancel</Button>
           </DialogClose>
 
           <Button form="delete-project-form" variant="destructive" disabled={form.processing}>

resources/js/pages/projects/components/project-form.tsx

@@ -10,23 +10,30 @@ import {
 } from '@/components/ui/dialog';
 import { FormEventHandler, ReactNode, useState } from 'react';
 import { Button } from '@/components/ui/button';
-import { LoaderCircle } from 'lucide-react';
+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 { Project } from '@/types/project';
+import { Transition } from '@headlessui/react';
 
-export default function CreateProject({ children }: { children: ReactNode }) {
+export default function ProjectForm({ project, children }: { project?: Project; children: ReactNode }) {
   const [open, setOpen] = useState(false);
 
   const form = useForm({
-    name: '',
+    name: project?.name || '',
   });
 
   const submit: FormEventHandler = (e) => {
     e.preventDefault();
 
+    if (project) {
+      form.patch(route('projects.update', project.id));
+      return;
+    }
+
     form.post(route('projects.store'), {
       onSuccess() {
         setOpen(false);
@@ -39,10 +46,10 @@ export default function CreateProject({ children }: { children: ReactNode }) {
       <DialogTrigger asChild>{children}</DialogTrigger>
       <DialogContent>
         <DialogHeader>
-          <DialogTitle>Create project</DialogTitle>
-          <DialogDescription>Fill the form to create a new project</DialogDescription>
+          <DialogTitle>{project ? 'Edit Project' : 'Create Project'}</DialogTitle>
+          <DialogDescription className="sr-only">{project ? 'Edit the project details.' : 'Create a new project.'}</DialogDescription>
         </DialogHeader>
-        <Form id="create-project-form" onSubmit={submit}>
+        <Form id="project-form" onSubmit={submit} className="p-4">
           <FormFields>
             <FormField>
               <Label htmlFor="name">Name</Label>
@@ -51,15 +58,24 @@ export default function CreateProject({ children }: { children: ReactNode }) {
             </FormField>
           </FormFields>
         </Form>
-        <DialogFooter>
+        <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-project-form" type="button" onClick={submit} disabled={form.processing}>
+          <Button form="project-form" type="button" onClick={submit} disabled={form.processing}>
             {form.processing && <LoaderCircle className="animate-spin" />}
-            Create
+            Save
           </Button>
         </DialogFooter>
       </DialogContent>

resources/js/pages/projects/components/users-action.tsx

@@ -20,17 +20,7 @@ import InputError from '@/components/ui/input-error';
 import UserSelect from '@/components/user-select';
 import { useForm } from '@inertiajs/react';
 import { LoaderCircleIcon, TrashIcon } from 'lucide-react';
-import {
-  AlertDialog,
-  AlertDialogContent,
-  AlertDialogDescription,
-  AlertDialogFooter,
-  AlertDialogHeader,
-  AlertDialogTitle,
-  AlertDialogTrigger,
-  AlertDialogCancel,
-  AlertDialogAction,
-} from '@/components/ui/alert-dialog';
+import { Sheet, SheetContent, SheetDescription, SheetFooter, SheetHeader, SheetTitle, SheetTrigger } from '@/components/ui/sheet';
 
 function AddUser({ project }: { project: Project }) {
   const [open, setOpen] = useState(false);
@@ -41,7 +31,7 @@ function AddUser({ project }: { project: Project }) {
 
   const submit = (e: FormEvent) => {
     e.preventDefault();
-    form.post(route('projects.users', project.id), {
+    form.post(route('projects.users.store', { project: project.id }), {
       onSuccess: () => {
         setOpen(false);
       },
@@ -51,14 +41,14 @@ function AddUser({ project }: { project: Project }) {
   return (
     <Dialog open={open} onOpenChange={setOpen}>
       <DialogTrigger asChild>
-        <Button variant="outline">Add user</Button>
+        <Button>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>
+          <DialogDescription className="sr-only">Here you can add new user to {project.name}</DialogDescription>
         </DialogHeader>
-        <Form id="add-user-form" onSubmit={submit}>
+        <Form id="add-user-form" onSubmit={submit} className="p-4">
           <FormFields>
             <FormField>
               <Label htmlFor="user">User</Label>
@@ -71,7 +61,10 @@ function AddUser({ project }: { project: Project }) {
           <DialogClose asChild>
             <Button variant="outline">Cancel</Button>
           </DialogClose>
-          <Button form="add-user-form">Add</Button>
+          <Button form="add-user-form" disabled={form.processing}>
+            {form.processing && <LoaderCircleIcon className="animate-spin" />}
+            Add
+          </Button>
         </DialogFooter>
       </DialogContent>
     </Dialog>
@@ -81,13 +74,11 @@ function AddUser({ project }: { project: Project }) {
 function RemoveUser({ project, user }: { project: Project; user: User }) {
   const [open, setOpen] = useState(false);
 
-  const form = useForm({
-    user: user.id,
-  });
+  const form = useForm();
 
   const submit = (e: FormEvent) => {
     e.preventDefault();
-    form.delete(route('projects.users', project.id), {
+    form.delete(route('projects.users.destroy', { project: project.id, user: user.id }), {
       onSuccess: () => {
         setOpen(false);
       },
@@ -95,27 +86,33 @@ function RemoveUser({ project, user }: { project: Project; user: User }) {
   };
 
   return (
-    <AlertDialog open={open} onOpenChange={setOpen}>
-      <AlertDialogTrigger asChild>
+    <Dialog open={open} onOpenChange={setOpen}>
+      <DialogTrigger asChild>
         <Button variant="outline" size="sm">
           <TrashIcon />
         </Button>
-      </AlertDialogTrigger>
-      <AlertDialogContent>
-        <AlertDialogHeader>
-          <AlertDialogTitle>Remove user</AlertDialogTitle>
-          <AlertDialogDescription>Remove user from {project.name}.</AlertDialogDescription>
-        </AlertDialogHeader>
+      </DialogTrigger>
+      <DialogContent>
+        <DialogHeader>
+          <DialogTitle>Remove user</DialogTitle>
+          <DialogDescription className="sr-only">Remove user from {project.name}.</DialogDescription>
+        </DialogHeader>
 
-        <AlertDialogFooter className="gap-2">
-          <AlertDialogCancel>Cancel</AlertDialogCancel>
+        <p className="p-4">
+          Are you sure you want to remove <b>{user.name}</b> from this project?
+        </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" />}
             Remove user
           </Button>
-        </AlertDialogFooter>
-      </AlertDialogContent>
-    </AlertDialog>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
   );
 }
 
@@ -155,18 +152,20 @@ const getColumns = (project: Project): ColumnDef<User>[] => [
 
 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>
+    <Sheet>
+      <SheetTrigger asChild>{children}</SheetTrigger>
+      <SheetContent className="sm:max-w-3xl">
+        <SheetHeader>
+          <SheetTitle>Project users</SheetTitle>
+          <SheetDescription className="sr-only">Users assigned to this project</SheetDescription>
+        </SheetHeader>
+        <DataTable columns={getColumns(project)} data={project.users} modal />
+        <SheetFooter className="gap-2">
+          <div className="flex items-center">
+            <AddUser project={project} />
+          </div>
+        </SheetFooter>
+      </SheetContent>
+    </Sheet>
   );
 }

resources/js/pages/projects/index.tsx

@@ -6,7 +6,7 @@ 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 ProjectForm from '@/pages/projects/components/project-form';
 import { Button } from '@/components/ui/button';
 
 export default function Projects() {
@@ -20,13 +20,13 @@ export default function Projects() {
     <SettingsLayout>
       <Head title="Projects" />
 
-      <Container className="max-w-3xl">
+      <Container className="max-w-5xl">
         <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>
+            <ProjectForm>
+              <Button>Create project</Button>
+            </ProjectForm>
           </div>
         </div>
         <DataTable columns={columns} data={page.props.projects.data} />