Finished the unit selection menu
This commit is contained in:
parent
a0d926b3ad
commit
ee2f024488
|
@ -142,3 +142,54 @@ Divide the Details page into 3 main sections:
|
|||
font-weight: 400;
|
||||
color: rgb(113, 113, 113);
|
||||
}
|
||||
|
||||
.details-body-units {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: start;
|
||||
align-items: center;
|
||||
gap: 30px;
|
||||
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.details-body-units-title {
|
||||
font-size: 24px;
|
||||
font-family: Inter;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.details-body-units-selection-container {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
flex-wrap: wrap;
|
||||
gap: 30px;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.details-body-units-selection-container:hover {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.details-body-units-selection-item-selected {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
gap: 10px;
|
||||
|
||||
font-family: Inter;
|
||||
font-size: 15px;
|
||||
padding-bottom: 6px;
|
||||
border-bottom: 3px solid #04B2D9;
|
||||
}
|
||||
|
||||
.details-body-units-selection-item-unselected {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
gap: 10px;
|
||||
|
||||
font-family: Inter;
|
||||
font-size: 15px;
|
||||
|
||||
}
|
|
@ -1,4 +1,4 @@
|
|||
use jl_types::dto::listing::Listing;
|
||||
use jl_types::{dto::listing::Listing, domain::unit_type::UnitType};
|
||||
use log::{error, info};
|
||||
use uuid::Uuid;
|
||||
use yew::prelude::*;
|
||||
|
@ -10,6 +10,7 @@ pub fn details_page(props: &DetailsPageProps) -> Html {
|
|||
//TODO: query backend
|
||||
let finished_loading = use_state(|| false);
|
||||
let listing_handle: UseStateHandle<Listing> = use_state(|| Listing::default());
|
||||
let selected_unit_handle = use_state(|| 0);
|
||||
use_state(|| {
|
||||
let finished_loading = finished_loading.clone();
|
||||
let listing_handle = listing_handle.clone();
|
||||
|
@ -40,8 +41,7 @@ pub fn details_page(props: &DetailsPageProps) -> Html {
|
|||
} else {""});
|
||||
let project_floors = &listing.project.floors.to_string();
|
||||
|
||||
|
||||
|
||||
let cloned_selected_unit_handle = selected_unit_handle.clone();
|
||||
//TODO: Floating whatsapp button on this page
|
||||
html!{
|
||||
<>
|
||||
|
@ -85,6 +85,10 @@ pub fn details_page(props: &DetailsPageProps) -> Html {
|
|||
|
||||
<div class={"details-body-divider"}></div>
|
||||
|
||||
//
|
||||
// Features Part
|
||||
//
|
||||
|
||||
<div class={"details-body-features"}>
|
||||
<div class={"details-body-feature-item"}>
|
||||
<div class={"details-body-feature-item-icon-container"}>
|
||||
|
@ -146,6 +150,52 @@ pub fn details_page(props: &DetailsPageProps) -> Html {
|
|||
</div>
|
||||
|
||||
<div class={"details-body-divider"}></div>
|
||||
|
||||
//
|
||||
// Units part
|
||||
//
|
||||
|
||||
<div class={"details-body-units"}>
|
||||
<div class={"details-body-units-title"}>{"Unidades"}</div>
|
||||
<div class={"details-body-units-selection-container"}>
|
||||
|
||||
{// 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! {
|
||||
<div class={
|
||||
if *cloned_selected_unit_handle == index
|
||||
{"details-body-units-selection-item-selected"}
|
||||
else
|
||||
{"details-body-units-selection-item-unselected"}
|
||||
} onclick={select_unit_onclick_cb}>
|
||||
{
|
||||
match unit.unit_type {
|
||||
UnitType::ForSale => html! {
|
||||
<>
|
||||
<i class="fa-solid fa-house-circle-check"></i>
|
||||
<div>{format!("Unidad {}", index + 1)}</div>
|
||||
</>
|
||||
},
|
||||
UnitType::NotForSale => html! {
|
||||
<>
|
||||
<i class="fa-solid fa-people-group"></i>
|
||||
<div>{"Área común"}</div>
|
||||
</>
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
</div>
|
||||
}
|
||||
}).collect::<Html>()
|
||||
}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
}
|
||||
|
|
Loading…
Reference in New Issue