ruby_cms 0.2.1.0 → 1.0.0

data/{app/javascript/controllers/ruby_cms → lib/generators/ruby_cms/templates/javascript/controllers/ruby_ui}/bulk_action_table_controller.js

@@ -1,6 +1,5 @@
 import { Controller } from "@hotwired/stimulus";
 
-// Connects to data-controller="ruby-cms--bulk-action-table"
 export default class extends Controller {
   static targets = [
     "bulkBar",
@@ -8,43 +7,14 @@ export default class extends Controller {
     "selectAllCheckbox",
     "itemCheckbox",
     "selectAllButton",
-    "dialogOverlay",
-    "dialogConfirmButton",
-    "dialogContent",
-    "dialogTitle",
-    "dialogMessage",
-    "searchForm",
+    "modalOverlay",
+    "modalConfirmButton",
   ];
   static values = {
     csrfToken: String,
     bulkActionUrl: String,
     itemName: { type: String, default: "item" },
-    processingLabel: { type: String, default: "Processing..." },
-    confirmLabel: { type: String, default: "Confirm" },
-    selectAtLeastOneMessage: {
-      type: String,
-      default: "Please select at least one item.",
-    },
-    itemIdNotFoundMessage: {
-      type: String,
-      default: "Item ID not found for deletion.",
-    },
-    deletePathNotFoundMessage: {
-      type: String,
-      default: "Delete path not found.",
-    },
-    actionUrlNotConfiguredMessage: {
-      type: String,
-      default: "Action URL not configured. Please configure an action URL for this page.",
-    },
-    defaultConfirmMessage: {
-      type: String,
-      default: "Are you sure you want to proceed?",
-    },
-    genericActionErrorMessage: {
-      type: String,
-      default: "An error occurred while performing %{action}.",
-    },
+    activeColor: { type: String, default: "primary" },
   };
 
   connect() {
@@ -58,45 +28,6 @@ export default class extends Controller {
     if (this.hasSelectAllCheckboxTarget) {
       this.updateBulkBar();
     }
-
-    // Handle ESC key to close dialog
-    this.boundHandleKeydown = this.handleKeydown.bind(this);
-    document.addEventListener("keydown", this.boundHandleKeydown);
-    this.searchDebounceTimer = null;
-  }
-
-  disconnect() {
-    if (this.boundHandleKeydown) {
-      document.removeEventListener("keydown", this.boundHandleKeydown);
-    }
-    if (this.searchDebounceTimer) {
-      clearTimeout(this.searchDebounceTimer);
-      this.searchDebounceTimer = null;
-    }
-  }
-
-  autoSearch() {
-    if (!this.hasSearchFormTarget) return;
-
-    if (this.searchDebounceTimer) {
-      clearTimeout(this.searchDebounceTimer);
-    }
-
-    this.searchDebounceTimer = setTimeout(() => {
-      this.searchFormTarget.requestSubmit();
-    }, 250);
-  }
-
-  handleKeydown(event) {
-    // Close dialog on ESC key
-    if (
-      event.key === "Escape" &&
-      this.hasDialogOverlayTarget &&
-      !this.dialogOverlayTarget.classList.contains("hidden")
-    ) {
-      event.preventDefault();
-      this.closeDialog();
-    }
   }
 
   toggleSelectAll(event) {
@@ -134,20 +65,7 @@ export default class extends Controller {
   }
 
   updateBulkBar() {
-    // Find targets manually if Stimulus targets aren't available
-    const controllerName = "ruby-cms--bulk-action-table";
-    const bulkBar = this.hasBulkBarTarget
-      ? this.bulkBarTarget
-      : this.element.querySelector(`[data-${controllerName}-target="bulkBar"]`);
-
-    const selectedCount = this.hasSelectedCountTarget
-      ? this.selectedCountTarget
-      : this.element.querySelector(
-          `[data-${controllerName}-target="selectedCount"]`,
-        );
-
-    if (!bulkBar || !selectedCount) {
-      // Silently return if targets aren't found (component might not have bulk actions)
+    if (!this.hasBulkBarTarget || !this.hasSelectedCountTarget) {
       return;
     }
 
@@ -155,10 +73,10 @@ export default class extends Controller {
     const count = selectedItems.length;
 
     if (count > 0) {
-      bulkBar.classList.remove("hidden");
-      selectedCount.textContent = `${count}`;
+      this.bulkBarTarget.classList.remove("hidden");
+      this.selectedCountTarget.textContent = `${count}`;
     } else {
-      bulkBar.classList.add("hidden");
+      this.bulkBarTarget.classList.add("hidden");
     }
 
     this.updateRowHighlighting(selectedItems);
@@ -178,19 +96,15 @@ export default class extends Controller {
   }
 
   updateRowHighlighting(selectedIds) {
+    const highlightClass = this.highlightClassForColor();
     const rows = this.element.querySelectorAll("tr[data-item-id]");
-    // Convert selectedIds to strings for comparison
-    const selectedIdsStr = selectedIds.map((id) => String(id));
-
     rows.forEach((row) => {
-      const itemId = String(row.getAttribute("data-item-id") || "");
-      if (selectedIdsStr.includes(itemId)) {
-        row.setAttribute("data-state", "selected");
-        row.classList.add("bg-primary/5");
+      const itemId = row.getAttribute("data-item-id");
+      if (selectedIds.includes(itemId)) {
+        row.classList.add(highlightClass);
         row.classList.remove("hover:bg-muted/50");
       } else {
-        row.removeAttribute("data-state");
-        row.classList.remove("bg-primary/5");
+        row.classList.remove(highlightClass);
         if (!row.classList.contains("hover:bg-muted/50")) {
           row.classList.add("hover:bg-muted/50");
         }
@@ -198,104 +112,61 @@ export default class extends Controller {
     });
   }
 
-  getSelectedIds() {
-    // Get checkboxes - try Stimulus targets first, then fallback to querySelector
-    const controllerName = "ruby-cms--bulk-action-table";
-    const checkboxes = this.hasItemCheckboxTarget
-      ? this.itemCheckboxTargets
-      : Array.from(
-          this.element.querySelectorAll(
-            `input[type="checkbox"][data-${controllerName}-target="itemCheckbox"]`,
-          ),
-        );
+  highlightClassForColor() {
+    const colorMap = {
+      primary: "bg-primary/5",
+      blue: "bg-blue-50",
+      red: "bg-red-50",
+      orange: "bg-orange-50",
+      purple: "bg-purple-50",
+      indigo: "bg-indigo-50",
+      emerald: "bg-emerald-50",
+    };
 
-    return checkboxes
+    return colorMap[this.activeColorValue] || colorMap.primary;
+  }
+
+  getSelectedIds() {
+    return this.itemCheckboxTargets
       .filter((checkbox) => checkbox.checked)
       .map((checkbox) => {
-        // Try dataset.itemId first, then value, ensuring string conversion
-        return String(
-          checkbox.dataset.itemId ||
-            checkbox.getAttribute("data-item-id") ||
-            checkbox.value ||
-            "",
-        );
-      })
-      .filter((id) => id !== ""); // Remove empty IDs
+        return checkbox.dataset.itemId || checkbox.value;
+      });
   }
 
-  showActionDialog(event) {
+  showActionModal(event) {
     const count = this.getSelectedIds().length;
     if (count === 0) {
-      this.showNotification(this.selectAtLeastOneMessageValue, "error");
+      this.showNotification("Please select at least one item.", "error");
       return;
     }
 
-    const button = event.currentTarget;
-    const actionName = event.params.actionName || button.dataset.actionName;
+    const actionName =
+      event.params.actionName || event.currentTarget.dataset.actionName;
     const actionUrl =
       event.params.actionUrl ||
-      button.dataset.actionUrl ||
-      button.dataset.deleteUrl ||
+      event.currentTarget.dataset.actionUrl ||
+      event.currentTarget.dataset.deleteUrl ||
       this.bulkActionUrlValue;
-    const actionLabel =
-      button.dataset.actionLabel || this.getDefaultActionLabel(actionName);
-    const actionConfirm =
-      button.dataset.actionConfirm || this.getDefaultActionConfirm(actionName);
 
     if (
-      button.dataset.actionType === "redirect" ||
+      event.currentTarget.dataset.actionType === "redirect" ||
       actionName === "bulk_edit"
     ) {
       this.redirectToBulkAction(actionUrl, actionName);
       return;
     }
 
-    // Direct action: perform immediately without confirmation
-    if (button.dataset.actionType === "direct") {
-      this.currentAction = actionName;
-      this.currentActionUrl = actionUrl;
-      this.performDirectAction();
-      return;
-    }
-
     this.currentAction = actionName;
     this.currentActionUrl = actionUrl;
-    this.currentActionLabel = actionLabel;
-    this.currentActionConfirm = actionConfirm;
-
-    this.showDialog();
-  }
 
-  async performDirectAction() {
-    const itemIds = this.getSelectedIds();
-    if (itemIds.length === 0) return;
-
-    await this.performBulkAction(
-      null,
-      this.currentAction,
-      this.currentActionUrl,
-      itemIds,
-    );
-  }
-
-  getDefaultActionLabel(actionName) {
-    if (actionName === "delete") return "Delete Selected";
-    return actionName
-      ? actionName.replace(/_/g, " ").replace(/\b\w/g, (c) => c.toUpperCase())
-      : "Confirm";
-  }
-
-  getDefaultActionConfirm(actionName) {
-    if (actionName === "delete") {
-      return "Are you sure you want to delete the selected items? This action cannot be undone.";
-    }
-    return this.defaultConfirmMessageValue;
+    this.showModal();
   }
 
   redirectToBulkAction(url, actionName) {
     const selectedIds = this.getSelectedIds();
     if (selectedIds.length === 0) {
-      this.showNotification(this.selectAtLeastOneMessageValue, "error");
+      this.showNotification("Please select at least one item.", "error");
       return;
     }
 
@@ -309,40 +180,27 @@ export default class extends Controller {
     window.location.href = urlObj.toString();
   }
 
-  showDialog() {
-    const label = this.currentActionLabel || this.confirmLabelValue;
-    const message = this.currentActionConfirm || this.defaultConfirmMessageValue;
-
-    if (this.hasDialogTitleTarget) {
-      this.dialogTitleTarget.textContent = label;
-    }
-    if (this.hasDialogMessageTarget) {
-      this.dialogMessageTarget.innerHTML = message
-        .split("\n")
-        .map((p) => `<p>${p}</p>`)
-        .join("");
-    }
-    if (this.hasDialogConfirmButtonTarget) {
-      this.dialogConfirmButtonTarget.disabled = false;
-      this.dialogConfirmButtonTarget.textContent = label;
+  showModal() {
+    if (this.hasModalConfirmButtonTarget) {
+      this.modalConfirmButtonTarget.disabled = false;
     }
 
-    if (this.hasDialogOverlayTarget) {
-      this.dialogOverlayTarget.classList.remove("hidden");
-      document.body.classList.add("overflow-hidden");
-      if (this.hasDialogContentTarget) {
-        this.dialogContentTarget.focus();
-      }
-    }
+    // Let the modal controller handle showing/hiding for consistency
+    const modalController =
+      this.application.getControllerForElementAndIdentifier(
+        this.modalOverlayTarget,
+        "ruby-ui--modal"
+      );
+    modalController?.show();
   }
 
-  closeDialog() {
-    // Hide the dialog overlay
-    if (this.hasDialogOverlayTarget) {
-      this.dialogOverlayTarget.classList.add("hidden");
-      // Allow body scroll
-      document.body.classList.remove("overflow-hidden");
-    }
+  closeModal() {
+    const modalController =
+      this.application.getControllerForElementAndIdentifier(
+        this.modalOverlayTarget,
+        "ruby-ui--modal"
+      );
+    modalController?.hide();
     this.currentAction = null;
     this.currentItemId = null;
     this.isProcessing = false;
@@ -364,7 +222,7 @@ export default class extends Controller {
     if (event.ctrlKey || event.metaKey) {
       event.preventDefault();
       const checkbox = row.querySelector(
-        'input[type="checkbox"][data-item-id]',
+        'input[type="checkbox"][data-item-id]'
       );
       if (checkbox) {
         checkbox.checked = !checkbox.checked;
@@ -387,16 +245,16 @@ export default class extends Controller {
     event.stopPropagation();
   }
 
-  async showIndividualDeleteDialog(event) {
+  async showIndividualDeleteModal(event) {
     const deleteButton = event.currentTarget;
     const requireConfirm = deleteButton.dataset.requireConfirm !== "false";
 
     if (!requireConfirm) {
       const itemId =
-        event.params.itemId || event.params.rubyCmsBulkActionTableItemIdParam;
+        event.params.itemId || event.params.rubyUiBulkActionTableItemIdParam;
 
       if (!itemId) {
-        this.showNotification(this.itemIdNotFoundMessageValue, "error");
+        this.showNotification("Item ID not found for deletion.", "error");
         return;
       }
 
@@ -414,7 +272,7 @@ export default class extends Controller {
           this.getFallbackPath(this.itemNameValue, itemId);
 
         if (!deletePath) {
-          this.showNotification(this.deletePathNotFoundMessageValue, "error");
+          this.showNotification("Delete path not found.", "error");
           return;
         }
 
@@ -426,7 +284,7 @@ export default class extends Controller {
     }
 
     const itemId =
-      event.params.itemId || event.params.rubyCmsBulkActionTableItemIdParam;
+      event.params.itemId || event.params.rubyUiBulkActionTableItemIdParam;
 
     const deletePath =
       deleteButton.dataset.deletePath ||
@@ -436,7 +294,7 @@ export default class extends Controller {
     this.currentItemId = itemId;
     this.currentActionUrl = deletePath;
 
-    this.showDialog();
+    this.showModal();
   }
 
   getFallbackPath(itemName, itemId) {
@@ -465,9 +323,9 @@ export default class extends Controller {
 
     this.isProcessing = true;
 
-    if (this.hasDialogConfirmButtonTarget) {
-      this.dialogConfirmButtonTarget.disabled = true;
-      this.dialogConfirmButtonTarget.textContent = this.processingLabelValue;
+    if (this.hasModalConfirmButtonTarget) {
+      this.modalConfirmButtonTarget.disabled = true;
+      this.modalConfirmButtonTarget.textContent = "Processing...";
     }
 
     try {
@@ -486,7 +344,7 @@ export default class extends Controller {
           event,
           this.currentAction,
           actionUrl,
-          itemIds,
+          itemIds
         );
       }
     } finally {
@@ -494,7 +352,7 @@ export default class extends Controller {
       this.currentAction = null;
       this.currentItemId = null;
       this.currentActionUrl = null;
-      this.closeDialog();
+      this.closeModal();
     }
   }
 
@@ -502,12 +360,12 @@ export default class extends Controller {
     event = null,
     actionName = null,
     customUrl = null,
-    itemIds = null,
+    itemIds = null
   ) {
     const selectedIds = itemIds || this.getSelectedIds();
 
     if (selectedIds.length === 0) {
-      this.showNotification(this.selectAtLeastOneMessageValue, "error");
+      this.showNotification("Please select at least one item.", "error");
       return;
     }
 
@@ -526,8 +384,8 @@ export default class extends Controller {
 
     if (!actionUrl) {
       this.showNotification(
-        this.actionUrlNotConfiguredMessageValue,
-        "error",
+        "Action URL not configured. Please configure an action URL for this page.",
+        "error"
       );
       return;
     }
@@ -535,8 +393,8 @@ export default class extends Controller {
     try {
       const method =
         actionUrl.includes("bulk_delete") ||
-        action === "delete" ||
-        actionUrl.match(/\/\d+\/?$/)
+          action === "delete" ||
+          actionUrl.match(/\/\d+\/?$/)
           ? "DELETE"
           : "PATCH";
 
@@ -554,21 +412,23 @@ export default class extends Controller {
         }),
       });
 
-      if (response.ok || response.redirected) {
+      if (response.ok) {
         this.clearSelection();
         this.clearItemIdsFromUrl();
 
         if (window.Turbo) {
-          window.Turbo.visit(window.location.href, { action: "replace" });
+          const turboFrame = document.getElementById("admin_table_content");
+          if (turboFrame) {
+            turboFrame.src = window.location.href;
+          } else {
+            window.Turbo.visit(window.location.href);
+          }
         } else {
           window.location.reload();
         }
       } else {
         const contentType = response.headers.get("content-type");
-        let errorMessage = this.interpolateActionMessage(
-          this.genericActionErrorMessageValue,
-          action,
-        );
+        let errorMessage = `An error occurred while performing ${action}.`;
 
         if (contentType && contentType.includes("application/json")) {
           try {
@@ -593,18 +453,12 @@ export default class extends Controller {
     } catch (error) {
       console.error(`Error performing bulk action ${action}:`, error);
       this.showNotification(
-        this.interpolateActionMessage(this.genericActionErrorMessageValue, action),
-        "error",
+        `An error occurred while performing ${action}.`,
+        "error"
       );
     }
   }
 
-  interpolateActionMessage(template, action) {
-    const normalizedTemplate =
-      template || "An error occurred while performing %{action}.";
-    return normalizedTemplate.replace("%{action}", action || "action");
-  }
-
   showNotification(message, type = "info") {
     const toast = document.createElement("div");
     const colorMap = {
@@ -612,9 +466,8 @@ export default class extends Controller {
       error: "bg-destructive",
       info: "bg-primary",
     };
-    toast.className = `fixed top-4 right-4 z-50 px-4 py-3 rounded-lg shadow-lg text-white text-sm max-w-sm animate-in slide-in-from-top-2 ${
-      colorMap[type] || colorMap.info
-    }`;
+    toast.className = `fixed top-4 right-4 z-50 px-4 py-3 rounded-lg shadow-lg text-white text-sm max-w-sm animate-in slide-in-from-top-2 ${colorMap[type] || colorMap.info
+      }`;
     toast.textContent = message;
 
     document.body.appendChild(toast);
@@ -631,7 +484,7 @@ export default class extends Controller {
     const hasItemIds =
       url.searchParams.has("item_ids[]") ||
       Array.from(url.searchParams.keys()).some((key) =>
-        key.startsWith("item_ids"),
+        key.startsWith("item_ids")
       );
 
     if (hasItemIds) {