@undp/carbon-library 1.0.160 → 1.0.163-ndc-action-add-table-fixes.0

package/dist/cjs/index.js

@@ -24455,16 +24455,60 @@ var RegistryDashboardComponent = function (props) {
                                     lastUpdateTransferLocations))))))))) : ("")));
 };
 
-React.createContext(null);
+var EditableContext = React.createContext(null);
+var EditableRow = function (_a) {
+    _a.index; var props = __rest(_a, ["index"]);
+    var form = antd.Form.useForm()[0];
+    return (React.createElement(antd.Form, { form: form, component: false },
+        React.createElement(EditableContext.Provider, { value: form },
+            React.createElement("tr", __assign({}, props)))));
+};
 var EditableCell = function (_a) {
-    var editing = _a.editing, dataIndex = _a.dataIndex, title = _a.title, inputType = _a.inputType; _a.record; _a.index; var children = _a.children, restProps = __rest(_a, ["editing", "dataIndex", "title", "inputType", "record", "index", "children"]);
-    var inputNode = inputType === "number" ? React.createElement(antd.InputNumber, null) : React.createElement(antd.Input, null);
-    return (React.createElement("td", __assign({}, restProps), editing ? (React.createElement(antd.Form.Item, { name: dataIndex, style: { margin: 0 }, rules: [
-            {
-                required: true,
-                message: "Please Input ".concat(title, "!"),
-            },
-        ] }, inputNode)) : (children)));
+    var title = _a.title, editable = _a.editable, children = _a.children, dataIndex = _a.dataIndex, record = _a.record, handleSave = _a.handleSave, restProps = __rest(_a, ["title", "editable", "children", "dataIndex", "record", "handleSave"]);
+    var _b = React.useState(false), editing = _b[0], setEditing = _b[1];
+    var inputRef = React.useRef(null);
+    var form = React.useContext(EditableContext);
+    React.useEffect(function () {
+        if (editing) {
+            inputRef.current.focus();
+        }
+    }, [editing]);
+    var toggleEdit = function () {
+        var _a;
+        setEditing(!editing);
+        form.setFieldsValue((_a = {}, _a[dataIndex] = record[dataIndex], _a));
+    };
+    var save = function () { return __awaiter(void 0, void 0, void 0, function () {
+        var values, errInfo_1;
+        return __generator(this, function (_a) {
+            switch (_a.label) {
+                case 0:
+                    _a.trys.push([0, 2, , 3]);
+                    return [4 /*yield*/, form.validateFields()];
+                case 1:
+                    values = _a.sent();
+                    toggleEdit();
+                    handleSave(__assign(__assign({}, record), values));
+                    return [3 /*break*/, 3];
+                case 2:
+                    errInfo_1 = _a.sent();
+                    console.log("Save failed:", errInfo_1);
+                    return [3 /*break*/, 3];
+                case 3: return [2 /*return*/];
+            }
+        });
+    }); };
+    var childNode = children;
+    if (editable) {
+        childNode = editing ? (React.createElement(antd.Form.Item, { style: { margin: 0 }, name: dataIndex, rules: [
+                {
+                    required: true,
+                    message: "".concat(title, " is required."),
+                },
+            ] },
+            React.createElement(antd.Input, { ref: inputRef, onPressEnter: save, onBlur: save }))) : (React.createElement("div", { className: "editable-cell-value-wrap", style: { paddingRight: 24, minWidth: "100px", minHeight: "20px" }, onClick: toggleEdit }, children));
+    }
+    return React.createElement("td", __assign({}, restProps), childNode);
 };
 
 var css_248z$4 = ".ndc-steps-actions {\n  display: flex;\n  flex-direction: row-reverse;\n  margin-right: 1rem;\n  justify-content: center; }\n  .ndc-steps-actions .action-btn {\n    border: 1px solid #16b1ff;\n    color: #16b1ff;\n    margin-right: 1rem; }\n  .ndc-steps-actions .back-btn {\n    border: 1px solid rgba(140, 140, 140, 0.7);\n    color: rgba(140, 140, 140, 0.7);\n    margin-right: 1rem; }\n  .ndc-steps-actions .mg-left-1 {\n    margin-left: 1rem; }\n";
