seperate component for name + switch to bulma.css

1 files changed, 161 insertions, 0 deletions

diff --git a/src/name.rs b/src/name.rs
new file mode 100644
index 0000000..bf91186
--- /dev/null
+++ b/src/name.rs
@@ -0,0 +1,161 @@
+use yew::prelude::*;
+
+#[derive(Clone)]
+pub struct Name {
+    pub prefix: String,
+    pub first_name: String,
+    pub middle_name: String,
+    pub last_name: String,
+    pub suffix: String,
+}
+
+impl Name {
+    pub fn new() -> Self { 
+        Self {
+            prefix: String::new(),
+            first_name: String::new(),
+            middle_name: String::new(),
+            last_name: String::new(),
+            suffix: String::new(),
+        }
+    }
+    pub fn formatted_name(&self) -> String {
+        let mut formatted_name = String::new();
+
+        if !self.prefix.is_empty() {
+            formatted_name.push_str(&self.prefix);
+        }
+        if !self.first_name.is_empty() {
+            formatted_name.push_str(" ");
+            formatted_name.push_str(&self.first_name);
+        }
+        if !self.middle_name.is_empty() {
+            formatted_name.push_str(" ");
+            formatted_name.push_str(&self.middle_name);
+        }
+        if !self.last_name.is_empty() {
+            formatted_name.push_str(" ");
+            formatted_name.push_str(&self.last_name);
+        }
+        if !self.suffix.is_empty() {
+            formatted_name.push_str(", ");
+            formatted_name.push_str(&self.suffix);
+        }
+
+        formatted_name
+    }
+}
+
+pub struct NameView {
+    link: ComponentLink<Self>,
+    value: Name,
+    oninput: Callback<Name>,
+    //errors: Vec<String>,
+}
+
+pub enum Msg {
+    UpdatePrefix(String),
+    UpdateFirstName(String),
+    UpdateMiddleName(String),
+    UpdateLastName(String),
+    UpdateSuffix(String),
+}
+
+#[derive(Clone, PartialEq, Properties)]
+pub struct Props {
+    pub oninput: Callback<Name>,
+    //pub errors: Vec<String>,
+}
+
+impl Component for NameView {
+    type Message = Msg;
+    type Properties = Props;
+    fn create(props: <Self as yew::Component>::Properties, link: yew::html::Scope<Self>) -> Self {
+        Self {
+            link,
+            value: Name::new(),
+            oninput: props.oninput,
+        }
+    }
+    fn update(&mut self, msg: <Self as yew::Component>::Message) -> bool {
+        match msg {
+            Msg::UpdatePrefix(p) => self.value.prefix = p,
+            Msg::UpdateFirstName(f) => self.value.first_name = f,
+            Msg::UpdateMiddleName(m) => self.value.middle_name = m,
+            Msg::UpdateLastName(l) => self.value.last_name = l,
+            Msg::UpdateSuffix(s) => self.value.suffix = s,
+        };
+        self.oninput.emit(self.value.clone());
+        true
+    }
+    fn change(&mut self, props: <Self as yew::Component>::Properties) -> bool { 
+        self.oninput = props.oninput;
+        true
+    }
+    fn view(&self) -> yew::virtual_dom::VNode {
+        html!{
+            <>
+                <h3 class="subtitle">{ "Name" }</h3>
+
+                <div class="columns">
+                
+                    <div class="field column">
+                        <label class="label">{ "Prefix" }</label>
+                        <div class="control">
+                            <input  id="prefix" 
+                                    type="text" 
+                                    placeholder="Sir" 
+                                    oninput=self.link.callback(|e: InputData| Msg::UpdatePrefix(e.value))
+                            />
+                        </div>
+                    </div>
+
+                    <div class="field column">
+                        <label class="label">{ "First name" }</label>
+                        <div class="control">
+                            <input  id="first_name" 
+                                    type="text" 
+                                    placeholder="Arthur" 
+                                    oninput=self.link.callback(|e: InputData| Msg::UpdateFirstName(e.value))
+                            />
+                        </div>
+                    </div>
+
+                    <div class="field column">
+                        <label class="label">{ "Middle name" }</label>
+                        <div class="control">
+                            <input  id="middle_name" 
+                                    type="text" 
+                                    placeholder="Charles"
+                                    oninput=self.link.callback(|e: InputData| Msg::UpdateMiddleName(e.value))
+                            />
+                        </div>
+                    </div>
+                    
+                    <div class="field column">
+                        <label class="label">{ "Last name" }</label>
+                        <div class="control">
+                            <input  id="last_name"
+                                    type="text" 
+                                    placeholder="Clarke" 
+                                    oninput=self.link.callback(|e: InputData| Msg::UpdateLastName(e.value))
+                            />
+                        </div>
+                    </div>
+
+                    <div class="field column">
+                        <label class="label">{ "Suffix" }</label>
+                        <div class="control">
+                            <input  id="suffix" 
+                                    type="text" 
+                                    placeholder="CBE FRAS" 
+                                    oninput=self.link.callback(|e: InputData| Msg::UpdateSuffix(e.value))
+                            />
+                        </div>
+                    </div>
+
+                </div>
+            </>
+        }
+    }
+}
\ No newline at end of file