implement session deletion button in session list

data/session_repo.js

@@ -65,6 +65,8 @@ export default class SessionRepo {
   static async #handleChange() {
     if (!(this instanceof Session))
       throw new TypeError("session to put in must be an actual Session");
+    if (!(SessionRepo.#marker in this))
+      return;
     SessionRepo.put(this, this[SessionRepo.#marker]);
   }
 
@@ -97,7 +99,7 @@ export default class SessionRepo {
    *
    * @returns {Promise<number>} A promise containing the ID of the add session.
    */
-  static put(session, transaction) {
+  static async put(session, transaction) {
     if (!(session instanceof Session))
       throw new TypeError("session to put in must be an actual Session");
 
@@ -105,20 +107,13 @@ export default class SessionRepo {
     let sessions = transaction.objectStore(WbDb.OS_SESSIONS);
 
     let struct = session.toStruct();
-    let req = requestToPromise(sessions.put(struct));
+    let id = await requestToPromise(sessions.put(struct));
 
-    // promise with which the session object can be altered
-    let alt = req;
-
-    // add id to original object if it is new
     if (session.id === null)
-      alt = alt.then((id) => session.id = id);
+      session.id = id;
+    SessionRepo.#setupChangeHandling(session, transaction.db);
 
-    // add change listener to object.
+    return id;
-    alt.then(() => SessionRepo.#setupChangeHandling(session, transaction.db));
-
-    // make sure alt is handled first
-    return req.then(res => res);
   }
 
   /** Get a specific session from the repository.
@@ -173,6 +168,29 @@ export default class SessionRepo {
       (session) => SessionRepo.#setupChangeHandling(session, transaction.db));
   }
 
+  /** Delete a specific session.
+   *
+   * This also tears down the auto updating if the passed session is an
+   * instance of `Session`.
+   *
+   * @param {number | Session} session The session or session ID to delete.
+   * @param {Transactable=} transaction A transaction to use.
+   */
+  static async delete(session, transaction) {
+    transaction = toTransaction(transaction, [WbDb.OS_SESSIONS], "readwrite");
+    let sessions = transaction.objectStore(WbDb.OS_SESSIONS);
+
+    if (session instanceof Session) {
+      session.removeEventListener(Session.EVENT_CHANGE, SessionRepo.#handleChange);
+      delete this[SessionRepo.#marker];
+      session = session.id;
+    }
+    if (typeof session !== "number")
+      throw new TypeError("session to delete must be session or session ID");
+
+    return requestToPromise(sessions.delete(session));
+  }
+
   /** Load all sessions, parse them, then reinsert them.
    *
    * Does not set the intermediate objects up for change handling.

data/session_repo.test.js

@@ -207,6 +207,21 @@ export default function() {
       assert.strictEqual(sessions[1].id, second.id, "second is older");
     });
 
+    QUnit.test("delete session", async function(assert) {
+      inst = WbDb.get(true);
+      await waitForOpen(inst);
+
+      let session = new Session();
+      await SessionRepo.put(session, inst);
+      let stored = await SessionRepo.get(session.id, inst);
+      assert.notStrictEqual(stored, undefined, "session stored");
+      assert.strictEqual(stored.id, session.id, "IDs match");
+
+      await SessionRepo.delete(session.id, inst);
+      stored = await SessionRepo.get(session.id, inst);
+      assert.strictEqual(stored, undefined, "no longer stored");
+    });
+
     QUnit.test("reinserting all sessions", async function(assert) {
       // old structurized session (see v1 tests of session model)
       const old = {

ui/base_view.js

@@ -25,6 +25,7 @@ export default class BaseView {
       return m(SessionList, {
         models: this.#model.sessions,
         onSelect: (session) => this.#model.current = session,
+        onDelete: (id, index) => this.#model.deleteSession(id, index),
       });
 
     return m("p", "Wart kurz, i lad grad die Spiele…");
@@ -159,4 +160,10 @@ class BaseViewModel {
     this.loadAllSessions();
   };
 
+  deleteSession(id, index) {
+    SessionRepo.delete(id);
+    if (this.#sessions[index] === undefined || this.#sessions[index].id !== id)
+      return;
+    this.#sessions.splice(index, 1);
+  }
 }

ui/session_list.js

@@ -4,15 +4,20 @@ import Session from "/models/session.js";
 
 export default class SessionList {
   /** @param {{ attrs: { models: Session[] } }} param The sessions to show. */
-  view({attrs: { models, onSelect } }) {
+  view({attrs: { models, onSelect, onDelete } }) {
     return m("section.wb-session-list", [
       m("ol", [
-        models.map((s) => m("li.item._alternate._apply", [
+        models.map((s, i) => m("li.item._alternate._apply", [
           m("span.theirname", s.theirTeam !== "" ? s.theirTeam : "Se"),
           m("span.ourname", s.ourTeam !== "" ? s.ourTeam : "Mia"),
           m("span.theirpoints", "•".repeat(s.result.theirPoints)),
           m("span.ourpoints", "•".repeat(s.result.ourPoints)),
           m("div.actions",
+            m(
+              "button.wb-button.-slim._positioned",
+              { onclick: () => onDelete(s.id, i) },
+              "löschn"
+            ),
             m(
               m.route.Link,
               {