franklinblanco/jl-frontend
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Finished the unit selection menu

Browse Source
This commit is contained in:
Franklin 2023-03-26 20:09:42 -04:00
parent a0d926b3ad
commit ee2f024488
2 changed files with 104 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

51
css/details.css
View File

@ -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;
}

56
src/pages/details.rs
View File

@ -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>
} }