Merge pull request 'Added runner team's parentorg name to runenr overciew' (#129) from feature/128-runner_orgs into dev

Reviewed-on: #129

CHANGELOG.md

@@ -2,9 +2,48 @@
 
 All notable changes to this project will be documented in this file. Dates are displayed in UTC.
 
+#### [0.12.4](https://git.odit.services/lfk/frontend/compare/0.12.3...0.12.4)
+
+- 🚑 [HOTFIX] - drop "svelte-infinite-loading" [`d0ab3dd`](https://git.odit.services/lfk/frontend/commit/d0ab3dda78bbad2cea18a2491056530897d56607)
+
+#### [0.12.3](https://git.odit.services/lfk/frontend/compare/0.12.2...0.12.3)
+
+> 8 April 2021
+
+- Merge pull request 'fix' (#126) from bugfix/125-mobile into dev [`#125`](https://git.odit.services/lfk/frontend/issues/125)
+- almost fixed... [`495a6b2`](https://git.odit.services/lfk/frontend/commit/495a6b22bd8036593f390bdb862d325524cefbcc)
+- 🐞 bugfix for svelte x tailwind class names [`b6b07cf`](https://git.odit.services/lfk/frontend/commit/b6b07cf30cc6533bd5dbfec1f813c16fde85634d)
+- fix [`0acaffb`](https://git.odit.services/lfk/frontend/commit/0acaffbdfa359e52654a5afe2788aa59fe6f9036)
+- 🚀RELEASE v0.12.3 [`d9cf51b`](https://git.odit.services/lfk/frontend/commit/d9cf51b4bbc2136594a03c5d0eeb8cb3f3440b2a)
+- custom css fix for collapsed_navigation [`ffbc243`](https://git.odit.services/lfk/frontend/commit/ffbc243194c7faeb4fe61c12711a1c441c3994ef)
+- new license file version [CI SKIP] [`aa17f24`](https://git.odit.services/lfk/frontend/commit/aa17f242209f7e7cecff774ace7a35b581adec1f)
+
+#### [0.12.2](https://git.odit.services/lfk/frontend/compare/0.12.1...0.12.2)
+
+> 7 April 2021
+
+- 🚀RELEASE v0.12.2 [`6043bc4`](https://git.odit.services/lfk/frontend/commit/6043bc45174d51ab110b0ed10a8679d96127ab87)
+- Merge pull request 'feature/110-virtual_list' (#124) from feature/110-virtual_list into dev [`e6ed066`](https://git.odit.services/lfk/frontend/commit/e6ed066e3ffabba6519f94d801d21a27819d0492)
+- wip on virtuallist [`6304116`](https://git.odit.services/lfk/frontend/commit/6304116edb7f5e3c7b67c15e0b1740d34c513155)
+- fixed height table [`4cad86c`](https://git.odit.services/lfk/frontend/commit/4cad86cf852468428d77103d052c6974b17c34c3)
+- pre-merge fixes [`37970d2`](https://git.odit.services/lfk/frontend/commit/37970d2be6b6502701914e41e5bfe2c418438480)
+- updated virtual scroll list [`1376788`](https://git.odit.services/lfk/frontend/commit/1376788016e767f006661f8c9e6747781f2dce55)
+
+#### [0.12.1](https://git.odit.services/lfk/frontend/compare/0.12.0...0.12.1)
+
+> 6 April 2021
+
+- 🚀RELEASE v0.12.1 [`834ff8f`](https://git.odit.services/lfk/frontend/commit/834ff8fa63178f36dcacf931c128ba67a3e7bd1b)
+- Merge pull request 'ImportRunnerModal Cancel Button feature/122-import_cancel' (#123) from feature/112-import_cancel into dev [`1f428a5`](https://git.odit.services/lfk/frontend/commit/1f428a535e3ae619cbf8db51d04255aac8dd8614)
+- Added cancel button for the first stage of runner import [`0c40966`](https://git.odit.services/lfk/frontend/commit/0c409669700d3a8096cc04716154b0fdca458fe5)
+- Escape now triggers foll modal close (including reset) instead of just hiding th modal [`9da071f`](https://git.odit.services/lfk/frontend/commit/9da071fe9ba067160334682bf00163e3630fe919)
+
 #### [0.12.0](https://git.odit.services/lfk/frontend/compare/0.11.0...0.12.0)
 
+> 5 April 2021
+
 - Merge pull request 'feature/108_vite_migration' (#118) from feature/108_vite_migration into dev [`#108`](https://git.odit.services/lfk/frontend/issues/108)
+- 🚀RELEASE v0.12.0 [`892a04f`](https://git.odit.services/lfk/frontend/commit/892a04f28930481715eb486b1ef4efeb98a6e999)
 - Fixed package version [`27cc972`](https://git.odit.services/lfk/frontend/commit/27cc9727f1d02d186c3ccadb06e5b4b1b1d6202d)
 - Merge pull request 'Implmented certificate generation feature/119-Certificate_generation' (#120) from feature/119-Certificate_generation into dev [`f0738d4`](https://git.odit.services/lfk/frontend/commit/f0738d451b02e4a298b5f9cb8ab0be16aed10a38)
 - The PFS Prefixes now get translated via i18n [`bfacfec`](https://git.odit.services/lfk/frontend/commit/bfacfec76511cae3015f52698fdcbd80a7a15981)

index.html

@@ -13,7 +13,7 @@
 </head>
 
 <body>
-  <span style="display: none;visibility: hidden;" id="buildinfo">RELEASE_INFO-0.12.0-RELEASE_INFO</span>
+  <span style="display: none;visibility: hidden;" id="buildinfo">RELEASE_INFO-0.12.4-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.12.0",
+	"version": "0.12.4",
 	"scripts": {
 		"i18n-order": "node order.js",
 		"dev": "vite",
@@ -13,7 +13,7 @@
 		"check-password-strength": "2.0.2",
 		"@odit/lfk-client-js": "0.10.1",
 		"@odit/license-exporter": "0.0.11",
-		"@sveltejs/vite-plugin-svelte": "1.0.0-next.5",
+		"@sveltejs/vite-plugin-svelte": "1.0.0-next.6",
 		"@types/html-minifier": "4.0.0",
 		"auto-changelog": "2.2.1",
 		"autoprefixer": "10.2.5",
@@ -28,12 +28,12 @@
 		"svelte-i18n": "3.3.9",
 		"svelte-preprocess": "4.7.0",
 		"svelte-select": "3.17.0",
-		"tailwindcss": "2.0.4",
+		"tailwindcss": "2.1.1",
 		"tinro": "0.6.1",
 		"toastify-js": "1.10.0",
 		"validator": "13.5.2",
 		"vite": "2.1.5",
-		"vite-plugin-windicss": "0.12.2",
+		"vite-plugin-windicss": "0.12.5",
 		"xlsx": "0.16.9"
 	},
 	"release-it": {

src/components/cards/CardsOverview.svelte

@@ -1,5 +1,5 @@
 <script>
-  import { getLocaleFromNavigator, json, _ } from "svelte-i18n";
+  import { _ } from "svelte-i18n";
   import { RunnerCardService } from "@odit/lfk-client-js";
   import store from "../../store";
   import Toastify from "toastify-js";
@@ -11,11 +11,21 @@
   export let editable = {};
   export let original_data = {};
   export let current_cards = [];
+  $: filtered_cards = current_cards.filter(function (c) {
+    if (
+      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 = current_cards.some((r) => r.is_selected === true);
   $: generate_cards = current_cards.filter((r) => r.is_selected === true);
   const cards_promise = RunnerCardService.runnerCardControllerGetAll().then(
     (val) => {
@@ -46,8 +56,38 @@
     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>
+  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
@@ -121,107 +161,111 @@
               </th>
             </tr>
           </thead>
-          <tbody class="divide-y divide-gray-200">
-            {#each current_cards as card}
-              {#if card.code
-                .toLowerCase()
-                .includes(
-                  searchvalue.toLowerCase()
-                ) || card.runner?.firstname
-                  .toLowerCase()
-                  .includes(
-                    searchvalue.toLowerCase()
-                  ) || card.runner?.middlename
-                  .toLowerCase()
-                  .includes(
-                    searchvalue.toLowerCase()
-                  ) || card.runner?.lastname
-                  .toLowerCase()
-                  .includes(
-                    searchvalue.toLowerCase()
-                  ) || should_display_based_on_id(card.id)}
-                <tr data-rowid="card_{card.id}">
-                  <td class="px-6 py-4 whitespace-nowrap">
-                    <input
-                      bind:checked={card.is_selected}
-                      type="checkbox"
-                      class="focus:ring-indigo-500 h-4 w-4 text-indigo-600 border-gray-300 rounded" />
-                  </td>
-                  <td class="px-6 py-4 whitespace-nowrap">
-                    <div class="flex items-center">{card.code}</div>
-                  </td>
-                  <td class="px-6 py-4 whitespace-nowrap">
-                    <div class="flex items-center">
-                      {#if card.runner}
-                        <a
-                          href="../runners/{card.runner.id}"
-                          class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-gray-100 text-gray-800">{card.runner.firstname}
-                          {card.runner.middlename || ''}
-                          {card.runner.lastname}</a>
-                      {:else}{$_('non-blanko')}{/if}
-                    </div>
-                  </td>
-                  <td class="px-6 py-4 whitespace-nowrap">
-                    <div class="flex items-center">
-                      {#if card.enabled}
-                        <span
-                          class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-green-100 text-green-800">{$_('enabled')}</span>
-                      {:else}
-                        <span
-                          class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-red-100 text-red-800">{$_('disabled')}</span>
-                      {/if}
-                    </div>
-                  </td>
+          <tbody class="divide-y divide-gray-200 virtual-wrapper"
+  on:scroll={updateScroll}
+  style="height: 70vh; width:100%"
+  bind:this={ele}
+          >
+    {#each filtered_cards as card, index}
+    {#if card.code
+      .toLowerCase()
+      .includes(
+        searchvalue.toLowerCase()
+      ) || card.runner?.firstname
+        .toLowerCase()
+        .includes(
+          searchvalue.toLowerCase()
+        ) || card.runner?.middlename
+        .toLowerCase()
+        .includes(
+          searchvalue.toLowerCase()
+        ) || card.runner?.lastname
+        .toLowerCase()
+        .includes(
+          searchvalue.toLowerCase()
+        ) || should_display_based_on_id(card.id)}
+      <tr data-rowid="card_{card.id}">
+        <td class="px-6 py-4 whitespace-nowrap">
+          <input
+            bind:checked={card.is_selected}
+            type="checkbox"
+            class="focus:ring-indigo-500 h-4 w-4 text-indigo-600 border-gray-300 rounded" />
+        </td>
+        <td class="px-6 py-4 whitespace-nowrap">
+          <div class="flex items-center">{card.code}</div>
+        </td>
+        <td class="px-6 py-4 whitespace-nowrap">
+          <div class="flex items-center">
+            {#if card.runner}
+              <a
+                href="../runners/{card.runner.id}"
+                class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-gray-100 text-gray-800">{card.runner.firstname}
+                {card.runner.middlename || ''}
+                {card.runner.lastname}</a>
+            {:else}{$_('non-blanko')}{/if}
+          </div>
+        </td>
+        <td class="px-6 py-4 whitespace-nowrap">
+          <div class="flex items-center">
+            {#if card.enabled}
+              <span
+                class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-green-100 text-green-800">{$_('enabled')}</span>
+            {:else}
+              <span
+                class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-red-100 text-red-800">{$_('disabled')}</span>
+            {/if}
+          </div>
+        </td>
 
-                  {#if active_deletes[card.id] === true}
-                    <td
-                      class="px-6 py-4 whitespace-nowrap text-right text-sm font-medium">
-                      <button
-                        on:click={() => {
-                          active_deletes[card.id] = false;
-                        }}
-                        tabindex="0"
-                        class="ml-4 text-indigo-600 hover:text-indigo-900 cursor-pointer">{$_('cancel-delete')}</button>
-                      <button
-                        on:click={() => {
-                          RunnerCardService.runnerCardControllerRemove(card.id, false).then(
-                            (resp) => {
-                              current_cards = current_cards.filter(
-                                (obj) => obj.id !== card.id
-                              );
-                              Toastify({
-                                text: $_('card-deleted'),
-                                duration: 500,
-                                backgroundColor:
-                                  'linear-gradient(to right, #00b09b, #96c93d)',
-                              }).showToast();
-                            }
-                          );
-                        }}
-                        tabindex="0"
-                        class="ml-4 text-red-600 hover:text-red-900 cursor-pointer">{$_('confirm-delete')}</button>
-                    </td>
-                  {:else}
-                    <td
-                      class="px-6 py-4 whitespace-nowrap text-right text-sm font-medium">
-                      <button
-                        on:click={() => {
-                          open_edit_modal(card);
-                        }}
-                        class="text-indigo-600 hover:text-indigo-900">{$_('details')}</button>
-                      {#if store.state.jwtinfo.userdetails.permissions.includes('CARD:DELETE')}
-                        <button
-                          on:click={() => {
-                            active_deletes[card.id] = true;
-                          }}
-                          tabindex="0"
-                          class="ml-4 text-red-600 hover:text-red-900 cursor-pointer">{$_('delete')}</button>
-                      {/if}
-                    </td>
-                  {/if}
-                </tr>
-              {/if}
-            {/each}
+        {#if active_deletes[card.id] === true}
+          <td
+            class="px-6 py-4 whitespace-nowrap text-right text-sm font-medium">
+            <button
+              on:click={() => {
+                active_deletes[card.id] = false;
+              }}
+              tabindex="0"
+              class="ml-4 text-indigo-600 hover:text-indigo-900 cursor-pointer">{$_('cancel-delete')}</button>
+            <button
+              on:click={() => {
+                RunnerCardService.runnerCardControllerRemove(card.id, false).then(
+                  (resp) => {
+                    current_cards = current_cards.filter(
+                      (obj) => obj.id !== card.id
+                    );
+                    Toastify({
+                      text: $_('card-deleted'),
+                      duration: 500,
+                      backgroundColor:
+                        'linear-gradient(to right, #00b09b, #96c93d)',
+                    }).showToast();
+                  }
+                );
+              }}
+              tabindex="0"
+              class="ml-4 text-red-600 hover:text-red-900 cursor-pointer">{$_('confirm-delete')}</button>
+          </td>
+        {:else}
+          <td
+            class="px-6 py-4 whitespace-nowrap text-right text-sm font-medium">
+            <button
+              on:click={() => {
+                open_edit_modal(card);
+              }}
+              class="text-indigo-600 hover:text-indigo-900">{$_('details')}</button>
+            {#if store.state.jwtinfo.userdetails.permissions.includes('CARD:DELETE')}
+              <button
+                on:click={() => {
+                  active_deletes[card.id] = true;
+                }}
+                tabindex="0"
+                class="ml-4 text-red-600 hover:text-red-900 cursor-pointer">{$_('delete')}</button>
+            {/if}
+          </td>
+        {/if}
+      </tr>
+    {/if}
+    {/each}
           </tbody>
         </table>
       </div>

src/components/dashboard/Dashboard.svelte

@@ -12,11 +12,21 @@
   }
 </script>
 
+<style>
+  .collapsed_navigation {
+    transform: translateX(-100%);
+  }
+  @media (min-width: 768px) {
+    .collapsed_navigation {
+      transform: translateX(0px);
+    }
+  }
+</style>
+
 <section class="min-h-screen bg-gray-50">
-  <nav
-    class:-translate-x-full={!navOpen}
-    class:translate-x-0={navOpen}
-    class="select-none fixed top-0 left-0 z-20 h-full pb-10 overflow-x-hidden overflow-y-auto transition origin-left transform border-r w-60 md:translate-x-0 bg-gray-50">
+  <div
+    class:collapsed_navigation={!navOpen}
+    class="select-none fixed top-0 left-0 z-20 h-full pb-10 overflow-x-hidden overflow-y-auto transition origin-left transform border-r w-60 bg-gray-50">
     <a href="/" class="flex items-center px-4 py-5">
       <img src="/lfk-logo.png" alt="Logo" class="h-10" />
       <h3 class="text-lg">Lauf für Kaya! Admin</h3>
@@ -297,14 +307,15 @@
         <span>{$_('logout')}</span>
       </span>
     </nav>
-  </nav>
+  </div>
   <div class="ml-0 transition md:ml-60">
     <header
-      on:click={() => {
-        navOpen = true;
-      }}
       class="flex items-center justify-between w-full px-4 bg-white border-b h-14 md:hidden">
-      <button class="block btn btn-light md:hidden">
+      <button
+        on:click={() => {
+          navOpen = true;
+        }}
+        class="block btn btn-light md:hidden">
         <span class="sr-only">Menu</span><svg
           class="w-4 h-4"
           xmlns="http://www.w3.org/2000/svg"
@@ -318,10 +329,13 @@
       <NoComponentLoaded />
     </slot>
   </div>
-  <div
-    on:click={() => {
-      navOpen = false;
-    }}
-    class:hidden={!navOpen}
-    class="fixed inset-0 z-10 w-screen h-screen bg-black bg-opacity-25 md:hidden" />
+  {#if navOpen === true}
+    <div
+      on:click={() => {
+        navOpen = false;
+        console.log({ navOpen });
+      }}
+      class:hidden={!navOpen}
+      class="fixed inset-0 z-10 w-screen h-screen bg-black bg-opacity-25 md:hidden" />
+  {/if}
 </section>

src/components/runners/ImportRunnerModal.svelte

@@ -34,7 +34,7 @@
     document.onkeydown = (e) => {
       e = e || window.event;
       if (e.key === "Escape") {
-        import_modal_open = false;
+        cancelModal();
       }
       if (e.keyCode === 13) {
         //
@@ -281,6 +281,16 @@
                   bind:files
                   type="file" />
               </div>
+              <div class="overflow-hidden relative mt-4 mb-4">
+                <button
+                  on:click={() => {
+                    cancelModal();
+                  }}
+                  type="button"
+                  class="w-full rounded-md border border-transparent shadow-sm px-4 py-2 bg-red-600 text-base font-medium text-white hover:bg-red-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-red-500 md:ml-40 mr-0 sm:ml-0 sm:w-auto sm:text-sm">
+                  {$_('cancel')}
+                </button>
+              </div>
             {/if}
             {#if json_output.length > 0}
               {#if opened_from === 'OrgOverview'}

src/components/runners/RunnersOverview.svelte

@@ -197,7 +197,7 @@
                       {#if runner.group.responseType === 'RUNNERTEAM'}
                         <a
                           href="../teams/{runner.group.id}"
-                          class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-gray-100 text-gray-800">{runner.group.name}</a>
+                          class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-gray-100 text-gray-800">{runner.group.parentGroup.name} &gt; {runner.group.name}</a>
                       {/if}
                       {#if runner.group.responseType === 'RUNNERORGANIZATION'}
                         <a