feat: set and display select default value properly
This commit is contained in:
1 parent
cb888d2bd6
commit
9c7b7f1d4f
2 files changed
+17
-21
No files matched your search
@@ -6,8 +6,8 @@ use std::collections::HashMap;
|
|||||||
use leptos::logging::{log, warn};
|
use leptos::logging::{log, warn};
|
||||||
use crate::components::{use_validation_context, InputState, ValidationState};
|
use crate::components::{use_validation_context, InputState, ValidationState};
|
||||||
|
|
||||||
fn validate(required: bool, value: String, default_value: String) -> ValidationState {
|
fn validate(required: bool, value: String) -> ValidationState {
|
||||||
if required && (value.is_empty() || value == default_value) {
|
if required && (value.is_empty()) {
|
||||||
ValidationState::Invalid("This input is required.".to_string())
|
ValidationState::Invalid("This input is required.".to_string())
|
||||||
} else {
|
} else {
|
||||||
ValidationState::Valid
|
ValidationState::Valid
|
||||||
@@ -21,7 +21,6 @@ fn validate(required: bool, value: String, default_value: String) -> ValidationS
|
|||||||
#[component]
|
#[component]
|
||||||
pub fn Select(
|
pub fn Select(
|
||||||
#[prop()] value_list: Vec<String>,
|
#[prop()] value_list: Vec<String>,
|
||||||
#[prop(optional, into)] default_value: Signal<String>,
|
|
||||||
#[prop(optional)] value: RwSignal<String>,
|
#[prop(optional)] value: RwSignal<String>,
|
||||||
#[prop(into)] data_member: Signal<String>,
|
#[prop(into)] data_member: Signal<String>,
|
||||||
#[prop()] data_map: RwSignal<HashMap<String, ValueType>>,
|
#[prop()] data_map: RwSignal<HashMap<String, ValueType>>,
|
||||||
@@ -31,20 +30,11 @@ pub fn Select(
|
|||||||
) -> impl IntoView {
|
) -> impl IntoView {
|
||||||
//#region Value Logic
|
//#region Value Logic
|
||||||
|
|
||||||
let default_raw_value = if default_value.get_untracked().is_empty() {
|
let default_raw_value = data_map.get_untracked()
|
||||||
data_map.get_untracked()
|
.get(&data_member.get_untracked())
|
||||||
.get(&data_member.get_untracked())
|
.cloned()
|
||||||
.cloned()
|
.unwrap_or_default()
|
||||||
.unwrap_or_default()
|
.as_string().unwrap_or_default().unwrap_or_default();
|
||||||
.as_string().unwrap_or_default().unwrap_or_default()
|
|
||||||
} else {
|
|
||||||
let default = default_value.get_untracked();
|
|
||||||
if !value_list.contains(&default) {
|
|
||||||
warn!("The default value {} is not in the list of options. This may cause validation issues.", default);
|
|
||||||
}
|
|
||||||
|
|
||||||
default
|
|
||||||
};
|
|
||||||
|
|
||||||
let raw_value = RwSignal::new(default_raw_value);
|
let raw_value = RwSignal::new(default_raw_value);
|
||||||
|
|
||||||
@@ -58,7 +48,7 @@ pub fn Select(
|
|||||||
//#region Validation Logic
|
//#region Validation Logic
|
||||||
|
|
||||||
let error = RwSignal::new(
|
let error = RwSignal::new(
|
||||||
validate(required.get_untracked(), raw_value.get_untracked(), default_value.get_untracked())
|
validate(required.get_untracked(), raw_value.get_untracked())
|
||||||
);
|
);
|
||||||
warn!("Current error state: {:?}", error.get_untracked());
|
warn!("Current error state: {:?}", error.get_untracked());
|
||||||
let dirty = RwSignal::new(false);
|
let dirty = RwSignal::new(false);
|
||||||
@@ -78,7 +68,7 @@ pub fn Select(
|
|||||||
let value = e.target().value();
|
let value = e.target().value();
|
||||||
log!("Found value {}", value);
|
log!("Found value {}", value);
|
||||||
raw_value.set(value.clone());
|
raw_value.set(value.clone());
|
||||||
error.set(validate(required.get(), raw_value.get(), default_value.get()));
|
error.set(validate(required.get(), raw_value.get()));
|
||||||
dirty.set(true);
|
dirty.set(true);
|
||||||
data_map.update(|map| {
|
data_map.update(|map| {
|
||||||
if let Some(val) = map.get_mut(&data_member.get()) {
|
if let Some(val) = map.get_mut(&data_member.get()) {
|
||||||
@@ -102,8 +92,15 @@ pub fn Select(
|
|||||||
border-red-700 bg-transparent
|
border-red-700 bg-transparent
|
||||||
disabled:border-gray-600 disabled:pointer-events-none disabled:bg-gray-600/33"
|
disabled:border-gray-600 disabled:pointer-events-none disabled:bg-gray-600/33"
|
||||||
on:change:target=on_change
|
on:change:target=on_change
|
||||||
disabled = disabled >
|
disabled=disabled
|
||||||
|
>
|
||||||
// This closure handles the display of the options.
|
// This closure handles the display of the options.
|
||||||
|
<option
|
||||||
|
value=""
|
||||||
|
disabled
|
||||||
|
hidden
|
||||||
|
selected=raw_value.get().is_empty()
|
||||||
|
>"Select one..."</option>
|
||||||
{move || {
|
{move || {
|
||||||
value_list.iter().map(
|
value_list.iter().map(
|
||||||
move |value| {
|
move |value| {
|
||||||
|
|||||||
@@ -326,7 +326,6 @@ pub fn HomePage() -> impl IntoView {
|
|||||||
.into_iter()
|
.into_iter()
|
||||||
.map(|s| s.to_owned())
|
.map(|s| s.to_owned())
|
||||||
.collect()
|
.collect()
|
||||||
default_value="Male"
|
|
||||||
disabled=elements_disabled
|
disabled=elements_disabled
|
||||||
data_member="gender"
|
data_member="gender"
|
||||||
data_map=form_data
|
data_map=form_data
|
||||||
|
|||||||
Reference in new issue
Block a user