Added sorting function

application/Cargo.toml

@@ -18,6 +18,7 @@ serde = "1.0.196"
 serde_json = "1.0.113"
 rand = "0.8.5"
 gloo-timers = "0.3.0"
+strsim = "0.11.0"
 
 # utils
 # strum = { version = "0.25", features = ["derive", "strum_macros"] }

application/public/styles.scss

@@ -147,3 +147,26 @@ form {
 .success {
   background-color: #4bb24b;
 }
+
+.participants-container {
+  height: 200px;
+  overflow: scroll;
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+  list-style-type: none;
+  margin-top: 0;
+  padding: 0;
+}
+
+.participants-container li {
+  text-align: left;
+  background-color: $secondary-bg-color-light;
+  padding: 5px 10px;
+  border-radius: 5px;
+}
+
+.participants-container li:hover {
+  cursor: pointer;
+  background-color: $secondary-bg-color-lighter;
+}

application/src/pages/times/add.rs

@@ -1,4 +1,35 @@
 use leptos::*;
+use strsim::normalized_damerau_levenshtein;
+
+use crate::util::surrealdb::Participant;
+
+fn sort_participants(participants: Vec<Participant>, search: String) -> Vec<Participant> {
+    let mut filtered_sorted_list: Vec<(Participant, f64)> = participants
+        .into_iter()
+        .map(|participant| {
+            (
+                participant.clone(),
+                normalized_damerau_levenshtein(
+                    &participant.name.to_lowercase(),
+                    &search.to_lowercase(),
+                ),
+            )
+        })
+        .collect();
+
+    filtered_sorted_list.sort_by(|a, b| {
+        let (_, sim_score_a) = a;
+        let (_, sim_score_b) = b;
+        sim_score_b
+            .partial_cmp(sim_score_a)
+            .unwrap_or(std::cmp::Ordering::Equal)
+    });
+
+    filtered_sorted_list
+        .into_iter()
+        .map(|(item, _)| item)
+        .collect()
+}
 
 /// Navigation bar
 #[component]
@@ -9,6 +40,9 @@ pub fn Add() -> impl IntoView {
     let (name, set_name) = create_signal(String::from(""));
     let (error, set_error) = create_signal(String::from(""));
 
+    let participants_sorted =
+        create_memo(move |_| sort_participants(participants.read.get(), name.get()));
+
     let on_submit = move |ev: leptos::ev::SubmitEvent| {
         ev.prevent_default();
         set_error.set(String::from(""));
@@ -22,7 +56,6 @@ pub fn Add() -> impl IntoView {
 
     view! {
         <h1>"Tijd toevoegen"</h1>
-        <p>{ move || format!("{:?}", participants.read.get()) }</p>
         <form class="add" on:submit=on_submit>
             <input type="text"
                 placeholder="Name"
@@ -31,6 +64,11 @@ pub fn Add() -> impl IntoView {
                 }
                 prop:value=name
             />
+            <ul class="participants-container">
+                {move || participants_sorted.get().into_iter().map(|participant| view! {
+                    <li>{participant.name + " " + "(" + &participant.group[6..].to_string() + ")" }</li>
+                }).collect_view()}
+            </ul>
             <input type="submit" value="Submit" />
         </form>
         <p class="error">

application/src/util/surrealdb.rs

@@ -40,11 +40,11 @@ struct CreatePersonParam {
     group: String,
 }
 
-#[derive(Clone, Debug, Serialize, Deserialize)]
+#[derive(Clone, Debug, Serialize, Deserialize, PartialEq)]
 pub struct Participant {
     id: String,
-    name: String,
+    pub name: String,
-    group: String,
+    pub group: String,
 }
 
 #[derive(Clone, Debug)]