From 8d2ae5fdfb540de427d1555e99b17dba2d839d6e Mon Sep 17 00:00:00 2001
From: Lucas Vas <lvas463@gmail.com>
Date: Thu, 20 Nov 2025 11:40:40 -0500
Subject: [PATCH] feat: implement key-value pairs for ChipsList

---
 src/components/chips.rs | 19 +++++++++++--------
 src/pages/home_page.rs  | 17 +++++++++++++++--
 2 files changed, 26 insertions(+), 10 deletions(-)

diff --git a/src/components/chips.rs b/src/components/chips.rs
index ecf9da0..bc3a31c 100644
--- a/src/components/chips.rs
+++ b/src/components/chips.rs
@@ -22,6 +22,7 @@ use crate::common::ValueType;
 /// ```
 #[component]
 pub fn Chip(
+    #[prop(into)] display_text: String,
     #[prop(into)] value: String,
     #[prop(into)] name: String,
     #[prop(into)] on_change: Callback<(), ()>,
@@ -38,7 +39,7 @@ pub fn Chip(
     view! {
         <label for=id>
             <input
-                type="checkbox" 
+                r#type="checkbox"
                 class="relative peer shrink-0 hidden"
                 name=name.clone()
                 id=id.clone()
@@ -54,7 +55,7 @@ pub fn Chip(
                 peer-disabled:peer-checked:border-gray-700
                 peer-disabled:cursor-default
                 transition-all duration-150">
-                <span>{value.clone()}</span>
+                <span>{display_text.clone()}</span>
             </div>
         </label>
     }
@@ -71,7 +72,8 @@ pub fn Chip(
 pub fn ChipsList(
     #[prop(into)] data_member: String,
     #[prop()] data_map: RwSignal<HashMap<String, ValueType>>,
-    #[prop()] items: Vec<String>,
+    #[prop()] displayed_text: Vec<String>,
+    #[prop()] values: Vec<String>,
     #[prop(default = RwSignal::new(false))] disabled: RwSignal<bool>,
     #[prop(optional, into)] label: String,
 ) -> impl IntoView {
@@ -79,11 +81,11 @@ pub fn ChipsList(
         <div class="m-1.5 mt-0 mb-0">
             <span class="font-bold">{label}</span>
             <div class="flex flex-row flex-wrap gap-2 mt-1">
-                {items
+                {displayed_text.into_iter().zip(values)
                     .into_iter()
-                    .map(|item| {
+                    .map(|(text, value)| {
                         let checked_signal = Signal::derive({
-                            let item_name = item.clone();
+                            let item_name = value.clone();
                             let data_member = data_member.clone();
                             move || {
                                 data_map.get()
@@ -97,7 +99,7 @@ pub fn ChipsList(
                         });
                     
                         let on_change = {
-                            let item_name = item.clone();
+                            let item_name = value.clone();
                             let data_member = data_member.clone();
                             move || {
                                 let result = ValueType::String(Some(item_name.clone()));
@@ -133,7 +135,8 @@ pub fn ChipsList(
                                 checked=checked_signal
                                 name=data_member.clone()
                                 on_change=on_change
-                                value=item.clone()
+                                value=value.clone()
+                                display_text=text.clone()
                                 disabled=disabled
                             />
                         }
diff --git a/src/pages/home_page.rs b/src/pages/home_page.rs
index 7c78aec..d04cae9 100644
--- a/src/pages/home_page.rs
+++ b/src/pages/home_page.rs
@@ -271,7 +271,7 @@ pub fn HomePage() -> impl IntoView {
                                                 <ChipsList
                                                     data_member="athletic_requirements"
                                                     data_map=expandable_react.data
-                                                    items=vec!(
+                                                    displayed_text=vec!(
                                                             "Football", "Soccer", "Cross Country", "Cheerleading",
                                                             "Swimming", "Wrestling", "Ski", "Basketball",
                                                             "Lacrosse", "Softball", "Indoor/Outdoor Track",
@@ -279,6 +279,14 @@ pub fn HomePage() -> impl IntoView {
                                                         )
                                                         .into_iter().map(|s| s.to_owned())
                                                         .collect()
+                                                    values=vec!(
+                                                            "football", "soccer", "cross_country", "cheerleading",
+                                                            "swimming", "wrestling", "ski", "basketball",
+                                                            "lacrosse", "softball", "track",
+                                                            "golf", "tennis", "volleyball"
+                                                        )
+                                                        .into_iter().map(|s| s.to_owned())
+                                                        .collect()
                                                     disabled=elements_disabled
                                                     label="Sports/Athletic Requirements"
                                                 />
@@ -287,12 +295,17 @@ pub fn HomePage() -> impl IntoView {
                                                 <ChipsList
                                                     data_member="community_involvement"
                                                     data_map=expandable_react.data
-                                                    items=vec!(
+                                                    displayed_text=vec!(
                                                             "Lion's Club", "Knights of Columbus",
                                                             "Community Service > 20hrs"
                                                         )
                                                         .into_iter().map(|s| s.to_owned())
                                                         .collect()
+                                                    values=vec!(
+                                                            "lions_club", "koc", "serv_20h"
+                                                        )
+                                                        .into_iter().map(|s| s.to_owned())
+                                                        .collect()
                                                     disabled=elements_disabled
                                                     label="Required Community Involvement"
                                                 />