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
- [x] 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:
   ```bash
   # Stop current backend if running
   # Then start:
   go run main.go
   ```

2. **Rebuild and start the frontend**:
   ```bash
   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