vasuzex 2.3.12 → 2.3.14

package/frontend/react-ui/components/DataTable/TableBody.jsx

@@ -5,15 +5,19 @@ import {
   applyActionDefaults,
   createViewClickHandler,
   createDeleteClickHandler,
+  createHardDeleteClickHandler,
+  createRestoreClickHandler,
+  ACTION_DEFAULTS,
 } from "./ActionDefaults.jsx";
 
 /**
  * TableBody Component - Production Ready
- * 
- * Table body with data rows, column rendering, and action buttons
- * Handles Switch component for status toggle
- * Auto-configures edit/view/delete actions
- * 
+ *
+ * Table body with data rows, column rendering, and action buttons.
+ * Handles Switch component for status toggle.
+ * Trash-aware: when trashMode='only', delete becomes hardDelete with warning;
+ * restore button shown automatically for trashed rows.
+ *
  * @module components/DataTable/TableBody
  */
 export function TableBody({
@@ -27,14 +31,26 @@ export function TableBody({
   resourceName,
   resourceIdField = "id",
   onRefresh,
+  // Trash support: 'without' | 'with' | 'only'
+  trashMode,
+  // URL for the restore endpoint (e.g. "/products/:id/restore")
+  restoreUrl,
 }) {
   if (loading) {
+    const skeletonRows = Array.from({ length: 5 });
+    const colCount = columns.length + (actions ? 1 : 0);
     return (
-      <tr>
-        <td colSpan={columns.length + (actions ? 1 : 0)} className="text-center py-8">
-          Loading data...
-        </td>
-      </tr>
+      <>
+        {skeletonRows.map((_, rowIdx) => (
+          <tr key={rowIdx} className="border-b border-gray-200 dark:border-gray-700 animate-pulse">
+            {Array.from({ length: colCount }).map((_, colIdx) => (
+              <td key={colIdx} className="px-6 py-4">
+                <div className="h-4 bg-gray-200 dark:bg-gray-700 rounded w-3/4" />
+              </td>
+            ))}
+          </tr>
+        ))}
+      </>
     );
   }
   
@@ -83,6 +99,11 @@ export function TableBody({
                     return null;
                   }
 
+                  // In trash-only mode: skip edit/switch/status-toggle actions
+                  if (trashMode === 'only' && ['edit', 'switch'].includes(userAction.name)) {
+                    return null;
+                  }
+
                   // Apply defaults based on action name
                   const action = applyActionDefaults(userAction, resourceName, resourceIdField);
 
@@ -114,22 +135,46 @@ export function TableBody({
                     }
                   }
 
-                  // Handle delete action with automatic confirmation
+                  // Handle delete action:
+                  // — in trash-only mode, OR when row is already soft-deleted (has deleted_at) → hard-delete with permanent-delete confirmation
+                  // — normal mode → soft-delete with standard confirmation
                   if (action.type === "button" && action.name === "delete") {
                     const deleteAction = action;
                     if (deleteAction.deleteUrl && !userAction.onClick) {
-                      deleteAction.onClick = createDeleteClickHandler(
-                        api,
-                        deleteAction.deleteUrl,
-                        deleteAction.confirmMessage || "Are you sure you want to delete this item?",
-                        resourceIdField,
-                        {
-                          confirmTitle: deleteAction.confirmTitle,
-                          confirmButtonText: deleteAction.confirmButtonText,
-                          successMessage: deleteAction.successMessage,
-                          onRefresh,
-                        },
-                      );
+                      const isAlreadyTrashed = !!row.deleted_at;
+                      if (trashMode === 'only' || isAlreadyTrashed) {
+                        // Override to hardDelete
+                        deleteAction.onClick = createHardDeleteClickHandler(
+                          api,
+                          deleteAction.deleteUrl,
+                          deleteAction.confirmMessage || "This will permanently remove the record from the database. This action cannot be undone.",
+                          resourceIdField,
+                          {
+                            confirmTitle: "Permanently Delete?",
+                            confirmButtonText: "Yes, permanently delete!",
+                            successMessage: deleteAction.successMessage || "Permanently deleted",
+                            onRefresh,
+                          },
+                        );
+                        // Apply hardDelete styling
+                        if (!userAction.className) {
+                          deleteAction.className = ACTION_DEFAULTS.hardDelete.extraClass;
+                        }
+                        deleteAction.title = "Permanently Delete";
+                      } else {
+                        deleteAction.onClick = createDeleteClickHandler(
+                          api,
+                          deleteAction.deleteUrl,
+                          deleteAction.confirmMessage || "Are you sure you want to delete this item?",
+                          resourceIdField,
+                          {
+                            confirmTitle: deleteAction.confirmTitle,
+                            confirmButtonText: deleteAction.confirmButtonText,
+                            successMessage: deleteAction.successMessage,
+                            onRefresh,
+                          },
+                        );
+                      }
                     }
                   }
 
@@ -138,7 +183,7 @@ export function TableBody({
                   const className =
                     typeof action.className === "function"
                       ? action.className(row)
-                      : action.className || "";
+                      : action.className || action.extraClass || "";
                   const title =
                     typeof action.title === "function"
                       ? action.title(row)
@@ -183,6 +228,22 @@ export function TableBody({
 
                   return null;
                 })}
+
+                {/* Auto-inject Restore button when trashMode is active and row is trashed */}
+                {restoreUrl && (trashMode === 'only' || (trashMode === 'with' && row.deleted_at)) && (() => {
+                  const handler = createRestoreClickHandler(api, restoreUrl, resourceIdField, { onRefresh });
+                  const Icon = ACTION_DEFAULTS.restore.icon;
+                  return (
+                    <button
+                      key="auto-restore"
+                      onClick={() => handler(row)}
+                      className={ACTION_DEFAULTS.restore.extraClass}
+                      title="Restore"
+                    >
+                      <Icon className="h-4 w-4" />
+                    </button>
+                  );
+                })()}
               </div>
             </td>
           )}

package/frontend/react-ui/components/DataTable/TableState.jsx

@@ -1,23 +1,52 @@
 import React from "react";
 
+/**
+ * Skeleton pulse block – light-grey bar that animates.
+ * Width can be "full", "3/4", "1/2", "1/3" or a fixed px value.
+ */
+const SkeletonCell = ({ width = "3/4", height = "h-4" }) => {
+  const widthClass =
+    width === "full" ? "w-full" :
+    width === "3/4"  ? "w-3/4"  :
+    width === "1/2"  ? "w-1/2"  :
+    width === "1/3"  ? "w-1/3"  :
+    width === "1/4"  ? "w-1/4"  : width;
+
+  return (
+    <div
+      className={`${height} ${widthClass} rounded bg-gray-200 dark:bg-gray-700 animate-pulse`}
+    />
+  );
+};
+
+/**
+ * A single skeleton row matching the number of visible columns + optional action column.
+ * Alternates bar widths so the shimmer does not look monotonous.
+ */
+const WIDTHS = ["3/4", "1/2", "full", "1/3", "3/4", "1/2"];
+
+const SkeletonRow = ({ colSpan }) => (
+  <tr className="border-b border-gray-200 dark:border-gray-700">
+    {Array.from({ length: colSpan }).map((_, i) => (
+      <td key={i} className="px-6 py-4">
+        <SkeletonCell width={WIDTHS[i % WIDTHS.length]} />
+      </td>
+    ))}
+  </tr>
+);
+
 /**
  * TableState Component
- * Handles loading and empty states for DataTable
+ * Handles loading (skeleton rows) and empty states for DataTable
  */
-export const TableState = ({ loading, empty, colSpan, emptyText }) => {
+export const TableState = ({ loading, empty, colSpan, emptyText, skeletonRows = 6 }) => {
   if (loading) {
     return (
-      <tr>
-        <td colSpan={colSpan} className="text-center py-8">
-          <div className="flex items-center justify-center gap-2">
-            <svg className="animate-spin h-5 w-5 text-brand-600" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
-              <circle className="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="4"></circle>
-              <path className="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
-            </svg>
-            <span>Loading data...</span>
-          </div>
-        </td>
-      </tr>
+      <>
+        {Array.from({ length: skeletonRows }).map((_, i) => (
+          <SkeletonRow key={i} colSpan={colSpan} />
+        ))}
+      </>
     );
   }
   if (empty) {

package/jsconfig.json

@@ -14,6 +14,7 @@
     },
     "module": "esnext",
     "moduleResolution": "node",
+    "ignoreDeprecations": "6.0",
     "target": "es2020",
     "lib": ["es2020"],
     "allowSyntheticDefaultImports": true,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "vasuzex",
-  "version": "2.3.12",
+  "version": "2.3.14",
   "description": "Laravel-inspired framework for Node.js monorepos - V2 with optimized dependencies",
   "type": "module",
   "main": "./framework/index.js",