Merge pull request 'bugfix/162-create_card_modal' (#163) from bugfix/162-create_card_modal into dev

Reviewed-on: #163

.gitignore

@@ -1,11 +1,5 @@
 node_modules
-package-lock.json
-yarn.lock
 *.map
 public/env.js
 public/index.html
-/dist
+/dist
-.yarn
-.pnp.js
-.yarnrc.yml
-pnpm-lock.yaml

Dockerfile

@@ -1,11 +1,11 @@
-FROM registry.odit.services/hub/library/node:19.5.0-alpine3.16 as build
+FROM registry.odit.services/hub/library/node:19.7.0-alpine3.16 as build
 WORKDIR /app
 COPY package.json ./
 RUN npx pnpm i
-COPY package.json *.config.js postcss.config.cjs tailwind.config.js vite.config.js index.html ./
+COPY package.json pnpm-lock.yaml *.config.js postcss.config.cjs tailwind.config.js vite.config.js index.html ./
 COPY src ./src
 COPY public ./public
-RUN yarn build
+RUN pnpm build
 # final image
 FROM registry.odit.services/library/nginx-brotli:3.15 as final
 COPY --from=build /app/dist /usr/share/nginx/html

package.json

@@ -10,32 +10,19 @@
 	},
 	"license": "CC-BY-NC-SA-4.0",
 	"devDependencies": {
-		"@odit/lfk-client-js": "0.13.1",
+		"@odit/lfk-client-js": "0.13.3",
-		"@odit/license-exporter": "0.0.11",
+		"@odit/license-exporter": "0.0.12",
 		"@sveltejs/vite-plugin-svelte": "1.0.0-next.6",
-		"@types/html-minifier": "4.0.0",
+		"@types/html-minifier": "4.0.2",
-		"@vincjo/datatables": "^1.1.0",
+		"auto-changelog": "2.4.0",
-		"auto-changelog": "2.2.1",
+		"autoprefixer": "10.4.14",
-		"autoprefixer": "10.2.5",
-		"check-password-strength": "2.0.2",
-		"csvtojson": "2.0.10",
-		"gridjs": "3.4.0",
 		"html-minifier": "4.0.0",
-		"localforage": "1.9.0",
+		"postcss": "8.4.21",
-		"marked": "2.0.3",
+		"release-it": "15.8.0",
-		"postcss": "8.2.10",
+		"svelte": "3.56.0",
-		"release-it": "14.6.1",
-		"svelte": "3.37.0",
-		"svelte-focus-trap": "1.2.0",
-		"svelte-i18n": "3.3.9",
 		"svelte-preprocess": "4.7.0",
-		"svelte-select": "3.17.0",
 		"tailwindcss": "3.2.7",
-		"tinro": "0.6.1",
+		"vite": "2.1.5"
-		"toastify-js": "1.10.0",
-		"validator": "13.5.2",
-		"vite": "2.1.5",
-		"xlsx": "0.16.9"
 	},
 	"release-it": {
 		"git": {
@@ -55,6 +42,22 @@
 		}
 	},
 	"dependencies": {
-		"@paralleldrive/cuid2": "^2.2.0"
+		"@paralleldrive/cuid2": "^2.2.0",
+		"localforage": "1.10.0",
+		"tinro": "0.6.12",
+		"toastify-js": "1.12.0",
+		"svelte-focus-trap": "1.2.0",
+		"svelte-i18n": "3.6.0",
+		"svelte-select": "3.17.0",
+		"xlsx": "0.18.5",
+		"validator": "13.9.0",
+		"marked": "2.0.3",
+		"check-password-strength": "2.0.2",
+		"csvtojson": "2.0.10",
+		"gridjs": "3.4.0",
+		"@vincjo/datatables": "^1.4.0"
+	},
+	"volta": {
+		"node": "19.7.0"
 	}
-}
+}

src/components/cards/AddCardModal.svelte

@@ -11,22 +11,37 @@
   import Toastify from "toastify-js";
   export let modal_open;
   export let current_cards;
