Merge branch 'main' into feat/date-component

# Conflicts:
#	src/components/lists/single/radio.rs
#	src/pages/home_page.rs

src/components/lists/single/radio.rs

@@ -2,6 +2,7 @@ use crate::common::ValueType;
 use crate::components::utils::create_unique_id;
 use leptos::prelude::*;
 use std::collections::HashMap;
+use leptos::html::Input;
 use crate::components::{use_validation_context, InputState, ValidationState};
 
 #[component]
@@ -20,9 +21,7 @@ pub fn Radio(
                 // Using the "peer" class links this input with the div "peer" at the same level.
                 // By using the "peer-checked" selector this div can toggle states based on this
                 // input's state (checked/unchecked)
-                class="
-                relative peer shrink-0
-                hidden"
+                class="relative peer shrink-0 hidden"
                 type="radio"
                 id=id.clone()
                 name=name
@@ -43,7 +42,95 @@ pub fn Radio(
                 rotate-45 transform border-3 border-3 rounded-full bg-white
                 border-white transition-opacity duration-150"></span>
             </div>
-            <span>{value.clone()}</span>
+            <span class="px-0.5 py-0.5 flex-1">{value.clone()}</span>
+        </label>
+    }
+}
+
+/// # Ratio Other Component
+/// This is a simple "other" field that contains a text input component. It can be selected using the
+/// same logic as the [`Radio`] component, and also has a secondary `RwSignal` that contains the
+/// current value of the embedded text input.
+///
+/// Example usage: <still working on this>
+#[component]
+fn RadioOther(
+    #[prop(into)] name: Signal<String>,
+    #[prop(into)] checked: Signal<bool>,
+    #[prop(into)] on_change: Callback<()>,
+    #[prop(into)] disabled: Signal<bool>,
+    #[prop(optional, into)] value: RwSignal<String>,
+    #[prop(into)] dirty: RwSignal<bool>,
+    #[prop(into)] placeholder: Signal<String>,
+) -> impl IntoView {
+    let id = create_unique_id(&name.get_untracked(), &"other".to_string());
+    let input_ref = NodeRef::<Input>::new();
+
+    let input_disabled = Signal::derive(move || {
+        !checked.get() || disabled.get()
+    });
+
+    Effect::new(move || {
+        checked.get()
+            .then(|| {
+                if let Some(node) = input_ref.get() {
+                    node.focus().expect("Couldn't focus input element");
+                }
+            });
+    });
+
+    let on_change_text = move |ev| {
+        let val = event_target_value(&ev);
+
+        value.set(val);
+
+        on_change.run(());
+    };
+
+    let on_blur_text = move |_| {
+        dirty.set(true);
+    };
+
+    view! {
+        <label for=id class="flex items_center">
+            <input
+                // Using the "peer" class links this input with the div "peer" at the same level.
+                // By using the "peer-checked" selector this div can toggle states based on this
+                // input's state (checked/unchecked)
+                class="relative peer shrink-0 hidden"
+                type="radio"
+                id=id.clone()
+                name=name
+                on:change=move |_| on_change.run(())
+                prop:checked=checked
+                disabled=disabled
+            />
+            // This div displays the box for the checkbox, and applies some styling to the child
+            // span element.
+            <div class="relative inline-block min-h-5 min-w-5 h-5 w-5 m-1 mr-2 rounded-full border border-gray-300 bg-white
+                transition-bg duration-200 peer-checked:bg-red-700 peer-checked:border-red-700
+                [&>span]:opacity-0 peer-checked:[&>span]:opacity-100
+                peer-disabled:bg-gray-600/33 peer-disabled:border-gray-600
+                peer-disabled:peer-checked:bg-gray-600">
+
+                // This span is the check icon. It is centered within the div and has a border on the bottom
+                // and right sides, which is then rotated to appear like a checkmark.
+                <span
+                    class="absolute left-1/2 top-1/2 block h-2.5 w-2.5 -translate-x-1/2 -translate-y-1/2
+                        rotate-45 transform border-3 border-3 rounded-full bg-white
+                        border-white transition-opacity duration-150"></span>
+            </div>
+            <input
+                node_ref=input_ref
+                class="border-b-2 mb-1.5 px-1.5 py-0.5 rounded-t-xs bg-transparent relative flex-1 transition-all duration-150
+                    border-red-700 disabled:border-gray-600 disabled:pointer-events-none disabled:bg-gray-600/33"
+                r#type="text"
+                disabled=input_disabled
+                placeholder=placeholder
+                prop:value=value
+                on:input=on_change_text
+                on:blur=on_blur_text
+            />
         </label>
     }
 }
