Keine Eingabe über Medien, klickbare Schüler

src/components/Medien.svelte

@@ -1,11 +1,9 @@
 <script>
   import Scanner from "./Scanner.svelte";
   import Medium from "./Medium.svelte";
-  import Schueler from "./Schueler.svelte";
-  import { view, db, print, medien } from "./../stores.js";
-  import { group_by, focus, sort_by_name } from "./../helpers.js";
+  import { db, print, medien } from "./../stores.js";
+  import { group_by } from "./../helpers.js";
   import * as notifier from "./../notifier.js";
-  import { get_schueler } from "./../getter.js";
 
   function update() {
     $medien = $db
@@ -56,35 +54,18 @@
   }
   let selected,
     suche = "",
-    modal,
-    neuer_titel = "",
-    add = false;
+    modal
 
-  const add_medienbezeichnung = _ => {
-    const res = $db
-      .prepare(
-        `
-      INSERT INTO medienbezeichnung (name) VALUES (?)
-    `
-      )
-      .run(neuer_titel.trim());
-    neuer_titel = "";
-    add = false;
-    update();
-  };
-  const schueler_action = s => {
-    if (s.verliehen) {
-      get_schueler({ id: s.schueler_id });
-      $view = Schueler;
-    }
-  };
   update();
 
-  const sort_by_medien_name = (a,b)=>a[1][0].medien_name.toUpperCase()<b[1][0].medien_name.toUpperCase() ? -1:1
+  const sort_by_medien_name = (a, b) =>
+    a[1][0].medien_name.toUpperCase() < b[1][0].medien_name.toUpperCase()
+      ? -1
+      : 1;
 
   $: medien_filter = group_by(
     $medien.filter(
-      m =>
+      (m) =>
         m.medien_name.toLowerCase().includes(suche.toLowerCase()) ||
         (m.barcode && m.barcode.toLowerCase().includes(suche.toLowerCase()))
     ),
@@ -101,103 +82,34 @@
 <h2 class="title">Verfügbare Medien</h2>
 <div class="field">
   <div class="control">
-    <input class="input" type="text" placeholder="Filter" bind:value={suche} />
-  </div>
-</div>
-<div class="columns">
-  <div class="column">
-    <button
-      class="button is-fullwidth is-primary"
-      on:click={() => (add = true)}>
-      Medium hinzufügen
-    </button>
-    {#if add}
-      <div class="field">
-        <div class="control">
-        <label class="label">
-          Medien-Titel
-          <input
-          class="input"
-          type="text"
-          bind:value={neuer_titel}
-          use:focus
-          on:keydown={e => e.key === 'Enter' && add_medienbezeichnung()} />
-        </label>
-        </div>
-      </div>
-    {/if}
-    {#if Object.keys(medien_filter).length}
-      <table class="table">
-        <thead>
-          <tr>
-            <th>Titel</th>
-            <th>V/G</th>
-            <th />
-          </tr>
-        </thead>
-        <tbody>
-          {#each Object.entries(medien_filter).sort(sort_by_medien_name) as [n, m], i}
-            <tr
-              class="pointer"
-              on:click={_=> modal = true}
-              on:mouseover={() => (selected = n)}>
-              <td>{m[0].medien_name}</td>
-              <td>
-                {m.filter(i => i.verliehen).length}/{m.filter(i => i.exemplar_id).length}
-              </td>
-              <td />
-            </tr>
-          {/each}
-        </tbody>
-      </table>
-    {:else}– Bibliothek? Es sind noch keine Medien eingetragen –
-    {/if}
-  </div>
-  <div class="column" style="height:90vh; position: sticky; top: .2rem;">
-    {#if selected && Object.keys(medien_filter).length && medien_filter[selected]}
-      <div class="card">
-        <header class="card-header">
-          <p class="card-header-title">
-            {medien_filter[selected][0].medien_name}
-          </p>
-        </header>
-        <div class="card-content">
-          <div class="content">
-            {#if medien_filter[selected].filter(i => i.exemplar_id).length}
-              <table class="table">
-                <thead>
-                  <tr>
-                    <th>Barcode</th>
-                    <th>Schüler</th>
-                    <th>Klasse</th>
-                    <th>Jahr</th>
-                  </tr>
-                </thead>
-                <tbody>
-                  {#each medien_filter[selected].sort((a, b) => b.jahr - a.jahr) as s}
-                    <tr
-                      class="pointer"
-                      class:has-background-success={medien_filter[selected].length === 1 && s.barcode && s.barcode.toLowerCase() === suche.toLowerCase()}
-                      on:click={() => schueler_action(s)}>
-                      <td>{s.barcode}</td>
-                      {#if s.verliehen}
-                        <td>{s.name}, {s.vorname}</td>
-                        <td>{s.klasse || '–'}</td>
-                        <td>{s.jahr || '–'}</td>
-                      {:else}
-                        <td colspan="4" />
-                      {/if}
-                    </tr>
-                  {/each}
-                </tbody>
-              </table>
-            {:else}Noch keine Exemplare vorhanden{/if}
-          </div>
-        </div>
-      </div>
-    {/if}
+    <input class="input" type="text" placeholder="Titelsuche" bind:value={suche} />
   </div>
 </div>
+{#if Object.keys(medien_filter).length}
+  <table class="table">
+    <thead>
+      <tr>
+        <th>Titel</th>
+        <th>V/G</th>
+        <th />
+      </tr>
+    </thead>
+    <tbody>
+      {#each Object.entries(medien_filter).sort(sort_by_medien_name) as [n, m], i}
+        <tr
+          class="pointer"
+          on:click={(_) => (modal = true)}
+          on:mouseover={() => (selected = n)}>
+          <td>{m[0].medien_name}</td>
+          <td>
+            {m.filter((i) => i.verliehen).length}/{m.filter((i) => i.exemplar_id).length}
+          </td>
+          <td />
+        </tr>
+      {/each}
+    </tbody>
+  </table>
+{:else}– Bibliothek? Es sind noch keine Medien eingetragen –{/if}
 {#if modal}
   <Medium medium={medien_filter[selected]} bind:modal {update} />
 {/if}

src/components/Medium.svelte

@@ -1,6 +1,8 @@
 <script>
 console.log('Medium')
-  import { db } from "./../stores.js";
+  import { db, view } from "./../stores.js";
+  import Schueler from "./Schueler.svelte";
+  import { get_schueler } from "./../getter.js";
   export let medium = [];
   export let modal;
   export let update
@@ -34,6 +36,12 @@ console.log('Medium')
     if (res) update()
     else console.log('Es gab einen Fehler beim Löschen des Exemplars')
   };
+  const schueler_action = s => {
+    if (s.verliehen) {
+      get_schueler({ id: s.schueler_id });
+      $view = Schueler;
+    }
+  };
 </script>
 
 <svelte:window on:keydown={e => (e.key === 'Escape') && (modal = false)}/>
@@ -88,7 +96,7 @@ console.log('Medium')
             <tr>
               <td>{e.barcode}</td>
               {#if e.verliehen}
-                <td>{e.name}, {e.vorname}</td>
+                <td style="cursor:pointer" on:click={() => schueler_action(e)}>{e.name}, {e.vorname}</td>
                 <td>{e.klasse}</td>
                 <td>{e.jahr}</td>
               {:else}

src/components/Navbar.svelte

@@ -48,7 +48,7 @@
   <div class="navbar-item">
     <button class="button is-link" disabled={!print_allowed.includes($view)}>
       <span class="icon">
-        <i class="mdi" on:click={() => ($print = $view)}>print</i>
+        <i class="mdi" on:click={() => (print_allowed.includes($view) && ($print = $view))}>print</i>
       </span>
     </button>
   </div>

src/components/Schueler.svelte

@@ -119,12 +119,12 @@
           <td>{m.barcode}</td>
           <td>{m.jahr}</td>
           <td align="center">
-            <span class="icon has-text-danger pointer">
+            <span class="icon has-text-info pointer">
               <i
                 class="mdi"
                 alt="Exemplar löschen"
                 on:click={() => rueckgabe(m) && update()}>
-                delete_forever
+                arrow_back
               </i>
             </span>
           </td>