-  const getRunnerLabel = (option) =>
+
-    option.firstname + " " + (option.middlename || "") + " " + option.lastname;
+  const getRunnerLabel = (option) => {
-  const filterRunners = (label, filterText, option) =>
+    if (option.middlename) {
-    label.toLowerCase().includes(filterText.toLowerCase()) ||
+      return option.firstname + " " + option.middlename + " " + option.lastname;
-    option.value.toString().startsWith(filterText.toLowerCase());
+    }
+    return option.firstname + " " + option.lastname;
+  };
+
+  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 focus(el) {
     el.focus();
   }
   $: runner = 0;
-  $: runners = [];
   $: enabled = true;
   $: processed_last_submit = true;
+
+  let loading = true;
+  let runners = [];
   RunnerService.runnerControllerGetAll().then((val) => {
     runners = val.map((r) => {
       return { label: getRunnerLabel(r), value: r };
     });
+    loading = false;
   });
   $: createbtnenabled = true;
   (() => {
@@ -86,61 +101,78 @@
     use:clickOutside
     on:click_outside={() => {
       modal_open = false;
-    }}>
+    }}
+  >
     <div
-      class="flex items-end justify-center min-h-screen pt-4 px-4 pb-20 text-center sm:block sm:p-0">
+      class="flex items-end justify-center min-h-screen pt-4 px-4 pb-20 text-center sm:block sm:p-0"
+    >
       <div class="fixed inset-0 transition-opacity" aria-hidden="true">
         <div
           class="absolute inset-0 bg-gray-500 opacity-75"
-          data-id="modal_backdrop" />
+          data-id="modal_backdrop"
+        />
       </div>
       <span
         class="hidden sm:inline-block sm:align-middle sm:h-screen"
-        aria-hidden="true">&#8203;</span>
+        aria-hidden="true">&#8203;</span
+      >
       <div
         class="inline-block align-bottom bg-white rounded-lg text-left shadow-xl transform transition-all sm:my-8 sm:align-middle sm:max-w-lg sm:w-full"
         role="dialog"
         aria-modal="true"
-        aria-labelledby="modal-headline">
+        aria-labelledby="modal-headline"
+      >
         <div class="bg-white px-4 pt-5 pb-4 sm:p-6 sm:pb-4">
           <div class="sm:flex sm:items-start">
             <div
-              class="mx-auto flex-shrink-0 flex items-center justify-center h-12 w-12 rounded-full bg-blue-100 sm:mx-0 sm:h-10 sm:w-10">
+              class="mx-auto flex-shrink-0 flex items-center justify-center h-12 w-12 rounded-full bg-blue-100 sm:mx-0 sm:h-10 sm:w-10"
+            >
               <svg
                 class="h-6 w-6 text-blue-600"
                 fill="currentColor"
                 xmlns="http://www.w3.org/2000/svg"
                 viewBox="0 0 24 24"
                 width="24"
-                height="24"><path fill="none" d="M0 0h24v24H0z" />
+                height="24"
+                ><path fill="none" d="M0 0h24v24H0z" />
                 <path
                   fill="currentColor"
-                  d="M22 10v10a1 1 0 01-1 1H3a1 1 0 01-1-1V10h20zm0-2H2V4a1 1 0 011-1h18a1 1 0 011 1v4zm-7 8v2h4v-2h-4z" /></svg>
+                  d="M22 10v10a1 1 0 01-1 1H3a1 1 0 01-1-1V10h20zm0-2H2V4a1 1 0 011-1h18a1 1 0 011 1v4zm-7 8v2h4v-2h-4z"
+                /></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">
-                {$_('create-a-new-card')}
+                {$_("create-a-new-card")}
               </h3>
               <div class="mt-2 mb-6">
                 <p class="text-sm text-gray-500">
-                  {$_('you-can-provide-a-runner-but-you-dont-have-to')}
+                  {$_("you-can-provide-a-runner-but-you-dont-have-to")}
-                  {$_('if-you-want-to-create-multiple-blanco-cards-try-the-add-bulk-button')}
+                  {$_(
+                    "if-you-want-to-create-multiple-blanco-cards-try-the-add-bulk-button"
+                  )}
                 </p>
               </div>
               <div class="grid grid-cols-6 gap-6">
                 <div class="col-span-6">
                   <label
                     for="donor"
-                    class="block text-sm font-medium text-gray-700">{$_('runner')}</label>
+                    class="block text-sm font-medium text-gray-700"
+                    >{$_("runner")}</label
+                  >
                   <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) => filterRunners(label, filterText, option)}
