mobigrid-module 1.1.31 → 1.1.35

package/README.md

@@ -17,16 +17,17 @@ import MobigridModule from 'mobigrid-module';
 import 'mobigrid-module/dist/index.css'; // Import styles if necessary
 
 function App() {
-  const handleEdit = (row) => {
-    console.log('Edit row:', row);
+  const handlePrint = (row) => {
+    console.log('Print ticket:', row.ticket_numbers);
   };
 
-  const handleDelete = (row) => {
-    console.log('Delete row:', row);
+  const handleRefund = (row) => {
+    console.log('Refund transaction:', row.request_id);
   };
 
-  const checkEditPermission = (row) => {
-    return row.status !== 'LOCKED';
+  // Callback to determine if print button should be shown
+  const canPrintTicket = (row) => {
+    return row.status === 'PAID' && row.canPrint === true;
   };
 
   return (
@@ -34,11 +35,11 @@ function App() {
       configUrl="https://api.example.com/config"
       // OR provide configJson directly
       // configJson={myConfigObject}
-      dataUrl="https://api.example.com/data"
+      dataUrl="https://api.example.com/transactions"
       callbacks={{
-        onEdit: handleEdit,
-        onDelete: handleDelete,
-        canEdit: checkEditPermission
+        onPrint: handlePrint,
+        onRefund: handleRefund,
+        checkPrint: canPrintTicket
       }}
       customHeaders={{
         'Authorization': 'Bearer token123'
@@ -69,22 +70,27 @@ The `MobigridModule` accepts the following props:
 
 The configuration object defines the structure of the table, filters, and columns. You can provide this via the `configUrl` endpoint or directly via the `configJson` prop.
 
+### Example Configuration (Payment History)
+
 ```json
 {
-  "title": "User Management",
-  "data_url": "https://api.example.com/users",
+  "title": "Payment History",
+  "data_url": "https://api.example.com/payments",
   "Filters": [
     [
       {
         "type": "Text",
-        "name": "search",
-        "label": "Search Users"
+        "name": "request_id",
+        "label": "Request ID"
       },
       {
         "type": "Select",
-        "name": "role",
-        "label": "Role",
-        "urlSource": "https://api.example.com/roles" // Dynamic options
+        "name": "status",
+        "label": "Status",
+        "options": [
+          { "label": "Paid", "value": "PAID" },
+          { "label": "Failed", "value": "FAILED" }
+        ]
       }
     ],
     [
@@ -100,32 +106,43 @@ The configuration object defines the structure of the table, filters, and column
       }
     ]
   ],
-  "colomns": [ // Note: spelling is 'colomns' in current version
+  "colomns": [
+    {
+      "title": "Request ID",
+      "key": "request_id",
+      "type": "text"
+    },
+    {
+      "title": "Date",
+      "key": "created_date",
+      "type": "date",
+      "pattern": "dd/MM/yyyy HH:mm"
+    },
     {
-      "title": "Name",
-      "key": "fullName",
+      "title": "POS Code",
+      "key": "pos_code",
       "type": "text"
     },
+    {
+      "title": "Amount",
+      "key": "amount",
+      "type": "money",
+      "currency": "MAD"
+    },
     {
       "title": "Status",
       "key": "status",
       "type": "status"
     },
-    {
-      "title": "Created At",
-      "key": "createdAt",
-      "type": "date",
-      "pattern": "dd/MM/yyyy"
-    },
     {
       "title": "Actions",
       "key": "ACTIONS_BUTTONS",
       "actions": [
         {
-          "label": "Edit",
-          "icon": "icon-edit",
-          "action": "onEdit",
-          "condition": "canEdit"
+          "label": "Print",
+          "icon": "icon-printer",
+          "action": "onPrint",
+          "condition": "checkPrint"
         }
       ]
     }
@@ -151,11 +168,11 @@ Filters are defined as an array of arrays (rows of filters).
 Defines the table columns.
 
 - **`title`**: Header text for the column.
-- **`key`**: The key in the data object to display.
+- **`key`**: The key in the data object to display (e.g., `request_id`, `amount`).
 - **`type`**: formatting type.
     - `"text"`: Default display.
     - `"date"`: Formats date using `pattern` (default: `dd-MM-yyyy`).
-    - `"money"`: Formats as currency. Usage: `currency` prop required.
+    - `"money"`: Formats as currency. Usage: `currency` prop required (e.g., "MAD").
     - `"status"`: Displays a colored badge based on status value (PENDING, PAID, CANCELLED, etc.).
     - `"ACTIONS_BUTTONS"`: Special column for action buttons.
 - **`scroll`**: If true, limits height and adds scrollbar for long content.