Made room & bathroom textfields to dropdowns to simplify agent input

This commit is contained in:
Franklin 2023-05-10 12:25:23 -04:00
parent cae68235cf
commit e57afed162
2 changed files with 95 additions and 25 deletions

View File

@ -55,6 +55,18 @@ pub fn unit_fields(props: &UnitFieldsProps) -> Html {
user_typed.set(true); user_typed.set(true);
}) })
}; };
let onselect_cb_2 = {
let user_typed = user_typed.clone();
Callback::from(move |_| {
user_typed.set(true);
})
};
let onselect_cb_3 = {
let user_typed = user_typed.clone();
Callback::from(move |_| {
user_typed.set(true);
})
};
let onchange_number_cb = { let onchange_number_cb = {
let user_typed = user_typed.clone(); let user_typed = user_typed.clone();
Callback::from(move |_| { Callback::from(move |_| {
@ -67,18 +79,12 @@ pub fn unit_fields(props: &UnitFieldsProps) -> Html {
user_typed.set(true); user_typed.set(true);
}) })
}; };
let onchange_number_cb_3 = {
let user_typed = user_typed.clone();
Callback::from(move |_| {
user_typed.set(true);
})
};
// Fields // Fields
let price_usd = use_state_eq(|| 0.0); let price_usd = use_state_eq(|| 0.0);
let unit_type_handle: UseStateHandle<Option<UnitType>> = use_state_eq(|| None); let unit_type_handle: UseStateHandle<Option<UnitType>> = use_state_eq(|| None);
let rooms_handle: UseStateHandle<i16> = use_state_eq(|| 0); let rooms_handle: UseStateHandle<Option<i16>> = use_state_eq(|| None);
let bathrooms_handle: UseStateHandle<f32> = use_state_eq(|| 0.0); let bathrooms_handle: UseStateHandle<Option<f32>> = use_state_eq(|| None);
let area_handle: UseStateHandle<f32> = use_state_eq(|| 0.0); let area_handle: UseStateHandle<f32> = use_state_eq(|| 0.0);
let media_handle: UseStateHandle<MediaList> = use_state_eq(|| MediaList { let media_handle: UseStateHandle<MediaList> = use_state_eq(|| MediaList {
media_list: Vec::new(), media_list: Vec::new(),
@ -102,12 +108,12 @@ pub fn unit_fields(props: &UnitFieldsProps) -> Html {
}, },
}); });
rooms_handle.set(match (*unit_opt).clone() { rooms_handle.set(match (*unit_opt).clone() {
Some(unit) => unit.rooms, Some(unit) => Some(unit.rooms),
None => 0 None => None
}); });
bathrooms_handle.set(match (*unit_opt).clone() { bathrooms_handle.set(match (*unit_opt).clone() {
Some(unit) => unit.bathrooms, Some(unit) => Some(unit.bathrooms),
None => 0.0 None => None
}); });
area_handle.set(match (*unit_opt).clone() { area_handle.set(match (*unit_opt).clone() {
Some(unit) => unit.area, Some(unit) => unit.area,
@ -132,8 +138,8 @@ pub fn unit_fields(props: &UnitFieldsProps) -> Html {
let price_usd = price_usd.clone(); let price_usd = price_usd.clone();
let unit_type_handle: UseStateHandle<Option<UnitType>> = unit_type_handle.clone(); let unit_type_handle: UseStateHandle<Option<UnitType>> = unit_type_handle.clone();
let rooms_handle: UseStateHandle<i16> = rooms_handle.clone(); let rooms_handle: UseStateHandle<Option<i16>> = rooms_handle.clone();
let bathrooms_handle: UseStateHandle<f32> = bathrooms_handle.clone(); let bathrooms_handle: UseStateHandle<Option<f32>> = bathrooms_handle.clone();
let area_handle: UseStateHandle<f32> = area_handle.clone(); let area_handle: UseStateHandle<f32> = area_handle.clone();
let media_handle: UseStateHandle<MediaList> = media_handle.clone(); let media_handle: UseStateHandle<MediaList> = media_handle.clone();
let unit_admin_tag_handle: UseStateHandle<String> = unit_admin_tag_handle.clone(); let unit_admin_tag_handle: UseStateHandle<String> = unit_admin_tag_handle.clone();
@ -145,8 +151,8 @@ pub fn unit_fields(props: &UnitFieldsProps) -> Html {
let price_usd = price_usd.clone(); let price_usd = price_usd.clone();
let unit_type_handle: UseStateHandle<Option<UnitType>> = unit_type_handle.clone(); let unit_type_handle: UseStateHandle<Option<UnitType>> = unit_type_handle.clone();
let rooms_handle: UseStateHandle<i16> = rooms_handle.clone(); let rooms_handle: UseStateHandle<Option<i16>> = rooms_handle.clone();
let bathrooms_handle: UseStateHandle<f32> = bathrooms_handle.clone(); let bathrooms_handle: UseStateHandle<Option<f32>> = bathrooms_handle.clone();
let area_handle: UseStateHandle<f32> = area_handle.clone(); let area_handle: UseStateHandle<f32> = area_handle.clone();
let media_handle: UseStateHandle<MediaList> = media_handle.clone(); let media_handle: UseStateHandle<MediaList> = media_handle.clone();
let unit_admin_tag_handle: UseStateHandle<String> = unit_admin_tag_handle.clone(); let unit_admin_tag_handle: UseStateHandle<String> = unit_admin_tag_handle.clone();
@ -174,8 +180,8 @@ pub fn unit_fields(props: &UnitFieldsProps) -> Html {
project_id, project_id,
price_usd, price_usd,
unit_type, unit_type,
rooms, rooms: rooms.unwrap_or(0),
bathrooms, bathrooms: bathrooms.unwrap_or(0.0),
area, area,
admin_tag, admin_tag,
media, media,
@ -191,8 +197,8 @@ pub fn unit_fields(props: &UnitFieldsProps) -> Html {
id, id,
price_usd: Some(price_usd), price_usd: Some(price_usd),
unit_type: Some(unit_type), unit_type: Some(unit_type),
rooms: Some(rooms), rooms: Some(rooms.unwrap_or(0)),
bathrooms: Some(bathrooms), bathrooms: Some(bathrooms.unwrap_or(0.0)),
area: Some(area), area: Some(area),
admin_tag: Some(admin_tag), admin_tag: Some(admin_tag),
media: Some(media), media: Some(media),
@ -211,10 +217,70 @@ pub fn unit_fields(props: &UnitFieldsProps) -> Html {
<> <>
<NumberTextField<f64> label={String::from("Precio en USD")} required={true} value={price_usd.clone()} onchange={onchange_number_cb}/> <NumberTextField<f64> label={String::from("Precio en USD")} required={true} value={price_usd.clone()} onchange={onchange_number_cb}/>
<NumberTextField<f32> label={String::from("Area en m^2")} required={true} value={area_handle.clone()} onchange={onchange_number_cb_2.clone()}/> <NumberTextField<f32> label={String::from("Area en m^2")} required={true} value={area_handle.clone()} onchange={onchange_number_cb_2.clone()}/>
<NumberTextField<i16> label={String::from("Cant. de habitaciones")} required={true} value={rooms_handle.clone()} onchange={onchange_number_cb_3.clone()}/>
<NumberTextField<f32> label={String::from("Cant. de baños")} required={true} value={bathrooms_handle.clone()} onchange={onchange_number_cb_2}/>
<MediaPicker value={media_handle} onchange={ontype_cb.clone()} item={jl_types::dto::item::Item::Unit}/> <MediaPicker value={media_handle} onchange={ontype_cb.clone()} item={jl_types::dto::item::Item::Unit}/>
// Rooms handle
{if (*rooms_handle).clone().is_none() {
match props.edittype.clone() {
EditType::New => html! {
<div class={"textfield-container"}>
<div class={"textfield-label-required"}>{"Cant. de habitaciones"}</div>
<DropDown<i16> selected={rooms_handle} options={ (1..10).collect::<Vec<i16>>() } onchange={onselect_cb_2} />
</div>
},
EditType::Existing(_) => if *user_typed {
html! {
<div class={"textfield-container"}>
<div class={"textfield-label-required"}>{"Cant. de habitaciones"}</div>
<DropDown<i16> selected={rooms_handle} options={ (1..10).collect::<Vec<i16>>() } onchange={onselect_cb_2} />
</div>
}
} else {
html! {}
}
}
} else {
html! {
<div class={"textfield-container"}>
<div class={"textfield-label-required"}>{"Cant. de habitaciones"}</div>
<DropDown<i16> selected={rooms_handle} options={ (1..10).collect::<Vec<i16>>() } onchange={onselect_cb_2} />
</div>
}
}
}
// Bathrooms handle
{if (*bathrooms_handle).clone().is_none() {
match props.edittype.clone() {
EditType::New => html! {
<div class={"textfield-container"}>
<div class={"textfield-label-required"}>{"Cant. de baños"}</div>
<DropDown<f32> selected={bathrooms_handle} options={ Vec::from([0.5, 1.0, 1.5, 2.0, 2.5, 3.0, 3.5, 4.0, 4.5, 5.0, 5.5, 6.0, 6.5, 7.0]) } onchange={onselect_cb_3} />
</div>
},
EditType::Existing(_) => if *user_typed {
html! {
<div class={"textfield-container"}>
<div class={"textfield-label-required"}>{"Cant. de baños"}</div>
<DropDown<f32> selected={bathrooms_handle} options={ Vec::from([0.5, 1.0, 1.5, 2.0, 2.5, 3.0, 3.5, 4.0, 4.5, 5.0, 5.5, 6.0, 6.5, 7.0]) } onchange={onselect_cb_3} />
</div>
}
} else {
html! {}
}
}
} else {
html! {
<div class={"textfield-container"}>
<div class={"textfield-label-required"}>{"Cant. de baños"}</div>
<DropDown<f32> selected={bathrooms_handle} options={ Vec::from([0.5, 1.0, 1.5, 2.0, 2.5, 3.0, 3.5, 4.0, 4.5, 5.0, 5.5, 6.0, 6.5, 7.0]) } onchange={onselect_cb_3} />
</div>
}
}
}
// Unit type dropdown // Unit type dropdown
{if (*unit_type_handle).clone().is_none() { {if (*unit_type_handle).clone().is_none() {
match props.edittype.clone() { match props.edittype.clone() {
@ -244,8 +310,9 @@ pub fn unit_fields(props: &UnitFieldsProps) -> Html {
} }
} }
} }
<TextField label={"Descripción"} value={unit_description_handle} required={false} onchange={ontype_cb.clone()} fieldtype={TextFieldType::TextArea} /> <TextField label={"Descripción"} value={unit_description_handle} required={false} onchange={ontype_cb.clone()} fieldtype={TextFieldType::TextArea} />
<TextField label={"Comentario interno"} value={unit_admin_tag_handle} required={false} onchange={ontype_cb.clone()} /> <TextField label={"Etiqueta"} value={unit_admin_tag_handle} required={false} onchange={ontype_cb.clone()} />
<div class={"admin-edit-submit-button"} onclick={update_button_onclick}> <div class={"admin-edit-submit-button"} onclick={update_button_onclick}>
{"Actualizar"} {"Actualizar"}
</div> </div>

View File

@ -361,7 +361,10 @@ pub fn create_unit_selection_menu(
UnitType::ForSale => html! { UnitType::ForSale => html! {
<> <>
<i class="fa-solid fa-house-circle-check"></i> <i class="fa-solid fa-house-circle-check"></i>
<div>{format!("Unidad {}", ALPHABET_LETTERS.chars().nth(index).unwrap_or_else(|| index.to_string().chars().nth(1).unwrap()))}</div> <div>{match unit.admin_tag.clone() {
Some(admin_tag) => admin_tag,
None => {format!("Unidad {}", ALPHABET_LETTERS.chars().nth(index).unwrap_or_else(|| index.to_string().chars().nth(1).unwrap()))}
}}</div>
</> </>
}, },
UnitType::NotForSale => html! { UnitType::NotForSale => html! {