+                    itemFilter={(label, filterText, option) =>
+                      filterRunners(label, filterText, option)}
                     items={runners}
-                    showChevron={true}
+                    bind:loading
-                    placeholder={$_('search-for-runner-by-name-or-id')}
+                    showChevron={!loading}
-                    noOptionsMessage={$_('no-runners-found')}
+                    placeholder={$_("search-for-runner-by-name-or-id")}
-                    on:select={(selectedValue) => (runner = selectedValue.detail.value.id)}
+                    noOptionsMessage={$_("no-runners-found")}
-                    on:clear={() => (runner = null)} />
+                    on:select={(selectedValue) =>
+                      (runner = selectedValue.detail.value.id)}
+                    on:clear={() => (runner = null)}
+                  />
                 </div>
               </div>
             </div>
@@ -152,16 +184,18 @@
             class:opacity-50={!createbtnenabled}
             on:click={submit}
             type="button"
-            class="w-full inline-flex justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-blue-600 text-base font-medium text-white hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 sm:ml-3 sm:w-auto sm:text-sm">
+            class="w-full inline-flex justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-blue-600 text-base font-medium text-white hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 sm:ml-3 sm:w-auto sm:text-sm"
-            {$_('create')}
+          >
+            {$_("create")}
           </button>
           <button
             on:click={() => {
               modal_open = false;
             }}
             type="button"
-            class="mt-3 w-full inline-flex justify-center rounded-md border border-gray-300 shadow-sm px-4 py-2 bg-white text-base font-medium text-gray-700 hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 sm:mt-0 sm:ml-3 sm:w-auto sm:text-sm">
+            class="mt-3 w-full inline-flex justify-center rounded-md border border-gray-300 shadow-sm px-4 py-2 bg-white text-base font-medium text-gray-700 hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 sm:mt-0 sm:ml-3 sm:w-auto sm:text-sm"
-            {$_('cancel')}
+          >
+            {$_("cancel")}
           </button>
         </div>
       </div>

src/components/cards/CardsOverview.svelte

@@ -8,6 +8,7 @@
   import CardDetailModal from "./CardDetailModal.svelte";
   import GenerateRunnerCards from "../pdf_generation/GenerateRunnerCards.svelte";
   import ThFilterStatus from "./ThFilterStatus.svelte";
+  import ThFilterRunner from "./ThFilterRunner.svelte";
   export let edit_modal_open = false;
   export let runner = {};
   export let editable = {};
@@ -54,7 +55,7 @@
     bind:runner
     bind:editable
     bind:original_data
-    on:dataUpdated={(handler.setRows(current_cards))}
+    on:dataUpdated={handler.setRows(current_cards)}
   />
 {/if}
 
@@ -78,7 +79,7 @@
         <table>
           <thead>
             <tr>
-              <th>
+              <th style="border-bottom: 1px solid #ddd;">
                 <input
                   type="checkbox"
                   class="focus:ring-indigo-500 h-4 w-4 text-indigo-600 border-gray-300 rounded"
@@ -95,14 +96,14 @@
               <Th {handler} orderBy="code">{$_("code")}</Th>
               <Th {handler} orderBy="runner">{$_("runner")}</Th>
               <Th {handler} orderBy="status">{$_("status")}</Th>
-              <th>{$_("action")}</th>
+              <th style="border-bottom: 1px solid #ddd;">{$_("action")}</th>
             </tr>
             <tr>
-              <th />
+              <th style="border-bottom: 1px solid #ddd;" />
               <ThFilter {handler} filterBy="code" />
-              <ThFilter {handler} filterBy="runner" />
+              <ThFilterRunner {handler} />
               <ThFilterStatus {handler} />
-              <th />
+              <th style="border-bottom: 1px solid #ddd;" />
             </tr>
           </thead>
           <tbody>

src/components/cards/ThFilterRunner.svelte

