Allow bulk editing unread and shared state of bookmarks (#517)

* Move bulk actions into select

* Update tests

* Implement bulk read / unread actions

* Implement bulk share/unshare actions

* Show correct archiving actions

* Allow selecting bookmarks across pages

* Dynamically update select across checkbox

* Filter available bulk actions

* Refactor tag autocomplete toggling

bookmarks/frontend/behaviors/bulk-edit.js

@@ -4,6 +4,9 @@ class BulkEdit {
   constructor(element) {
     this.element = element;
     this.active = false;
+    this.actionSelect = element.querySelector("select[name='bulk_action']");
+    this.tagAutoComplete = element.querySelector(".tag-autocomplete");
+    this.selectAcross = element.querySelector("label.select-across");
 
     element.addEventListener(
       "bulk-edit-toggle-active",
@@ -21,6 +24,11 @@ class BulkEdit {
       "bookmark-list-updated",
       this.onListUpdated.bind(this),
     );
+
+    this.actionSelect.addEventListener(
+      "change",
+      this.onActionSelected.bind(this),
+    );
   }
 
   get allCheckbox() {
@@ -48,23 +56,56 @@ class BulkEdit {
   }
 
   onToggleBookmark() {
-    this.allCheckbox.checked = this.bookmarkCheckboxes.every((checkbox) => {
+    const allChecked = this.bookmarkCheckboxes.every((checkbox) => {
       return checkbox.checked;
     });
+    this.allCheckbox.checked = allChecked;
+    this.updateSelectAcross(allChecked);
   }
 
   onToggleAll() {
-    const checked = this.allCheckbox.checked;
+    const allChecked = this.allCheckbox.checked;
     this.bookmarkCheckboxes.forEach((checkbox) => {
-      checkbox.checked = checked;
+      checkbox.checked = allChecked;
     });
+    this.updateSelectAcross(allChecked);
   }
 
-  onListUpdated() {
+  onActionSelected() {
+    const action = this.actionSelect.value;
+
+    if (action === "bulk_tag" || action === "bulk_untag") {
+      this.tagAutoComplete.classList.remove("d-none");
+    } else {
+      this.tagAutoComplete.classList.add("d-none");
+    }
+  }
+
+  onListUpdated(event) {
+    // Reset checkbox states
+    this.reset();
+
+    // Update total number of bookmarks
+    const total = event.detail.bookmarksTotal;
+    const totalSpan = this.selectAcross.querySelector("span.total");
+    totalSpan.textContent = total;
+  }
+
+  updateSelectAcross(allChecked) {
+    if (allChecked) {
+      this.selectAcross.classList.remove("d-none");
+    } else {
+      this.selectAcross.classList.add("d-none");
+      this.selectAcross.querySelector("input").checked = false;
+    }
+  }
+
+  reset() {
     this.allCheckbox.checked = false;
     this.bookmarkCheckboxes.forEach((checkbox) => {
       checkbox.checked = false;
     });
+    this.updateSelectAcross(false);
   }
 }