ryanmwangi/Compware
1
0
Fork 0
Code Issues Pull requests Releases Activity

feat(items-list)(v0.1.0): redesign table layout to display properties as rows and items as columns

Browse source
This commit is contained in:
ryan 2025-01-02 16:13:51 +03:00
parent 9f28d30d48
commit 593bee20a7
1 changed files with 78 additions and 65 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

45
src/components/items_list.rs
View file

@ -112,28 +112,37 @@ pub fn ItemsList(
}); });
}; };
// List of properties to display as rows
let properties = vec!["Name", "Description", "Tags", "Actions"];
view! { view! {
<div> <div>
<h1>{ "Items List" }</h1> <h1>{ "Items List" }</h1>
<table> <table>
<thead> <thead>
<tr> <tr>
<th>{ "Name" }</th> <th>{ "Property" }</th>
<th>{ "Description" }</th> {move || items.get().iter().enumerate().map(|(index, _)| {
<th>{ "Tags" }</th> view! {
<th>{ "Actions" }</th> <th>{ format!("Item {}", index + 1) }</th>
}
}).collect::<Vec<_>>()}
</tr> </tr>
</thead> </thead>
<tbody> <tbody>
{move || items.get().iter().enumerate().map(|(index, item)| { {properties.into_iter().map(|property| {
view! { view! {
<tr> <tr>
// Editable Name Field with Wikidata Integration <td>{ property }</td>
{move || items.get().iter().enumerate().map(|(index, item)| {
view! {
<td> <td>
{match property {
"Name" => view! {
<EditableCell <EditableCell
value=item.name.clone() value=item.name.clone()
on_input=move |value| update_item(index, "name", value) on_input=move |value| update_item(index, "name", value)
key=format!("name-{}", index) // Unique key per cell key=format!("name-{}", index)
/> />
<ul> <ul>
{move || { {move || {
@ -168,27 +177,31 @@ pub fn ItemsList(
}).collect::<Vec<_>>() }).collect::<Vec<_>>()
}} }}
</ul> </ul>
</td> }.into_view(),
// Editable Description Field "Description" => view! {
<td>
<EditableCell <EditableCell
value=item.description.clone() value=item.description.clone()
on_input=move |value| update_item(index, "description", value) on_input=move |value| update_item(index, "description", value)
key=format!("description-{}", index) key=format!("description-{}", index)
/> />
</td> }.into_view(),
// Tag Editor "Tags" => view! {
<td>
<TagEditor <TagEditor
tags=item.tags.clone() tags=item.tags.clone()
on_add=move |key, value| add_tag(index, key, value) on_add=move |key, value| add_tag(index, key, value)
on_remove=Arc::new(Mutex::new(move |tag_index: usize| remove_tag(index, tag_index))) on_remove=Arc::new(Mutex::new(move |tag_index: usize| remove_tag(index, tag_index)))
/> />
</td> }.into_view(),
// Actions "Actions" => view! {
<td>
<button on:click=move |_| remove_item(index)>{ "Delete" }</button> <button on:click=move |_| remove_item(index)>{ "Delete" }</button>
}.into_view(),
_ => view! {
{ "" }
}.into_view(),
}}
</td> </td>
}
}).collect::<Vec<_>>()}
</tr> </tr>
} }
}).collect::<Vec<_>>()} }).collect::<Vec<_>>()}