@apexcura/ui-components 0.0.11-Beta7 → 0.0.11-Beta71

package/dist/index.d.mts

@@ -22,6 +22,7 @@ type ElementType = {
     id?: number;
     thead?: any[];
     tbody?: any[];
+    variable_data?: any[];
 };
 
 interface ElementExecuterProps$3 extends ElementType {

package/dist/index.d.ts

@@ -22,6 +22,7 @@ type ElementType = {
     id?: number;
     thead?: any[];
     tbody?: any[];
+    variable_data?: any[];
 };
 
 interface ElementExecuterProps$3 extends ElementType {

package/dist/index.js

@@ -361,22 +361,103 @@ var ButtonElement = () => /* @__PURE__ */ import_react12.default.createElement(i
 // src/Components/AddMoreTable.tsx
 var import_react13 = __toESM(require("react"));
 var import_antd11 = require("antd");
+var import_icons2 = require("@ant-design/icons");
 var AddMoreTable = (props) => {
-  const { thead, tbody } = props;
-  console.log("-----------tbody", tbody);
-  console.log("..........thead", thead);
+  const { thead = [], tbody } = props;
   const [tableData, setTableData] = (0, import_react13.useState)({});
+  const [rows, setRows] = (0, import_react13.useState)(tbody || []);
   const onHandleChange = (name, value) => {
     setTableData((prev) => ({ ...prev, [name]: value }));
     console.log(tableData);
   };
-  const columns = thead && thead.length > 0 ? thead.map((eachHeadEl) => ({
-    title: eachHeadEl.label,
-    dataIndex: eachHeadEl.name,
-    key: eachHeadEl.id
-  })) : [];
+  const onHandleRows = () => {
+    const lastRow = rows[rows.length - 1];
+    const newId = lastRow ? lastRow.id + 1 : 1;
+    let newRow = {
+      id: newId,
+      variable_data: [
+        {
+          id: 1,
+          Route: { label: "Route", element: "single-select", type: "text" },
+          Dose: { label: "Dose", element: "single-select", type: "text" },
+          Frequency: { label: "Frequency", element: "single-select", type: "text" },
+          When: { label: "When", element: "textarea", type: "text" },
+          Duration: { label: "Duration", element: "textarea", type: "text" },
+          Instructions: { label: "Instructions", element: "textarea", type: "text" },
+          icons: { delete: "delete", add: "plus" }
+        }
+      ]
+    };
+    setRows((prevData) => [...prevData, newRow]);
+  };
+  const onHandleDelete = (id) => {
+    setRows((prevRows) => prevRows.filter((row) => row.id !== id));
+  };
+  const onHandleSubRowsAdd = (rowIndex) => {
+    setRows((prevRows) => {
+      return prevRows.map((row, index) => {
+        if (index === rowIndex) {
+          const newSubRow = {
+            id: row.variable_data.length + 1,
+            Route: { label: "Route", element: "single-select", type: "text" },
+            Dose: { label: "Dose", element: "single-select", type: "text" },
+            Frequency: { label: "Frequency", element: "single-select", type: "text" },
+            When: { label: "When", element: "textarea", type: "text" },
+            Duration: { label: "Duration", element: "textarea", type: "text" },
+            Instructions: { label: "Instructions", element: "textarea", type: "text" },
+            icons: { delete: "delete", add: "plus" }
+          };
+          return {
+            ...row,
+            variable_data: [...row.variable_data, newSubRow]
+          };
+        }
+        return row;
+      });
+    });
+  };
+  const onHandleSubRowsDelete = (rowIndex, subIndex) => {
+    setRows((prevRows) => {
+      return prevRows.map((row, index) => {
+        if (index === rowIndex) {
+          const updatedVariableData = row.variable_data.filter((_, i) => i !== subIndex);
+          return {
+            ...row,
+            variable_data: updatedVariableData
+          };
+        }
+        return row;
+      });
+    });
+  };
+  const columns = [
+    {
+      title: "#",
+      dataIndex: "index",
+      key: "index"
+    },
+    {
+      title: "Medicine",
+      dataIndex: "medicine",
+      key: "medicine"
+    },
+    {
+      title: "Actions",
+      dataIndex: "actions",
+      key: "actions"
+    }
+  ];
+  if (thead) {
+    thead.forEach((eachHeadEl) => {
+      columns.push({
+        title: eachHeadEl.label,
+        dataIndex: eachHeadEl.name,
+        key: eachHeadEl.id
+      });
+    });
+  }
   const renderInputElement = (element) => {
-    const { type, label } = element;
+    const { element: type, label } = element;
     if (type === "single-select") {
       return /* @__PURE__ */ import_react13.default.createElement(SingleSelectElement, { onChange: (value) => onHandleChange(label, value) });
     } else if (type === "textarea") {
@@ -385,26 +466,57 @@ var AddMoreTable = (props) => {
       return null;
     }
   };
-  const dataSource = tbody && tbody.length > 0 ? tbody.map((eachRow, index) => {
-    console.log("eachRow---------", eachRow);
-    const variableData = eachRow.variable_data.reduce((acc, curr) => {
-      acc[curr.label] = renderInputElement(curr);
-      return acc;
-    }, {});
+  const dataSource = rows.map((eachRow, index) => {
+    const subRow = eachRow.variable_data.map((variable, subIndex) => ({
+      key: `${eachRow.id}-${subIndex}`,
+      ...Object.fromEntries(Object.entries(variable).map(([key, value]) => {
+        if (key === "icons") {
+          return ["subRowActions", /* @__PURE__ */ import_react13.default.createElement("div", { key: subIndex }, eachRow.variable_data.length > 1 && /* @__PURE__ */ import_react13.default.createElement(import_antd11.Button, { onClick: () => onHandleSubRowsDelete(index, subIndex) }, /* @__PURE__ */ import_react13.default.createElement(import_icons2.DeleteOutlined, null)), subIndex === eachRow.variable_data.length - 1 && /* @__PURE__ */ import_react13.default.createElement(import_antd11.Button, { onClick: () => onHandleSubRowsAdd(index) }, /* @__PURE__ */ import_react13.default.createElement(import_icons2.PlusOutlined, null)))];
+        } else {
+          return [key, renderInputElement(value)];
+        }
+      }))
+    }));
     return {
-      key: index.toString(),
-      ...eachRow,
-      ...variableData
+      key: eachRow.id,
+      index: index + 1,
+      medicine: renderInputElement({
+        element: eachRow.element,
+        label: eachRow.label
+      }),
+      actions: /* @__PURE__ */ import_react13.default.createElement("div", null, /* @__PURE__ */ import_react13.default.createElement(import_antd11.Button, { onClick: () => onHandleDelete(eachRow.id) }, /* @__PURE__ */ import_react13.default.createElement(import_icons2.DeleteOutlined, null)), index === rows.length - 1 && /* @__PURE__ */ import_react13.default.createElement(import_antd11.Button, { onClick: onHandleRows }, /* @__PURE__ */ import_react13.default.createElement(import_icons2.PlusOutlined, null))),
+      subRows: subRow
     };
-  }) : [];
-  return /* @__PURE__ */ import_react13.default.createElement(import_react13.default.Fragment, null, /* @__PURE__ */ import_react13.default.createElement(
+  });
+  const expandedRowRender = (record) => {
+    return /* @__PURE__ */ import_react13.default.createElement(
+      import_antd11.Table,
+      {
+        columns: thead.map((eachHeadEl) => ({
+          title: eachHeadEl.label,
+          dataIndex: eachHeadEl.name,
+          key: eachHeadEl.id
+        })).concat([{
+          title: "SubRow Actions",
+          dataIndex: "subRowActions",
+          key: "subRowActions"
+        }]),
+        dataSource: record.subRows,
+        pagination: false,
+        bordered: true
+      }
+    );
+  };
+  return /* @__PURE__ */ import_react13.default.createElement(
     import_antd11.Table,
     {
       columns,
-      expandable: { defaultExpandedRowKeys: ["0"] },
-      dataSource
+      dataSource,
+      pagination: false,
+      bordered: true,
+      expandable: { expandedRowRender }
     }
-  ));
+  );
 };
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {

package/dist/index.mjs

@@ -313,23 +313,104 @@ var ButtonElement = () => /* @__PURE__ */ React11.createElement(Flex2, { gap: "s
 
 // src/Components/AddMoreTable.tsx
 import React12, { useState as useState3 } from "react";
-import { Table } from "antd";
+import { Table, Button as Button3 } from "antd";
+import { PlusOutlined, DeleteOutlined } from "@ant-design/icons";
 var AddMoreTable = (props) => {
-  const { thead, tbody } = props;
-  console.log("-----------tbody", tbody);
-  console.log("..........thead", thead);
+  const { thead = [], tbody } = props;
   const [tableData, setTableData] = useState3({});
+  const [rows, setRows] = useState3(tbody || []);
   const onHandleChange = (name, value) => {
     setTableData((prev) => ({ ...prev, [name]: value }));
     console.log(tableData);
   };
-  const columns = thead && thead.length > 0 ? thead.map((eachHeadEl) => ({
-    title: eachHeadEl.label,
-    dataIndex: eachHeadEl.name,
-    key: eachHeadEl.id
-  })) : [];
+  const onHandleRows = () => {
+    const lastRow = rows[rows.length - 1];
+    const newId = lastRow ? lastRow.id + 1 : 1;
+    let newRow = {
+      id: newId,
+      variable_data: [
+        {
+          id: 1,
+          Route: { label: "Route", element: "single-select", type: "text" },
+          Dose: { label: "Dose", element: "single-select", type: "text" },
+          Frequency: { label: "Frequency", element: "single-select", type: "text" },
+          When: { label: "When", element: "textarea", type: "text" },
+          Duration: { label: "Duration", element: "textarea", type: "text" },
+          Instructions: { label: "Instructions", element: "textarea", type: "text" },
+          icons: { delete: "delete", add: "plus" }
+        }
+      ]
+    };
+    setRows((prevData) => [...prevData, newRow]);
+  };
+  const onHandleDelete = (id) => {
+    setRows((prevRows) => prevRows.filter((row) => row.id !== id));
+  };
+  const onHandleSubRowsAdd = (rowIndex) => {
+    setRows((prevRows) => {
+      return prevRows.map((row, index) => {
+        if (index === rowIndex) {
+          const newSubRow = {
+            id: row.variable_data.length + 1,
+            Route: { label: "Route", element: "single-select", type: "text" },
+            Dose: { label: "Dose", element: "single-select", type: "text" },
+            Frequency: { label: "Frequency", element: "single-select", type: "text" },
+            When: { label: "When", element: "textarea", type: "text" },
+            Duration: { label: "Duration", element: "textarea", type: "text" },
+            Instructions: { label: "Instructions", element: "textarea", type: "text" },
+            icons: { delete: "delete", add: "plus" }
+          };
+          return {
+            ...row,
+            variable_data: [...row.variable_data, newSubRow]
+          };
+        }
+        return row;
+      });
+    });
+  };
+  const onHandleSubRowsDelete = (rowIndex, subIndex) => {
+    setRows((prevRows) => {
+      return prevRows.map((row, index) => {
+        if (index === rowIndex) {
+          const updatedVariableData = row.variable_data.filter((_, i) => i !== subIndex);
+          return {
+            ...row,
+            variable_data: updatedVariableData
+          };
+        }
+        return row;
+      });
+    });
+  };
+  const columns = [
+    {
+      title: "#",
+      dataIndex: "index",
+      key: "index"
+    },
+    {
+      title: "Medicine",
+      dataIndex: "medicine",
+      key: "medicine"
+    },
+    {
+      title: "Actions",
+      dataIndex: "actions",
+      key: "actions"
+    }
+  ];
+  if (thead) {
+    thead.forEach((eachHeadEl) => {
+      columns.push({
+        title: eachHeadEl.label,
+        dataIndex: eachHeadEl.name,
+        key: eachHeadEl.id
+      });
+    });
+  }
   const renderInputElement = (element) => {
-    const { type, label } = element;
+    const { element: type, label } = element;
     if (type === "single-select") {
       return /* @__PURE__ */ React12.createElement(SingleSelectElement, { onChange: (value) => onHandleChange(label, value) });
     } else if (type === "textarea") {
@@ -338,26 +419,57 @@ var AddMoreTable = (props) => {
       return null;
     }
   };
-  const dataSource = tbody && tbody.length > 0 ? tbody.map((eachRow, index) => {
-    console.log("eachRow---------", eachRow);
-    const variableData = eachRow.variable_data.reduce((acc, curr) => {
-      acc[curr.label] = renderInputElement(curr);
-      return acc;
-    }, {});
+  const dataSource = rows.map((eachRow, index) => {
+    const subRow = eachRow.variable_data.map((variable, subIndex) => ({
+      key: `${eachRow.id}-${subIndex}`,
+      ...Object.fromEntries(Object.entries(variable).map(([key, value]) => {
+        if (key === "icons") {
+          return ["subRowActions", /* @__PURE__ */ React12.createElement("div", { key: subIndex }, eachRow.variable_data.length > 1 && /* @__PURE__ */ React12.createElement(Button3, { onClick: () => onHandleSubRowsDelete(index, subIndex) }, /* @__PURE__ */ React12.createElement(DeleteOutlined, null)), subIndex === eachRow.variable_data.length - 1 && /* @__PURE__ */ React12.createElement(Button3, { onClick: () => onHandleSubRowsAdd(index) }, /* @__PURE__ */ React12.createElement(PlusOutlined, null)))];
+        } else {
+          return [key, renderInputElement(value)];
+        }
+      }))
+    }));
     return {
-      key: index.toString(),
-      ...eachRow,
-      ...variableData
+      key: eachRow.id,
+      index: index + 1,
+      medicine: renderInputElement({
+        element: eachRow.element,
+        label: eachRow.label
+      }),
+      actions: /* @__PURE__ */ React12.createElement("div", null, /* @__PURE__ */ React12.createElement(Button3, { onClick: () => onHandleDelete(eachRow.id) }, /* @__PURE__ */ React12.createElement(DeleteOutlined, null)), index === rows.length - 1 && /* @__PURE__ */ React12.createElement(Button3, { onClick: onHandleRows }, /* @__PURE__ */ React12.createElement(PlusOutlined, null))),
+      subRows: subRow
     };
-  }) : [];
-  return /* @__PURE__ */ React12.createElement(React12.Fragment, null, /* @__PURE__ */ React12.createElement(
+  });
+  const expandedRowRender = (record) => {
+    return /* @__PURE__ */ React12.createElement(
+      Table,
+      {
+        columns: thead.map((eachHeadEl) => ({
+          title: eachHeadEl.label,
+          dataIndex: eachHeadEl.name,
+          key: eachHeadEl.id
+        })).concat([{
+          title: "SubRow Actions",
+          dataIndex: "subRowActions",
+          key: "subRowActions"
+        }]),
+        dataSource: record.subRows,
+        pagination: false,
+        bordered: true
+      }
+    );
+  };
+  return /* @__PURE__ */ React12.createElement(
     Table,
     {
       columns,
-      expandable: { defaultExpandedRowKeys: ["0"] },
-      dataSource
+      dataSource,
+      pagination: false,
+      bordered: true,
+      expandable: { expandedRowRender }
     }
-  ));
+  );
 };
 export {
   AddMoreTable,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@apexcura/ui-components",
-  "version": "0.0.11-Beta7",
+  "version": "0.0.11-Beta71",
   "description": "Apex cura React components library",
   "keywords": [
     "apex cura",