chore: pc change

src/components/checkboxes.rs

@@ -0,0 +1,19 @@
+use leptos::prelude::*;
+
+#[component]
+pub fn Checkbox(
+    #[prop()] checked: ReadSignal<bool>,
+    #[prop()] on_change: Callback<bool>,
+    #[prop()] label: String,
+    #[prop()] id: String
+) -> impl IntoView {
+    let label_id = id.clone();
+    view! {
+        <label for=label_id>
+            <input
+                type="checkbox"
+                id={id}
+            />
+        </label>
+    }
+}

src/components/loading.rs

@@ -0,0 +1,10 @@
+use leptos::prelude::*;
+
+#[component]
+pub fn Loading() -> impl IntoView {
+    view! {
+        <div>
+            <img src="loading.gif" />
+        </div>
+    }
+}

src/components/mod.rs

@@ -1,9 +1,8 @@
 mod action_button;
-mod text_field;
+mod loading;
 mod multi_entry;
+mod text_field;
+mod select;
+mod checkboxes;
 
-pub use self::{
-    action_button::*,
-    text_field::*,
-    multi_entry::*
-};
+pub use self::{action_button::*, loading::*, multi_entry::*, text_field::*, select::*};

src/components/multi_entry.rs

@@ -1,9 +1,9 @@
 use std::collections::HashMap;
 
+use crate::components::ActionButton;
 use leptos::{leptos_dom::logging::console_log, prelude::*};
 use serde::{Deserialize, Serialize};
 use uuid::Uuid;
-use crate::components::ActionButton;
 
 #[derive(Clone, Serialize, Deserialize, Debug)]
 pub struct MultiEntryData {
@@ -27,7 +27,7 @@ pub struct MultiEntryMember {
     /// The name of the member, used for display only.
     pub display_name: String,
     /// The actual name of the member, used to get the data from an Entry struct.
-    pub member_name: String
+    pub member_name: String,
 }
 
 impl MultiEntryMember {
@@ -35,7 +35,7 @@ impl MultiEntryMember {
     pub fn new() -> Self {
         Self {
             display_name: String::new(),
-            member_name: String::new()
+            member_name: String::new(),
         }
     }
 
@@ -43,7 +43,7 @@ impl MultiEntryMember {
     pub fn from(display_name: String, member_name: String) -> Self {
         Self {
             display_name,
-            member_name
+            member_name,
         }
     }
 
@@ -51,7 +51,7 @@ impl MultiEntryMember {
     pub fn from_str(display_name: &str, member_name: &str) -> Self {
         Self {
             display_name: display_name.into(),
-            member_name: member_name.into()
+            member_name: member_name.into(),
         }
     }
 }
@@ -85,9 +85,6 @@ pub fn Entry(
     /// The secondary display member for this entry.
     #[prop()]
     info_member: Signal<MultiEntryMember>,
-    /// The child components of this Entry view.
-    #[prop()]
-    children: Children
 ) -> impl IntoView {
     let nameData = entry_data.data.get(&name_member.get().member_name).unwrap();
     let infoData = entry_data.data.get(&info_member.get().member_name).unwrap();
@@ -111,17 +108,19 @@ pub fn MultiEntry(
     name_member: Signal<MultiEntryMember>,
     /// The secondary display member for each entry object.
     #[prop()]
-    info_member: Signal<MultiEntryMember>
+    info_member: Signal<MultiEntryMember>,
 ) -> impl IntoView {
     // Creates an entry in the given entries list.
     let create_entry = move |_| {
         let mut new_entry = MultiEntryData::new();
-        new_entry
-            .data
-            .insert(name_member.get().member_name, ValueType::String(String::from("Testing")));
-        new_entry
-            .data
-            .insert(info_member.get().member_name, ValueType::String(new_entry.id.to_string()));
+        new_entry.data.insert(
+            name_member.get().member_name,
+            ValueType::String(String::from("Testing")),
+        );
+        new_entry.data.insert(
+            info_member.get().member_name,
+            ValueType::String(new_entry.id.to_string()),
+        );
         entries.update(|entry_vec| entry_vec.push(new_entry));
     };
 

src/components/select.rs

@@ -0,0 +1,38 @@
+use leptos::prelude::*;
+
+/// A custom-styled select input.
+///
+/// Takes a `Vec<String>` as the set of inputs. Only one value may be selected, which is indicated
+/// by the `value` prop of the component.
+#[component]
+pub fn Select(
+    #[prop(default = vec!["Test Value".into()])] value_list: Vec<String>,
+    #[prop(default = RwSignal::new("".into()))] value: RwSignal<String>,
+    #[prop(default = RwSignal::new("".into()))] label: RwSignal<String>,
+    #[prop(default = RwSignal::new(false))] disabled: RwSignal<bool>,
+) -> impl IntoView {
+    view! {
+        <div>
+            <label>
+                {label}
+                <select
+                    class="relative border-2 m-1.5 p-1.5 rounded-md"
+                    class=(["border-red-700", "bg-transparent"], move || !disabled.get())
+                    class=(["border-gray-600", "pointer-events-none", "bg-gray-600/33"], move || disabled.get())
+                    on:change:target=move |e| {
+                        value.set(e.target().value());
+                    }>
+                    // This closure handles the display of the options.
+                    {move || {
+                        value_list.iter().map(
+                            move |value| {
+                                let display = value.to_owned();
+                                view! { <option value={display}>{display.clone()}</option> }
+                            }
+                        ).collect::<Vec<_>>()
+                    }}
+                </select>
+            </label>
+        </div>
+    }
+}

src/components/text_field.rs

@@ -1,26 +1,39 @@
+use std::str::FromStr;
 use leptos::prelude::*;
 
 #[component]
-pub fn OutlinedTextField(
+pub fn OutlinedTextField<T>(
     #[prop(default = String::from(""))] placeholder: String,
-    #[prop(default = RwSignal::new("".to_string()))] value: RwSignal<String>,
+    #[prop(default = RwSignal::new(T::default()))] value: RwSignal<T>,
     #[prop(default = RwSignal::new(false))] disabled: RwSignal<bool>,
     #[prop(default = String::from(""))] name: String,
     #[prop(default = String::from(""))] label: String,
     #[prop(default = String::from(""))] input_type: String,
-) -> impl IntoView {
+) -> impl IntoView
+where
+    T: Default + 'static + FromStr + ToString + PartialEq + Send + Sync + Clone
+{
+    // Parsing logic for non-string types which happens on each input.
+    let on_input = move |e| {
+        let input_value = event_target_value(&e);
+        let parsed_value = T::from_str(&input_value)
+            .unwrap_or_default();
+        value.set(parsed_value);
+    };
+
     view! (
         <label>
             { label }
             <input
                 class="border-2 m-1.5 p-1.5 rounded-md bg-transparent mt-6 relative transition-all duration-400"
-                class=(["border-red-700"], move || !disabled.get())
-                class=(["border-gray-600", "pointer-events-none"], move || disabled.get())
+                class=(["border-red-700", "bg-transparent"], move || !disabled.get())
+                class=(["border-gray-600", "pointer-events-none", "bg-gray-600/33"], move || disabled.get())
                 r#type={input_type}
                 disabled={disabled}
                 placeholder={placeholder}
                 prop:name=name
-                bind:value=value  // This is a two-way binding - it is allowed to read *and* write.
+                prop:value={move || value.get().to_string()}  // Sets the initial value.
+                on:input=on_input  // Sets the value on each input.
             />
         </label>
     )