MyClub/DOCS/CONTACT_MANAGEMENT_FIXES.md

Contact Management System Fixes

Issues Fixed

1. ✅ Dropdown Selection (Soutěž/Tým) Not Working

Problem: The category dropdown was using competition aliases instead of contact categories, causing selection to fail.

Solution:

• Updated ContactsAdminPage.tsx to fetch and use ContactCategory data instead of competition aliases
• Changed API call from getCompetitionAliasesPublic() to getContactCategories()
• Updated dropdown to map categories correctly with cat.id and cat.name
• Changed label from "Soutěž / Tým" to "Kategorie" for clarity

Files Modified:

• frontend/src/pages/admin/ContactsAdminPage.tsx

2. ✅ Image Preview Not Working

Problem: Image URLs were relative paths, not resolving to the backend server (port 8080).

Solution:

• Created new utility imageUtils.ts with getImageUrl() function
• This function converts relative image URLs to absolute URLs by prefixing the backend URL
• Applied to both admin preview and table display in ContactsAdminPage
• Applied to frontend display in ContactsSection

Files Created:

• frontend/src/utils/imageUtils.ts

Files Modified:

• frontend/src/pages/admin/ContactsAdminPage.tsx - Added image URL resolution for preview and table
• frontend/src/components/home/ContactsSection.tsx - Added image URL resolution for frontend display

3. ✅ Edit/Delete Returning 500 Error (Undefined ID)

Problem: Contact IDs were undefined when editing or deleting, resulting in API calls to /admin/contacts/undefined.

Root Cause: The Contact and ContactCategory models used gorm.Model which should provide the ID field, but the JSON serialization wasn't explicitly configured.

Solution:

• Replaced gorm.Model with explicit field definitions in both Contact and ContactCategory structs
• Added explicit ID uint field with json:"id" tag
• Added CreatedAt, UpdatedAt, and DeletedAt fields with proper JSON tags

Files Modified:

• internal/models/models.go - Updated Contact and ContactCategory structs

4. ✅ Image Not Showing on Homepage

Problem: Contact images weren't displaying on the frontpage because URLs weren't resolved to the backend.

Solution:

• Applied getImageUrl() helper to ContactsSection component
• Now images are properly displayed in both categorized and uncategorized contact sections

Files Modified:

• frontend/src/components/home/ContactsSection.tsx

Testing Checklist

Backend

• Backend compiles without errors
• Contact CRUD operations work (Create, Read, Update, Delete)
• Contact categories load correctly
• API returns contact IDs in JSON response
• Image uploads return correct relative paths

Frontend

• Frontend compiles without errors
• Category dropdown populates with contact categories
• Category selection works and persists
• Image upload works
• Image preview displays in admin modal
• Contact creation succeeds
• Contact table displays images correctly
• Contact edit opens modal with correct data
• Contact update succeeds
• Contact delete succeeds
• Homepage displays contacts with images
• Categories display correctly in table

API Endpoints Used

Admin Endpoints (require authentication)

• GET /api/v1/admin/contacts - List all contacts
• POST /api/v1/admin/contacts - Create contact
• PUT /api/v1/admin/contacts/:id - Update contact
• DELETE /api/v1/admin/contacts/:id - Delete contact
• GET /api/v1/admin/contacts/categories - List all categories
• POST /api/v1/admin/contacts/categories - Create category
• PUT /api/v1/admin/contacts/categories/:id - Update category
• DELETE /api/v1/admin/contacts/categories/:id - Delete category

Public Endpoints

• GET /api/v1/contacts - Get public contacts (grouped by category)
• GET /api/v1/contacts/categories - Get public contact categories

How to Test

1. Restart the backend to load the updated models:

   # Stop current backend if running
   # Then start:
   go run main.go
   

2. Rebuild and start the frontend:

   cd frontend
   npm run build
   npm start
   

3. Test Contact Creation:

   • Navigate to Admin > Správa kontaktů
   • Click "Přidat kontakt"
   • Fill in name (required)
   • Select a category from dropdown (should show categories, not competitions)
   • Upload an image
   • Verify image preview appears
   • Save contact
   • Verify contact appears in table with image

4. Test Contact Edit:

   • Click edit icon on any contact
   • Verify modal opens with correct data
   • Verify image preview shows
   • Modify fields
   • Save
   • Verify changes persist

5. Test Contact Delete:

   • Click delete icon on any contact
   • Confirm deletion
   • Verify contact is removed

6. Test Frontend Display:

   • Navigate to homepage
   • Scroll to Kontakt section
   • Verify contacts display with images
   • Verify categories are shown correctly

Notes

• Image URLs are now automatically converted from relative to absolute URLs
• Contact and ContactCategory models now have explicit ID fields for reliable JSON serialization
• Category dropdown is now properly connected to the contact categories system
• All CRUD operations should now work correctly with proper ID handling