component.js in solidus_admin-0.1.0

- old
+ new

@@ -11,36 +11,44 @@
     "searchField",
     "searchForm",
     "filterToolbar",
     "defaultHeader",
     "batchHeader",
+    "tableBody",
     "selectedRowsCount",
   ]
 
   static classes = ["selectedRow"]
   static values = {
     mode: { type: String, default: "scopes" },
+    sortable: { type: Boolean, default: false },
   }
 
   initialize() {
     // Debounced search function.
     // This method submits the search form after a delay of 200ms.
     // If the function is called again within this delay, the previous call is cleared,
     // effectively ensuring the form is only submitted 200ms after the last call (e.g., user stops typing).
     this.search = debounce(this.search.bind(this), 200)
   }
 
-  connect() {
-    if (this.searchFieldTarget.value !== "") this.modeValue = "search"
+  // Determine if sortable should be enabled
+  modeValueChanged() {
+    const shouldSetSortable = this.sortableValue && this.modeValue !== "batch" && this.modeValue !== "search"
 
-    this.render()
+    if (shouldSetSortable) {
+      this.tableBodyTarget.setAttribute('data-controller', 'sortable')
+    } else {
+      this.tableBodyTarget.removeAttribute('data-controller')
+    }
   }
 
-  showSearch(event) {
+  showSearch({ detail: { avoidFocus } }) {
     this.modeValue = "search"
     this.render()
-    this.searchFieldTarget.focus()
+
+    if (!avoidFocus) this.searchFieldTarget.focus()
   }
 
   search() {
     this.searchFormTarget.requestSubmit()
   }
@@ -48,57 +56,87 @@
   clearSearch() {
     this.searchFieldTarget.value = ''
     this.search()
   }
 
-  cancelSearch() {
-    this.clearSearch()
+  resetSearchAndFilters() {
+    if (this.hasFilterToolbarTarget) {
+      this.filterToolbarTarget.querySelectorAll('fieldset').forEach(fieldset => fieldset.disabled = true)
+    }
 
-    this.modeValue = "scopes"
-    this.render()
+    this.searchFieldTarget.disabled = true
+    this.searchFormTarget.submit()
   }
 
   selectRow(event) {
     if (this.checkboxTargets.some((checkbox) => checkbox.checked)) {
       this.modeValue = "batch"
-    } else if (this.searchFieldTarget.value !== '') {
+    } else if (this.hasSearchFieldTarget && (this.searchFieldTarget.value !== '')) {
       this.modeValue = "search"
-    } else {
+    } else if (this.hasScopesToolbarTarget) {
       this.modeValue = "scopes"
+    } else {
+      this.modeValue = "search"
     }
 
     this.render()
   }
 
   selectAllRows(event) {
-    if (this.modeValue = event.target.checked) {
+    if (event.target.checked) {
       this.modeValue = "batch"
-    } else if (this.searchFieldTarget.value !== '') {
+    } else if (this.hasSearchFieldTarget && (this.searchFieldTarget.value !== '')) {
       this.modeValue = "search"
-    } else {
+    } else if (this.hasScopesToolbarTarget) {
       this.modeValue = "scopes"
+    } else {
+      this.modeValue = "search"
     }
 
     this.checkboxTargets.forEach((checkbox) => (checkbox.checked = event.target.checked))
 
     this.render()
   }
 
+  rowClicked(event) {
+    // If the user clicked on a link, button, input or summary, skip the row url visit
+    if (event.target.closest("td").contains(event.target.closest("a,select,textarea,button,input,summary"))) return
+
+    if (this.modeValue === "batch") {
+      this.toggleCheckbox(event.currentTarget)
+    } else {
+      window.Turbo.visit(event.params.url)
+    }
+  }
+
+  toggleCheckbox(row) {
+    const checkbox = this.checkboxTargets.find(selection => row.contains(selection))
+
+    if (checkbox) {
+      checkbox.checked = !checkbox.checked
+      this.selectRow()
+    }
+  }
+
   render() {
     const selectedRows = this.checkboxTargets.filter((checkbox) => checkbox.checked)
 
-    this.searchToolbarTarget.toggleAttribute("hidden", this.modeValue !== "search")
+    if (this.hasSearchFieldTarget) {
+      this.searchToolbarTarget.toggleAttribute("hidden", this.modeValue !== "search")
+    }
 
     if (this.hasFilterToolbarTarget) {
       this.filterToolbarTarget.toggleAttribute("hidden", this.modeValue !== "search")
     }
 
     this.batchToolbarTarget.toggleAttribute("hidden", this.modeValue !== "batch")
     this.batchHeaderTarget.toggleAttribute("hidden", this.modeValue !== "batch")
     this.defaultHeaderTarget.toggleAttribute("hidden", this.modeValue === "batch")
 
-    this.scopesToolbarTarget.toggleAttribute("hidden", this.modeValue !== "scopes")
+    if (this.hasScopesToolbarTarget) {
+      this.scopesToolbarTarget.toggleAttribute("hidden", this.modeValue !== "scopes")
+    }
 
     // Update the rows background color
     this.checkboxTargets.filter((checkbox) =>
       checkbox.closest("tr").classList.toggle(this.selectedRowClass, checkbox.checked),
     )
@@ -109,10 +147,11 @@
     // Update the header checkboxes
     this.headerCheckboxTargets.forEach((checkbox) => {
       checkbox.indeterminate = false
       checkbox.checked = false
 
-      if (selectedRows.length === this.checkboxTargets.length) checkbox.checked = true
+      if (this.checkboxTargets.length > 0 && selectedRows.length === this.checkboxTargets.length)
+        checkbox.checked = true
       else if (selectedRows.length > 0) checkbox.indeterminate = true
     })
   }
 }