Finished unit description, changed feature to a component and added it all over the DetailsPage
This commit is contained in:
parent
a4229ff451
commit
42a97376a0
|
@ -71,7 +71,6 @@
|
||||||
border-radius: 5px;
|
border-radius: 5px;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
/* Fading animation */
|
/* Fading animation */
|
||||||
.fade {
|
.fade {
|
||||||
animation-name: fade;
|
animation-name: fade;
|
||||||
|
|
|
@ -204,3 +204,24 @@ Divide the Details page into 3 main sections:
|
||||||
background-color: rgba(128, 128, 128, 0.151);
|
background-color: rgba(128, 128, 128, 0.151);
|
||||||
border-radius: 20px;
|
border-radius: 20px;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.details-body-units-description {
|
||||||
|
width: 100%;
|
||||||
|
font-size: 14px;
|
||||||
|
font-family: Inter;
|
||||||
|
line-height: 30px;
|
||||||
|
white-space: pre-line;
|
||||||
|
color: rgba(34, 34, 34, 0.873);
|
||||||
|
}
|
||||||
|
|
||||||
|
.details-body-unit-features {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
justify-content: stretch;
|
||||||
|
align-items: start;
|
||||||
|
gap: 25px;
|
||||||
|
|
||||||
|
width: 100%;
|
||||||
|
height: 200px;
|
||||||
|
margin-bottom: 60px;
|
||||||
|
}
|
||||||
|
|
|
@ -0,0 +1,30 @@
|
||||||
|
use yew::prelude::*;
|
||||||
|
|
||||||
|
#[function_component(FeatureItem)]
|
||||||
|
pub fn feature_item(props: &FeatureItemProps) -> Html {
|
||||||
|
let props = props.clone();
|
||||||
|
html!{
|
||||||
|
<div class={"details-body-feature-item"}>
|
||||||
|
<div class={"details-body-feature-item-icon-container"}>
|
||||||
|
<i class={props.icon}></i>
|
||||||
|
</div>
|
||||||
|
<div class={"details-body-feature-item-text-container"}>
|
||||||
|
<div class={"details-body-feature-item-text-title"}>
|
||||||
|
{props.title}
|
||||||
|
</div>
|
||||||
|
<div class={"details-body-feature-item-text-subtitle"}>
|
||||||
|
{
|
||||||
|
props.subtitle
|
||||||
|
}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
#[derive(Properties, PartialEq, Clone)]
|
||||||
|
pub struct FeatureItemProps {
|
||||||
|
pub title: String,
|
||||||
|
pub subtitle: String,
|
||||||
|
pub icon: String,
|
||||||
|
}
|
|
@ -3,3 +3,4 @@ pub mod search_filter;
|
||||||
pub mod project_card;
|
pub mod project_card;
|
||||||
pub mod media_slideshow;
|
pub mod media_slideshow;
|
||||||
pub mod floating_widget;
|
pub mod floating_widget;
|
||||||
|
pub mod feature;
|
|
@ -1,9 +1,10 @@
|
||||||
use jl_types::{dto::listing::Listing, domain::unit_type::UnitType};
|
use jl_types::{dto::listing::Listing, domain::unit_type::UnitType};
|
||||||
use log::{error, info};
|
use log::{error, info};
|
||||||
|
use thousands::Separable;
|
||||||
use uuid::Uuid;
|
use uuid::Uuid;
|
||||||
use yew::prelude::*;
|
use yew::prelude::*;
|
||||||
|
|
||||||
use crate::{components::{nav_bar::NavigationBar, media_slideshow::MediaSlideshow, floating_widget::FloatingWidget}, api::backend::get_project_listing};
|
use crate::{components::{nav_bar::NavigationBar, media_slideshow::MediaSlideshow, floating_widget::FloatingWidget, feature::FeatureItem}, api::backend::get_project_listing};
|
||||||
|
|
||||||
#[function_component(DetailsPage)]
|
#[function_component(DetailsPage)]
|
||||||
pub fn details_page(props: &DetailsPageProps) -> Html {
|
pub fn details_page(props: &DetailsPageProps) -> Html {
|
||||||
|
@ -34,15 +35,16 @@ pub fn details_page(props: &DetailsPageProps) -> Html {
|
||||||
let project_title = format!("{} en {}, {}", &listing.project.project_type, &listing.location.district, &listing.location.city);
|
let project_title = format!("{} en {}, {}", &listing.project.project_type, &listing.location.district, &listing.location.city);
|
||||||
//let project_description = &listing.project.description;
|
//let project_description = &listing.project.description;
|
||||||
let project_media_list = listing.project.media.media_list;
|
let project_media_list = listing.project.media.media_list;
|
||||||
let project_type = &listing.project.project_type.to_string();
|
let project_type = listing.project.project_type.to_string();
|
||||||
let project_condition = &listing.project.project_condition.to_string();
|
let project_condition = listing.project.project_condition.to_string();
|
||||||
let project_est_finish_date = format!("{} {}", listing.project.finish_date.format("%m/%Y"), if listing.project.finish_date.timestamp_millis() <= chrono::Utc::now().timestamp_millis() {
|
let project_est_finish_date = format!("{} {}", listing.project.finish_date.format("%m/%Y"), if listing.project.finish_date.timestamp_millis() <= chrono::Utc::now().timestamp_millis() {
|
||||||
"(Listo)"
|
"(Listo)"
|
||||||
} else {""});
|
} else {""});
|
||||||
let project_floors = &listing.project.floors.to_string();
|
let project_floors = listing.project.floors.to_string();
|
||||||
|
|
||||||
let cloned_selected_unit_handle = selected_unit_handle.clone();
|
let cloned_selected_unit_handle = selected_unit_handle.clone();
|
||||||
//TODO: Floating whatsapp button on this page
|
|
||||||
|
let selected_unit_opt = listing.units.get(*cloned_selected_unit_handle);
|
||||||
html!{
|
html!{
|
||||||
<>
|
<>
|
||||||
<NavigationBar/>
|
<NavigationBar/>
|
||||||
|
@ -90,63 +92,10 @@ pub fn details_page(props: &DetailsPageProps) -> Html {
|
||||||
//
|
//
|
||||||
|
|
||||||
<div class={"details-body-features"}>
|
<div class={"details-body-features"}>
|
||||||
<div class={"details-body-feature-item"}>
|
<FeatureItem title={"Fecha de entrega"} icon={"fa-solid fa-person-digging"} subtitle={project_est_finish_date}/>
|
||||||
<div class={"details-body-feature-item-icon-container"}>
|
<FeatureItem title={"Condición de venta"} icon={"fa-solid fa-handshake"} subtitle={project_condition}/>
|
||||||
<i class="fa-solid fa-person-digging"></i>
|
<FeatureItem title={"Tipo de Proyecto"} icon={"fa-solid fa-house-chimney"} subtitle={project_type}/>
|
||||||
</div>
|
<FeatureItem title={"Cant. de Pisos"} icon={"fa-solid fa-building"} subtitle={project_floors}/>
|
||||||
<div class={"details-body-feature-item-text-container"}>
|
|
||||||
<div class={"details-body-feature-item-text-title"}>
|
|
||||||
{"Fecha de entrega"}
|
|
||||||
</div>
|
|
||||||
<div class={"details-body-feature-item-text-subtitle"}>
|
|
||||||
{project_est_finish_date}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class={"details-body-feature-item"}>
|
|
||||||
<div class={"details-body-feature-item-icon-container"}>
|
|
||||||
<i class="fa-solid fa-handshake"></i>
|
|
||||||
</div>
|
|
||||||
<div class={"details-body-feature-item-text-container"}>
|
|
||||||
<div class={"details-body-feature-item-text-title"}>
|
|
||||||
{"Condición de venta"}
|
|
||||||
</div>
|
|
||||||
<div class={"details-body-feature-item-text-subtitle"}>
|
|
||||||
{project_condition}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class={"details-body-feature-item"}>
|
|
||||||
<div class={"details-body-feature-item-icon-container"}>
|
|
||||||
<i class="fa-solid fa-house-chimney"></i>
|
|
||||||
</div>
|
|
||||||
<div class={"details-body-feature-item-text-container"}>
|
|
||||||
<div class={"details-body-feature-item-text-title"}>
|
|
||||||
{"Tipo de Proyecto"}
|
|
||||||
</div>
|
|
||||||
<div class={"details-body-feature-item-text-subtitle"}>
|
|
||||||
{project_type}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class={"details-body-feature-item"}>
|
|
||||||
<div class={"details-body-feature-item-icon-container"}>
|
|
||||||
<i class="fa-solid fa-building"></i>
|
|
||||||
</div>
|
|
||||||
<div class={"details-body-feature-item-text-container"}>
|
|
||||||
<div class={"details-body-feature-item-text-title"}>
|
|
||||||
{"Cant. de Pisos"}
|
|
||||||
</div>
|
|
||||||
<div class={"details-body-feature-item-text-subtitle"}>
|
|
||||||
{project_floors}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class={"details-body-divider"}></div>
|
<div class={"details-body-divider"}></div>
|
||||||
|
@ -155,6 +104,10 @@ pub fn details_page(props: &DetailsPageProps) -> Html {
|
||||||
// Units part
|
// Units part
|
||||||
//
|
//
|
||||||
|
|
||||||
|
{ // If units don't exist then don't show anything
|
||||||
|
if let Some(unit) = selected_unit_opt {
|
||||||
|
|
||||||
|
html! {
|
||||||
<div class={"details-body-units"}>
|
<div class={"details-body-units"}>
|
||||||
<div class={"details-body-units-title"}>{"Unidades"}</div>
|
<div class={"details-body-units-title"}>{"Unidades"}</div>
|
||||||
<div class={"details-body-units-selection-container"}>
|
<div class={"details-body-units-selection-container"}>
|
||||||
|
@ -196,7 +149,6 @@ pub fn details_page(props: &DetailsPageProps) -> Html {
|
||||||
</div>
|
</div>
|
||||||
<div class={"details-body-units-media-slideshow-frame"}>
|
<div class={"details-body-units-media-slideshow-frame"}>
|
||||||
{
|
{
|
||||||
if let Some(unit) = listing.units.get(*cloned_selected_unit_handle) {
|
|
||||||
if unit.media.media_list.len() >= 1 {
|
if unit.media.media_list.len() >= 1 {
|
||||||
html! {
|
html! {
|
||||||
<MediaSlideshow media_list={unit.media.media_list.clone()}/>
|
<MediaSlideshow media_list={unit.media.media_list.clone()}/>
|
||||||
|
@ -206,16 +158,55 @@ pub fn details_page(props: &DetailsPageProps) -> Html {
|
||||||
<div>{"No existen imágenes para esta Unidad."}</div>
|
<div>{"No existen imágenes para esta Unidad."}</div>
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class={"details-body-units-description"}>
|
||||||
|
{
|
||||||
|
if unit.description.len() == 0 {
|
||||||
|
"Esta unidad No tiene Descripción.".into()
|
||||||
|
} else {
|
||||||
|
unit.description.clone()
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class={"details-body-divider"}></div>
|
||||||
|
|
||||||
|
<div class={"details-body-unit-features"}>
|
||||||
|
|
||||||
|
{ // Features only to be shown on a ForSale unit
|
||||||
|
if unit.unit_type == UnitType::ForSale {
|
||||||
|
let price_separated = unit.price_usd.separate_with_commas();
|
||||||
|
html! {
|
||||||
|
<>
|
||||||
|
<FeatureItem title={"Inversión"} icon={"fa-solid fa-money-bill-trend-up"} subtitle={
|
||||||
|
if price_separated.contains(".") {
|
||||||
|
format!("${} USD", price_separated)
|
||||||
|
} else {
|
||||||
|
format!("${} USD", format!("{price_separated}.00"))
|
||||||
|
}
|
||||||
|
}/>
|
||||||
|
<FeatureItem title={"Habitaciones"} icon={"fa-solid fa-bed"} subtitle={format!("{}", unit.rooms)}/>
|
||||||
|
<FeatureItem title={"Baños"} icon={"fa-solid fa-bath"} subtitle={format!("{}", unit.bathrooms)}/>
|
||||||
|
</>
|
||||||
|
}
|
||||||
|
} else {html! {}}
|
||||||
|
}
|
||||||
|
|
||||||
|
// Features that always are shown
|
||||||
|
<FeatureItem title={"Metraje"} icon={"fa-solid fa-ruler-combined"} subtitle={format!("{}m²", unit.area)}/>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
}
|
||||||
} else {
|
} else {
|
||||||
html!{
|
html!{
|
||||||
<div>{"Esta unidad no existe. Esto No debería estar pasando."}</div>
|
<h2>{"Este proyecto no tiene unidades registradas."}</h2>
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
}
|
}
|
||||||
|
@ -238,3 +229,5 @@ pub fn details_page(props: &DetailsPageProps) -> Html {
|
||||||
pub struct DetailsPageProps {
|
pub struct DetailsPageProps {
|
||||||
pub project_id: Uuid
|
pub project_id: Uuid
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
Loading…
Reference in New Issue