From 47905ca764c4ccef66da0ad10c74c237e751b897 Mon Sep 17 00:00:00 2001
From: Ryan Mwangi <ryannganga13325@gmail.com>
Date: Tue, 10 Dec 2024 15:15:34 +0300
Subject: [PATCH] feat: add tags functionality

---
 src/components/item_form.rs | 37 +++++++++++++++++++++++++++++++++----
 1 file changed, 33 insertions(+), 4 deletions(-)

diff --git a/src/components/item_form.rs b/src/components/item_form.rs
index 7e6c12b..67763e8 100644
--- a/src/components/item_form.rs
+++ b/src/components/item_form.rs
@@ -1,6 +1,3 @@
-/// Form component for adding a new item.
-/// Handles user input for item name, description, and optional tags.
-/// Calls `on_submit` when the form is submitted.
 use leptos::*;
 use leptos_dom::ev::SubmitEvent;
 
@@ -9,6 +6,17 @@ pub fn ItemForm(on_submit: Box<dyn Fn(String, String, Vec<(String, String)>)>) -
     let (name, set_name) = create_signal(String::new());
     let (description, set_description) = create_signal(String::new());
     let (tags, set_tags) = create_signal(Vec::<(String, String)>::new());
+    let (tag_key, set_tag_key) = create_signal(String::new());
+    let (tag_value, set_tag_value) = create_signal(String::new());
+
+    // Handle adding a new tag
+    let add_tag = move |_| {
+        if !tag_key.get().is_empty() && !tag_value.get().is_empty() {
+            set_tags.update(|t| t.push((tag_key.get(), tag_value.get())));
+            set_tag_key.set(String::new());
+            set_tag_value.set(String::new());
+        }
+    };
 
     // Handle form submission.
     let handle_submit = move |ev: SubmitEvent| {
@@ -34,7 +42,28 @@ pub fn ItemForm(on_submit: Box<dyn Fn(String, String, Vec<(String, String)>)>) -
                 value={description.get()}
                 on:input=move |e| set_description.set(event_target_value(&e))
             />
+            <div>
+                <h3>{ "Add Tags" }</h3>
+                <input
+                    type="text"
+                    placeholder="Key"
+                    value={tag_key.get()}
+                    on:input=move |e| set_tag_key.set(event_target_value(&e))
+                />
+                <input
+                    type="text"
+                    placeholder="Value"
+                    value={tag_value.get()}
+                    on:input=move |e| set_tag_value.set(event_target_value(&e))
+                />
+                <button type="button" on:click=add_tag>{ "Add Tag" }</button>
+            </div>
+            <ul>
+                {tags.get().iter().map(|(key, value)| view! {
+                    <li>{ format!("{}: {}", key, value) }</li>
+                }).collect::<Vec<_>>()}
+            </ul>
             <button type="submit">{ "Add Item" }</button>
         </form>
     }
-}
\ No newline at end of file
+}