chore(release): 1.13.4

CHANGELOG.md

@@ -2,8 +2,57 @@
 
 All notable changes to this project will be documented in this file. Dates are displayed in UTC.
 
+#### [1.13.4](https://git.odit.services/lfk/frontend/compare/1.13.3...1.13.4)
+
+- feat(donationcreate): improved focus handling [`a827279`](https://git.odit.services/lfk/frontend/commit/a82727916345c7e713d4225c4771ef3f23d1392c)
+- chore(deps): remove unused [`3842d8b`](https://git.odit.services/lfk/frontend/commit/3842d8b1048ce12f0f70bf3d0530590470f0d200)
+- fix(donationcreate): clearing [`9298a0d`](https://git.odit.services/lfk/frontend/commit/9298a0dc922ee5ed5b7c9017c865ad4b68fca3c8)
+- feat(donationcreate): autofocus runner input on page load [`b9e2e65`](https://git.odit.services/lfk/frontend/commit/b9e2e653310c686bc06b9f27c38b49e9c6a3eaef)
+- fix(DonationCreate): remove duplicate spaces from getRunnerLabel [`30a26ef`](https://git.odit.services/lfk/frontend/commit/30a26ef3ed55d072cd9bf2aea1b200fadc2a05f1)
+- fix(donationcreate): improved resetAll [`7d9314f`](https://git.odit.services/lfk/frontend/commit/7d9314f05c58c1b50901f3797c0b461c4c79e5d2)
+- fix(DeleteDonationModal): cannot overflow [`ca066aa`](https://git.odit.services/lfk/frontend/commit/ca066aa7a7a8d7c46e0f59370b06636faf5736ca)
+- feat(donationcreate): full width [`b0063cd`](https://git.odit.services/lfk/frontend/commit/b0063cdead5f71c334c36e5587a58e957825dbcd)
+- feat(donationcreate): add runner id to select [`27e7bbb`](https://git.odit.services/lfk/frontend/commit/27e7bbb9d142fbea659e89fb2335cc6c567d14ce)
+
+#### [1.13.3](https://git.odit.services/lfk/frontend/compare/1.13.2...1.13.3)
+
+> 19 May 2025
+
+- chore(release): 1.13.3 [`2139b19`](https://git.odit.services/lfk/frontend/commit/2139b197ba672275e2a0b5ffbcf7fa43f80874e6)
+- Refactor code structure for improved readability and maintainability [`e3c6d5a`](https://git.odit.services/lfk/frontend/commit/e3c6d5a5c0eaac2c91432b0be37d6fa11e57f644)
+- refactor(donation): Refactor donor selection and add new donor creation functionality [`8c3f009`](https://git.odit.services/lfk/frontend/commit/8c3f0092d2735b1c85976f4e6955780b1035f68a)
+- fix(donation): Ensure all selections are cleared on reset [`4e1a944`](https://git.odit.services/lfk/frontend/commit/4e1a944a2d7d0d0666fb8d2181a9941d0f11957f)
+
+#### [1.13.2](https://git.odit.services/lfk/frontend/compare/1.13.1...1.13.2)
+
+> 16 May 2025
+
+- chore(release): 1.13.2 [`6fad04c`](https://git.odit.services/lfk/frontend/commit/6fad04c86249613dacfe2bc75362cb32d109573d)
+- feat(dashboard): Add permission checks for scan and donation creation links [`838dcbf`](https://git.odit.services/lfk/frontend/commit/838dcbfd7e0c09e8cf61a04952475934ad1e3b86)
+
+#### [1.13.1](https://git.odit.services/lfk/frontend/compare/1.13.0...1.13.1)
+
+> 16 May 2025
+
+- chore(release): 1.13.1 [`f5df252`](https://git.odit.services/lfk/frontend/commit/f5df252857f20f8426b8ca566b9bb3ec50331880)
+- feat(tools): Remove unnecessary validation display in donation creation [`285fc91`](https://git.odit.services/lfk/frontend/commit/285fc91c66d03aaa861da549cb739c3698beb892)
+
+#### [1.13.0](https://git.odit.services/lfk/frontend/compare/1.12.8...1.13.0)
+
+> 16 May 2025
+
+- feat(tools): Basic mobile scanner [`500886e`](https://git.odit.services/lfk/frontend/commit/500886e4106f4b53fbc40fb0fa15653f574c8328)
+- chore(release): 1.13.0 [`d95b6cf`](https://git.odit.services/lfk/frontend/commit/d95b6cf5894dd0b487353f36c9f3a436066fd4ef)
+- feat(tools): Added tool for fast sponsoring creation [`51ba1c8`](https://git.odit.services/lfk/frontend/commit/51ba1c852cad6243e935409da1eacecc5dcfa5fa)
+- feat(dev): Enable devserver with https-support to circumvent ios https requirements for camera access [`25c38ea`](https://git.odit.services/lfk/frontend/commit/25c38ea3812a529a90294ff8834bdb65c487f8c4)
+- feat(tools): Remove requirement for ten-diget codes [`80ca7aa`](https://git.odit.services/lfk/frontend/commit/80ca7aa08bdd44591e2d3efaa8e59dd4db5c864e)
+- feat(dashboard): Added scanclient tool to dashboard [`06cfd60`](https://git.odit.services/lfk/frontend/commit/06cfd603cae79e0237bbece43203083f198d03a1)
+
 #### [1.12.8](https://git.odit.services/lfk/frontend/compare/1.12.7...1.12.8)
 
+> 1 May 2025
+
+- chore(release): 1.12.8 [`51d9b35`](https://git.odit.services/lfk/frontend/commit/51d9b35dc41fea0d0245fd136556f9fada3559da)
 - feat(dasboard): Added section headers to main nav [`3a8533a`](https://git.odit.services/lfk/frontend/commit/3a8533a7baef02f7bc9780ce37be1a350bd92270)
 - fic(locales): Updated dashboard translations [`5ac6fe3`](https://git.odit.services/lfk/frontend/commit/5ac6fe30b5b9e34043c734d51d5da137fdf7ac38)
 - feat(runners): Created_via filters can now be set via query params [`14501d3`](https://git.odit.services/lfk/frontend/commit/14501d3828dd0d48ba0baeeddf936ba275f7b9b7)

index.html

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

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@odit/lfk-frontend",
-  "version": "1.12.8",
+  "version": "1.13.4",
   "type": "module",
   "scripts": {
     "i18n-order": "node order.js",

src/App.svelte

@@ -72,6 +72,7 @@
   import StatsClientDetail from "./components/statsclients/StatsClientDetail.svelte";
   import CardReplacement from "./components/tools/CardReplacement.svelte";
   import ScanClient from "./components/tools/ScanClient.svelte";
+  import DonationCreate from "./components/tools/DonationCreate.svelte";
   store.init();
 </script>
 
@@ -144,6 +145,9 @@
           <Route path="/scanclient/">
               <ScanClient />
           </Route>
+          <Route path="/donationcreate/">
+              <DonationCreate />
+          </Route>
         </Route>
         <Route path="/teams/*">
           <Route path="/">

src/components/dashboard/Dashboard.svelte

@@ -85,6 +85,8 @@
 
           <span>{$_("card-replacement-menu")}</span>
         </a>
+        {/if}
+      {#if store.state.jwtinfo.userdetails.permissions.includes("SCAN:CREATE")}
         <a
           class:activenav={$router.path.includes("/tools/scanclient/")}
           class="flex items-center px-4 py-3 transition cursor-pointer group hover:bg-gray-200 hover:text-gray-900 w-full font-semibold"
@@ -105,9 +107,33 @@
 
           <span>{$_("scanclient")}</span>
         </a>
+        {/if}
+        {#if store.state.jwtinfo.userdetails.permissions.includes("DONATION:CREATE")}
+        <a
+          class:activenav={$router.path.includes("/tools/donationcreate/")}
+          class="flex items-center px-4 py-3 transition cursor-pointer group hover:bg-gray-200 hover:text-gray-900 w-full font-semibold"
+          href="/tools/donationcreate/"
+        >
+          <svg
+            xmlns="http://www.w3.org/2000/svg"
+            viewBox="0 0 24 24"
+            fill="currentColor"
+            class="flex-shrink-0 w-5 h-5 mr-2 transition group-hover:text-gray-600"
+          >
+            <path
+              fill-rule="evenodd"
+              d="M14.615 1.595a.75.75 0 0 1 .359.852L12.982 9.75h7.268a.75.75 0 0 1 .548 1.262l-10.5 11.25a.75.75 0 0 1-1.272-.71l1.992-7.302H3.75a.75.75 0 0 1-.548-1.262l10.5-11.25a.75.75 0 0 1 .913-.143Z"
+              clip-rule="evenodd"
+            />
+          </svg>
+
+          <span>{$_("donation-quick-add")}</span>
+        </a>
+        {/if}
         <h2 class="px-4 py-2 text-xs font-semibold text-gray-600 uppercase">
           {$_("management")}
         </h2>
+        {#if store.state.jwtinfo.userdetails.permissions.includes("RUNNER:GET")}
         <a
           class:activenav={$router.path.includes("/runners/")}
           class="flex items-center px-4 py-3 transition cursor-pointer group hover:bg-gray-200 hover:text-gray-900 w-full font-semibold"

src/components/donations/DeleteDonationModal.svelte

@@ -81,7 +81,7 @@
                 /></svg
               >
             </div>
-            <div class="mt-3 sm:text-left max-h-[75vh] overflow-y-auto">
+            <div class="mt-3 sm:text-left max-h-[75vh]">
               <h3 class="text-lg leading-6 font-medium text-gray-900">
                 {$_("please-confirm-the-deletion-of-donation")}
               </h3>

src/components/tools/DonationCreate.svelte

@@ -0,0 +1,394 @@
+<script>
+  import { _ } from "svelte-i18n";
+  import {
+    DonationService,
+    DonorService,
+    RunnerService,
+  } from "@odit/lfk-client-js";
+  import Select from "svelte-select";
+  import toast from "svelte-french-toast";
+	import { onMount } from "svelte";
+
+  let runners = [];
+  let donors = [];
+  let runnerinfo = { id: 0, firstname: "", lastname: "" };
+  let donorinfo = { id: 0, firstname: "", lastname: "" };
+  let address = {
+    address1: "",
+    address2: "",
+    city: "",
+    postalcode: "",
+    country: "Germany",
+  };
+  let amount = null;
+  let address_checked = false;
+  let donor_create_new = false;
+  let last_created = null;
+
+  RunnerService.runnerControllerGetAll()
+    .then((val) => {
+      runners = val.map((r) => {
+        return { label: getRunnerLabel(r), value: r };
+      });
+    })
+    .catch((err) => {
+      console.log("error fetching runners:", err);
+    });
+
+  function loadDonors() {
+    DonorService.donorControllerGetAll()
+      .then((val) => {
+        donors = val.map((r) => {
+          return { label: getRunnerLabel(r), value: r };
+        });
+        console.log("refreshed donors");
+        setTimeout(() => {
+          loadDonors;
+        }, 30000);
+      })
+      .catch((err) => {
+        console.log("error fetching donors:", err);
+      });
+  }
+  loadDonors();
+
+  const getRunnerLabel = (option) => {
+    return [option.firstname,option.middlename,option.lastname].join(" ").replace("  "," ") + " [#"+option.id+"]";
+  }
+
+  const filterRunners = (label, filterText, option) => {
+    if (filterText.startsWith("#")) {
+      return option.value.id == parseInt(filterText.replace("#", ""));
+    }
+    return (
+      label.toLowerCase().includes(filterText.toLowerCase()) ||
+      option.value.toString().startsWith(filterText.toLowerCase())
+    );
+  };
+
+  function resetAll() {
+    runnerinfo = { id: 0, firstname: "", lastname: "" };
+    donorinfo = { id: 0, firstname: "", lastname: "" };
+    amount = null;
+    address_checked = false;
+    donor_create_new = false;
+    const clears = document.querySelectorAll(".clearSelect");
+    clears.forEach(c => {
+      c.click();
+    });
+    setTimeout(() => {
+      document.querySelector("#wrapper_runner_select input").focus();
+    }, 50);
+  }
+
+  onMount(() => {
+    document.querySelector("#wrapper_runner_select input").focus();
+  })
+</script>
+
+<div class="p-4">
+  <h3 class="text-3xl font-bold">{$_("fast_donation_create")}</h3>
+  <!--  -->
+  <div>
+    <div class="w-full space-y-4 mb-6">
+      {#if last_created}
+        <div class="mt-4 p-3 bg-green-50 border border-green-200 rounded-md">
+          <p class="text-black">
+            {$_("last-created-donation")}: #{last_created.id}: {last_created.amountPerDistance /
+              100} € für {getRunnerLabel(last_created.runner)} von {getRunnerLabel(
+              last_created.donor
+            )}
+          </p>
+        </div>
+      {/if}
+
+      <!-- Runner Selection -->
+      <div id="wrapper_runner_select">
+        <h4 class="text-xl font-semibold">{$_("runner")}</h4>
+        <Select
+          containerClasses="rounded-md mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm sm:text-sm border-gray-300 border bg-gray-50 text-neutral-800 rounded-md p-2"
+          itemFilter={(label, filterText, option) =>
+            filterRunners(label, filterText, option)}
+          items={runners}
+          showChevron={true}
+          placeholder={$_("search-for-runner-by-name-or-id")}
+          noOptionsMessage={$_("no-runners-found")}
+          on:select={(selectedValue) => {
+            runnerinfo = selectedValue.detail.value;
+            document.querySelector("#donation_amount_eur").focus();
+          }}
+          on:clear={() => (runnerinfo = { id: 0, firstname: "", lastname: "" })}
+        />
+      </div>
+
+      <!-- Amount Input -->
+      <div>
+        <h4 class="text-xl font-semibold">{$_("amount-per-kilometer")}</h4>
+        <div class="mt-1 flex rounded-md shadow-sm">
+          <input
+            autocomplete="off"
+            class:border-red-500={!amount > 0}
+            class:focus:border-red-500={!amount > 0}
+            class:focus:ring-red-500={!amount > 0}
+            bind:value={amount}
+            on:keydown={(e)=>
+            {
+              if(e.key==="Enter"){
+                e.preventDefault();
+                document.querySelector("#button_existing_donor").focus();
+              }
+            }}
+            type="number"
+            step="0.01"
+            id="donation_amount_eur"
+            name="donation_amount_eur"
+            class="focus:ring-indigo-500 focus:border-indigo-500 flex-1 block w-full rounded-none rounded-l-md sm:text-sm border-neutral-300 border bg-neutral-50 text-neutral-800 p-2"
+            placeholder="z.B. 1,50"
+          />
+          <span
+            class="inline-flex items-center px-3 rounded-r-md border border-neutral-300 bg-neutral-50 text-neutral-500 text-sm"
+            >€</span
+          >
+        </div>
+      </div>
+
+      <!-- Donor Selection -->
+      <div>
+        <h4 class="text-xl font-semibold">{$_("donor")}</h4>
+
+        <!-- Donor Type Toggle -->
+        <div class="mb-2">
+          <div class="flex border rounded-md overflow-hidden shadow-sm">
+            <button
+            on:keydown={(e)=>
+            {
+              if(e.key==="ArrowRight"){
+                e.preventDefault();
+                document.querySelector("#button_new_donor").focus();
+                document.querySelector("#button_new_donor").click();
+              }
+            }}
+            id="button_existing_donor"
+            class:bg-indigo-600={!donor_create_new}
+            class:text-white={!donor_create_new}
+            class="py-2 px-4 w-1/2 transition-colors"
+            on:click={() => {
+              donor_create_new = false;
+              donorinfo = { id: 0, firstname: "", lastname: "" };
+            }}
+            >
+            {$_("existing-donor")}
+          </button>
+          <button
+              on:keydown={(e)=>
+              {
+                if(e.key==="ArrowLeft"){
+                  e.preventDefault();
+                  document.querySelector("#button_existing_donor").focus();
+                  document.querySelector("#button_existing_donor").click();
+                }
+              }}
+              id="button_new_donor"
+              class={`py-2 px-4 w-1/2 transition-colors ${donor_create_new ? "bg-indigo-600 text-white" : "bg-gray-100 text-gray-700"}`}
+              on:click={() => {
+                donor_create_new = true;
+                donorinfo = { id: 0, firstname: "", lastname: "" };
+              }}
+            >
+              {$_("new-donor")}
+            </button>
+          </div>
+        </div>
+
+        {#if !donor_create_new}
+          <Select
+            containerClasses="rounded-md mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm sm:text-sm border-gray-300 border bg-gray-50 text-neutral-800 rounded-md p-2"
+            itemFilter={(label, filterText, option) =>
+              filterRunners(label, filterText, option)}
+            items={donors}
+            showChevron={true}
+            placeholder={$_("search-for-donor")}
+            noOptionsMessage={$_("no-donors-found")}
+            on:select={(selectedValue) => {
+              donorinfo = selectedValue.detail.value;
+            }}
+            on:clear={() =>
+              (donorinfo = { id: 0, firstname: "", lastname: "" })}
+          />
+        {:else}
+          <div class="space-y-3">
+            <!-- First Name -->
+            <div>
+              <label
+                for="firstname"
+                class="block text-sm font-medium text-gray-700"
+              >
+                {$_("first-name")}
+              </label>
+              <input
+                type="text"
+                id="firstname"
+                bind:value={donorinfo.firstname}
+                class="focus:ring-indigo-500 focus:border-indigo-500 flex-1 block w-full rounded-none rounded-l-md sm:text-sm border-neutral-300 border bg-neutral-50 text-neutral-800 p-2"
+                placeholder={$_("first-name")}
+              />
+            </div>
+
+            <!-- Last Name -->
+            <div>
+              <label
+                for="lastname"
+                class="block text-sm font-medium text-gray-700"
+              >
+                {$_("last-name")}
+              </label>
+              <input
+                type="text"
+                id="lastname"
+                bind:value={donorinfo.lastname}
+                class="focus:ring-indigo-500 focus:border-indigo-500 flex-1 block w-full rounded-none rounded-l-md sm:text-sm border-neutral-300 border bg-neutral-50 text-neutral-800 p-2"
+                placeholder={$_("last-name")}
+              />
+            </div>
+
+            <!-- Address Checkbox -->
+            <div class="flex items-start mt-4">
+              <div class="flex items-center h-5">
+                <input
+                  id="address_check"
+                  type="checkbox"
+                  bind:checked={address_checked}
+                  class="focus:ring-indigo-500 h-4 w-4 text-indigo-600 border-gray-300 rounded"
+                />
+              </div>
+              <div class="ml-3 text-sm">
+                <label for="address_check" class="font-medium text-gray-700">
+                  {$_("receipt-needed")}
+                </label>
+              </div>
+            </div>
+
+            {#if address_checked}
+              <!-- Address Fields -->
+              <div
+                class="space-y-3 mt-3 p-3 border border-gray-200 rounded-md bg-gray-50"
+              >
+                <div>
+                  <label
+                    for="address1"
+                    class="block text-sm font-medium text-gray-700"
+                  >
+                    {$_("address")}
+                  </label>
+                  <input
+                    type="text"
+                    id="address1"
+                    bind:value={address.address1}
+                    class="focus:ring-indigo-500 focus:border-indigo-500 flex-1 block w-full rounded-none rounded-l-md sm:text-sm border-neutral-300 border bg-neutral-50 text-neutral-800 p-2"
+                  />
+                </div>
+
+                <div>
+                  <label
+                    for="address2"
+                    class="block text-sm font-medium text-gray-700"
+                  >
+                    {$_("apartment-suite-etc")}
+                  </label>
+                  <input
+                    type="text"
+                    id="address2"
+                    bind:value={address.address2}
+                    class="focus:ring-indigo-500 focus:border-indigo-500 flex-1 block w-full rounded-none rounded-l-md sm:text-sm border-neutral-300 border bg-neutral-50 text-neutral-800 p-2"
+                  />
+                </div>
+
+                <div class="grid grid-cols-2 gap-3">
+                  <div>
+                    <label
+                      for="postalcode"
+                      class="block text-sm font-medium text-gray-700"
+                    >
+                      {$_("zip-postal-code")}
+                    </label>
+                    <input
+                      type="text"
+                      id="postalcode"
+                      bind:value={address.postalcode}
+                      class="focus:ring-indigo-500 focus:border-indigo-500 flex-1 block w-full rounded-none rounded-l-md sm:text-sm border-neutral-300 border bg-neutral-50 text-neutral-800 p-2"
+                    />
+                  </div>
+
+                  <div>
+                    <label
+                      for="city"
+                      class="block text-sm font-medium text-gray-700"
+                    >
+                      {$_("city")}
+                    </label>
+                    <input
+                      type="text"
+                      id="city"
+                      bind:value={address.city}
+                      class="focus:ring-indigo-500 focus:border-indigo-500 flex-1 block w-full rounded-none rounded-l-md sm:text-sm border-neutral-300 border bg-neutral-50 text-neutral-800 p-2"
+                    />
+                  </div>
+                </div>
+              </div>
+            {/if}
+          </div>
+        {/if}
+      </div>
+      <!-- Submit Button -->
+      <div class="mt-6">
+        <button
+          id="submit_button"
+          type="button"
+          class="w-full inline-flex justify-center py-2 px-4 border border-transparent shadow-sm text-sm font-medium rounded-md text-white bg-indigo-600 hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 disabled:bg-gray-400 disabled:cursor-not-allowed"
+          disabled={!amount > 0 ||
+            !runnerinfo.id ||
+            (!donorinfo.id && !donor_create_new) ||
+            (donor_create_new &&
+              (!donorinfo.firstname || !donorinfo.lastname)) ||
+            (donor_create_new &&
+              address_checked &&
+              (!address.address1 || !address.city || !address.postalcode))}
+          on:click={async () => {
+            if (donor_create_new) {
+              donorinfo = await DonorService.donorControllerPost({
+                firstname: donorinfo.firstname,
+                lastname: donorinfo.lastname,
+                receiptNeeded: address_checked,
+                ...(address_checked ? { address: address } : {}),
+              });
+            }
+
+            DonationService.donationControllerPostDistance({
+              donor: donorinfo.id,
+              runner: runnerinfo.id,
+              amountPerDistance: amount * 100,
+            })
+              .then((data) => {
+                last_created = data;
+                toast.success($_("donation-created-successfully"));
+                resetAll();
+                loadDonors();
+              })
+              .catch((err) => {
+                console.error("Error creating donation:", err);
+                toast.error($_("error-creating-donation"));
+              });
+          }}
+        >
+          {$_("create")}
+        </button>
+      </div>
+    </div>
+  </div>
+</div>
+
+<style>
+  :global(:root) {
+    --sv-bg: #ffffff;
+  }
+</style>