75 lines
2.6 KiB
Rust
75 lines
2.6 KiB
Rust
use jl_types::{domain::{media::Media}, dto::project_card::ProjectCardDto};
|
|
use thousands::Separable;
|
|
use yew::prelude::*;
|
|
use yew_router::prelude::use_navigator;
|
|
|
|
use crate::routes::main_router::Route;
|
|
|
|
|
|
#[function_component(ProjectCard)]
|
|
pub fn project_card(props: &ProjectCardProps) -> Html {
|
|
let navigator = use_navigator().unwrap();
|
|
let project_id = props.project.id.clone();
|
|
let project_view_cb = Callback::from(move |_|{
|
|
navigator.push(&Route::Details { project_id });
|
|
});
|
|
|
|
// Card properties
|
|
let cover_image_url;
|
|
if let Some(first_media) = props.project.media.media_list.get(0) {
|
|
cover_image_url = match first_media {
|
|
Media::Photo(url) => url.clone(),
|
|
Media::Video(_) => String::new(),
|
|
}
|
|
} else {
|
|
cover_image_url = String::new()
|
|
}
|
|
|
|
let project_title = format!("{} en {}, {}", props.project.project_type, props.project.district, props.project.city);
|
|
|
|
let project_price = format!("Desde ${} USD", match props.project.starts_from {
|
|
Some(price) => {
|
|
let price_separated = price.separate_with_commas();
|
|
if price_separated.contains(".") {
|
|
price_separated
|
|
} else {
|
|
format!("{price_separated}.00")
|
|
}
|
|
},
|
|
None => "0.00".into()
|
|
});
|
|
|
|
let project_condition = props.project.project_condition.to_string();
|
|
|
|
let project_est_finish_date = props.project.finish_date.format("%m/%Y");
|
|
//let project_location_written;
|
|
|
|
|
|
html!{
|
|
<div class={"project-listing-card"} onclick={project_view_cb}>
|
|
<img src={cover_image_url} alt={"project image"} class={"project-search-result-card-picture"}/>
|
|
|
|
<div class={"project-search-result-card-title"}>
|
|
{project_title}
|
|
</div>
|
|
<div class={"project-search-result-card-price"}>
|
|
{project_price}
|
|
</div>
|
|
<div class={"project-search-result-card-details-container"}>
|
|
<div class={"project-search-result-card-details-item"}>
|
|
<i class="fa-solid fa-hand-holding-hand"></i>
|
|
<div>{project_condition}</div>
|
|
</div>
|
|
<div class={"project-search-result-card-details-item"}>
|
|
<i class="fa-regular fa-calendar-check"></i>
|
|
<div>{format!("Entrega Est: {}", project_est_finish_date)}</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
}
|
|
}
|
|
|
|
#[derive(Properties, PartialEq, PartialOrd)]
|
|
pub struct ProjectCardProps {
|
|
pub project: ProjectCardDto
|
|
} |