From e8fd578b776db53d0904c7253b07f5f0086ab854 Mon Sep 17 00:00:00 2001
From: Ryan Mwangi <ryannganga13325@gmail.com>
Date: Tue, 17 Dec 2024 16:14:49 +0300
Subject: [PATCH] feat(comparison table): add comparison table to compare
 checked items.

---
 src/components/items_list.rs | 59 ++++++++++++++++++++++++++++++++++--
 1 file changed, 57 insertions(+), 2 deletions(-)

diff --git a/src/components/items_list.rs b/src/components/items_list.rs
index 79af6c5..1274ad5 100644
--- a/src/components/items_list.rs
+++ b/src/components/items_list.rs
@@ -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>
     }
-}
-
+}
\ No newline at end of file