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

feat(comparison table): add comparison table to compare checked items.

This commit is contained in:
Ryan Mwangi 2024-12-17 16:14:49 +03:00
parent e90866fbd9
commit e8fd578b77
1 changed files with 57 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

59
src/components/items_list.rs
View File

@ -5,13 +5,32 @@ use crate::models::item::Item;
#[component]
pub fn ItemsList(items: ReadSignal<Vec<Item>>) -> impl IntoView {
// Create a signal for selected items
let (selected_items_signal, set_selected_items) = create_signal(Vec::<usize>::new());
view! {
<div>
<h2>{ "Items" }</h2>
<ul>
{move || items.get().iter().enumerate().map(|(i, item)| view! {
<li key={i.to_string()}>
<label>
<input
type="checkbox"
checked={selected_items_signal.get().contains(&i)}
on:change=move |_| {
if selected_items_signal.get().contains(&i) {
set_selected_items.update(|items| items.retain(|&x| x != i));
} else {
set_selected_items.update(|items| { items.push(i); });
}
}
/>
{"Select item for comparison"}
</label>
<div>
<strong>{ item.name.clone() }</strong> - { item.description.clone() }
</div>
<ul>
<h4>{ "Tags:" }</h4>
{item.tags.iter().map(|(key, value)| view! {
@ -27,7 +46,43 @@ pub fn ItemsList(items: ReadSignal<Vec<Item>>) -> impl IntoView {
</li>
}).collect::<Vec<_>>()}
</ul>
// Comparison Table
<h2>{ "Comparison Table" }</h2>
<table>
<thead>
<tr>
<th>{ "Item Name" }</th>
<th>{ "Description" }</th>
<th>{ "Tags" }</th>
<th>{ "Reviews" }</th>
</tr>
</thead>
<tbody>
{move || {
let selected_indices = selected_items_signal.get();
selected_indices.iter().map(|&i| {
let item = &items.get()[i];
view! {
<tr key={i.to_string()}>
<td>{ item.name.clone() }</td>
<td>{ item.description.clone() }</td>
<td>
{item.tags.iter().map(|(key, value)| view! {
<span>{ key.clone() + ": " + value + " " }</span>
}).collect::<Vec<_>>()}
</td>
<td>
{item.reviews.iter().map(|review| view! {
<span>{ format!("Rating: {}/5 ", review.rating) }</span>
}).collect::<Vec<_>>()}
</td>
</tr>
}
}).collect::<Vec<_>>()
}}
</tbody>
</table>
</div>
}
}
}