Implement key-value pairs for ChipsList #23

Merged
BobdaFett merged 1 commits from feature/chipslist-kv-pairs into main 2025-11-20 16:43:26 +00:00
2 changed files with 26 additions and 10 deletions

No files matched your search

+11 -8
View File
@@ -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
/>
}
+15 -2
View File
@@ -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"
/>