@@ -64,24 +151,47 @@ pub fn RadioList(
     #[prop(optional, into)] disabled: Signal<bool>,
     #[prop(optional, into)] label: String,
     #[prop(optional, into)] required: Signal<bool>,
+    #[prop(optional, into)] other_prompt: Signal<String>,
 ) -> impl IntoView {
     //#region Value Logic
 
     // Store a single signal that is the currently selected value. We can only have one selected
     // value, so there's no list needed. The default selected value is whatever the map has selected
     // already, or nothing.
-    let default_value = match data_map.get_untracked().get(&data_member.get_untracked()) {
-        Some(ValueType::String(Some(value))) => value.clone(),
-        _ => String::new()
-    };
 
-    let selected_value = RwSignal::new(default_value);
+    let hydrated = RwSignal::new(false);
+    let selected_value = RwSignal::new(String::new());
+    let other_checked = RwSignal::new(false);
+    let other_value = RwSignal::new(String::new());
 
-    // When the selected value changes, update the data map at the correct location
+    // Hydration effect that resolves data. Sets up all data properly.
+    Effect::new({
+        let items = items.clone();
+        move || {
+            if hydrated.get() {
+                return;
+            }
+
+            let default_value = match data_map.get_untracked().get(&data_member.get_untracked()) {
+                Some(ValueType::String(Some(value))) => value.clone(),
+                _ => String::new()
+            };
+
+            if !items.contains(&default_value) && !default_value.is_empty() {
+                other_checked.set(true);
+                other_value.set(default_value.clone());
+            }
+
+            selected_value.set(default_value);
+
+            hydrated.set(true);
+        }
+    });
+
+    // When the other option is selected and the other value changes, update the selected value.
     Effect::new(move || {
-        data_map.update(|map| {
-            map.insert(data_member.get(), ValueType::String(Some(selected_value.get())));
-        });
+        other_checked.get()
+            .then(|| selected_value.set(other_value.get()));
     });
 
     //#endregion
@@ -109,7 +219,15 @@ pub fn RadioList(
             list.retain(|v| *v.get_untracked().input_name != *input_state.get_untracked().input_name)
         });
     });
-    
+
+    // When the selected value changes, update the data map at the correct location and validate.
+    Effect::new(move || {
+        error.set(validate(selected_value.get(), required.get()));
+        data_map.update(|map| {
+            map.insert(data_member.get(), ValueType::String(Some(selected_value.get())));
+        });
+    });
+
     //#endregion
     //#region Render Logic
 
@@ -122,9 +240,12 @@ pub fn RadioList(
                     .map(|item| {
                         let item = RwSignal::new(item);
                         let checked_signal = Signal::derive(move || {
-                            selected_value.get() == item.get()
+                            selected_value.get() == item.get() && !other_checked.get()
                         });
                         let on_change = move || {
+                            // on_change only runs when the radio button is checked, not when unchecked.
+                            // Change the selected value to the new one.
+                            other_checked.set(false);
                             selected_value.set(item.get());
                             error
                                 .set(
@@ -136,9 +257,6 @@ pub fn RadioList(
                             dirty.set(true);
                         };
 
-                        // on_change only runs when the radio button is checked, not when unchecked.
-                        // Change the selected value to the new one.
-
                         view! {
                             <Radio
                                 checked=checked_signal
@@ -151,6 +269,18 @@ pub fn RadioList(
                         }
                     })
                     .collect::<Vec<_>>()}
+
+                    <Show when=move || !other_prompt.get().is_empty()>
+                        <RadioOther
+                            checked=other_checked
+                            name=data_member
+                            disabled=disabled
+                            value=other_value
+                            on_change=move |_| other_checked.set(true)
+                            placeholder=other_prompt
+                            dirty=dirty
+                        />
+                    </Show>
             </div>
             <Show when=move || show_errors.get()>
                 <div class="text-red-600 text-sm mr-1.5 ml-1.5">