new sortable list implementation

data/static/js/bitties/pyrom-bitty.js

@@ -287,8 +287,7 @@ export class BadgeEditorForm {
       return;
     }
     if (this.#badgeTemplate === undefined){
-      this.#badgeTemplate = document.getElementById('badge-editor-template').content;
-      console.log(this.#badgeTemplate);
+      this.#badgeTemplate = document.getElementById('badge-editor-template').content.firstElementChild.outerHTML;
     }
     el.replaceChildren();
     const addButton = `<button data-disable-if-max="1" data-receive="updateBadgeCount" DISABLE_IF_MAX type="button" data-send="addBadge">Add badge</button>`;
@@ -300,14 +299,18 @@ export class BadgeEditorForm {
       ['DISABLE_IF_MAX', badgeCount === 10 ? 'disabled' : ''],
     ];
     el.appendChild(this.api.makeHTML(controls, subs));
-    el.appendChild(badges.value);
+
+    const listTemplate = document.getElementById('badges-list-template').content.firstElementChild.outerHTML;
+    const list = this.api.makeHTML(listTemplate).firstElementChild;
+    list.appendChild(badges.value);
+    el.appendChild(list);
   }
 
   addBadge(ev, el) {
     if (this.#badgeTemplate === undefined) {
       return;
     }
-    const badge = this.#badgeTemplate.cloneNode(true);
+    const badge = this.api.makeHTML(this.#badgeTemplate).firstElementChild;
     el.appendChild(badge);
     this.api.localTrigger('updateBadgeCount');
   }
@@ -341,9 +344,7 @@ export class BadgeEditorForm {
     noUploads.forEach(e => {
       e.value = null;
     })
-    // console.log(noUploads);
     el.submit();
-    // console.log('would submit now');
   }
 }
 
@@ -463,3 +464,80 @@ export class BadgeEditorBadge {
     el.setCustomValidity('');
   }
 }
+
+const getCollectionDataForEl = el => {
+  const nameInput = el.querySelector(".collection-name");
+  const collectionId = el.dataset.collectionId;
+
+  return {
+    id: collectionId,
+    name: nameInput.value,
+    is_new: !('collectionId' in el.dataset),
+  };
+}
+
+export class CollectionsEditor {
+  #collectionTemplate = undefined;
+  #collectionsData = [];
+  #removedCollections = [];
+  #valid = true;
+
+  addCollection(ev, el) {
+    if (this.#collectionTemplate === undefined) {
+      this.#collectionTemplate = document.getElementById('new-collection-template').content;
+    }
+    // interesting
+    const newCollection = this.api.makeHTML(this.#collectionTemplate.firstElementChild.outerHTML);
+    el.appendChild(newCollection);
+  }
+
+  deleteCollection(ev, el) {
+    if (!el.contains(ev.sender)) {
+      return;
+    }
+    if ('collectionId' in el.dataset) {
+      this.#removedCollections.push(el.dataset.collectionId);
+    }
+    el.remove();
+  }
+
+  async saveCollections(ev, el) {
+    this.#valid = true;
+    this.api.localTrigger('testValidity');
+    if (!this.#valid) {
+      return;
+    }
+    this.#collectionsData = [];
+    this.api.localTrigger('getCollectionData');
+
+    const data = {
+      collections: this.#collectionsData,
+      removed_collections: this.#removedCollections,
+    };
+
+    const res = await this.api.getJSON(el.prop('submitHref'), [], {
+      method: 'POST',
+      headers: {
+        'Content-Type': 'application/json',
+      },
+      body: JSON.stringify(data),
+    });
+    if (res.error) {
+      return;
+    }
+
+    window.location.reload();
+  }
+
+  getCollectionData(ev, el) {
+    this.#collectionsData.push(getCollectionDataForEl(el));
+  }
+
+  testValidity(ev, el) {
+    const input = el.querySelector('input');
+    if (!input.validity.valid) {
+      input.reportValidity();
+      this.#valid = false;
+    }
+  }
+}