feat: edit vehicle dialog

PS-smarthub · Sep 11, 2024 · f2e549e · f2e549e
1 parent ba2fb16
commit f2e549e
Show file tree

Hide file tree

Showing 9 changed files with 89 additions and 70 deletions.
diff --git a/README.md b/README.md
@@ -24,7 +24,7 @@ Este repositório contém o código de uma plataforma web desenvolvida com Next.
 ## Pré-requisitos
 
 - Node.js v18+
-- NPM ou Yarn
+- NPM ou Pnpm
 - Docker (opcional, para ambientes de desenvolvimento)
 
 ## Instalação

diff --git a/src/app/app/_components/main-sidebar.tsx b/src/app/app/_components/main-sidebar.tsx
@@ -41,15 +41,15 @@ export function MainSidebar({ user }: MainSidebarProps) {
               <GearIcon className="w-4 h-4 mr-3" />
               Ordens de Serviço
             </SidebarNavLink>
-            <SidebarNavLink href="/app/vehicles">
+            <SidebarNavLink href="/app/vehicles" active={isActive('/app/vehicles')}>
               <CarIcon className="w-4 h-4 mr-3" />
               Veículos
             </SidebarNavLink>
-            <SidebarNavLink href="/app/projects">
+            <SidebarNavLink href="/app/projects" active={isActive('/app/projects')}>
               <DashboardIcon className="w-4 h-4 mr-3" />
               Projetos
             </SidebarNavLink>
-            <SidebarNavLink href="/app/settings">
+            <SidebarNavLink href="/app/settings" active={isActive("/app/settings")}>
               <MixerVerticalIcon className="w-4 h-4 mr-3" />
               Configurações
             </SidebarNavLink>

diff --git a/src/app/app/settings/(main)/_components/profile-card.tsx b/src/app/app/settings/(main)/_components/profile-card.tsx
@@ -1,35 +1,35 @@
-"use client"
-
 import { Session } from "next-auth"
 import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
 import { Input } from "@/components/ui/input"
+import { Label } from "@/components/ui/label"
 
 type ProfileFormProps = {
     defaultValues: Session["user"] | undefined
 }
 
 export function ProfileCard({ defaultValues }: ProfileFormProps) {
     return (
-        <div className="space-y-8 flex flex-col gap-6">
-            <Card>
-                <CardHeader>
-                    <CardTitle>Nome</CardTitle>
-                    <CardDescription>Nome do colaborador</CardDescription>
-                </CardHeader>
-                <CardContent>
-                    <Input readOnly value={defaultValues?.name as string} />
-                </CardContent>
-            </Card>
-            <Card>
-                <CardHeader>
-                    <CardTitle>Email</CardTitle>
-                    <CardDescription>Email do colaborador</CardDescription>
-                </CardHeader>
-                <CardContent>
-                    <Input readOnly value={defaultValues?.email as string} />
-                </CardContent>
-            </Card>
-        </div>
+
+        <Card>
+            <CardHeader className="border-b border-border">
+                <CardTitle>Perfil</CardTitle>
+                <CardDescription>Gerencie as configurações para o seu perfil</CardDescription>
+            </CardHeader>
+            <CardContent>
+                <div className="mt-6">
+                    <div className="space-y-6">
+                        <div className="space-y-1">
+                            <Label>Nome</Label>
+                            <Input readOnly value={defaultValues?.name as string} />
+                        </div>
+                        <div className="space-y-1">
+                            <Label >E-mail</Label>
+                            <Input readOnly value={defaultValues?.email as string} />
+                        </div>
+                    </div>
+                </div>
+            </CardContent>
+        </Card>
 
     )
 }
diff --git a/src/app/app/vehicles/(main)/_components/edit-vehicle-dialog.tsx b/src/app/app/vehicles/(main)/_components/edit-vehicle-dialog.tsx
@@ -0,0 +1,28 @@
+"use client"
+
+import { DialogContent, DialogTrigger } from "@/components/ui/dialog";
+import { Dialog } from "@radix-ui/react-dialog";
+import { useRef } from "react";
+
+type EditVehicleDialogProps = {
+    children?: React.ReactNode,
+    vehicle: {
+        automaker: string
+
+    }
+}
+
+export function EditVehicleDialog({ children, vehicle }: EditVehicleDialogProps) {
+
+    const ref = useRef<HTMLDivElement>(null)
+    return (
+        <Dialog>
+            <DialogTrigger asChild>
+                <div ref={ref}>{children}</div>
+            </DialogTrigger>
+            <DialogContent>
+                <h1>{vehicle.automaker}</h1>
+            </DialogContent>
+        </Dialog>
+    )
+}
diff --git a/src/app/app/vehicles/(main)/_components/vehicle-data-table.tsx b/src/app/app/vehicles/(main)/_components/vehicle-data-table.tsx
@@ -3,8 +3,8 @@
 import * as React from "react"
 import {
     CaretSortIcon,
-    DotsHorizontalIcon,
     PlusIcon,
+    Pencil2Icon
 } from "@radix-ui/react-icons"
 import {
     ColumnDef,
@@ -20,14 +20,6 @@ import {
 } from "@tanstack/react-table"
 
 import { Button } from "@/components/ui/button"
-import {
-    DropdownMenu,
-    DropdownMenuContent,
-    DropdownMenuItem,
-    DropdownMenuLabel,
-    DropdownMenuSeparator,
-    DropdownMenuTrigger,
-} from "@/components/ui/dropdown-menu"
 import { Input } from "@/components/ui/input"
 import {
     Table,
@@ -38,6 +30,7 @@ import {
     TableRow,
 } from "@/components/ui/table"
 import Link from "next/link"
+import { EditVehicleDialog } from "./edit-vehicle-dialog"
 
 type Vehicle = {
     id: number;
@@ -94,7 +87,7 @@ export const columns: ColumnDef<Vehicle>[] = [
         cell: ({ row }) => {
             const vehicle = row.original
 
-            // const handleDeleteTodo = async (todo: Todo) => {
+            // const handleDeleteVehicle = async (todo: Todo) => {
             //     await deleteTodo({
             //         id: todo.id
             //     })
@@ -103,37 +96,36 @@ export const columns: ColumnDef<Vehicle>[] = [
             //         description: "The todo item has been successfully deleted."
             //     })
             // }
-            // const handleToggleDone = async (todo: Todo) => {
-            //     const doneAt = todo.doneAt ? null : new Date()
-            //     await upsertTodo({ id: todo.id, doneAt })
-            //     toast({
-            //         title: "Update Successful",
-            //         description: "The todo item has been successfully updated."
-            //     })
-            // }
             return (
-                <DropdownMenu>
-                    <DropdownMenuTrigger asChild>
-                        <Button variant="link" className="h-8 w-8 p-0">
-                            <span className="sr-only">Open menu</span>
-                            <DotsHorizontalIcon className="h-4 w-4" />
-                        </Button>
-                    </DropdownMenuTrigger>
-                    <DropdownMenuContent align="end">
-                        <DropdownMenuLabel>Actions</DropdownMenuLabel>
-                        <DropdownMenuItem
-                            onClick={() => navigator.clipboard.writeText(vehicle.id.toString())}
-                        >
-                            Copiar ID
-                        </DropdownMenuItem>
-                        <DropdownMenuSeparator />
-                        <DropdownMenuItem
-                        // onClick={() => handleDeleteVehicle(vehicle)}
-                        >
-                            Apagar
-                        </DropdownMenuItem>
-                    </DropdownMenuContent>
-                </DropdownMenu>
+                // <DropdownMenu>
+                //     <DropdownMenuTrigger asChild>
+                //         <Button variant="link" className="h-8 w-8 p-0">
+                //             <span className="sr-only">Open menu</span>
+                //             <DotsHorizontalIcon className="h-4 w-4" />
+                //         </Button>
+                //     </DropdownMenuTrigger>
+                //     <DropdownMenuContent align="end" className="dark:bg-[#1a1a1a]">
+                //         <DropdownMenuLabel>Actions</DropdownMenuLabel>
+                //         <DropdownMenuItem className="gap-2">
+                //             <EditVehicleDialog vehicle={vehicle}>
+                //                 <Pencil2Icon className="w-4 h-4" />
+                //                 Editar
+                //             </EditVehicleDialog>
+                //         </DropdownMenuItem>
+                //         <DropdownMenuSeparator />
+                //         <DropdownMenuItem
+                //         // onClick={() => handleDeleteVehicle(vehicle)}
+                //         >
+
+                //             Apagar
+                //         </DropdownMenuItem>
+                //     </DropdownMenuContent>
+                // </DropdownMenu>
+                <EditVehicleDialog vehicle={vehicle}>
+                    <Button variant="ghost">
+                        <Pencil2Icon className="w-4 h-4" />
+                    </Button>
+                </EditVehicleDialog>
             )
         },
     },

diff --git a/src/app/app/vehicles/(main)/page.tsx b/src/app/app/vehicles/(main)/page.tsx
@@ -6,6 +6,5 @@ export default async function Page() {
     const vehicles = await getVehicles()
     return (
         <VehicleDataTable data={vehicles} />
-
     )
 }
diff --git a/src/app/app/vehicles/new/_components/register-vehicle-form.tsx b/src/app/app/vehicles/new/_components/register-vehicle-form.tsx
@@ -27,7 +27,7 @@ export function RegisterVehicleForm() {
     })
     return (
 
-        <Card className="w-full max-w-5xl ">
+        <Card className="w-full max-w-5xl mx-auto">
             <CardHeader>
                 <CardTitle className="text-2xl">Cadastrar veículo</CardTitle>
                 <CardDescription>Insira as informações corretamente para efetuar o cadastro de um novo veículo.</CardDescription>

diff --git a/src/components/dashboard/sidebar.tsx b/src/components/dashboard/sidebar.tsx
@@ -10,7 +10,7 @@ export function Sidebar({ children, className }: SidebarGenericProps) {
   return (
     <aside
       className={cn([
-        'border-r flex flex-col space-y-6 border-border bg-muted max-h-screen',
+        'border-r border-border flex flex-col space-y-6',
         className,
       ])}
     >

diff --git a/src/components/ui/dialog.tsx b/src/components/ui/dialog.tsx
@@ -38,7 +38,7 @@ const DialogContent = React.forwardRef<
     <DialogPrimitive.Content
       ref={ref}
       className={cn(
-        "fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border bg-background p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg",
+        "dark:bg-[#1a1a1a] fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border bg-background p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg",
         className
       )}
       {...props}