Puppy Update Frontend

Author: simonswiss

app/Http/Controllers/PuppyController.php

@@ -123,4 +123,12 @@ public function destroy(Request $request, Puppy $puppy)
             ->route('home', ['page' => 1])
             ->with('success', 'Puppy deleted successfully!');
     }
+
+    // ------------------------------
+    // Update
+    // ------------------------------
+    public function update(Request $request, Puppy $puppy)
+    {
+        dd('Hello from the update method!');
+    }
 }

app/Http/Resources/PuppyResource.php

@@ -25,6 +25,7 @@ public function toArray(Request $request): array
             'user' => UserResource::make($this->whenLoaded('user')),
             'can' => [
                 'delete' => $request->user()?->can('delete', $this->resource) ?? false,
+                'update' => $request->user()?->can('update', $this->resource) ?? false,
             ]
         ];
     }

app/Policies/PuppyPolicy.php

@@ -37,7 +37,7 @@ public function create(User $user): bool
      */
     public function update(User $user, Puppy $puppy): bool
     {
-        return false;
+        return $puppy->user_id === $user->id;
     }
 
     /**
@@ -63,4 +63,9 @@ public function forceDelete(User $user, Puppy $puppy): bool
     {
         return false;
     }
+
+    protected function isOwner(User $user, Puppy $puppy): bool
+    {
+        return $puppy->user_id === $user->id;
+    }
 }

resources/js/components/PuppiesList.tsx

@@ -2,6 +2,7 @@ import { PaginatedResponse, type Puppy } from '../types';
 import { LikeToggle } from './LikeToggle';
 import { Pagination } from './pagination';
 import { PuppyDelete } from './puppy-delete';
+import { PuppyUpdate } from './puppy-update';
 
 export function PuppiesList({ puppies }: { puppies: PaginatedResponse<Puppy> }) {
     return (
@@ -23,7 +24,15 @@ type PuppyCardProps = {
 function PuppyCard({ puppy }: PuppyCardProps) {
     return (
         <li key={puppy.id} className="relative overflow-clip rounded-lg bg-white shadow-md ring ring-black/5 hover:-translate-y-0.5">
-            <div className="absolute top-2 right-2">{puppy.can.delete && <PuppyDelete puppy={puppy} />}</div>
+            {/* Only for puppy owners */}
+            {puppy.can.update && (
+                <div className="absolute top-2 right-2">
+                    <div className="flex items-center gap-2">
+                        <PuppyUpdate puppy={puppy} />
+                        <PuppyDelete puppy={puppy} />
+                    </div>
+                </div>
+            )}
             <img className="aspect-square object-cover" alt={puppy.name} src={puppy.imageUrl} />
             <div className="gap flex items-center justify-between p-4 text-sm">
                 <div className="flex items-center gap-2">

resources/js/components/puppy-update.tsx

@@ -0,0 +1,91 @@
+import { Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogTitle, DialogTrigger } from '@/components/ui/dialog';
+import { Puppy } from '@/types';
+import { useForm } from '@inertiajs/react';
+import clsx from 'clsx';
+import { EditIcon, LoaderCircle } from 'lucide-react';
+import { useState } from 'react';
+import { Button } from './ui/button';
+import { Input } from './ui/input';
+import { Label } from './ui/label';
+
+export function PuppyUpdate({ puppy }: { puppy: Puppy }) {
+    const { data, setData, errors, put, processing } = useForm({
+        name: puppy.name,
+        trait: puppy.trait,
+        image: null as File | null,
+    });
+
+    const [open, setOpen] = useState(false);
+
+    return (
+        <Dialog open={open} onOpenChange={setOpen}>
+            <DialogTrigger asChild>
+                <Button className="group/update bg-background/30 hover:bg-background" size="icon" variant="secondary" aria-label="Update puppy">
+                    <EditIcon className="size-4" />
+                </Button>
+            </DialogTrigger>
+            <DialogContent>
+                <DialogTitle>Edit {puppy.name}</DialogTitle>
+                <DialogDescription>Make changes to your puppy’s information below.</DialogDescription>
+                <form
+                    className="space-y-6"
+                    onSubmit={(e) => {
+                        e.preventDefault();
+                        // TODO
+                        put(route('puppies.update', puppy.id));
+                    }}
+                >
+                    <Label htmlFor="name">Name</Label>
+                    <Input
+                        id="name"
+                        className="mt-1 block w-full"
+                        value={data.name}
+                        onChange={(e) => setData('name', e.target.value)}
+                        required
+                        autoComplete="name"
+                        placeholder="Full name"
+                    />
+                    {errors.name && <p className="mt-1 text-xs text-red-500">{errors.name}</p>}
+
+                    <Label htmlFor="trait">Personality trait</Label>
+                    <Input
+                        id="trait"
+                        className="mt-1 block w-full"
+                        value={data.trait}
+                        onChange={(e) => setData('trait', e.target.value)}
+                        required
+                        placeholder="Personality trait"
+                    />
+
+                    {errors.trait && <p className="mt-1 text-xs text-red-500">{errors.trait}</p>}
+
+                    <Label htmlFor="image">Change image</Label>
+                    <Input
+                        id="image"
+                        type="file"
+                        className="mt-1 block w-full"
+                        onChange={(e) => setData('image', e.target.files ? e.target.files[0] : null)}
+                        placeholder="Profile picture"
+                    />
+
+                    {errors.image && <p className="mt-1 text-xs text-red-500">{errors.image}</p>}
+
+                    <DialogFooter className="gap-2">
+                        <DialogClose asChild>
+                            <Button variant="secondary">Cancel</Button>
+                        </DialogClose>
+
+                        <Button className="relative disabled:opacity-100" disabled={processing} type="submit">
+                            {processing && (
+                                <div className="absolute inset-0 grid place-items-center">
+                                    <LoaderCircle className="size-5 animate-spin stroke-primary-foreground" />
+                                </div>
+                            )}
+                            <span className={clsx(processing && 'invisible')}>Update</span>
+                        </Button>
+                    </DialogFooter>
+                </form>
+            </DialogContent>
+        </Dialog>
+    );
+}

resources/js/types/index.d.ts

@@ -56,6 +56,7 @@ export interface Puppy {
     likedBy: User['id'][];
     can: {
         delete: boolean;
+        update: boolean;
     };
 }
 

routes/web.php

@@ -12,6 +12,8 @@
         ->name('puppies.like');
     Route::post('puppies', [PuppyController::class, 'store'])
         ->name('puppies.store');
+    Route::put('puppies/{puppy}', [PuppyController::class, 'update'])
+        ->name('puppies.update');
     Route::delete('puppies/{puppy}', [PuppyController::class, 'destroy'])
         ->name('puppies.destroy');