95 lines
3.2 KiB
Rust
95 lines
3.2 KiB
Rust
use leptos::*;
|
|
use leptos_dom::ev::SubmitEvent;
|
|
|
|
#[component]
|
|
pub fn ItemForm(
|
|
on_submit: Box<dyn Fn(String, String, Vec<(String, String)>, String) + 'static>
|
|
) -> impl IntoView {
|
|
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());
|
|
let (review, set_review) = 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| {
|
|
ev.prevent_default();
|
|
on_submit(
|
|
name.get(), // Item name
|
|
description.get(), // Item description
|
|
tags.get().clone(), // Tags
|
|
review.get(), // Review
|
|
);
|
|
|
|
// Reset values after submission
|
|
set_name.set(String::new());
|
|
set_description.set(String::new());
|
|
set_tags.set(vec![]);
|
|
set_review.set(String::new());
|
|
};
|
|
|
|
view! {
|
|
<form on:submit=handle_submit>
|
|
// Item Name Input
|
|
<input
|
|
type="text"
|
|
placeholder="Name"
|
|
value={name.get()}
|
|
on:input=move |e| set_name.set(event_target_value(&e))
|
|
/>
|
|
|
|
// Item Description Input
|
|
<textarea
|
|
placeholder="Description"
|
|
value={description.get()}
|
|
on:input=move |e| set_description.set(event_target_value(&e))
|
|
/>
|
|
|
|
// Tags Section
|
|
<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>
|
|
|
|
// Review Input
|
|
<div>
|
|
<h3>{ "Review" }</h3>
|
|
<textarea
|
|
placeholder="Write your review here"
|
|
value={review.get()}
|
|
on:input=move |e| set_review.set(event_target_value(&e))
|
|
/>
|
|
</div>
|
|
|
|
// Submit Button
|
|
<button type="submit">{ "Add Item with Review" }</button>
|
|
</form>
|
|
}
|
|
}
|