@@ -24487,17 +24531,7 @@ var NdcDetailsComponent = function (props) {
     var addedNdcDetailId = React.useRef(0);
     var selectedNdcDetail = React.useRef({});
     var _e = React.useState(0), tableKey = _e[0], setTableKey = _e[1];
-    var form = antd.Form.useForm()[0];
-    var _f = React.useState(""), editingKey = _f[0], setEditingKey = _f[1];
     var userInfoState = useUserContext().userInfoState;
-    var isEditing = function (record) { return record.key === editingKey; };
-    var onEditRow = function (record) {
-        form.setFieldsValue(__assign({ nationalPlanObj: "", kpi: "", ministry: "" }, record));
-        setEditingKey(record.key);
-    };
-    var onEditCancel = function () {
-        setEditingKey("");
-    };
     var isAddRangeVisible = function () {
         return (((userInfoState === null || userInfoState === void 0 ? void 0 : userInfoState.companyRole) === exports.CompanyRole.MINISTRY ||
             (userInfoState === null || userInfoState === void 0 ? void 0 : userInfoState.companyRole) === exports.CompanyRole.GOVERNMENT) &&
@@ -24510,63 +24544,62 @@ var NdcDetailsComponent = function (props) {
     var inRange = function (num, min, max) {
         return num >= min && num <= max;
     };
-    var onHandleSave = function (record) { return __awaiter(void 0, void 0, void 0, function () {
-        var updatedNdcDetails, editedData, index, parentIndex, parentItem, itemIndex, errInfo_1;
-        return __generator(this, function (_a) {
-            switch (_a.label) {
-                case 0:
-                    _a.trys.push([0, 2, , 3]);
-                    updatedNdcDetails = __spreadArray([], ndcDetailsData, true);
-                    return [4 /*yield*/, form.validateFields()];
-                case 1:
-                    editedData = (_a.sent());
-                    if (record) {
-                        if (record.type === NdcActionType.main) {
-                            index = updatedNdcDetails.findIndex(function (item) { return record.key === item.key; });
-                            updatedNdcDetails.splice(index, 1, __assign(__assign({}, record), editedData));
-                            setNdcDetailsData(updatedNdcDetails);
+    function onAddNewSubNdcDetail() {
+        var range = selectedTab.split('-');
+        var ndcDetail = ndcDetailsData.find(function (item) { return item.key === selectedNdcDetail.current.key; });
+        var ndcDetailItemIndex = ndcDetailsData.findIndex(function (item) { return item.key === selectedNdcDetail.current.key; });
+        if (ndcDetail) {
+            addedNdcDetailId.current = addedNdcDetailId.current + 1;
+            var newData = {
+                key: addedNdcDetailId.current,
+                startDate: new Date("".concat(Number(range[0]), "-01-24 23:12:00")),
+                endDate: new Date("".concat(Number(range[0]), "-12-24 23:12:00")),
+                ndcActionId: ndcDetail === null || ndcDetail === void 0 ? void 0 : ndcDetail.key,
+                nationalPlanObj: '',
+                kpi: '',
+                ministry: '',
+            };
+            if (!ndcDetail.subNdcDetails) {
+                ndcDetail.subNdcDetails = [];
+            }
+            ndcDetail.subNdcDetails.push(newData);
+        }
+        ndcDetailsData[ndcDetailItemIndex] = ndcDetail;
+        setNdcDetailsData(ndcDetailsData);
+        setTableKey(function (key) { return key + 1; });
+    }
+    var handleSave = function (row) {
+        setNdcDetailsData(function (prevData) {
+            var newData = JSON.parse(JSON.stringify(prevData));
+            if (row.type === NdcActionType.main) {
+                var index = newData.findIndex(function (item) { return row.key === item.key; });
+                if (index !== -1) {
+                    newData[index] = __assign(__assign({}, newData[index]), row);
+                }
+            }
+            else {
+                var parentIndex = newData.findIndex(function (item) { return row.ndcActionId === item.key; });
+                var parentItem = newData[parentIndex];
+                if (parentItem) {
+                    if (parentItem.subNdcDetails) {
+                        var itemIndex = parentItem.subNdcDetails.findIndex(function (item) { return row.key === item.key; });
+                        if (itemIndex === -1) {
+                            parentItem.subNdcDetails.push(row);
                         }
                         else {
-                            parentIndex = updatedNdcDetails.findIndex(function (item) { return record.ndcActionId === item.key; });
-                            parentItem = updatedNdcDetails[parentIndex];
-                            if (parentItem) {
-                                if (parentItem.subNdcDetails) {
-                                    itemIndex = parentItem.subNdcDetails.findIndex(function (item) { return record.key === item.key; });
-                                    if (itemIndex !== -1) {
-                                        parentItem.subNdcDetails.splice(itemIndex, 1, __assign(__assign({}, record), editedData));
-                                    }
-                                    if (itemIndex + 1 === parentItem.subNdcDetails.length) {
-                                        parentItem.subNdcDetails.push({
-                                            key: ++addedNdcDetailId.current,
-                                            ndcActionId: parentItem.key,
-                                            type: NdcActionType.sub,
-                                            startDate: new Date("2019-03-25"),
-                                            endDate: new Date("2020-03-25"),
-                                            nationalPlanObj: "",
-                                            kpi: "",
-                                            ministry: "",
-                                        });
-                                    }
-                                }
-                                updatedNdcDetails.splice(parentIndex, 1, __assign({}, parentItem));
-                                setNdcDetailsData(updatedNdcDetails);
-                            }
+                            parentItem.subNdcDetails[itemIndex] = __assign({}, row);
                         }
-                        setEditingKey("");
-                        setTableKey(function (key) { return key + 1; });
                     }
                     else {
-                        throw new Error("Save failed");
+                        parentItem.subNdcDetails = [row];
                     }
-                    return [3 /*break*/, 3];
-                case 2:
-                    errInfo_1 = _a.sent();
-                    console.log("Validate Failed:", errInfo_1);
-                    return [3 /*break*/, 3];
-                case 3: return [2 /*return*/];
+                }
+                newData[parentIndex] = __assign({}, parentItem);
+                setTableKey(function (key) { return key + 1; });
             }
+            return newData;
         });
-    }); };
+    };
     var getNdcDetailsForPeriod = function () {
         var range = selectedTab.split("-");
         if (range.length > 1) {
@@ -24580,8 +24613,18 @@ var NdcDetailsComponent = function (props) {
         }
     };
     var getSubNdcDetails = function (key) {
+        var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m;
         var ndcDetail = ndcDetailsData.find(function (item) { return item.key === key; });
         if (ndcDetail) {
+            if (((_b = ndcDetail === null || ndcDetail === void 0 ? void 0 : ndcDetail.subNdcDetails[((_a = ndcDetail === null || ndcDetail === void 0 ? void 0 : ndcDetail.subNdcDetails) === null || _a === void 0 ? void 0 : _a.length) - 1]) === null || _b === void 0 ? void 0 : _b.ministry.trim()) !== '' &&
+                ((_d = ndcDetail === null || ndcDetail === void 0 ? void 0 : ndcDetail.subNdcDetails[((_c = ndcDetail === null || ndcDetail === void 0 ? void 0 : ndcDetail.subNdcDetails) === null || _c === void 0 ? void 0 : _c.length) - 1]) === null || _d === void 0 ? void 0 : _d.ministry) &&
+                ((_f = ndcDetail === null || ndcDetail === void 0 ? void 0 : ndcDetail.subNdcDetails[((_e = ndcDetail === null || ndcDetail === void 0 ? void 0 : ndcDetail.subNdcDetails) === null || _e === void 0 ? void 0 : _e.length) - 1]) === null || _f === void 0 ? void 0 : _f.nationalPlanObj.trim()) !==
+                    '' &&
+                ((_h = ndcDetail === null || ndcDetail === void 0 ? void 0 : ndcDetail.subNdcDetails[((_g = ndcDetail === null || ndcDetail === void 0 ? void 0 : ndcDetail.subNdcDetails) === null || _g === void 0 ? void 0 : _g.length) - 1]) === null || _h === void 0 ? void 0 : _h.nationalPlanObj) &&
+                String((_k = ndcDetail === null || ndcDetail === void 0 ? void 0 : ndcDetail.subNdcDetails[((_j = ndcDetail === null || ndcDetail === void 0 ? void 0 : ndcDetail.subNdcDetails) === null || _j === void 0 ? void 0 : _j.length) - 1]) === null || _k === void 0 ? void 0 : _k.kpi).trim() !== '' &&
+                String((_m = ndcDetail === null || ndcDetail === void 0 ? void 0 : ndcDetail.subNdcDetails[((_l = ndcDetail === null || ndcDetail === void 0 ? void 0 : ndcDetail.subNdcDetails) === null || _l === void 0 ? void 0 : _l.length) - 1]) === null || _m === void 0 ? void 0 : _m.kpi)) {
+                onAddNewSubNdcDetail();
+            }
             return ndcDetail.subNdcDetails;
         }
         else {
@@ -24597,7 +24640,7 @@ var NdcDetailsComponent = function (props) {
             editable: true,
             width: "50%",
             render: function (_, record) { return (React.createElement(React.Fragment, null, record.nationalPlanObj ? (React.createElement(antd.Space, { size: "middle" },
-                React.createElement("span", null, record.nationalPlanObj))) : (React.createElement("input", { placeholder: "Please add the National Plan Objective", className: "ant-input", disabled: true, type: "text" })))); },
+                React.createElement("span", null, record.nationalPlanObj))) : (React.createElement("input", { placeholder: "Please add the National Plan Objective", className: "ant-input", type: "text" })))); },
         },
         {
             title: t("ndc:ndcColumnsKpi"),
@@ -24607,7 +24650,7 @@ var NdcDetailsComponent = function (props) {
             editable: true,
             width: "10%",
             render: function (_, record) { return (React.createElement(React.Fragment, null, record.nationalPlanObj ? (React.createElement(antd.Space, { size: "middle" },
-                React.createElement("span", null, record.kpi))) : (React.createElement("input", { placeholder: "Enter Kpi", className: "ant-input", disabled: true, type: "text" })))); },
+                React.createElement("span", null, record.kpi))) : (React.createElement("input", { placeholder: "Enter Kpi", className: "ant-input", type: "text" })))); },
         },
         {
             title: "Ministry",
@@ -24615,26 +24658,9 @@ var NdcDetailsComponent = function (props) {
             key: "ministry",
             align: "left",
             editable: true,
-            width: "30%",
+            width: "40%",
             render: function (_, record) { return (React.createElement(React.Fragment, null, record.nationalPlanObj ? (React.createElement(antd.Space, { size: "middle" },
-                React.createElement("span", null, record.ministry))) : (React.createElement("input", { placeholder: "Please add the Ministry name", className: "ant-input", disabled: true, type: "text" })))); },
-        },
-        {
-            title: "Action",
-            dataIndex: "operation",
-            width: "10%",
-            render: function (_, record) {
-                var editable = isEditing(record);
-                return editable ? (React.createElement("span", null,
-                    React.createElement(antd.Tooltip, { title: "Save" },
-                        React.createElement(antd.Typography.Link, { onClick: function () { return onHandleSave(record); }, style: { marginRight: 20 } },
-                            React.createElement(icons.SaveOutlined, null))),
-                    React.createElement(antd.Tooltip, { title: "Cancel" },
-                        React.createElement(antd.Typography.Link, { onClick: onEditCancel, style: { marginRight: 8 } },
-                            React.createElement(icons.ExclamationCircleOutlined, null))))) : (React.createElement(antd.Tooltip, { title: "Edit" },
-                    React.createElement(antd.Typography.Link, { disabled: editingKey !== "", onClick: function () { return onEditRow(record); } },
-                        React.createElement(icons.EditOutlined, null))));
-            },
+                React.createElement("span", null, record.ministry))) : (React.createElement("input", { placeholder: "Please add the Ministry name", className: "ant-input", type: "text" })))); },
         },
     ];
     var columns = defaultColumns.map(function (col) {
@@ -24646,7 +24672,7 @@ var NdcDetailsComponent = function (props) {
                 editable: col.editable,
                 dataIndex: col.dataIndex,
                 title: col.title,
-                editing: isEditing(record),
+                handleSave: handleSave,
             }); } });
     });
     function onAddNewNdcDetail() {
@@ -24677,11 +24703,32 @@ var NdcDetailsComponent = function (props) {
     }
     var components = {
         body: {
+            row: EditableRow,
             cell: EditableCell,
         },
     };
+    //commented because rendering issue
     function ndcDetailsTableContent() {
-        return React.createElement("div", null);
+        return (React.createElement("div", null)
+        // <div>
+        //   <Button
+        //     onClick={onAddNewNdcDetail}
+        //     type="primary"
+        //     style={{
+        //       marginBottom: 16,
+        //     }}
+        //   >
+        //     Add a row
+        //   </Button>
+        //   <Table
+        //     components={components}
+        //     rowClassName={() => 'editable-row'}
+        //     bordered
+        //     dataSource={ndcDetailsData}
+        //     columns={columns}
+        //   />
+        // </div>
+        );
     }
     var onCancelPeriod = function () { };
     var onAddNewPeriod = function () {
@@ -24738,7 +24785,6 @@ var NdcDetailsComponent = function (props) {
     }
     var onTabChange = function (key) {
         setSelectedTab(key);
-        setEditingKey("");
     };
     React.useEffect(function () {
         var defaultNdcDetails = [
@@ -25012,18 +25058,17 @@ var NdcDetailsComponent = function (props) {
             React.createElement(antd.Tabs, { centered: false, defaultActiveKey: "1", items: periodItems, activeKey: selectedTab, onChange: onTabChange })),
         selectedTab !== "add_new" && (React.createElement("div", null,
             React.createElement("div", null,
-                React.createElement(antd.Form, { form: form, component: false },
-                    React.createElement(antd.Table, { key: tableKey, components: components, rowClassName: function () { return "editable-row"; }, bordered: true, dataSource: getNdcDetailsForPeriod(), columns: columns, expandable: {
-                            expandedRowRender: function (record) { return getSubNdcActionContent(record); },
-                            indentSize: 0,
-                            defaultExpandedRowKeys: [selectedNdcDetail.current.key],
-                        }, footer: function () {
-                            return isAddNdcActionVisible() && (React.createElement(antd.Row, { justify: "center" },
-                                React.createElement(antd.Button, { onClick: onAddNewNdcDetail, type: "default", style: {
-                                        marginBottom: 16,
-                                        width: "100%",
-                                    } }, t("ndc:addNdcAction"))));
-                        } })))))));
+                React.createElement(antd.Table, { key: tableKey, components: components, rowClassName: function () { return "editable-row"; }, bordered: true, dataSource: getNdcDetailsForPeriod(), columns: columns, expandable: {
+                        expandedRowRender: function (record) { return getSubNdcActionContent(record); },
+                        indentSize: 0,
+                        defaultExpandedRowKeys: [selectedNdcDetail.current.key],
+                    }, footer: function () {
+                        return isAddNdcActionVisible() && (React.createElement(antd.Row, { justify: "center" },
+                            React.createElement(antd.Button, { onClick: onAddNewNdcDetail, type: "default", style: {
+                                    marginBottom: 16,
+                                    width: "100%",
+                                } }, t("ndc:addNdcAction"))));
+                    } }))))));
 };
 
 var ImgWithFallback = function (_a) {