Finished the unit selection menu
This commit is contained in:
Franklin
parent
a0d926b3ad
commit
ee2f024488
|
|
@ -142,3 +142,54 @@ Divide the Details page into 3 main sections:
|
||||||
font-weight: 400;
|
font-weight: 400;
|
||||||
color: rgb(113, 113, 113);
|
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 log::{error, info};
|
||||||
use uuid::Uuid;
|
use uuid::Uuid;
|
||||||
use yew::prelude::*;
|
use yew::prelude::*;
|
||||||
|
|
@ -10,6 +10,7 @@ pub fn details_page(props: &DetailsPageProps) -> Html {
|
||||||
//TODO: query backend
|
//TODO: query backend
|
||||||
let finished_loading = use_state(|| false);
|
let finished_loading = use_state(|| false);
|
||||||
let listing_handle: UseStateHandle<Listing> = use_state(|| Listing::default());
|
let listing_handle: UseStateHandle<Listing> = use_state(|| Listing::default());
|
||||||
|
let selected_unit_handle = use_state(|| 0);
|
||||||
use_state(|| {
|
use_state(|| {
|
||||||
let finished_loading = finished_loading.clone();
|
let finished_loading = finished_loading.clone();
|
||||||
let listing_handle = listing_handle.clone();
|
let listing_handle = listing_handle.clone();
|
||||||
|
|
@ -40,8 +41,7 @@ pub fn details_page(props: &DetailsPageProps) -> Html {
|
||||||
} 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();
|
||||||
|
|
||||||
//TODO: Floating whatsapp button on this page
|
//TODO: Floating whatsapp button on this page
|
||||||
html!{
|
html!{
|
||||||
<>
|
<>
|
||||||
|
|
@ -85,6 +85,10 @@ pub fn details_page(props: &DetailsPageProps) -> Html {
|
||||||
|
|
||||||
<div class={"details-body-divider"}></div>
|
<div class={"details-body-divider"}></div>
|
||||||
|
|
||||||
|
//
|
||||||
|
// Features Part
|
||||||
|
//
|
||||||
|
|
||||||
<div class={"details-body-features"}>
|
<div class={"details-body-features"}>
|
||||||
<div class={"details-body-feature-item"}>
|
<div class={"details-body-feature-item"}>
|
||||||
<div class={"details-body-feature-item-icon-container"}>
|
<div class={"details-body-feature-item-icon-container"}>
|
||||||
|
|
@ -146,6 +150,52 @@ pub fn details_page(props: &DetailsPageProps) -> Html {
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class={"details-body-divider"}></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>
|
||||||
</div>
|
</div>
|
||||||
}
|
}
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue