From 08821aaaaf8638ca038be0aacf562ff0ae63e6ae Mon Sep 17 00:00:00 2001
From: ryan <ryannganga13325@gmail.com>
Date: Fri, 3 Jan 2025 14:15:17 +0300
Subject: [PATCH] feat(items-list): enable dynamic custom properties

- Edited ItemsList to support dynamic custom properties for each item, managed via HashMap.
- Introduced a UI input for users to add new properties dynamically.
---
 src/components/items_list.rs | 116 ++++++++++++++++++++++++++---------
 src/models/item.rs           |   3 +-
 2 files changed, 90 insertions(+), 29 deletions(-)

diff --git a/src/components/items_list.rs b/src/components/items_list.rs
index 557373a..3f9f2f6 100644
--- a/src/components/items_list.rs
+++ b/src/components/items_list.rs
@@ -5,7 +5,9 @@ use serde::Deserialize;
 use uuid::Uuid;
 use leptos::logging::log;
 use crate::models::item::Item;
+use std::collections::HashMap;
 use std::sync::{Arc, Mutex};
+use wasm_bindgen::JsCast;
 
 #[derive(Deserialize, Clone, Debug)]
 struct WikidataSuggestion {
@@ -19,6 +21,8 @@ pub fn ItemsList(
     items: ReadSignal<Vec<Item>>,
     set_items: WriteSignal<Vec<Item>>,
 ) -> impl IntoView {
+    // State to manage dynamic property names
+    let (custom_properties, set_custom_properties) = create_signal(Vec::<String>::new());
     
     // Ensure there's an initial empty row
     set_items.set(vec![Item {
@@ -28,6 +32,7 @@ pub fn ItemsList(
         tags: vec![],
         reviews: vec![],
         wikidata_id: None,
+        custom_properties: HashMap::new(),
     }]);
 
     let (wikidata_suggestions, set_wikidata_suggestions) =
@@ -69,7 +74,10 @@ pub fn ItemsList(
                     "description" => {
                         item.description = value.clone();
                     }
-                    _ => (),
+                    _ => {
+                        // Update custom property
+                        item.custom_properties.insert(field.to_string(), value.clone());
+                    }
                 }
             }
 
@@ -82,11 +90,21 @@ pub fn ItemsList(
                     tags: vec![],
                     reviews: vec![],
                     wikidata_id: None,
+                    custom_properties: HashMap::new(),
                 });
             }
         });
     };
 
+    // Add a new custom property
+    let add_property = move |property: String| {
+        set_custom_properties.update(|props| {
+            if !props.contains(&property) && !property.is_empty() {
+                props.push(property);
+            }
+        });
+    };
+
     // Add a new tag to an item
     let add_tag = move |index: usize, key: String, value: String| {
         set_items.update(|items| {
@@ -100,7 +118,7 @@ pub fn ItemsList(
     let remove_tag = move |item_index: usize, tag_index: usize| {
         set_items.update(|items| {
             if let Some(item) = items.get_mut(item_index) {
-                item.tags.remove(tag_index);
+                    item.tags.remove(tag_index);
             }
         });
     };
@@ -108,7 +126,7 @@ pub fn ItemsList(
     // Remove an item
     let remove_item = move |index: usize| {
         set_items.update(|items| {
-            items.remove(index);
+                items.remove(index);
         });
     };
 
@@ -135,16 +153,16 @@ pub fn ItemsList(
                             <tr>
                                 <td>{ property }</td>
                                 {move || items.get().iter().enumerate().map(|(index, item)| {
-                                    view! {
-                                        <td>
+                                        view! {
+                                            <td>
                                             {match property {
                                                 "Name" => view! {
-                                                    <EditableCell
-                                                        value=item.name.clone()
+                                                <EditableCell
+                                                    value=item.name.clone()
                                                         on_input=move |value| update_item(index, "name", value)
                                                         key=format!("name-{}", index)
-                                                    />
-                                                    <ul>
+                                                />
+                                                <ul>
                                                         {move || {
                                                             let suggestions = wikidata_suggestions.get().to_vec();
                                                             suggestions.into_iter().map(|suggestion| {
@@ -160,37 +178,37 @@ pub fn ItemsList(
                                                                     ("wikidata_id".to_string(), id.clone()),
                                                                 ];
 
-                                                                view! {
-                                                                    <li on:click=move |_| {
-                                                                        set_items.update(|items| {
-                                                                            if let Some(item) = items.get_mut(index) {
+                                                        view! {
+                                                            <li on:click=move |_| {
+                                                                set_items.update(|items| {
+                                                                    if let Some(item) = items.get_mut(index) {
                                                                                 item.description = description_for_click.clone();
                                                                                 item.tags.extend(tags.clone());
                                                                                 item.wikidata_id = Some(id.clone());
                                                                                 item.name = label_for_click.clone();
-                                                                            }
-                                                                        });
-                                                                    }>
+                                                                    }
+                                                                });
+                                                            }>
                                                                         { format!("{} - {}", label_for_display, description_for_display) }
-                                                                    </li>
-                                                                }
+                                                            </li>
+                                                        }
                                                             }).collect::<Vec<_>>()
                                                         }}
-                                                    </ul>
+                                                </ul>
                                                 }.into_view(),
                                                 "Description" => view! {
-                                                    <EditableCell
-                                                        value=item.description.clone()
+                                                <EditableCell
+                                                    value=item.description.clone()
                                                         on_input=move |value| update_item(index, "description", value)
                                                         key=format!("description-{}", index)
-                                                    />
+                                                />
                                                 }.into_view(),
                                                 "Tags" => view! {
-                                                    <TagEditor
-                                                        tags=item.tags.clone()
+                                                <TagEditor
+                                                    tags=item.tags.clone()
                                                         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! {
                                                     <button on:click=move |_| remove_item(index)>{ "Delete" }</button>
@@ -199,14 +217,56 @@ pub fn ItemsList(
                                                     { "" }
                                                 }.into_view(),
                                             }}
-                                        </td>
-                                    }
+                                            </td>
+                                        }
                                 }).collect::<Vec<_>>()}                                
                             </tr>
                         }
-                    }).collect::<Vec<_>>()}                    
+                    }).collect::<Vec<_>>()}
+                    // Dynamically adding custom properties as columns
+                    {move || {
+                        let custom_props = custom_properties.get().clone();
+                        custom_props.into_iter().map(move |property| {
+                            let property_clone = property.clone();
+                            view! {
+                                <tr>
+                                    <td>{ property }</td>
+                                    {move || {
+                                        let property_clone = property_clone.clone(); // Clone `property_clone` again for the inner closure
+                                        items.get().iter().enumerate().map(move |(index, item)| {
+                                            let property_clone_for_closure = property_clone.clone();
+                                            view! {
+                                                <td>
+                                                    <EditableCell
+                                                        value=item.custom_properties.get(&property_clone).cloned().unwrap_or_default()
+                                                        on_input=move |value| update_item(index, &property_clone_for_closure, value)
+                                                        key=format!("custom-{}-{}", property_clone, index)
+                                                    />
+                                                </td>
+                                            }
+                                        }).collect::<Vec<_>>()
+                                    }}
+                                </tr>
+                            }
+                        }).collect::<Vec<_>>()
+                    }}
                 </tbody>
             </table>
+            <div style="margin-bottom: 20px;">
+                <input type="text" id="new-property" placeholder="Add New Property"/>
+                <button on:click=move |_| {
+                    let property = web_sys::window()
+                        .unwrap()
+                        .document()
+                        .unwrap()
+                        .get_element_by_id("new-property")
+                        .unwrap()
+                        .dyn_into::<web_sys::HtmlInputElement>()
+                        .unwrap()
+                        .value();
+                    add_property(property);
+                }>{ "Add Property" }</button>
+            </div>
         </div>
     }
 }
diff --git a/src/models/item.rs b/src/models/item.rs
index efb9d2f..6b031a2 100644
--- a/src/models/item.rs
+++ b/src/models/item.rs
@@ -1,7 +1,7 @@
 /// Represents an Item in CompareWare.
 /// Each item has metadata and key-value tags for categorization.
 use serde::{Deserialize, Serialize};
-
+use std::collections::HashMap;
 #[derive(Serialize, Deserialize, Debug, Clone)]
 pub struct Item {
     pub id: String,
@@ -10,6 +10,7 @@ pub struct Item {
     pub tags: Vec<(String, String)>,
     pub reviews: Vec<ReviewWithRating>,
     pub wikidata_id: Option<String>,
+    pub custom_properties: HashMap<String, String>,
 }
 
 #[derive(Serialize, Deserialize, Debug, Clone)]