From 42a97376a0bf55d61d16434f3d727d3eb8c3e95f Mon Sep 17 00:00:00 2001 From: Franklin Date: Mon, 27 Mar 2023 06:30:13 -0400 Subject: [PATCH] Finished unit description, changed feature to a component and added it all over the DetailsPage --- css/components/media_slideshow.css | 3 +- css/details.css | 23 ++- src/components/feature.rs | 30 ++++ src/components/mod.rs | 3 +- src/pages/details.rs | 231 ++++++++++++++--------------- 5 files changed, 167 insertions(+), 123 deletions(-) create mode 100644 src/components/feature.rs diff --git a/css/components/media_slideshow.css b/css/components/media_slideshow.css index 01692c2..2c8c98b 100644 --- a/css/components/media_slideshow.css +++ b/css/components/media_slideshow.css @@ -69,8 +69,7 @@ left: 10px; background-color: rgba(0, 0, 0, 0.633); border-radius: 5px; - } - +} /* Fading animation */ .fade { diff --git a/css/details.css b/css/details.css index ba7d93d..a83bfd0 100644 --- a/css/details.css +++ b/css/details.css @@ -203,4 +203,25 @@ Divide the Details page into 3 main sections: height: 360px; background-color: rgba(128, 128, 128, 0.151); border-radius: 20px; -} \ No newline at end of file +} + +.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; +} diff --git a/src/components/feature.rs b/src/components/feature.rs new file mode 100644 index 0000000..fe169aa --- /dev/null +++ b/src/components/feature.rs @@ -0,0 +1,30 @@ +use yew::prelude::*; + +#[function_component(FeatureItem)] +pub fn feature_item(props: &FeatureItemProps) -> Html { + let props = props.clone(); + html!{ +
+
+ +
+
+
+ {props.title} +
+
+ { + props.subtitle + } +
+
+
+ } +} + +#[derive(Properties, PartialEq, Clone)] +pub struct FeatureItemProps { + pub title: String, + pub subtitle: String, + pub icon: String, +} \ No newline at end of file diff --git a/src/components/mod.rs b/src/components/mod.rs index f5ec631..9ca9619 100644 --- a/src/components/mod.rs +++ b/src/components/mod.rs @@ -2,4 +2,5 @@ pub mod nav_bar; pub mod search_filter; pub mod project_card; pub mod media_slideshow; -pub mod floating_widget; \ No newline at end of file +pub mod floating_widget; +pub mod feature; \ No newline at end of file diff --git a/src/pages/details.rs b/src/pages/details.rs index d6ee149..0ca34e9 100644 --- a/src/pages/details.rs +++ b/src/pages/details.rs @@ -1,9 +1,10 @@ use jl_types::{dto::listing::Listing, domain::unit_type::UnitType}; use log::{error, info}; +use thousands::Separable; use uuid::Uuid; 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)] 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_description = &listing.project.description; let project_media_list = listing.project.media.media_list; - let project_type = &listing.project.project_type.to_string(); - let project_condition = &listing.project.project_condition.to_string(); + let project_type = listing.project.project_type.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() { "(Listo)" } 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(); - //TODO: Floating whatsapp button on this page + + let selected_unit_opt = listing.units.get(*cloned_selected_unit_handle); html!{ <> @@ -90,63 +92,10 @@ pub fn details_page(props: &DetailsPageProps) -> Html { //
-
-
- -
-
-
- {"Fecha de entrega"} -
-
- {project_est_finish_date} -
-
-
- -
-
- -
-
-
- {"Condición de venta"} -
-
- {project_condition} -
-
-
- -
-
- -
-
-
- {"Tipo de Proyecto"} -
-
- {project_type} -
-
-
- -
-
- -
-
-
- {"Cant. de Pisos"} -
-
- {project_floors} -
-
-
- - + + + +
@@ -155,67 +104,109 @@ pub fn details_page(props: &DetailsPageProps) -> Html { // Units part // -
-
{"Unidades"}
-
- {// Maps all the units to generate the unit selection menu - listing.units.iter().enumerate().map(|(index, unit)| { - let cloned_selected_unit_handle = cloned_selected_unit_handle.clone(); - let select_unit_onclick_cb = { - let cloned_selected_unit_handle = cloned_selected_unit_handle.clone(); - Callback::from(move |_| cloned_selected_unit_handle.set(index)) - }; - html! { -
- { - match unit.unit_type { - UnitType::ForSale => html! { - <> - -
{format!("Unidad {}", index + 1)}
- - }, - UnitType::NotForSale => html! { - <> - -
{"Área común"}
- - } + { // If units don't exist then don't show anything + if let Some(unit) = selected_unit_opt { + + html! { +
+
{"Unidades"}
+
+ { // Maps all the units to generate the unit selection menu + listing.units.iter().enumerate().map(|(index, unit)| { + let cloned_selected_unit_handle = cloned_selected_unit_handle.clone(); + let select_unit_onclick_cb = { + let cloned_selected_unit_handle = cloned_selected_unit_handle.clone(); + Callback::from(move |_| cloned_selected_unit_handle.set(index)) + }; + html! { +
+ { + match unit.unit_type { + UnitType::ForSale => html! { + <> + +
{format!("Unidad {}", index + 1)}
+ + }, + UnitType::NotForSale => html! { + <> + +
{"Área común"}
+ + } + } + } + +
+ } + }).collect::() + } +
+
+ { + if unit.media.media_list.len() >= 1 { + html! { + + } + } else { + html! { +
{"No existen imágenes para esta Unidad."}
} } - -
- } - }).collect::() - } -
-
- { - if let Some(unit) = listing.units.get(*cloned_selected_unit_handle) { - if unit.media.media_list.len() >= 1 { - html! { - } - } else { - html! { -
{"No existen imágenes para esta Unidad."}
- } - } +
- } else { - html! { -
{"Esta unidad no existe. Esto No debería estar pasando."}
- } - } - +
+ { + if unit.description.len() == 0 { + "Esta unidad No tiene Descripción.".into() + } else { + unit.description.clone() + } + } +
+ +
+ +
+ + { // 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! { + <> + + + + + } + } else {html! {}} + } + + // Features that always are shown + + +
+
} -
-
+ } else { + html!{ +

{"Este proyecto no tiene unidades registradas."}

+ } + } + } + } @@ -237,4 +228,6 @@ pub fn details_page(props: &DetailsPageProps) -> Html { #[derive(Properties, PartialEq)] pub struct DetailsPageProps { pub project_id: Uuid -} \ No newline at end of file +} + +