sdq

wawerks · Dec 19, 2024 · 552b86a · 552b86a
1 parent 85d1636
commit 552b86a
Show file tree

Hide file tree

Showing 2 changed files with 43 additions and 19 deletions.
diff --git a/web-app/app/Http/Controllers/FoundItemController.php b/web-app/app/Http/Controllers/FoundItemController.php
@@ -29,14 +29,6 @@ public function create()
      */
     public function store(Request $request)
     {
-        $imageUrl = null;
-        if ($request->hasFile('image_url')) {
-            $image = $request->file('image_url');
-            $filename = time() . '.' . $image->extension();
-            $image->move(public_path('assets/img'), $filename);
-            $imageUrl = 'assets/img/' . $filename;
-        }
-
         $request->validate([
             'found_date' => 'required|date',
             'item_name' => 'required|string|max:255',
@@ -48,15 +40,31 @@ public function store(Request $request)
             'user_id' => 'required|exists:users,id',
         ]);
 
+        $validated = $request->validated();
+
+        // Handle image upload
+        $imageUrl = null;
+        if ($request->hasFile('image_url')) {
+            $file = $request->file('image_url');
+            $filename = 'item_' . time() . '.' . $file->getClientOriginalExtension();
+
+            // Store directly in the public directory
+            $file->move(public_path('assets/items'), $filename);
+
+            // Set the URL path relative to public directory
+            $imageUrl = 'assets/items/' . $filename;
+        }
+
+        // Create the found item
         $foundItem = FoundItem::create([
-            'found_date' => $request->input('found_date'),
-            'item_name' => $request->input('item_name'),
-            'facebook_link' => $request->input('facebook_link'),
-            'contact_number' => $request->input('contact_number'),
-            'description' => $request->input('description'),
-            'category' => $request->input('category'),
-            'location' => $request->input('location'),
-            'user_id' => $request->input('user_id'),
+            'found_date' => $validated['found_date'],
+            'item_name' => $validated['item_name'],
+            'facebook_link' => $validated['facebook_link'],
+            'contact_number' => $validated['contact_number'],
+            'description' => $validated['description'],
+            'category' => $validated['category'],
+            'location' => $validated['location'],
+            'user_id' => $validated['user_id'],
             'image_url' => $imageUrl,
         ]);
 

diff --git a/web-app/resources/js/Components/ClaimedItem.vue b/web-app/resources/js/Components/ClaimedItem.vue
@@ -26,7 +26,12 @@
                 <div class="flex items-center space-x-6">
                     <!-- Item Image -->
                     <div class="w-24 h-24 flex-shrink-0 rounded-lg overflow-hidden">
-                        <img :src="getImageUrl(item.image_url)" :alt="item.item_name" class="w-full h-full object-cover" />
+                        <img 
+                            :src="item.image_url && item.image_url.startsWith('/') ? item.image_url : '/' + item.image_url" 
+                            :alt="item.item_name" 
+                            class="w-full h-full object-cover"
+                            @error="handleImageError"
+                        />
                     </div>
 
                     <!-- Item Details -->
@@ -122,6 +127,13 @@ const filteredClaims = computed(() => {
   return claims.value.filter(claim => claim.claim_status.toLowerCase() === currentFilter.value);
 });
 
+// Handle image loading error
+const handleImageError = (e) => {
+    console.error('Error loading image:', e.target.src);
+    // Set a fallback image or handle the error as needed
+    e.target.src = '/assets/default-item.png'; // Make sure you have this fallback image
+};
+
 // Helper function to get correct image URL
 const getImageUrl = (url) => {
     if (!url) return '';
@@ -177,15 +189,19 @@ const fetchItems = async () => {
         const items = foundItemsData.map(foundItem => {
             const claim = claimsData.find(c => c.item_id === foundItem.id);
             if (claim) {
+                // Ensure image_url has leading slash
+                const imageUrl = foundItem.image_url && !foundItem.image_url.startsWith('/') 
+                    ? '/' + foundItem.image_url 
+                    : foundItem.image_url;
+
                 return {
                     ...foundItem,
                     claim_id: claim.id,
                     claim_status: claim.claim_status,
                     proof_of_ownership: claim.proof_of_ownership,
                     submission_date: claim.submission_date,
                     user_name: usersMap[claim.user_id] || 'Unknown',
-                    // Ensure image_url is properly formatted
-                    image_url: getImageUrl(foundItem.image_url)
+                    image_url: imageUrl
                 };
             }
             return null;