product price changes

app/Livewire/Product/Create.php

@@ -34,7 +34,7 @@ public function create()
             $product = Product::create([
                 'name' => $this->name,
                 'description' => $this->description,
-                'price' => $this->price,
+                'price' => $this->price * 100,
                 'image' => $image,
             ]);
 

app/Livewire/Product/Show.php

@@ -3,12 +3,65 @@
 namespace App\Livewire\Product;
 
 use App\Models\Product;
+use Illuminate\Support\Number;
 use Illuminate\View\View;
+use Livewire\Attributes\Validate;
 use Livewire\Component;
+use Livewire\WithFileUploads;
 
 class Show extends Component
 {
     public Product $product;
+    use WithFileUploads;
+
+    #[Validate('required|string|max:255')]
+    public string $name = '';
+
+    #[Validate('required')]
+    public string $description = '';
+
+    #[Validate('required')]
+    public string $price = '';
+
+    #[Validate('nullable|image|max:1024')]
+    public $image = '';
+
+    public function mount()
+    {
+        $this->name = $this->product->name;
+        $this->description = $this->product->description;
+        $this->price = $this->product->price / 100;
+    }
+
+    public function update()
+    {
+        $this->validate();
+
+        try {
+            $image = $this->image ? $this->image->store('products', 'public') : $this->product->image;
+
+            $this->product->update([
+                'name' => $this->name,
+                'description' => $this->description,
+                'price' => $this->price * 100,
+                'image' => $image,
+            ]);
+
+            session()->flash('flash.type', 'success');
+            session()->flash('flash.title', $this->name.' Updated');
+            session()->flash('flash.message', 'Product has been successfully updated.');
+
+            return redirect()->route('products.show', $this->product);
+        } catch (\Exception $e) {
+            $this->addError('name', $e->getMessage());
+
+            session()->flash('flash.type', 'error');
+            session()->flash('flash.title', 'Product Update Failed');
+            session()->flash('flash.message', 'There was an error updating the product.');
+
+            return redirect()->back();
+        }
+    }
 
     public function render(): View
     {

app/Models/Product.php

@@ -2,6 +2,7 @@
 
 namespace App\Models;
 
+use Attribute;
 use Illuminate\Database\Eloquent\Factories\HasFactory;
 use Illuminate\Database\Eloquent\Model;
 use Illuminate\Database\Eloquent\Relations\BelongsTo;
@@ -24,7 +25,7 @@ class Product extends Model
     ];
 
     protected $casts = [
-        'price' => 'float',
+        'price' => 'integer',
     ];
 
     public function user(): BelongsTo
@@ -45,8 +46,8 @@ protected static function boot()
         });
     }
 
-    public function getPriceAttribute(): string
+    public function getFormattedPriceAttribute(): string
     {
-        return Number::currency($this->attributes['price']);
+        return number_format($this->price / 100, 2);
     }
 }

database/migrations/2024_04_24_013252_create_products_table.php

@@ -16,7 +16,7 @@ public function up(): void
             $table->string('name');
             $table->string('slug');
             $table->string('description');
-            $table->string('price');
+            $table->integer('price');
             $table->string('image')->nullable();
             $table->softDeletes();
             $table->timestamps();

resources/views/livewire/product/create.blade.php

@@ -18,7 +18,12 @@
                 </div>
                 <div>
                     <x-input-label for="price" :value="__('Product Price')" />
-                    <x-text-input wire:model="price" id="create_product_price" name="price" type="text" class="mt-1 block w-full" autocomplete="price" />
+                    <div class="relative mt-1 rounded-md shadow-sm">
+                        <div class="pointer-events-none absolute inset-y-0 left-0 flex items-center pl-3">
+                            <span class="text-gray-500 sm:text-sm">$</span>
+                        </div>
+                        <input type="text" wire:model="price" name="price" id="price" class="block w-full rounded-md border-0 py-1.5 pl-7 pr-12 text-gray-900 ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-indigo-600 sm:text-sm sm:leading-6" placeholder="0.00" aria-describedby="price-currency">
+                    </div>
                     <x-input-error :messages="$errors->get('price')" class="mt-2" />
                 </div>
                 <div>
@@ -48,3 +53,7 @@
     </div>
 
 </div>
+
+@assets
+<script defer src="https://cdn.jsdelivr.net/npm/@alpinejs/[email protected]/dist/cdn.min.js"></script>
+@endassets

resources/views/livewire/product/index-item.blade.php

@@ -1,6 +1,6 @@
 <tr class="text-neutral-800">
     <td class="px-5 py-4 text-sm font-medium whitespace-nowrap">{{ $product->name }}</td>
