Browsing Housing

@Component({
  selector: 'app-room',
  templateUrl: './room.component.html'
})
export class RoomComponent implements OnInit {
  houses: any[] = [];
  currentPage = -1;
  pageSize = 6;
  isLoading = false;
  hasMore = true;

  ngOnInit(): void {
    this.loadHouses();
  }
}

loadHouses(): void {
  if (this.isLoading || !this.hasMore) return;

  this.isLoading = true;
  this.currentPage++;

  this.houseService.getRooms(this.currentPage, this.pageSize).subscribe({
    next: (response) => {
      // Append new properties to existing list
      this.houses = [...this.houses, ...response.content];
      
      // Check if more pages are available
      this.hasMore = !response.last;
      this.isLoading = false;
    },
    error: (err) => {
      console.error('Error loading houses:', err);
      this.isLoading = false;
    }
  });
}

# Get first page with 6 items
curl http://localhost:8080/v1/api/houses?page=0&size=6

# Response format
{
  "content": [...],      // Array of housing items
  "totalElements": 42,   // Total number of houses
  "totalPages": 7,       // Total number of pages
  "size": 6,            // Items per page
  "number": 0,          // Current page number
  "last": false         // Is this the last page?
}

interface SearchParams {
  tags?: string;      // Comma-separated tag names
  stars?: number;     // Minimum star rating (1-5)
}

onSearchSubmit(): void {
  this.currentPage = 1;
  this.houses = [];
  
  // Call search with both parameters
  this.houseService.searchHouses(
    this.searchParams.tags || '', 
    this.searchParams.stars || 1
  ).subscribe({
    next: (houses) => {
      this.houses = houses;
    },
    error: (error) => {
      console.error('Search error:', error);
    }
  });
}

# Search for hotels with pool and WiFi, minimum 4 stars
curl "http://localhost:8080/v1/api/query?tags=Pool,WiFi&stars=4"

# Search by stars only
curl "http://localhost:8080/v1/api/query?stars=5"

# Search by tags only
curl "http://localhost:8080/v1/api/query?tags=Parking,Breakfast"

// Navigate to room details page
this.router.navigate(['/room', houseCode]);

loadHouseDetails(code: number): void {
  this.housingService.getSpecificRoom(code).subscribe({
    next: (house: any) => {
      this.house = {
        ...house,
        image: `${environment.baseUrlApi}/houses/${code}/image`
      };
    },
    error: (err: any) => {
      console.error('Error loading house details:', err);
    }
  });
}

# Get details for house with code 5
curl http://localhost:8080/v1/api/houses/5 \
  -H "Authorization: Bearer YOUR_JWT_TOKEN"

public class HousingDTO {
    @JsonIgnore
    private String imageBase64; // Not included in JSON response
    
    private transient MultipartFile image;
    
    public String convertToBase64(MultipartFile image) throws IOException {
        String base64Image = Base64.getEncoder().encodeToString(image.getBytes());
        return base64Image;
    }
}

// Construct image URL in frontend
const imageUrl = `${environment.baseUrlApi}/houses/${code}/image`;

<!-- Display in template -->
<img [src]="house.image" [alt]="house.name" />

@PostMapping
@SecurityRequirement(name = "JWT")
public ResponseEntity<HousingDTO> createHouse(@RequestBody HousingDTO house) {
    HousingDTO createdHouse = housingService.createHouse(house);
    return ResponseEntity.status(HttpStatus.CREATED).body(createdHouse);
}

@GetMapping("/{id}/tags")
@SecurityRequirement(name = "JWT")
public ResponseEntity<Set<TagDTO>> getTagsById(@PathVariable int id) {
    Set<TagDTO> tags = housingService.getTagsById(id);
    return ResponseEntity.ok(tags);
}

curl http://localhost:8080/v1/api/houses/5/tags \
  -H "Authorization: Bearer YOUR_JWT_TOKEN"

# Response
[
  { "id": 1, "name": "Pool" },
  { "id": 2, "name": "WiFi" },
  { "id": 3, "name": "Parking" }
]