Allow marking of completed packs.

cube_shuffle-wasm/src/components/pack_card.rs

@@ -1,40 +1,71 @@
-use yew::prelude::*;
-
 use itertools::Itertools;
+use yew::prelude::*;
 
 use cube_shuffle_core::distribution_shuffle::Pack;
 
 #[derive(Clone, PartialEq, Properties)]
 pub struct Props {
     pub index: usize,
     pub pack: Pack<String>,
+    pub checked: bool,
+    pub onclick: Callback<usize>,
 }
 
-#[function_component(PackCard)]
-pub fn pack_card(props: &Props) -> Html {
-    let sources: Html = props.pack.card_sources
-        .iter()
-        .sorted_unstable_by_key(|(name,_)| {name.as_str()})
-        .map(|(name, amount)| {
-        html! {
-           <tr>
-               <th>{ name }</th>
-               <td>{ amount }</td>
-           </tr>
-       }
-    }).collect();
-    return html! {
-        <div class="card">
-            <div class="card-header-title">
-                <label class="label">{ props.index }</label>
-            </div>
-            <div class="card-content">
-                <table class="table is-hoverable is-fullwidth is-striped">
-                    <tbody>
-                        { sources }
-                    </tbody>
-                </table>
+
+pub enum Msg {
+    Clicked,
+}
+
+pub struct PackCard {}
+
+impl Component for PackCard {
+    type Message = Msg;
+    type Properties = Props;
+
+    fn create(_: &Context<Self>) -> Self {
+        Self {}
+    }
+
+    fn update(&mut self, ctx: &Context<Self>, msg: Self::Message) -> bool {
+        let props = ctx.props();
+        match msg {
+            Msg::Clicked => {
+                props.onclick.emit(props.index);
+                false
+            }
+        }
+    }
+
+    fn view(&self, ctx: &Context<Self>) -> Html {
+        let props = ctx.props();
+        let link = ctx.link();
+        let sources: Html = props.pack.card_sources
+            .iter()
+            .sorted_unstable_by_key(|(name, _)| { name.as_str() })
+            .map(|(name, amount)| {
+                html! {
+                   <tr>
+                       <th>{ name }</th>
+                       <td>{ amount }</td>
+                   </tr>
+               }
+            })
+            .collect();
+        let checked_bg = if props.checked { " has-background-success" } else { "" };
+        let on_click = link.callback(|_| Msg::Clicked);
+        return html! {
+            <div class="card" onclick={ on_click }>
+                <div class={ "card-header-title".to_owned() + checked_bg }>
+                    <label class="label">{ props.index + 1 }</label>
+                </div>
+                <div class="card-content">
+                    <table class="table is-hoverable is-fullwidth is-striped">
+                        <tbody>
+                            { sources }
+                        </tbody>
+                    </table>
+                </div>
             </div>
-        </div>
-    };
+        };
+    }
 }

cube_shuffle-wasm/src/components/pack_list.rs

@@ -1,3 +1,4 @@
+use itertools::Itertools;
 use yew::prelude::*;
 
 use cube_shuffle_core::distribution_shuffle::Pack;
@@ -9,18 +10,67 @@ pub struct Props {
     pub packs: Vec<Pack<String>>,
 }
 
-#[function_component(PackList)]
-pub fn pack_list(props: &Props) -> Html {
-    let packs: Html = props.packs.iter().enumerate().map(|(index, pack)| {
-        html! {
-            <div class="column is-narrow">
-                <PackCard index={ index + 1 } pack={ pack.clone() }/>
-            </div>
+pub struct PackItem {
+    pub pack: Pack<String>,
+    pub checked: bool,
+}
+
+pub enum Msg {
+    Check(usize),
+}
+
+pub struct PackList {
+    packs: Vec<PackItem>,
+}
+
+impl Component for PackList {
+    type Message = Msg;
+    type Properties = Props;
+
+    fn create(ctx: &Context<Self>) -> Self {
+        Self{
+            packs: ctx.props().packs.iter()
+                .map(|pack|{
+                    PackItem{
+                        pack: pack.to_owned(),
+                        checked: false,
+                    }
+                })
+                .collect(),
+        }
+    }
+
+    fn update(&mut self, _: &Context<Self>, msg: Self::Message) -> bool {
+        match msg {
+            Msg::Check(index) => {
+                self.packs[index].checked = !(self.packs[index].checked);
+                true
+            }
         }
-    }).collect();
-    return html! {
-        <div class="columns is-multiline is-centered">
-            { packs }
-        </div>
-    };
+    }
+
+    fn view(&self, ctx: &Context<Self>) -> Html {
+        let packs: Html = self.packs.iter()
+            .enumerate()
+            .sorted_by_key(|(_, pi)| pi.checked)
+            .map(|(index, pack_item)| {
+                let on_click = ctx.link().callback(|index| {Msg::Check(index)});
+                html! {
+                    <div class="column is-narrow">
+                        <PackCard
+                            index={ index }
+                            pack={ pack_item.pack.clone() }
+                            checked={ pack_item.checked }
+                            onclick={ on_click }
+                        />
+                    </div>
+                }
+            })
+            .collect();
+        return html! {
+            <div class="columns is-multiline is-centered">
+                { packs }
+            </div>
+        };
+    }
 }