From 4f792b1ac3ef95f19c923f9b773e49f2e6247e95 Mon Sep 17 00:00:00 2001
From: haveyaseen <haveyaread@gmail.com>
Date: Wed, 31 Mar 2021 16:59:57 +0200
Subject: [PATCH] add svelte-select alternative to <select> field for language
 skill levels

---
 src/comp/util/GroupSelect.svelte | 13 ++++++-----
 src/routes/profile.svelte        | 37 ++++++++++++++++++++++++++++++++
 2 files changed, 45 insertions(+), 5 deletions(-)

diff --git a/src/comp/util/GroupSelect.svelte b/src/comp/util/GroupSelect.svelte
index ca69c58e..ae42f4bc 100644
--- a/src/comp/util/GroupSelect.svelte
+++ b/src/comp/util/GroupSelect.svelte
@@ -2,15 +2,14 @@
     import { createEventDispatcher } from "svelte"
     import Select from "svelte-select"
 
-    export let items: unknown[]
+    export let items: { value: string; label: string }[]
     export let selected: unknown[] | null
     export let hideInput: boolean = false
     export let disabled: boolean = false
     export let placeholder: string = "Other …"
 
     const dispatch = createEventDispatcher()
-
-    function handleSelect(event: CustomEvent) {
+    function handleSelect(event: CustomEvent<typeof items[number] | null>) {
         dispatch("select", event.detail)
     }
 </script>
@@ -45,7 +44,9 @@
         --multiSelectPadding: theme("padding.0") theme("padding.2");
         --inputFontSize: theme("fontSize.base");
         --inputLeft: theme("spacing.1");
-        @apply text-white font-bold;
+
+        @apply text-white;
+        @apply font-bold;
     }
 
     .wrapper :global(input) {
@@ -77,7 +78,9 @@
     .wrapper:not(.hideInput)
         :global(.selectContainer .multiSelectItem + input) {
         border-left: 2px solid theme("colors.primary.DEFAULT");
-        @apply rounded-none pl-2;
+
+        @apply rounded-none;
+        @apply pl-2;
     }
 
     .wrapper :global(.selectContainer.focused input),
diff --git a/src/routes/profile.svelte b/src/routes/profile.svelte
index 91b49011..24bd0b3a 100644
--- a/src/routes/profile.svelte
+++ b/src/routes/profile.svelte
@@ -5,6 +5,8 @@
     import type { Language } from "../types/generated/graphql"
     import { query } from "@urql/svelte"
 
+    import SvelteSelect from "svelte-select"
+
     import {
         currentUser,
         username,
@@ -290,6 +292,41 @@
                                     ?.englishName}:
                             </label>
                             <div>
+                                <SvelteSelect
+                                    placeholder="Your level …"
+                                    items={[
+                                        { value: "", label: "Please select …" },
+                                        {
+                                            value: CefrLevel.A1,
+                                            label: "A1 – Beginner",
+                                        },
+                                        {
+                                            value: CefrLevel.A2,
+                                            label: "A2 – Elementary",
+                                        },
+                                        {
+                                            value: CefrLevel.B1,
+                                            label: "B1 – Intermediate",
+                                        },
+                                        {
+                                            value: CefrLevel.B2,
+                                            label: "B2 – Upper intermediate",
+                                        },
+                                        {
+                                            value: CefrLevel.C1,
+                                            label: "C1 – Advanced",
+                                        },
+                                        {
+                                            value: CefrLevel.C2,
+                                            label: "C2 – Proficient",
+                                        },
+                                    ]}
+                                    selectedValue={learningLevels[code]}
+                                    on:select={(event) =>
+                                        (learningLevels[code] =
+                                            event.detail.value)}
+                                    isMulti={false}
+                                />
                                 <select
                                     id={`level_${code}`}
                                     bind:value={learningLevels[code]}