✨ basic xlsx + csv parsing

ref #13

src/components/ImportRunnerModal.svelte

@@ -1,32 +1,13 @@
 <script>
+  import csv from "csvtojson";
+  import { read as readXlsx, utils as xlsx_utils } from "xlsx";
   import { _ } from "svelte-i18n";
   import { clickOutside } from "./outsideclick";
   import { focusTrap } from "svelte-focus-trap";
-  import isEmail from "validator/es/lib/isEmail";
-  import isMobilePhone from "validator/es/lib/isMobilePhone";
   import Toastify from "toastify-js";
+  import { ImportService } from "@odit/lfk-client-js";
   export let import_modal_open;
-  $: phone_input_value = "";
-  $: email_input_value = "";
-  $: lastname_input_value = "";
-  $: firstname_input_value = "";
-  $: isPhoneValidOrEmpty =
-    isMobilePhone(
-      phone_input_value
-        .replaceAll("(", "")
-        .replaceAll(")", "")
-        .replaceAll("-", "")
-        .replaceAll(" ", "")
-    ) || phone_input_value === "";
-  $: isEmailValidOrEmpty =
-    isEmail(email_input_value) || email_input_value === "";
-  $: isLastnameValid = lastname_input_value.trim().length !== 0;
-  $: isFirstnameValid = firstname_input_value.trim().length !== 0;
-  $: createbtnenabled =
-    isFirstnameValid &&
-    isLastnameValid &&
-    isEmailValidOrEmpty &&
-    isPhoneValidOrEmpty;
+  $: searchvalue = "";
   (() => {
     document.onkeydown = (e) => {
       e = e || window.event;
@@ -34,25 +15,45 @@
         import_modal_open = false;
       }
       if (e.keyCode === 13) {
-        if (createbtnenabled === true) {
-          createbtnenabled = false;
-          submit();
-        }
+        //
       }
     };
   })();
   let files;
+  let recent_processed = true;
+  $: json_output = [];
   $: {
     if (files) {
-      const reader = new FileReader();
-      reader.addEventListener("load", (e) => {
-        const text = e.target.result;
-        parsedtext = text;
+      console.log(files[0].type);
+      if (
+        files[0].type ===
+        "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet"
+      ) {
+        const reader = new FileReader();
+        reader.addEventListener("load", async (e) => {
+          const data = new Uint8Array(e.target.result);
+          const out = readXlsx(data, { type: "array" });
+          json_output = xlsx_utils.sheet_to_json(
+            out.Sheets[Object.keys(out.Sheets)[0]]
+          );
+        });
+        reader.readAsArrayBuffer(files[0]);
+      } else {
+        const reader = new FileReader();
+        reader.addEventListener("load", async (e) => {
+          json_output = await csv({
+            delimiter: [";", ","],
+            trim: true,
+          }).fromString(e.target.result);
+        });
+        reader.readAsText(files[0]);
+      }
+    }
+  }
       });
       reader.readAsText(files[0]);
     }
   }
