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

143
src/components/items_list.rs
View file

@ -112,86 +112,99 @@ 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>
<td> {move || items.get().iter().enumerate().map(|(index, item)| {
<EditableCell view! {
value=item.name.clone() <td>
on_input=move |value| update_item(index, "name", value) {match property {
key=format!("name-{}", index) // Unique key per cell "Name" => view! {
/> <EditableCell
<ul> value=item.name.clone()
{move || { on_input=move |value| update_item(index, "name", value)
let suggestions = wikidata_suggestions.get().to_vec(); key=format!("name-{}", index)
suggestions.into_iter().map(|suggestion| { />
let label_for_click = suggestion.label.clone(); <ul>
let label_for_display = suggestion.label.clone(); {move || {
let description_for_click = suggestion.description.clone().unwrap_or_default(); let suggestions = wikidata_suggestions.get().to_vec();
let description_for_display = suggestion.description.clone().unwrap_or_default(); suggestions.into_iter().map(|suggestion| {
let id = suggestion.id.clone(); let label_for_click = suggestion.label.clone();
let label_for_display = suggestion.label.clone();
let description_for_click = suggestion.description.clone().unwrap_or_default();
let description_for_display = suggestion.description.clone().unwrap_or_default();
let id = suggestion.id.clone();
// Tags for the item // Tags for the item
let tags = vec![ let tags = vec![
("source".to_string(), "wikidata".to_string()), ("source".to_string(), "wikidata".to_string()),
("wikidata_id".to_string(), id.clone()), ("wikidata_id".to_string(), id.clone()),
]; ];
view! { view! {
<li on:click=move |_| { <li on:click=move |_| {
set_items.update(|items| { set_items.update(|items| {
if let Some(item) = items.get_mut(index) { if let Some(item) = items.get_mut(index) {
item.description = description_for_click.clone(); item.description = description_for_click.clone();
item.tags.extend(tags.clone()); item.tags.extend(tags.clone());
item.wikidata_id = Some(id.clone()); item.wikidata_id = Some(id.clone());
item.name = label_for_click.clone(); item.name = label_for_click.clone();
} }
}); });
}> }>
{ format!("{} - {}", label_for_display, description_for_display) } { format!("{} - {}", label_for_display, description_for_display) }
</li> </li>
} }
}).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) />
/> }.into_view(),
</td> "Tags" => view! {
// Tag Editor <TagEditor
<td> tags=item.tags.clone()
<TagEditor on_add=move |key, value| add_tag(index, key, value)
tags=item.tags.clone() on_remove=Arc::new(Mutex::new(move |tag_index: usize| remove_tag(index, tag_index)))
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))) }.into_view(),
/> "Actions" => view! {
</td> <button on:click=move |_| remove_item(index)>{ "Delete" }</button>
// Actions }.into_view(),
<td> _ => view! {
<button on:click=move |_| remove_item(index)>{ "Delete" }</button> { "" }
</td> }.into_view(),
}}
</td>
}
}).collect::<Vec<_>>()}
</tr> </tr>
} }
}).collect::<Vec<_>>()} }).collect::<Vec<_>>()}
</tbody> </tbody>
</table> </table>
</div> </div>