Merge branch 'dev' into feature/110-virtual_list

pre-merge fixes
ref #110
2021-04-07 20:09:35 +02:00 · 2021-04-07 18:59:46 +02:00 · 2021-04-07 18:38:52 +02:00 · 2021-04-07 18:19:58 +02:00 · 2021-04-06 22:16:24 +02:00 · 2021-04-06 16:47:37 +02:00
5 changed files with 171 additions and 107 deletions
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -2,9 +2,18 @@
 All notable changes to this project will be documented in this file. Dates are displayed in UTC.
 #### [0.12.1](https://git.odit.services/lfk/frontend/compare/0.12.0...0.12.1)
 - 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)
--- a/index.html
+++ b/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.1-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>
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "@odit/lfk-frontend",
-	"version": "0.12.0",
+	"version": "0.12.1",
 	"scripts": {
 		"i18n-order": "node order.js",
 		"dev": "vite",
@@ -53,4 +53,4 @@
 			"after:bump": "npx auto-changelog --commit-limit false -p -u --hide-credit && git add CHANGELOG.md && node versionbuilder.js  && git add index.html && node order.js  && git add src/locales"
 		}
 	}
-}
+}
--- a/src/components/cards/CardsOverview.svelte
+++ b/src/components/cards/CardsOverview.svelte
@@ -1,5 +1,6 @@
 <script>
  import { getLocaleFromNavigator, json, _ } from "svelte-i18n";
  import InfiniteLoading from 'svelte-infinite-loading';
  import { RunnerCardService } from "@odit/lfk-client-js";
  import store from "../../store";
  import Toastify from "toastify-js";