-    <td class="px-5 py-4 text-sm whitespace-nowrap">{{ $product->price }}</td>
+    <td class="px-5 py-4 text-sm whitespace-nowrap">${{ $product->formattedPrice }}</td>
     <td class="px-5 py-4 text-sm whitespace-nowrap">
         @if($product->image)
             <img class="w-12 h-12 rounded-full" src="{{ $product->image }}" alt="">

resources/views/livewire/product/show.blade.php

@@ -5,4 +5,53 @@
         </h2>
     </x-slot>
 
+    <div class="py-12">
+        <div class="max-w-3xl mx-auto sm:px-6 lg:px-8">
+            <form wire:submit.prevent="update" class="space-y-6">
+                <div>
+                    <x-input-label for="name" :value="__('Product Name')" />
+                    <x-text-input wire:model="name" id="create_product_name" name="name" type="text" class="mt-1 block w-full" autocomplete="name" />
+                    <x-input-error :messages="$errors->get('name')" class="mt-2" />
+                </div>
+                <div>
+                    <x-input-label for="price" :value="__('Product Price')" />
+{{--                    <x-text-input wire:model="price" id="create_product_price" name="price" type="text" class="mt-1 block w-full" autocomplete="price" />--}}
+                    <div class="relative mt-1 rounded-md shadow-sm">
+                        <div class="pointer-events-none absolute inset-y-0 left-0 flex items-center pl-3">
+                            <span class="text-gray-500 sm:text-sm">$</span>
+                        </div>
+                        <input type="text" wire:model="price" x-mask:dynamic="$money($input)" name="price" id="price" class="block w-full rounded-md border-0 py-1.5 pl-7 pr-12 text-gray-900 ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-indigo-600 sm:text-sm sm:leading-6" placeholder="0.00" aria-describedby="price-currency">
+                    </div>
+                    <x-input-error :messages="$errors->get('price')" class="mt-2" />
+                </div>
+                <div>
+                    <x-input-label for="description" :value="__('Product Description')" />
+                    <textarea wire:model="description" rows="4" name="comment" id="comment" class="mt-1 block w-full rounded-md border-0 py-1.5 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-indigo-600 sm:text-sm sm:leading-6"></textarea>
+                    <x-input-error :messages="$errors->get('description')" class="mt-2" />
+                </div>
+                <div>
+                    <div class="mt-2 flex items-center gap-x-3">
+                        @if($image)
+                            <img src="{{ $image->temporaryUrl() }}" alt="Product Image" class="w-12 h-12 rounded-full">
+                        @else
+                            <svg class="h-12 w-12 text-gray-300" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true">
+                                <path fill-rule="evenodd" d="M18.685 19.097A9.723 9.723 0 0021.75 12c0-5.385-4.365-9.75-9.75-9.75S2.25 6.615 2.25 12a9.723 9.723 0 003.065 7.097A9.716 9.716 0 0012 21.75a9.716 9.716 0 006.685-2.653zm-12.54-1.285A7.486 7.486 0 0112 15a7.486 7.486 0 015.855 2.812A8.224 8.224 0 0112 20.25a8.224 8.224 0 01-5.855-2.438zM15.75 9a3.75 3.75 0 11-7.5 0 3.75 3.75 0 017.5 0z" clip-rule="evenodd"></path>
+                            </svg>
+                        @endif
+                        <label for="image" class="rounded-md bg-white px-2.5 py-1.5 text-sm font-semibold text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 hover:bg-gray-50">
+                            <span>Change</span>
+                            <input type="file" id="image" name="image" wire:model="image" class="sr-only">
+                        </label>
+                    </div>
+                    <x-input-error :messages="$errors->get('image')" class="mt-2" />
+                </div>
+                <x-primary-button>Update</x-primary-button>
+            </form>
+        </div>
+    </div>
+
 </div>
+
+@assets
+<script defer src="https://cdn.jsdelivr.net/npm/@alpinejs/[email protected]/dist/cdn.min.js"></script>
+@endassets

tests/Feature/Product/EditTest.php

@@ -0,0 +1,24 @@
+<?php
+
+
+use App\Models\Product;
+
+test('guest', function () {
+    $product = Product::factory()->create();
+
+    $response = $this->get(route('products.show', $product));
+
+    $response->assertRedirect(route('login'));
+});
+
+test('auth', function () {
+$product = Product::factory()->create();
+
+    $this->actingAs($product->user);
+
+    $response = $this->get(route('products.show', $product));
+
+    $response->assertOk()->assertSee($product->name);
+
+    $response->assertSeeLivewire('product.show');
+});

tests/Unit/ExampleTest.php → tests/Unit/Livewire/Product/EditTest.php

@@ -1,5 +1,5 @@
 <?php
 
-test('that true is true', function () {
+test('', function () {
     expect(true)->toBeTrue();
 });