Nutzer hinzufügen Dialog verbessert

src/components/Autocomplete.svelte

@@ -113,7 +113,7 @@
   <input
     class="input"
     type="text"
-    placeholder="suchen ..."
+    placeholder="suche in Gruppen und Nutzern ..."
     bind:this={input}
     bind:value={term}
     on:keydown={key}

src/components/Einstellungen.svelte

@@ -1,81 +1,84 @@
 <script>
   import { parse } from "papaparse";
   import { configData, db } from "./../stores.js";
-  import * as notifier from './../notifier.js'
+  import * as notifier from "./../notifier.js";
 
   let datensatz_schueler = "",
     datensatz_medien = "",
-    datensatz_sonstige = {nichtschueler: 1, memo: ''},
+    datensatz_sonstige = { nichtschueler: 1, memo: "" },
     warten;
 
   const update_sonstige = () => {
     try {
-    $db.prepare(`
+      console.log(
+        $db
+          .prepare(
+            `
       INSERT INTO schueler (name, vorname, nichtschueler, memo) VALUES(:name, :vorname, :nichtschueler, :memo)
-    `).run(datensatz_sonstige)
-    } catch (e) { console.log(e) }
-  }
+    `
+          )
+          .run(datensatz_sonstige)
+      );
+      datensatz_sonstige = { nichtschueler: 1, memo: "" };
+      notifier.fertig("Nutzer hinzugefügt");
+    } catch (e) {
+      console.log(e);
+      notifier.fehler("Fehler beim Hinzufügen des Nutzers:", e.message);
+    }
+  };
   const update_schueler = async () => {
     warten = true;
     const res = await parse(datensatz_schueler, {
       comments: "#",
-      header: true
+      header: true,
     });
     // id|name|vorname|jahr|klasse|kurs|kurs_lehrer
     const values = res.data;
     let schueler = {},
       kurse = {};
-    values.forEach(v => {
-      schueler[v.id] = [
-        v.id,
-        v.jahr,
-        v.klasse,
-        v.name,
-        v.vorname
-      ];
+    values.forEach((v) => {
+      schueler[v.id] = [v.id, v.jahr, v.klasse, v.name, v.vorname];
     });
-    const jahr = values[0].jahr
+    const jahr = values[0].jahr;
     const schueler_values = Object.values(schueler)
-      .map(
-        a => `(${a[0]}, ${a[1]}, '${a[2]}', '${a[3]}', '${a[4]}')`
-      )
+      .map((a) => `(${a[0]}, ${a[1]}, '${a[2]}', '${a[3]}', '${a[4]}')`)
       .join(",");
     const kurszugehoerigkeit_values = values
-      .map(v => `(${v.id}, '${v.kurs_lehrer||''}', '${v.kurs||''}')`)
+      .map((v) => `(${v.id}, '${v.kurs_lehrer || ""}', '${v.kurs || ""}')`)
       .join(",");
     const query = [
       `DELETE FROM schueler WHERE NOT EXISTS ( SELECT * FROM ausleihe WHERE ausleihe.schueler_id = schueler.id)`,
       `INSERT INTO schueler (schild_id, jahr, klasse, name, vorname) VALUES ${schueler_values}
         ON CONFLICT (schild_id) DO UPDATE SET jahr = ${jahr}`,
       `DELETE FROM kurszugehoerigkeit`,
-      `INSERT INTO kurszugehoerigkeit (schild_id, kurs_lehrer, kurs) VALUES ${kurszugehoerigkeit_values}`
+      `INSERT INTO kurszugehoerigkeit (schild_id, kurs_lehrer, kurs) VALUES ${kurszugehoerigkeit_values}`,
     ];
     try {
-      query.forEach(q => $db.prepare(q).run());
-      datensatz_schueler = ''
-      notifier.fertig('Schüler importiert')
+      query.forEach((q) => $db.prepare(q).run());
+      datensatz_schueler = "";
+      notifier.fertig("Schüler importiert");
     } catch (e) {
-      notifier.fehler('Fehler beim Schülerimport:', e.message)
-      console.log(e)
+      notifier.fehler("Fehler beim Schülerimport:", e.message);
+      console.log(e);
     }
     warten = false;
   };
   const update_medien = async () => {
     const res = await parse(datensatz_medien, { comments: "#" });
     const values = res.data;
-    const medien = values.map(b => b[0]);
+    const medien = values.map((b) => b[0]);
     const insert = $db.prepare(
       "INSERT INTO medienbezeichnung (name) VALUES (?)"
     );
-    const insertMany = $db.transaction(medien => {
+    const insertMany = $db.transaction((medien) => {
       for (const medium of medien) insert.run(medium);
     });
     try {
       insertMany(medien);
       datensatz_medien = "";
-      notifier.fertig('Medientitel importiert')
+      notifier.fertig("Medientitel importiert");
     } catch (e) {
-      notifier.fehler('Fehler beim Medienimport:', e.message)
+      notifier.fehler("Fehler beim Medienimport:", e.message);
       console.log(e);
     }
   };
@@ -95,12 +98,16 @@
 <div class="box">
   <h3 class="title">Schüler, Kurse und Zugehörigkeiten importieren</h3>
   <div class="field">
-    <label class="label">Achtung, die Nutzerdatenbank wird komplett geleert und mit den neuen Daten ersetzt. Ausgenommen sind säumige Nutzer und sonstige Nutzer.</label>
+    <label class="label">
+      Achtung, die Nutzerdatenbank wird komplett geleert und mit den neuen Daten
+      ersetzt. Ausgenommen sind säumige Nutzer und sonstige Nutzer.
+    </label>
     <div class="control">
       <textarea
         class="textarea"
         bind:value={datensatz_schueler}
-        placeholder="Füge Daten mit Kopfzeile ein: id|name|vorname|jahr|klasse|kurs|kurs_lehrer"
+        placeholder="Füge Daten mit Kopfzeile ein:
+        id|name|vorname|jahr|klasse|kurs|kurs_lehrer"
         rows="10"
         cols="20" />
     </div>

src/components/Nutzer.svelte

@@ -50,6 +50,19 @@
     active = 3;
     return group_by(res, "klasse");
   }
+  function sonstige_nutzer() {
+    const res = $db
+      .prepare(
+        `
+      SELECT s.name, s.vorname, s.memo, s.id, s.klasse
+      FROM schueler AS s
+      WHERE s.nichtschueler = 1;
+    `
+      )
+      .all();
+    active = 4;
+    return group_by(res, "nichtschueler");
+  }
 </script>
 
 <!-- svelte-ignore a11y-missing-attribute -->
@@ -74,18 +87,26 @@
         <span>Gesperrte Nutzer</span>
       </a>
     </li>
+    <li
+      class:is-active={active === 4}
+      on:click={_ => (klasse = sonstige_nutzer())}>
+      <a>
+        <span>Sonstige Nutzer</span>
+      </a>
+    </li>
   </ul>
 </div>
 {#if klasse}
   <div class="box">
     {#each Object.entries(klasse) as [k, schueler]}
-      <h2 class="title">{k}</h2>
+      <h2 class="title">{k && k != "null" && k != "undefined" ? k : "Sonstige"}</h2>
       <table class="table">
         <thead>
           <tr>
             <th />
             <th>Name</th>
             <th>Vorame</th>
+            <th>Bemerkung</th>
           </tr>
         </thead>
         <tbody>
@@ -99,6 +120,7 @@
               <td>{i + 1}</td>
               <td>{s.name}</td>
               <td>{s.vorname}</td>
+              <td>{s.memo}</td>
             </tr>
           {/each}
         </tbody>