@@ -11,11 +12,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(
+  $: cards_show = current_cards.some((r) => r.is_selected === true);
    (r) => r.is_selected === true
  );
  $: generate_cards = current_cards.filter((r) => r.is_selected === true);
  const cards_promise = RunnerCardService.runnerCardControllerGetAll().then(
    (val) => {
@@ -46,8 +57,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 +162,111 @@
              </th>
            </tr>
          </thead>
-          <tbody class="divide-y divide-gray-200">
+          <tbody class="divide-y divide-gray-200 virtual-wrapper"
-            {#each current_cards as card}
+  on:scroll={updateScroll}
-              {#if card.code
+  style="height: 70vh; width:100%"
-                .toLowerCase()
+  bind:this={ele}
-                .includes(
+          >
-                  searchvalue.toLowerCase()
+    {#each filtered_cards as card, index}
-                ) || card.runner?.firstname
+    {#if card.code
-                  .toLowerCase()
+      .toLowerCase()
-                  .includes(
+      .includes(
-                    searchvalue.toLowerCase()
+        searchvalue.toLowerCase()
-                  ) || card.runner?.middlename
+      ) || card.runner?.firstname
-                  .toLowerCase()
+        .toLowerCase()
-                  .includes(
+        .includes(
-                    searchvalue.toLowerCase()
+          searchvalue.toLowerCase()
-                  ) || card.runner?.lastname
+        ) || card.runner?.middlename
-                  .toLowerCase()
+        .toLowerCase()
-                  .includes(
+        .includes(
-                    searchvalue.toLowerCase()
+          searchvalue.toLowerCase()
-                  ) || should_display_based_on_id(card.id)}
+        ) || card.runner?.lastname
-                <tr data-rowid="card_{card.id}">
+        .toLowerCase()
-                  <td class="px-6 py-4 whitespace-nowrap">
+        .includes(
-                    <input
+          searchvalue.toLowerCase()
-                      bind:checked={card.is_selected}
+        ) || should_display_based_on_id(card.id)}
-                      type="checkbox"
+      <tr data-rowid="card_{card.id}">
-                      class="focus:ring-indigo-500 h-4 w-4 text-indigo-600 border-gray-300 rounded" />
+        <td class="px-6 py-4 whitespace-nowrap">
-                  </td>
+          <input
-                  <td class="px-6 py-4 whitespace-nowrap">
+            bind:checked={card.is_selected}
-                    <div class="flex items-center">{card.code}</div>
+            type="checkbox"
-                  </td>
+            class="focus:ring-indigo-500 h-4 w-4 text-indigo-600 border-gray-300 rounded" />
-                  <td class="px-6 py-4 whitespace-nowrap">
+        </td>
-                    <div class="flex items-center">
+        <td class="px-6 py-4 whitespace-nowrap">
-                      {#if card.runner}
+          <div class="flex items-center">{card.code}</div>
-                        <a
+        </td>
-                          href="../runners/{card.runner.id}"
+        <td class="px-6 py-4 whitespace-nowrap">
-                          class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-gray-100 text-gray-800">{card.runner.firstname}
+          <div class="flex items-center">
-                          {card.runner.middlename || ''}
+            {#if card.runner}
-                          {card.runner.lastname}</a>
+              <a
-                      {:else}{$_('non-blanko')}{/if}
+                href="../runners/{card.runner.id}"
-                    </div>
+                class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-gray-100 text-gray-800">{card.runner.firstname}
-                  </td>
+                {card.runner.middlename || ''}
-                  <td class="px-6 py-4 whitespace-nowrap">
+                {card.runner.lastname}</a>
-                    <div class="flex items-center">
+            {:else}{$_('non-blanko')}{/if}
-                      {#if card.enabled}
+          </div>
-                        <span
+        </td>
-                          class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-green-100 text-green-800">{$_('enabled')}</span>
+        <td class="px-6 py-4 whitespace-nowrap">
-                      {:else}
+          <div class="flex items-center">
-                        <span
+            {#if card.enabled}
-                          class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-red-100 text-red-800">{$_('disabled')}</span>
+              <span
-                      {/if}
+                class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-green-100 text-green-800">{$_('enabled')}</span>
-                    </div>
+            {:else}
-                  </td>
+              <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}
+        {#if active_deletes[card.id] === true}
-                    <td
+          <td
-                      class="px-6 py-4 whitespace-nowrap text-right text-sm font-medium">
+            class="px-6 py-4 whitespace-nowrap text-right text-sm font-medium">
-                      <button
+            <button
-                        on:click={() => {
+              on:click={() => {
-                          active_deletes[card.id] = false;
+                active_deletes[card.id] = false;
-                        }}
+              }}
-                        tabindex="0"
+              tabindex="0"
-                        class="ml-4 text-indigo-600 hover:text-indigo-900 cursor-pointer">{$_('cancel-delete')}</button>
+              class="ml-4 text-indigo-600 hover:text-indigo-900 cursor-pointer">{$_('cancel-delete')}</button>
-                      <button
+            <button
-                        on:click={() => {
+              on:click={() => {
-                          RunnerCardService.runnerCardControllerRemove(card.id, false).then(
+                RunnerCardService.runnerCardControllerRemove(card.id, false).then(
-                            (resp) => {
+                  (resp) => {
-                              current_cards = current_cards.filter(
+                    current_cards = current_cards.filter(
-                                (obj) => obj.id !== card.id
+                      (obj) => obj.id !== card.id
-                              );
+                    );
-                              Toastify({
+                    Toastify({
-                                text: $_('card-deleted'),
+                      text: $_('card-deleted'),
-                                duration: 500,
+                      duration: 500,
-                                backgroundColor:
+                      backgroundColor:
-                                  'linear-gradient(to right, #00b09b, #96c93d)',
+                        'linear-gradient(to right, #00b09b, #96c93d)',
-                              }).showToast();
+                    }).showToast();
-                            }
+                  }
-                          );
+                );
-                        }}
+              }}
-                        tabindex="0"
+              tabindex="0"
-                        class="ml-4 text-red-600 hover:text-red-900 cursor-pointer">{$_('confirm-delete')}</button>
+              class="ml-4 text-red-600 hover:text-red-900 cursor-pointer">{$_('confirm-delete')}</button>
-                    </td>
+          </td>
-                  {:else}
+        {:else}
-                    <td
+          <td
-                      class="px-6 py-4 whitespace-nowrap text-right text-sm font-medium">
+            class="px-6 py-4 whitespace-nowrap text-right text-sm font-medium">
-                      <button
+            <button
-                        on:click={() => {
+              on:click={() => {
-                          open_edit_modal(card);
+                open_edit_modal(card);
-                        }}
+              }}
-                        class="text-indigo-600 hover:text-indigo-900">{$_('details')}</button>
+              class="text-indigo-600 hover:text-indigo-900">{$_('details')}</button>
-                      {#if store.state.jwtinfo.userdetails.permissions.includes('CARD:DELETE')}
+            {#if store.state.jwtinfo.userdetails.permissions.includes('CARD:DELETE')}
-                        <button
+              <button
-                          on:click={() => {
+                on:click={() => {
-                            active_deletes[card.id] = true;
+                  active_deletes[card.id] = true;
-                          }}
+                }}
-                          tabindex="0"
+                tabindex="0"
-                          class="ml-4 text-red-600 hover:text-red-900 cursor-pointer">{$_('delete')}</button>
+                class="ml-4 text-red-600 hover:text-red-900 cursor-pointer">{$_('delete')}</button>
-                      {/if}
+            {/if}
-                    </td>
+          </td>
-                  {/if}
+        {/if}
-                </tr>
+      </tr>
-              {/if}
+    {/if}
-            {/each}
+    {/each}
          </tbody>
        </table>
      </div>
--- a/src/components/runners/ImportRunnerModal.svelte
+++ b/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'}
Author	SHA1	Message	Date
Nicolai Ort	ee4e8655b8	Merge branch 'dev' into feature/110-virtual_list	2021-04-07 20:09:35 +02:00
Philipp Dormann	37970d2be6	pre-merge fixes ref #110	2021-04-07 18:59:46 +02:00
Philipp Dormann	1376788016	updated virtual scroll list	2021-04-07 18:38:52 +02:00
Philipp Dormann	4cad86cf85	fixed height table	2021-04-07 18:19:58 +02:00
Philipp Dormann	6304116edb	wip on virtuallist	2021-04-06 22:16:24 +02:00
Nicolai Ort	834ff8fa63	🚀RELEASE v0.12.1 All checks were successful continuous-integration/drone/push Build is passing Details	2021-04-06 16:47:37 +02:00
Nicolai Ort	1f428a535e	Merge pull request 'ImportRunnerModal Cancel Button feature/122-import_cancel' (#123 ) from feature/112-import_cancel into dev All checks were successful continuous-integration/drone/push Build is passing Details Reviewed-on: #123	2021-04-06 14:42:37 +00:00
Nicolai Ort	0c40966970	Added cancel button for the first stage of runner import ref #112	2021-04-05 16:23:24 +02:00
Nicolai Ort	9da071fe9b	Escape now triggers foll modal close (including reset) instead of just hiding th modal ref #112	2021-04-05 16:14:43 +02:00