🚀RELEASE v0.16.2

Reviewed-on: #153

CHANGELOG.md

@@ -2,9 +2,48 @@
 
 All notable changes to this project will be documented in this file. Dates are displayed in UTC.
 
+#### [0.16.2](https://git.odit.services/lfk/frontend/compare/0.16.1...0.16.2)
+
+- Fixed scanmodal [`#154`](https://git.odit.services/lfk/frontend/issues/154)
+- Merge pull request 'feature/147-cardoverview_performance' (#153) from feature/147-cardoverview_performance into dev [`8d479c3`](https://git.odit.services/lfk/frontend/commit/8d479c32f82938904aee6a10deb80fea85487e4b)
+- Merge pull request 'Fixed scanmodal' (#155) from bugfix/154-scan_select_runner_by_id into dev [`549785c`](https://git.odit.services/lfk/frontend/commit/549785cf7d1c9edc1be37dc745b97096232a08ca)
+- i18n [`ca6da15`](https://git.odit.services/lfk/frontend/commit/ca6da15ef761184a55b18d56f749f660a32cbb83)
+- Bsic datatable conversion [`757655e`](https://git.odit.services/lfk/frontend/commit/757655ea63b3667bc4612ae1595eb52910b61137)
+- 1st datatable try with @vincjo/datatables [`81b8fbf`](https://git.odit.services/lfk/frontend/commit/81b8fbf4e341e6f2998a6e9e2053972c5c225021)
+- Dasboard Cards redesign [`eb1c17e`](https://git.odit.services/lfk/frontend/commit/eb1c17e3ac7e8f5e7310a90421fc9db3ed15c497)
+- set .phone to null if empty [`da6dd55`](https://git.odit.services/lfk/frontend/commit/da6dd55d139a672fa50204eabdca67d9740614a0)
+- add group filtering to table [`14d64b6`](https://git.odit.services/lfk/frontend/commit/14d64b6070d98e6368da5709e9ff8221e8a621c7)
+- formatting [`24d0747`](https://git.odit.services/lfk/frontend/commit/24d074752f1c5dc1a14b075ac14b448d7e129376)
+- RunnersOverview loading fix [`2e075ea`](https://git.odit.services/lfk/frontend/commit/2e075eafab5c4d78fd9aa9d66834b477b2685bfc)
+- Added old formatting for runner and status [`df63c23`](https://git.odit.services/lfk/frontend/commit/df63c2388da359dec9ed9968bc9f970be7092a45)
+- Added custom status filter [`f0a2b28`](https://git.odit.services/lfk/frontend/commit/f0a2b2859fa18426a454b7d9d6dd22dfdfe7ce27)
+- Basic checkbox fix [`1337676`](https://git.odit.services/lfk/frontend/commit/1337676e0894c46da0b6dcb7553e5ea8f88d0c14)
+- Fixed all filter [`8dfa19f`](https://git.odit.services/lfk/frontend/commit/8dfa19fa0f9897c61342ece956df88731c7aa861)
+- improved runner search [`1b0cd5b`](https://git.odit.services/lfk/frontend/commit/1b0cd5b90bcceb92627c6b7cdcdd7792ed81b50f)
+- set table-layout:fixed + display when loaded [`65e8998`](https://git.odit.services/lfk/frontend/commit/65e89988943807c1606a8b6aea49564b13d52537)
+- Trigger edit modal [`32ddb66`](https://git.odit.services/lfk/frontend/commit/32ddb66fc8d8cd689f1104759812f4cee4b7a613)
+- cleaned up table search [`08047a9`](https://git.odit.services/lfk/frontend/commit/08047a93073c32f5dd7a8e958400ae8a5b7f4035)
+- Fixed edit update bug [`0feee0a`](https://git.odit.services/lfk/frontend/commit/0feee0ae2fb6d8dba0b6fd72cedc0712dc749511)
+- fix: z-index on action buttons [`224034d`](https://git.odit.services/lfk/frontend/commit/224034dcc6263d3b0a8ea20045e435142d8ed2af)
+- rename: ThFilterGroup -> ThFilterStatus [`2a6a399`](https://git.odit.services/lfk/frontend/commit/2a6a39916a03c0466e63354e9f5ad7924cb59b6b)
+- new license file version [CI SKIP] [`0e5490f`](https://git.odit.services/lfk/frontend/commit/0e5490f1c84217a5a6d5c8745c4667b32ca65e1a)
+- new license file version [CI SKIP] [`026d3d4`](https://git.odit.services/lfk/frontend/commit/026d3d41c1b976a4dc7c733576a6a9e8d4b13b78)
+- Updated breakpoints [`452d010`](https://git.odit.services/lfk/frontend/commit/452d0101838d72bff7d588a953faae028e2ff819)
+- Tailwind bump [`a101873`](https://git.odit.services/lfk/frontend/commit/a101873eb0946b284a11a5081642711f5087da14)
+- Fixed checkbox show [`0900c26`](https://git.odit.services/lfk/frontend/commit/0900c2691e4cfe5046e8ae186c8ac8884c90abd6)
+- Removed unused console log [`aafc4c8`](https://git.odit.services/lfk/frontend/commit/aafc4c8d62a7a0a493c8bd60149f90c842534bdd)
+- i18n import [`6fe134a`](https://git.odit.services/lfk/frontend/commit/6fe134afc8bfef4e7470b7e53b9312b172a7322b)
+- Merge pull request 'fix: RunnerDetail: set .phone to null if empty' (#152) from bugfix/151-runnerdetail--cannot-unset-phone-number into dev [`329c1cc`](https://git.odit.services/lfk/frontend/commit/329c1cc037a43c818ba3b6c72581d29586d76232)
+- Merge pull request 'feature/146-runner-table-performance-data-table' (#150) from feature/146-runner-table-performance-data-table into dev [`b82d638`](https://git.odit.services/lfk/frontend/commit/b82d638de1aa1f72aada212cf3e4147d808b4fcf)
+- Merge pull request 'feature/148-dashboard_statscards' (#149) from feature/148-dashboard_statscards into dev [`fd1a06b`](https://git.odit.services/lfk/frontend/commit/fd1a06b3595b3713ad474e623c74105125602d46)
+- Fixed top checkbox state [`3d2acb6`](https://git.odit.services/lfk/frontend/commit/3d2acb692a28c116790248679e238fb562b24ac5)
+
 #### [0.16.1](https://git.odit.services/lfk/frontend/compare/0.16.0...0.16.1)
 
+> 15 February 2023
+
 - fix: donor detail: sponsorings: unset middlename will show as "null" [`#145`](https://git.odit.services/lfk/frontend/issues/145)
+- 🚀RELEASE v0.16.1 [`4499480`](https://git.odit.services/lfk/frontend/commit/449948050b8673d43a8dfbb225c3198e4bbb3c7b)
 
 #### [0.16.0](https://git.odit.services/lfk/frontend/compare/0.15.6...0.16.0)
 

index.html

@@ -13,7 +13,7 @@
 </head>
 
 <body>
-  <span style="display: none;visibility: hidden;" id="buildinfo">RELEASE_INFO-0.16.1-RELEASE_INFO</span>
+  <span style="display: none;visibility: hidden;" id="buildinfo">RELEASE_INFO-0.16.2-RELEASE_INFO</span>
   <noscript>You need to enable JavaScript to run this app.</noscript>
   <script src="/env.js"></script>
   <script type="module" src="/src/main.js"></script>

package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@odit/lfk-frontend",
-	"version": "0.16.1",
+	"version": "0.16.2",
 	"scripts": {
 		"i18n-order": "node order.js",
 		"dev": "vite",

src/components/cards/CardDetailModal.svelte

@@ -5,6 +5,7 @@
   import { RunnerCardService, RunnerService } from "@odit/lfk-client-js";
   import Select from "svelte-select";
   import Toastify from "toastify-js";
+  import { createEventDispatcher } from "svelte";
   export let edit_modal_open;
   export let current_cards;
   export let runner = {};
@@ -21,6 +22,10 @@
   $: runners = [];
   $: enabled = true;
   $: processed_last_submit = true;
+  const dispatch = createEventDispatcher();
+  function dataUpdated() {
+		dispatch('dataUpdated',);
+	}
   RunnerService.runnerControllerGetAll().then((val) => {
     runners = val.map((r) => {
       return { label: getRunnerLabel(r), value: r };
@@ -65,6 +70,7 @@
           }).showToast();
           current_cards[current_cards.findIndex((c) => c.id === id)] = result;
           current_cards = current_cards;
+          dataUpdated();
         })
         .catch((err) => {
           //

src/components/cards/CardsOverview.svelte

@@ -3,279 +3,230 @@
   import { RunnerCardService } from "@odit/lfk-client-js";
   import store from "../../store";
   import Toastify from "toastify-js";
+  import { DataHandler, Datatable, Th, ThFilter } from "@vincjo/datatables";
   import CardsEmptyState from "./CardsEmptyState.svelte";
   import CardDetailModal from "./CardDetailModal.svelte";
   import GenerateRunnerCards from "../pdf_generation/GenerateRunnerCards.svelte";
+  import ThFilterStatus from "./ThFilterStatus.svelte";
   export let edit_modal_open = false;
   export let runner = {};
   export let editable = {};
   export let original_data = {};
   export let current_cards = [];
-  $: filtered_cards = current_cards.filter(function (c) {
+  const handler = new DataHandler(current_cards, { rowsPerPage: 50 });
-    if (
+  const rows = handler.getRows();
-      c.code.toLowerCase().includes(searchvalue_lowercase) ||
-      c.runner?.firstname.toLowerCase().includes(searchvalue_lowercase) ||
-      c.runner?.middlename.toLowerCase().includes(searchvalue_lowercase) ||
-      c.runner?.lastname.toLowerCase().includes(searchvalue_lowercase) ||
-      should_display_based_on_id(c.id)
-    ) {
-      return true;
-    }
-  });
-  $: searchvalue = "";
-  $: searchvalue_lowercase = searchvalue.toLowerCase();
   $: active_deletes = [];
-  $: cards_show = current_cards.some((r) => r.is_selected === true);
+  $: cards_show = generate_cards.length > 0;
-  $: generate_cards = current_cards.filter((r) => r.is_selected === true);
+  $: generate_cards = [];
   const cards_promise = RunnerCardService.runnerCardControllerGetAll().then(
     (val) => {
       current_cards = val;
+      handler.setRows(val);
     }
   );
-  function should_display_based_on_id(id) {
-    if (searchvalue.toString().slice(-1) === "*") {
-      return id.toString().startsWith(searchvalue.replace("*", ""));
-    }
-    return id.toString() === searchvalue;
-  }
   const getRunnerLabel = (option) =>
-    option?.firstname + " " + (option?.middlename || "") + " " + (option?.lastname || "{$_('non-blanko')}");
+    option?.firstname +
+    " " +
+    (option?.middlename || "") +
+    " " +
+    (option?.lastname || "{$_('non-blanko')}");
   function open_edit_modal(card) {
-    if(card.runner?.id){
+    if (card.runner?.id) {
       runner = Object.assign(
         { runner },
         { label: getRunnerLabel(card.runner), value: card.runner }
       );
       card.runner = card.runner.id;
-    }
+    } else {
-    else{
+      card.runner = null;
-      card.runner=null;
+      runner = null;
-      runner = null
     }
     editable = Object.assign(editable, card);
     original_data = Object.assign(original_data, card);
     edit_modal_open = true;
   }
-// -----------------
-  let scrollTop = 0;
-  $: rendered = filtered_cards;
-  let innerHeight = 0;
-  let ele;
-  $: updateSlice(scrollTop);
-  $: innerHeight = `${filtered_cards.length * 25}px`;
-  $: if (ele) updateSlice();
-  function updateSlice() {
-    const height = ele ? parseInt(ele.clientHeight) : 100;
-    const init = scrollTop / 25;
-    const end = Math.ceil((scrollTop + height) / 25);
-    rendered = filtered_cards.slice(init, end + 15);
-  }
-  function updateScroll($event) {
-    scrollTop = $event.target.scrollTop;
-  }
 </script>
 
-<style>
+{#if store.state.jwtinfo.userdetails.permissions.includes("CARD:UPDATE")}
-  table tbody {
-  display: block;
-  overflow-y: scroll;
-}
-
-table thead, table tbody tr {
-  display: table;
-  width: 100%;
-  table-layout: fixed;
-}
-</style>
-
-{#if store.state.jwtinfo.userdetails.permissions.includes('CARD:UPDATE')}
   <CardDetailModal
     bind:current_cards
     bind:edit_modal_open
     bind:runner
     bind:editable
-    bind:original_data />
+    bind:original_data
+    on:dataUpdated={(handler.setRows(current_cards))}
+  />
 {/if}
 
-{#if store.state.jwtinfo.userdetails.permissions.includes('CARD:GET')}
+{#if store.state.jwtinfo.userdetails.permissions.includes("CARD:GET")}
   {#await cards_promise}
     <div
       class="bg-teal-lightest border-t-4 border-teal rounded-b text-teal-darkest px-4 py-3 shadow-md my-2"
-      role="alert">
+      role="alert"
-      <p class="font-bold">{$_('loading-cards')}</p>
+    >
-      <p class="text-sm">{$_('this-might-take-a-moment')}</p>
+      <p class="font-bold">{$_("loading-cards")}</p>
+      <p class="text-sm">{$_("this-might-take-a-moment")}</p>
     </div>
   {:then}
     {#if current_cards.length === 0}
       <CardsEmptyState />
     {:else}
-      <input
+      <div class="h-12">
-        type="search"
+        <GenerateRunnerCards bind:cards_show bind:generate_cards />
-        bind:value={searchvalue}
+      </div>
-        placeholder={$_('datatable.search')}
+      <Datatable {handler}>
-        aria-label={$_('datatable.search')}
+        <table>
-        class="gridjs-input gridjs-search-input mb-4" />
+          <thead>
-        <div class="h-12">
-          <GenerateRunnerCards
-            bind:cards_show
-            bind:generate_cards />
-        </div>
-      <div
-        class="shadow border-b border-gray-200 sm:rounded-lg overflow-x-scroll">
-        <table class="divide-y divide-gray-200 w-full">
-          <thead class="bg-gray-50">
             <tr>
-              <th
+              <th>
-                scope="col"
+                <input
-                class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
+                  type="checkbox"
-                <span
+                  class="focus:ring-indigo-500 h-4 w-4 text-indigo-600 border-gray-300 rounded"
+                  checked={generate_cards.length == current_cards.length}
                   on:click={() => {
-                    const newstate = !current_cards.some((r) => r.is_selected === true);
+                    if (generate_cards.length != current_cards.length) {
-                    current_cards = current_cards.map((r) => {
+                      generate_cards = current_cards;
-                      r.is_selected = newstate;
+                    } else {
-                      return r;
+                      generate_cards = [];
-                    });
+                    }
                   }}
-                  class="underline cursor-pointer select-none">{#if current_cards.some((r) => r.is_selected === true)}
+                />
-                    {$_('deselect-all')}
-                  {:else}{$_('select-all')}{/if}
-                </span>
-              </th>
-              <th
-                scope="col"
-                class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
-                {$_('code')}
-              </th>
-              <th
-                scope="col"
-                class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
-                {$_('runner')}
-              </th>
-              <th
-                scope="col"
-                class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
-                {$_('status')}
-              </th>
-              <th scope="col" class="relative px-6 py-3">
-                <span class="sr-only">{$_('action')}</span>
               </th>
+              <Th {handler} orderBy="code">{$_("code")}</Th>
+              <Th {handler} orderBy="runner">{$_("runner")}</Th>
+              <Th {handler} orderBy="status">{$_("status")}</Th>
+              <th>{$_("action")}</th>
+            </tr>
+            <tr>
+              <th />
+              <ThFilter {handler} filterBy="code" />
+              <ThFilter {handler} filterBy="runner" />
+              <ThFilterStatus {handler} />
+              <th />
             </tr>
           </thead>
-          <tbody class="divide-y divide-gray-200 virtual-wrapper"
+          <tbody>
-  on:scroll={updateScroll}
+            {#each $rows as row}
-  style="height: 70vh; width:100%"
+              <tr>
-  bind:this={ele}
+                <td>
-          >
+                  <input
-    {#each filtered_cards as card, index}
+                    type="checkbox"
-    {#if card.code
+                    class="focus:ring-indigo-500 h-4 w-4 text-indigo-600 border-gray-300 rounded"
-      .toLowerCase()
+                    checked={generate_cards.filter((i) => i.id == row.id)
-      .includes(
+                      .length > 0}
-        searchvalue.toLowerCase()
+                    on:click={() => {
-      ) || card.runner?.firstname
+                      if (
-        .toLowerCase()
+                        generate_cards.findIndex((i) => i.id == row.id) == -1
-        .includes(
+                      ) {
-          searchvalue.toLowerCase()
+                        generate_cards.push(row);
-        ) || card.runner?.middlename
+                        generate_cards = generate_cards;
-        .toLowerCase()
+                      } else {
-        .includes(
+                        generate_cards = generate_cards.filter(
-          searchvalue.toLowerCase()
+                          (r) => r.id != row.id
-        ) || card.runner?.lastname
+                        );
-        .toLowerCase()
+                      }
-        .includes(
+                      console.log(generate_cards);
-          searchvalue.toLowerCase()
+                    }}
-        ) || should_display_based_on_id(card.id)}
+                  />
-      <tr data-rowid="card_{card.id}">
+                </td>
-        <td class="px-6 py-4 whitespace-nowrap">
+                <td>{row.code}</td>
-          <input
+                <td>
-            bind:checked={card.is_selected}
+                  {#if row.runner}
-            type="checkbox"
+                    <a
-            class="focus:ring-indigo-500 h-4 w-4 text-indigo-600 border-gray-300 rounded" />
+                      href="../runners/{row.runner.id}"
-        </td>
+                      class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-gray-100 text-gray-800"
-        <td class="px-6 py-4 whitespace-nowrap">
+                      >{row.runner.firstname}
-          <div class="flex items-center">{card.code}</div>
+                      {row.runner.middlename || ""}
-        </td>
+                      {row.runner.lastname}</a
-        <td class="px-6 py-4 whitespace-nowrap">
+                    >
-          <div class="flex items-center">
+                  {:else}{$_("non-blanko")}{/if}
-            {#if card.runner}
+                </td>
-              <a
+                <td>
-                href="../runners/{card.runner.id}"
+                  {#if row.enabled}
-                class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-gray-100 text-gray-800">{card.runner.firstname}
+                    <span
-                {card.runner.middlename || ''}
+                      class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-green-100 text-green-800"
-                {card.runner.lastname}</a>
+                      >{$_("enabled")}</span
-            {:else}{$_('non-blanko')}{/if}
+                    >
-          </div>
+                  {:else}
-        </td>
+                    <span
-        <td class="px-6 py-4 whitespace-nowrap">
+                      class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-red-100 text-red-800"
-          <div class="flex items-center">
+                      >{$_("disabled")}</span
-            {#if card.enabled}
+                    >
-              <span
+                  {/if}
-                class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-green-100 text-green-800">{$_('enabled')}</span>
+                </td>
-            {:else}
+                <td>
-              <span
+                  {#if active_deletes[row.id] === true}
-                class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-red-100 text-red-800">{$_('disabled')}</span>
+                    <button
-            {/if}
+                      on:click={() => {
-          </div>
+                        active_deletes[row.id] = false;
-        </td>
+                      }}
-
+                      tabindex="0"
-        {#if active_deletes[card.id] === true}
+                      class="ml-4 text-indigo-600 hover:text-indigo-900 cursor-pointer"
-          <td
+                      >{$_("cancel-delete")}</button
-            class="px-6 py-4 whitespace-nowrap text-right text-sm font-medium">
+                    >
-            <button
+                    <button
-              on:click={() => {
+                      on:click={() => {
-                active_deletes[card.id] = false;
+                        RunnerCardService.runnerCardControllerRemove(
-              }}
+                          row.id,
-              tabindex="0"
+                          true
-              class="ml-4 text-indigo-600 hover:text-indigo-900 cursor-pointer">{$_('cancel-delete')}</button>
+                        )
-            <button
+                          .then((resp) => {
-              on:click={() => {
+                            current_cards = current_cards.filter(
-                RunnerCardService.runnerCardControllerRemove(card.id, false).then(
+                              (obj) => obj.id !== row.id
-                  (resp) => {
+                            );
-                    current_cards = current_cards.filter(
+                          })
-                      (obj) => obj.id !== card.id
+                          .catch((err) => {});
-                    );
+                      }}
-                    Toastify({
+                      tabindex="0"
-                      text: $_('card-deleted'),
+                      class="ml-4 text-red-600 hover:text-red-900 cursor-pointer"
-                      duration: 500,
+                      >{$_("confirm-delete")}</button
-                      backgroundColor:
+                    >
-                        'linear-gradient(to right, #00b09b, #96c93d)',
+                  {:else}
-                    }).showToast();
+                    <button
-                  }
+                      on:click={() => {
-                );
+                        open_edit_modal(row);
-              }}
+                      }}
-              tabindex="0"
+                      class="text-indigo-600 hover:text-indigo-900"
-              class="ml-4 text-red-600 hover:text-red-900 cursor-pointer">{$_('confirm-delete')}</button>
+                      >{$_("details")}</button
-          </td>
+                    >
-        {:else}
+                    {#if store.state.jwtinfo.userdetails.permissions.includes("CARD:DELETE")}
-          <td
+                      <button
-            class="px-6 py-4 whitespace-nowrap text-right text-sm font-medium">
+                        on:click={() => {
-            <button
+                          active_deletes[row.id] = true;
-              on:click={() => {
+                        }}
-                open_edit_modal(card);
+                        tabindex="0"
-              }}
+                        class="ml-4 text-red-600 hover:text-red-900 cursor-pointer"
-              class="text-indigo-600 hover:text-indigo-900">{$_('details')}</button>
+                        >{$_("delete")}</button
-            {#if store.state.jwtinfo.userdetails.permissions.includes('CARD:DELETE')}
+                      >
-              <button
+                    {/if}
-                on:click={() => {
+                  {/if}
-                  active_deletes[card.id] = true;
+                </td>
-                }}
+              </tr>
-                tabindex="0"
+            {/each}
-                class="ml-4 text-red-600 hover:text-red-900 cursor-pointer">{$_('delete')}</button>
-            {/if}
-          </td>
-        {/if}
-      </tr>
-    {/if}
-    {/each}
           </tbody>
         </table>
-      </div>
+      </Datatable>
     {/if}
   {:catch error}
     <div class="text-white px-6 py-4 border-0 rounded relative mb-4 bg-red-500">
       <span class="inline-block align-middle mr-8">
-        <b class="capitalize">{$_('general_promise_error')}</b>
+        <b class="capitalize">{$_("general_promise_error")}</b>
         {error}
       </span>
     </div>
   {/await}
 {/if}
+
+<style>
+  table tbody {
+    display: block;
+    overflow-y: scroll;
+  }
+
+  table thead,
+  table tbody tr {
+    display: table;
+    width: 100%;
+    table-layout: fixed;
+  }
+</style>

src/components/cards/ThFilterStatus.svelte

@@ -0,0 +1,29 @@
+<script>
+  import { _ } from "svelte-i18n";
+  export let handler;
+  let selected = "all";
+</script>
+
+<th>
+  <select
+    on:input={() => {
+      setTimeout(() => {
+        if (`${selected}`.trim()) {
+          if(selected==="all"){
+           handler.filter('', 'enabled') 
+          }
+          else{
+            handler.filter(selected, 'enabled')
+          }
+        }
+      }, 50);
+    }}
+    bind:value={selected}
+    name="statusfilter"
+    id="statusfilter"
+  >
+    <option value="all">{$_('all')}</option>
+    <option value="true">{$_("enabled")}</option>
+    <option value="false">{$_("disabled")}</option>
+  </select>
+</th>

src/components/runners/ThFilterGroup.svelte

@@ -1,4 +1,5 @@
 <script>
+  import { _ } from "svelte-i18n";
   export let groups;
   export let handler;
   let selected = "all";
@@ -26,7 +27,7 @@
     name="groupfilter"
     id="groupfilter"
   >
-    <option value="all">Alle</option>
+    <option value="all">{$_('all')}</option>
     {#each groups as g}
       <option value={g.value}>{g.label}</option>
     {/each}

src/components/scans/AddScanModal.svelte

@@ -14,7 +14,7 @@
     option.firstname + " " + (option.middlename || "") + " " + option.lastname;
   const filterRunners = (label, filterText, option) =>
     label.toLowerCase().includes(filterText.toLowerCase()) ||
-    option.value.toString().startsWith(filterText.toLowerCase());
+    option.value.id.toString().startsWith(filterText.toLowerCase());
   function focus(el) {
     el.focus();
   }

src/locales/de.json

@@ -30,6 +30,7 @@
     "address-is-required": "Du musst eine Adresse angeben",
     "after-deletion-we-cant-restore-your-old-profile": "Nach der Löschung können auch die Admins dein Profil nicht wiederherstellen!",
     "after-the-update-youll-get-logged-out-please-login-with-your-new-password-after-that": "Nach der Änderung wirst du abgemeldet - bitte melde dich dann mit deinem neuen Passwort an.",
+    "all": "Alle",
     "all-associated-donations-will-get-deleted-as-well": "Alle Sponsorings dieser Sponsor:in werden ebenfalls gelöscht",
     "all-associated-runners-will-be-deleted-too": "Alle zugehörigen Läufer:innen werden auch gelöscht!",
     "all-associated-teams-and-runners-will-be-deleted-too": "Alle assoziierten Teams und Läufer:innen werden auch gelöscht!",

src/locales/en.json

@@ -30,6 +30,7 @@
     "address-is-required": "Address is required",
     "after-deletion-we-cant-restore-your-old-profile": "After deletion we can't restore your old profile!",
     "after-the-update-youll-get-logged-out-please-login-with-your-new-password-after-that": "After the update you'll get logged out - Please login with your new password after that.",
+    "all": "all",
     "all-associated-donations-will-get-deleted-as-well": "All associated donations will get deleted as well",
     "all-associated-runners-will-be-deleted-too": "All associated runners will be deleted too!",
     "all-associated-teams-and-runners-will-be-deleted-too": "All associated teams and runners will be deleted too!",