jl-frontend/src/components/project_card.rs

76 lines
2.6 KiB
Rust
Raw Normal View History

use jl_types::{domain::{media::Media}, dto::project_card::ProjectCardDto};
use stylist::css;
use thousands::Separable;
use yew::prelude::*;
2023-03-16 17:16:22 +00:00
use yew_router::prelude::use_navigator;
use crate::routes::main_router::Route;
#[function_component(ProjectCard)]
2023-03-20 20:37:16 +00:00
pub fn project_card(props: &ProjectCardProps) -> Html {
2023-03-16 17:16:22 +00:00
let navigator = use_navigator().unwrap();
2023-03-20 20:37:16 +00:00
let project_id = props.project.id.clone();
2023-03-16 17:16:22 +00:00
let project_view_cb = Callback::from(move |_|{
2023-03-20 20:37:16 +00:00
navigator.push(&Route::Details { project_id });
2023-03-16 17:16:22 +00:00
});
// Card properties
2023-03-20 20:37:16 +00:00
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 => "N/A".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}>
2023-03-20 20:37:16 +00:00
<img src={cover_image_url} alt={"project image"} class={"project-search-result-card-picture"}/>
2023-03-16 17:16:22 +00:00
<div class={"project-search-result-card-title"}>
{project_title}
2023-03-16 17:16:22 +00:00
</div>
<div class={"project-search-result-card-price"}>
{project_price}
2023-03-16 17:16:22 +00:00
</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>
2023-03-16 17:16:22 +00:00
</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>
2023-03-16 17:16:22 +00:00
</div>
</div>
</div>
}
2023-03-20 20:37:16 +00:00
}
#[derive(Properties, PartialEq, PartialOrd)]
2023-03-20 20:37:16 +00:00
pub struct ProjectCardProps {
pub project: ProjectCardDto
}