-  let parsedtext = "";
 </script>
 
 {#if import_modal_open}
@@ -96,20 +97,88 @@
               <h3 class="text-lg leading-6 font-medium text-gray-900">
                 Runner Import
               </h3>
-              <div class="mt-2 mb-6">
-                <p class="text-sm text-gray-500">
-                  Please provide the required csv/ xlsx file
-                </p>
-              </div>
-              <div class="mt-2 mb-6">
-                <p class="text-sm text-gray-500">{parsedtext}</p>
-              </div>
-              <!-- component -->
-              <div class="overflow-hidden relative w-64 mt-4 mb-4">
-                <input bind:files type="file" />
-
-                <!-- <RunnerFileUpload /> -->
-              </div>
+              {#if json_output.length === 0}
+                <div class="mt-2 mb-6">
+                  <p class="text-sm text-gray-500">
+                    Please provide the required csv/ xlsx file
+                  </p>
+                </div>
+                <div class="overflow-hidden relative mt-4 mb-4">
+                  <input
+                    accept=".csv, application/vnd.openxmlformats-officedocument.spreadsheetml.sheet"
+                    bind:files
+                    type="file" />
+                </div>
+              {/if}
+              {#if json_output.length > 0}
+                <p>Bitte bestätige diese Läufer für den Import</p>
+                <input
+                  type="search"
+                  bind:value={searchvalue}
+                  placeholder={$_('datatable.search')}
+                  aria-label={$_('datatable.search')}
+                  class="p-2 w-full" />
+                <div class="relative w-full mt-4 mb-4">
+                  <table
+                    class="divide-y divide-gray-200 w-full overflow-x-scroll">
+                    <thead class="bg-gray-50">
+                      <tr>
+                        <th
+                          scope="col"
+                          class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
+                          Vorname
+                        </th>
+                        <th
+                          scope="col"
+                          class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
+                          Middlename
+                        </th>
+                        <th
+                          scope="col"
+                          class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
+                          Lastname
+                        </th>
+                        <th
+                          scope="col"
+                          class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
+                          Team
+                        </th>
+                      </tr>
+                    </thead>
+                    <tbody class="divide-y divide-gray-200">
+                      {#each json_output as runner}
+                        {#if Object.values(runner)
+                          .toString()
+                          .toLowerCase()
+                          .includes(searchvalue)}
+                          <tr>
+                            <td class="px-6 py-4 whitespace-nowrap">
+                              {runner['Vorname']}
+                            </td>
+                            <td class="px-6 py-4 whitespace-nowrap">
+                              {runner['Zweitname'] || ''}
+                            </td>
+                            <td class="px-6 py-4 whitespace-nowrap">
+                              {runner['Nachname']}
+                            </td>
+                            <td class="px-6 py-4 whitespace-nowrap">
+                              {runner['Team'] || '---'}
+                            </td>
+                          </tr>
+                        {/if}
+                      {/each}
+                    </tbody>
+                  </table>
+                  <button
+                    on:click={() => {
+                      json_output = [];
+                    }}
+                    type="button"
+                    class="w-full inline-flex justify-center 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 sm:ml-3 sm:w-auto sm:text-sm">
+                    Abbrechen
+                  </button>
+                </div>
+              {/if}
             </div>
           </div>
         </div>

src/components/Orgs.svelte

@@ -4,8 +4,9 @@
   import AddOrgModal from "./AddOrgModal.svelte";
   export let modal_open = false;
   import OrgOverview from "./OrgOverview.svelte";
-  console.log(store.state.jwtinfo.userdetails.permissions);
+  import ImportRunnerModal from "./ImportRunnerModal.svelte";
   let current_organizations = [];
+  export let import_modal_open = false;
 </script>
 
 <section class="container p-5">
@@ -21,6 +22,16 @@
         {$_('create-organization')}
       </button>
     {/if}
+    {#if store.state.jwtinfo.userdetails.permissions.includes('RUNNER:IMPORT')}
+      <button
+        on:click={() => {
+          import_modal_open = true;
+        }}
+        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">
+        Läufer importieren
+      </button>
+    {/if}
   </span>
   <p class="mb-8 text-lg text-gray-500">manage runner organizations</p>
   <OrgOverview bind:current_organizations />
@@ -28,4 +39,5 @@
 
 {#if store.state.jwtinfo.userdetails.permissions.includes('ORGANISATION:CREATE')}
   <AddOrgModal bind:current_organizations bind:modal_open />
+  <ImportRunnerModal bind:import_modal_open />
 {/if}

src/components/Runners.svelte

@@ -2,10 +2,10 @@
   import { _ } from "svelte-i18n";
   import store from "../store";
   import AddRunnerModal from "./AddRunnerModal.svelte";
-  import ImportRunnerModal from "./ImportRunnerModal.svelte";
+  // import ImportRunnerModal from "./ImportRunnerModal.svelte";
   import RunnersOverview from "./RunnersOverview.svelte";
   export let modal_open = false;
-  export let import_modal_open = false;
+  // export let import_modal_open = false;
   let current_runners = [];
 </script>
 
@@ -21,14 +21,14 @@
         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">
         Läufer hinzufügen
       </button>
-      <button
+      <!-- <button
         on:click={() => {
           import_modal_open = true;
         }}
         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">
         Läufer importieren
-      </button>
+      </button> -->
     {/if}
   </span>
   <p class="mb-8 text-lg text-gray-500">läuft bei ihnen</p>
@@ -37,5 +37,5 @@
 
 {#if store.state.jwtinfo.userdetails.permissions.includes('RUNNER:CREATE')}
   <AddRunnerModal bind:current_runners bind:modal_open />
-  <ImportRunnerModal bind:import_modal_open />
+  <!-- <ImportRunnerModal bind:import_modal_open /> -->
 {/if}