solidcrud 0.1.0

data/app/assets/javascripts/controllers/table_controller.js

@@ -0,0 +1,272 @@
+import { Controller } from "@hotwired/stimulus"
+
+// Connects to data-controller="table"
+export default class extends Controller {
+  static targets = ["row", "checkbox", "selectAll", "column", "header"]
+
+  connect() {
+    console.log("Table controller connected")
+    this.setupColumnVisibility()
+    this.setupRowSelection()
+  }
+
+  // Column visibility management
+  setupColumnVisibility() {
+    const modelName = this.getModelName()
+    if (!modelName) return
+
+    // Load saved column preferences
+    this.loadColumnPreferences()
+
+    // Setup column toggle handlers
+    this.checkboxTargets.forEach(checkbox => {
+      checkbox.addEventListener("change", () => {
+        this.updateColumnVisibility()
+        this.saveColumnPreferences()
+      })
+    })
+  }
+
+  loadColumnPreferences() {
+    const modelName = this.getModelName()
+    const saved = localStorage.getItem(`solidcrud_columns_${modelName}`)
+
+    if (saved) {
+      const visibleColumns = JSON.parse(saved)
+      this.checkboxTargets.forEach(checkbox => {
+        checkbox.checked = visibleColumns.includes(checkbox.value)
+      })
+    } else {
+      // Default: all columns visible
+      this.checkboxTargets.forEach(checkbox => {
+        checkbox.checked = true
+      })
+    }
+
+    this.updateColumnVisibility()
+  }
+
+  saveColumnPreferences() {
+    const modelName = this.getModelName()
+    const visibleColumns = this.checkboxTargets
+      .filter(checkbox => checkbox.checked)
+      .map(checkbox => checkbox.value)
+
+    localStorage.setItem(`solidcrud_columns_${modelName}`, JSON.stringify(visibleColumns))
+  }
+
+  updateColumnVisibility() {
+    const visibleColumns = this.checkboxTargets
+      .filter(checkbox => checkbox.checked)
+      .map(checkbox => checkbox.value)
+
+    // Update headers
+    this.headerTargets.forEach(header => {
+      const column = header.getAttribute("data-column")
+      if (visibleColumns.includes(column)) {
+        header.classList.remove("hidden")
+      } else {
+        header.classList.add("hidden")
+      }
+    })
+
+    // Update cells
+    this.columnTargets.forEach(cell => {
+      const column = cell.getAttribute("data-column")
+      if (visibleColumns.includes(column)) {
+        cell.classList.remove("hidden")
+      } else {
+        cell.classList.add("hidden")
+      }
+    })
+  }
+
+  selectAllColumns() {
+    this.checkboxTargets.forEach(checkbox => {
+      checkbox.checked = true
+    })
+    this.updateColumnVisibility()
+    this.saveColumnPreferences()
+  }
+
+  deselectAllColumns() {
+    this.checkboxTargets.forEach(checkbox => {
+      checkbox.checked = false
+    })
+    this.updateColumnVisibility()
+    this.saveColumnPreferences()
+  }
+
+  // Row selection management
+  setupRowSelection() {
+    if (this.hasSelectAllTarget) {
+      this.selectAllTarget.addEventListener("change", this.handleSelectAll.bind(this))
+    }
+
+    this.rowTargets.forEach(row => {
+      const checkbox = row.querySelector('input[type="checkbox"]')
+      if (checkbox) {
+        checkbox.addEventListener("change", this.updateSelectAllState.bind(this))
+      }
+    })
+  }
+
+  handleSelectAll(event) {
+    const isChecked = event.target.checked
+    this.rowTargets.forEach(row => {
+      const checkbox = row.querySelector('input[type="checkbox"]')
+      if (checkbox) {
+        checkbox.checked = isChecked
+        row.classList.toggle("selected", isChecked)
+      }
+    })
+  }
+
+  updateSelectAllState() {
+    if (!this.hasSelectAllTarget) return
+
+    const checkedBoxes = this.rowTargets.filter(row => {
+      const checkbox = row.querySelector('input[type="checkbox"]')
+      return checkbox && checkbox.checked
+    })
+
+    const totalBoxes = this.rowTargets.length
+
+    if (checkedBoxes.length === 0) {
+      this.selectAllTarget.indeterminate = false
+      this.selectAllTarget.checked = false
+    } else if (checkedBoxes.length === totalBoxes) {
+      this.selectAllTarget.indeterminate = false
+      this.selectAllTarget.checked = true
+    } else {
+      this.selectAllTarget.indeterminate = true
+      this.selectAllTarget.checked = false
+    }
+  }
+
+  // Bulk actions
+  performBulkAction(action) {
+    const selectedIds = this.getSelectedIds()
+
+    if (selectedIds.length === 0) {
+      this.showNotification("Please select items to perform this action.", "warning")
+      return
+    }
+
+    switch (action) {
+      case "delete":
+        this.confirmBulkDelete(selectedIds)
+        break
+      case "export":
+        this.exportSelected(selectedIds)
+        break
+      default:
+        console.log(`Unknown bulk action: ${action}`)
+    }
+  }
+
+  getSelectedIds() {
+    return this.rowTargets
+      .filter(row => {
+        const checkbox = row.querySelector('input[type="checkbox"]')
+        return checkbox && checkbox.checked
+      })
+      .map(row => row.getAttribute("data-id"))
+  }
+
+  confirmBulkDelete(ids) {
+    const count = ids.length
+    const message = `Are you sure you want to delete ${count} ${count === 1 ? "item" : "items"}? This action cannot be undone.`
+
+    if (confirm(message)) {
+      this.deleteSelected(ids)
+    }
+  }
+
+  async deleteSelected(ids) {
+    try {
+      const response = await fetch("/admin/bulk_delete", {
+        method: "DELETE",
+        headers: {
+          "Content-Type": "application/json",
+          "X-CSRF-Token": document.querySelector('meta[name="csrf-token"]').content
+        },
+        body: JSON.stringify({ ids: ids, model: this.getModelName() })
+      })
+
+      if (response.ok) {
+        // Remove deleted rows from table
+        ids.forEach(id => {
+          const row = this.element.querySelector(`[data-id="${id}"]`)
+          if (row) {
+            row.remove()
+          }
+        })
+
+        this.showNotification(`Successfully deleted ${ids.length} items.`, "success")
+      } else {
+        this.showNotification("Failed to delete selected items.", "error")
+      }
+    } catch (error) {
+      console.error("Bulk delete error:", error)
+      this.showNotification("Network error during deletion.", "error")
+    }
+  }
+
+  exportSelected(ids) {
+    const url = new URL("/admin/export", window.location.origin)
+    url.searchParams.set("ids", ids.join(","))
+    url.searchParams.set("model", this.getModelName())
+
+    // Trigger download
+    const link = document.createElement("a")
+    link.href = url.toString()
+    link.download = `${this.getModelName()}_export.csv`
+    document.body.appendChild(link)
+    link.click()
+    document.body.removeChild(link)
+  }
+
+  showNotification(message, type = "info") {
+    // Create notification element
+    const notification = document.createElement("div")
+    notification.className = `fixed top-4 right-4 z-50 p-4 rounded-lg shadow-lg max-w-sm ${
+      type === "success" ? "bg-green-500" :
+      type === "error" ? "bg-red-500" :
+      type === "warning" ? "bg-yellow-500" : "bg-blue-500"
+    } text-white`
+
+    notification.innerHTML = `
+      <div class="flex items-center space-x-3">
+        <div class="flex-shrink-0">
+          <i class="fas ${
+            type === "success" ? "fa-check-circle" :
+            type === "error" ? "fa-exclamation-circle" :
+            type === "warning" ? "fa-exclamation-triangle" : "fa-info-circle"
+          }"></i>
+        </div>
+        <div class="flex-1">
+          <p class="font-medium">${message}</p>
+        </div>
+        <button class="flex-shrink-0 hover:opacity-75" onclick="this.parentElement.parentElement.remove()">
+          <i class="fas fa-times"></i>
+        </button>
+      </div>
+    `
+
+    document.body.appendChild(notification)
+
+    // Auto-remove after 5 seconds
+    setTimeout(() => {
+      if (notification.parentNode) {
+        notification.remove()
+      }
+    }, 5000)
+  }
+
+  getModelName() {
+    // Extract model name from URL or data attribute
+    const urlMatch = window.location.pathname.match(/\/admin\/([^\/]+)/)
+    return urlMatch ? urlMatch[1] : ""
+  }
+}