Merge pull request 'filter by runner full names + "#<ID>"' (#160) from feature/159-cardsoverview-filter-for-runner-full-names-and-id into dev

Reviewed-on: #160

.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/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}