@@ -0,0 +1,57 @@
+<script>
+  export let handler;
+  let filterValue = "";
+</script>
+
+<th>
+  <input
+    on:input={() => {
+      setTimeout(() => {
+        const v = filterValue.toLowerCase();
+        handler.filter(v, (c) => {
+          // if (v === "") {
+          //   return c;
+          // }
+
+          if (!c.runner && v === "blanko") {
+            return "blanko";
+          }
+
+          if (v.startsWith("#")) {
+            return `#${c.runner?.id}`;
+          }
+          if (c.runner) {
+            let runnerName = `${c.runner.firstname} ${c.runner.lastname}`;
+            if (c.runner.middlename) {
+              runnerName = `${c.runner.firstname} ${c.runner.middlename} ${c.runner.lastname}`;
+            }
+            runnerName = runnerName.toLowerCase();
+            return runnerName;
+          }
+          return "";
+        });
+      }, 150);
+    }}
+    bind:value={filterValue}
+    type="text"
+    name="runnerfilter"
+    id="runnerfilter"
+  />
+</th>
+
+<style>
+  th {
+    border-bottom: 1px solid #e0e0e0;
+  }
+  input {
+    margin: -1px 0 0 0;
+    padding: 0;
+    width: 100%;
+    height: 24px;
+    border: none;
+    text-align: center;
+    background: inherit;
+    outline: 0;
+    font-size: 14px;
+  }
+</style>

src/components/cards/ThFilterStatus.svelte

@@ -9,11 +9,10 @@
     on:input={() => {
       setTimeout(() => {
         if (`${selected}`.trim()) {
-          if(selected==="all"){
+          if (selected === "all") {
-           handler.filter('', 'enabled') 
+            handler.filter("", "enabled");
-          }
+          } else {
-          else{
+            handler.filter(selected, "enabled");
-            handler.filter(selected, 'enabled')
           }
         }
       }, 50);
@@ -22,8 +21,25 @@
     name="statusfilter"
     id="statusfilter"
   >
-    <option value="all">{$_('all')}</option>
+    <option value="all">{$_("all")}</option>
     <option value="true">{$_("enabled")}</option>
     <option value="false">{$_("disabled")}</option>
   </select>
 </th>
+
+<style>
+  th {
+    border-bottom: 1px solid #e0e0e0;
+  }
+  select {
+    margin: -1px 0 0 0;
+    padding: 0;
+    width: 100%;
+    height: 24px;
+    border: none;
+    text-align: center;
+    background: inherit;
+    outline: 0;
+    font-size: 14px;
+  }
+</style>

src/components/runners/RunnersOverview.svelte

@@ -73,7 +73,7 @@
       <table>
         <thead>
           <tr>
-            <th>
+            <th style="border-bottom: 1px solid #ddd;">
               <input
                 type="checkbox"
                 class="focus:ring-indigo-500 h-4 w-4 text-indigo-600 border-gray-300 rounded"
@@ -91,19 +91,19 @@
             <Th {handler} orderBy="firstname">First Name</Th>
             <Th {handler} orderBy="middlename">Middle Name</Th>
             <Th {handler} orderBy="lastname">Last Name</Th>
-            <th>Gruppe</th>
+            <th style="border-bottom: 1px solid #ddd;">Gruppe</th>
             <Th {handler} orderBy="distance">Distanz</Th>
-            <th>{$_("action")}</th>
+            <th style="border-bottom: 1px solid #ddd;">{$_("action")}</th>
           </tr>
           <tr>
-            <th />
+            <th style="border-bottom: 1px solid #ddd;" />
             <ThFilter {handler} filterBy="id" />
             <ThFilter {handler} filterBy="firstname" />
             <ThFilter {handler} filterBy="middlename" />
             <ThFilter {handler} filterBy="lastname" />
             <ThFilterGroup groups={selectgroups} {handler} />
-            <th />
+            <th style="border-bottom: 1px solid #ddd;" />
-            <th />
+            <th style="border-bottom: 1px solid #ddd;" />
           </tr>
         </thead>
         <tbody>

src/components/users/UsersOverview.svelte

@@ -82,14 +82,6 @@
                 <tr data-rowid="user_{u.id}">
                   <td class="px-6 py-4 whitespace-nowrap">
                     <div class="flex items-center">
-                      {#if u.profilePic}
-                        <div class="flex-shrink-0 h-10 w-10">
-                          <img
-                            class="h-10 w-10 rounded-full"
-                            src={u.profilePic}
-                            alt="" />
-                        </div>
-                      {/if}
                       <div class="ml-4">
                         <div class="text-sm font-medium text-gray-900">
                           {u.firstname}