From 64c96f25d4a9277df431011f4660b59a2eb0a9da Mon Sep 17 00:00:00 2001
From: Nicolai Ort <info@nicolai-ort.com>
Date: Thu, 18 Mar 2021 15:50:15 +0100
Subject: [PATCH] =?UTF-8?q?Switched=20the=20scanstation=20modal=20over=20t?=
 =?UTF-8?q?o=20svelte=20select=F0=9F=91=80=F0=9F=91=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

ref #98
---
 .../scanstations/AddScanStationModal.svelte   | 44 ++++++++++++-------
 1 file changed, 27 insertions(+), 17 deletions(-)

diff --git a/src/components/scanstations/AddScanStationModal.svelte b/src/components/scanstations/AddScanStationModal.svelte
index 48ea18ae..207aa6ff 100644
--- a/src/components/scanstations/AddScanStationModal.svelte
+++ b/src/components/scanstations/AddScanStationModal.svelte
@@ -4,14 +4,16 @@
   import { focusTrap } from "svelte-focus-trap";
   import { ScanStationService, TrackService } from "@odit/lfk-client-js";
   import Toastify from "toastify-js";
+  import Select from "svelte-select";
   export let modal_open;
   export let new_station;
   export let current_stations;
   export let copy_modal_open;
   let tracks = [];
   TrackService.trackControllerGetAll().then((val) => {
-    tracks = val;
-    track = tracks[0].id;
+    tracks = val.map((t) => {
+      return { label: t.name || `#${t.id}`, value: t };
+    });
   });
   function focus(el) {
     el.focus();
@@ -39,7 +41,7 @@
     if (processed_last_submit === true) {
       processed_last_submit = false;
       const toast = Toastify({
-        text: $_('scanstation-is-being-added'),
+        text: $_("scanstation-is-being-added"),
         duration: -1,
       }).showToast();
       let postdata = {
@@ -55,14 +57,14 @@
           modal_open = false;
           //
           Toastify({
-            text: $_('scanstation-added'),
+            text: $_("scanstation-added"),
             duration: 500,
             backgroundColor: "linear-gradient(to right, #00b09b, #96c93d)",
           }).showToast();
           current_stations.push(result);
           current_stations = current_stations;
-          new_station=result;
-          copy_modal_open=true;
+          new_station = result;
+          copy_modal_open = true;
         })
         .catch((err) => {
           //
@@ -111,7 +113,7 @@
                 width="24"
                 height="24"><path fill="none" d="M0 0h24v24H0z" />
                 <path
-                d="M4 5v11h16V5H4zM2 4a1 1 0 011-1h18a1 1 0 011 1v14H2V4zM1 19h22v2H1v-2z" /></svg>
+                  d="M4 5v11h16V5H4zM2 4a1 1 0 011-1h18a1 1 0 011 1v14H2V4zM1 19h22v2H1v-2z" /></svg>
             </div>
             <div class="mt-3 text-center sm:mt-0 sm:ml-4 sm:text-left">
               <h3 class="text-lg leading-6 font-medium text-gray-900">
@@ -127,14 +129,21 @@
                   <label
                     for="track"
                     class="block text-sm font-medium text-gray-700">Track</label>
-                  <select
-                    name="track"
-                    bind:value={track}
-                    class="mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm rounded-l-md sm:text-sm border-gray-300 border bg-gray-50 text-gray-500 rounded-md p-2">
-                    {#each tracks as t}
-                      <option value={t.id}>{t.name || t.distance}</option>
-                    {/each}
-                  </select>
+                  <Select
+                    containerClasses="rounded-l-md mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm rounded-l-md sm:text-sm border-gray-300 border bg-gray-50 text-gray-500 rounded-md p-2"
+                    itemFilter={(label, filterText, option) => label
+                        .toLowerCase()
+                        .includes(
+                          filterText.toLowerCase()
+                        ) || option.value.id
+                        .toString()
+                        .startsWith(filterText.toLowerCase())}
+                    items={tracks}
+                    showChevron={true}
+                    placeholder={$_('search-for-an-organization-or-team-by-name-or-id')}
+                    noOptionsMessage={$_('no-organization-or-team-found')}
+                    on:select={(selectedValue) => (track = selectedValue.detail.value.id)}
+                    on:clear={() => (track = null)} />
                 </div>
                 <div class="col-span-6">
                   <label
@@ -143,7 +152,7 @@
                   <input
                     use:focus
                     autocomplete="off"
-                    placeholder="{$_('description')}"
+                    placeholder={$_('description')}
                     bind:value={description}
                     type="text"
                     name="description"
@@ -164,7 +173,8 @@
                       type="checkbox"
                       checked={enabled}
                       class="focus:ring-indigo-500 h-4 w-4 text-indigo-600 border-gray-300 rounded" />
-                    {$_('this-scanstation-is')} {#if enabled}{$_('enabled')}{:else}{$_('disabled')}{/if}
+                    {$_('this-scanstation-is')}
+                    {#if enabled}{$_('enabled')}{:else}{$_('disabled')}{/if}
                   </p>
                 </div>
               </div>