@undp/carbon-library 1.0.175-CARBON-363.19 → 1.0.175-CARBON-363.30

package/dist/esm/index.js

@@ -26128,10 +26128,10 @@ var EditableCell = function (_a) {
     var editing = _a.editing, dataIndex = _a.dataIndex, title = _a.title; _a.inputType; _a.record; _a.index; var children = _a.children, restProps = __rest(_a, ["editing", "dataIndex", "title", "inputType", "record", "index", "children"]);
     var inputNode;
     if (dataIndex === "nationalPlanObjective") {
-        inputNode = React.createElement(Input, { placeholder: "Enter National Plan Objective" });
+        inputNode = React.createElement(Input, { onClick: function (event) { return event.stopPropagation(); }, placeholder: "Enter National Plan Objective" });
     }
     else if (dataIndex === "kpi") {
-        inputNode = React.createElement(InputNumber, { placeholder: "Enter Kpi" });
+        inputNode = React.createElement(InputNumber, { onClick: function (event) { return event.stopPropagation(); }, placeholder: "Enter Kpi" });
     }
     return (React.createElement("td", __assign({}, restProps), editing ? (React.createElement(Form.Item, { name: dataIndex, style: { margin: 0 }, rules: [
             {
@@ -26184,19 +26184,25 @@ var NdcDetailsComponent = function (props) {
     var _c = useState([]), periodItems = _c[0], setPeriodItems = _c[1];
     var _d = useState({}), selectedPeriod = _d[0], setSelectedPeriod = _d[1];
     var selectedDateRangeRef = useRef({});
-    var selectedNdcDetail = useRef({});
     var _e = useState(0), tableKey = _e[0], setTableKey = _e[1];
-    var _f = useConnection(), get = _f.get, post = _f.post, put = _f.put;
-    var _g = useState([]), ministryOrgList = _g[0], setMinistryOrgList = _g[1];
-    var _h = useState({}), actionInfo = _h[0], setActionInfo = _h[1];
-    var _j = useState(false), openConfirmationModal = _j[0], setOpenConfirmationModal = _j[1];
+    var _f = useState(0), subTableKey = _f[0]; _f[1];
+    var _g = useConnection(), get = _g.get, post = _g.post, put = _g.put;
+    var _h = useState([]), ministryOrgList = _h[0], setMinistryOrgList = _h[1];
+    var _j = useState({}), actionInfo = _j[0], setActionInfo = _j[1];
+    var _k = useState(false), openConfirmationModal = _k[0], setOpenConfirmationModal = _k[1];
     var form = Form.useForm()[0];
-    var _k = useState(-1), editingKey = _k[0], setEditingKey = _k[1];
-    var _l = useState(0), nextAvailableActionId = _l[0], setNextAvailableActionId = _l[1];
-    var _m = useState([]), expandedRowKeys = _m[0], setExpandedRowKeys = _m[1];
-    var _o = useState([]), subNdcDetailsForPeriod = _o[0], setSubNdcDetailsForPeriod = _o[1];
+    var _l = useState(-1), editingKey = _l[0], setEditingKey = _l[1];
+    var _m = useState(0), nextAvailableActionId = _m[0], setNextAvailableActionId = _m[1];
+    var _o = useState([]), expandedRowKeys = _o[0], setExpandedRowKeys = _o[1];
+    var _p = useState([]), subNdcDetailsForPeriod = _p[0], setSubNdcDetailsForPeriod = _p[1];
     var isEditing = function (record) { return record.id === editingKey; };
     var userInfoState = useUserContext().userInfoState;
+    useEffect(function () {
+        if (expandedRowKeys && expandedRowKeys.length > 0) {
+            var expandedKey = expandedRowKeys[0];
+            setNdcSubActionsForMainAction(expandedKey);
+        }
+    }, ndcDetailsData);
     var loginMinistry = (userInfoState === null || userInfoState === void 0 ? void 0 : userInfoState.companyRole) === CompanyRole.GOVERNMENT
         ? process.env.REACT_APP_GOVERNMENT_MINISTRY
             ? process.env.REACT_APP_GOVERNMENT_MINISTRY
@@ -26206,12 +26212,6 @@ var NdcDetailsComponent = function (props) {
             : undefined;
     var isGovernmentUser = (userInfoState === null || userInfoState === void 0 ? void 0 : userInfoState.companyRole) === CompanyRole.GOVERNMENT &&
         (userInfoState === null || userInfoState === void 0 ? void 0 : userInfoState.userRole) !== Role.ViewOnly;
-    var ndcMainDetailsForPeriod = selectedPeriod.key !== "add_new"
-        ? ndcDetailsData.filter(function (ndcDetail) {
-            return (ndcDetail.periodId === parseInt(selectedPeriod.key) &&
-                ndcDetail.actionType === NdcDetailsActionType.MainAction);
-        })
-        : [];
     var isMainNdcActionsEditable = !selectedPeriod.finalized &&
         (userInfoState === null || userInfoState === void 0 ? void 0 : userInfoState.companyRole) === CompanyRole.GOVERNMENT &&
         (userInfoState === null || userInfoState === void 0 ? void 0 : userInfoState.userRole) !== Role.ViewOnly;
@@ -26223,6 +26223,45 @@ var NdcDetailsComponent = function (props) {
                     (userInfoState === null || userInfoState === void 0 ? void 0 : userInfoState.companyName) === record.ministryName)) &&
             (userInfoState === null || userInfoState === void 0 ? void 0 : userInfoState.userRole) !== Role.ViewOnly);
     };
+    var isNdcActionEditable = function (record) {
+        if (record.actionType === NdcDetailsActionType.MainAction) {
+            return isMainNdcActionsEditable;
+        }
+        else if (record.actionType === NdcDetailsActionType.SubAction) {
+            return isSubNdcActionsEditable(record);
+        }
+    };
+    var ndcMainDetailsForPeriod = selectedPeriod.key !== "add_new"
+        ? ndcDetailsData.filter(function (ndcDetail) {
+            return (ndcDetail.periodId === parseInt(selectedPeriod.key) &&
+                ndcDetail.actionType === NdcDetailsActionType.MainAction);
+        })
+        : [];
+    var setNdcSubActionsForMainAction = function (mainActionId) {
+        var subNdcDetails = ndcDetailsData.filter(function (ndcDetail) {
+            return (ndcDetail.parentActionId === mainActionId &&
+                ndcDetail.actionType === NdcDetailsActionType.SubAction);
+        });
+        var emptySubNdcRow = {
+            id: nextAvailableActionId,
+            actionType: NdcDetailsActionType.SubAction,
+            nationalPlanObjective: "",
+            kpi: "",
+            ministryName: loginMinistry,
+            status: NdcDetailsActionStatus.New,
+            parentActionId: mainActionId,
+        };
+        if (!selectedPeriod.finalized) {
+            subNdcDetails = __spreadArray(__spreadArray([], subNdcDetails, true), [emptySubNdcRow], false);
+            setEditingKey(nextAvailableActionId);
+            setNextAvailableActionId(function (value) { return value + 1; });
+            form.setFieldsValue({
+                nationalPlanObjective: "",
+                kpi: "",
+            });
+        }
+        setSubNdcDetailsForPeriod(subNdcDetails);
+    };
     var inRange = function (num, min, max) {
         return num >= min && num <= max;
     };
@@ -26237,14 +26276,20 @@ var NdcDetailsComponent = function (props) {
                     updatedFields = (_a.sent());
                     updatedItem = __assign(__assign({}, row), updatedFields);
                     if (!(updatedItem.status === NdcDetailsActionStatus.New)) return [3 /*break*/, 3];
-                    updatedItem.status = NdcDetailsActionStatus.Pending;
-                    return [4 /*yield*/, post("national/programme/addNdcDetailsAction", __assign(__assign({}, updatedItem), { kpi: parseInt(updatedItem.kpi) }))];
+                    if (isGovernmentUser &&
+                        updatedItem.actionType === NdcDetailsActionType.SubAction) {
+                        updatedItem.status = NdcDetailsActionStatus.Approved;
+                    }
+                    else {
+                        updatedItem.status = NdcDetailsActionStatus.Pending;
+                    }
+                    return [4 /*yield*/, post("national/programme/addNdcDetailsAction", __assign(__assign({}, updatedItem), { kpi: parseInt(updatedItem.kpi.toString()) }))];
                 case 2:
                     _a.sent();
                     return [3 /*break*/, 5];
                 case 3:
                     updatedItem.status = NdcDetailsActionStatus.Pending;
-                    return [4 /*yield*/, put("national/programme/updateNdcDetailsAction", __assign(__assign({}, updatedItem), { kpi: parseInt(updatedItem.kpi) }))];
+                    return [4 /*yield*/, put("national/programme/updateNdcDetailsAction", __assign(__assign({}, updatedItem), { kpi: parseInt(updatedItem.kpi.toString()) }))];
                 case 4:
                     _a.sent();
                     _a.label = 5;
@@ -26261,7 +26306,9 @@ var NdcDetailsComponent = function (props) {
         });
     }); };
     var actionMenu = function (record) {
-        if (record.status === NdcDetailsActionStatus.Pending && isGovernmentUser) {
+        if (record.status === NdcDetailsActionStatus.Pending &&
+            isGovernmentUser &&
+            !selectedPeriod.finalized) {
             return (React.createElement(List, { className: "action-menu", size: "small", dataSource: [
                     {
                         text: t("ndc:approve"),
@@ -26307,6 +26354,15 @@ var NdcDetailsComponent = function (props) {
             align: "left",
             width: "40%",
             editable: true,
+            render: function (_, record) { return (React.createElement(Space, { size: "middle", onClick: function (event) {
+                    if (record.id &&
+                        isNdcActionEditable(record) &&
+                        !isEditing(record)) {
+                        form.setFieldsValue(__assign({}, record));
+                        setEditingKey(record.id);
+                    }
+                    event.stopPropagation();
+                } }, record.nationalPlanObjective ? (React.createElement("span", null, record.nationalPlanObjective)) : (React.createElement(Input, { placeholder: "Enter National Plan Objective" })))); },
         },
         {
             title: t("ndc:ndcColumnsKpi"),
@@ -26315,6 +26371,15 @@ var NdcDetailsComponent = function (props) {
             align: "left",
             width: "15%",
             editable: true,
+            render: function (_, record) { return (React.createElement(Space, { size: "middle", onClick: function (event) {
+                    if (record.id &&
+                        isNdcActionEditable(record) &&
+                        !isEditing(record)) {
+                        form.setFieldsValue(__assign({}, record));
+                        setEditingKey(record.id);
+                    }
+                    event.stopPropagation();
+                } }, record.kpi ? (React.createElement("span", null, record.kpi)) : (React.createElement(Input, { placeholder: "Enter Kpi" })))); },
         },
         {
             title: t("ndc:ndcColumnsMinistry"),
@@ -26324,7 +26389,15 @@ var NdcDetailsComponent = function (props) {
             width: "30%",
             editable: false,
             render: function (_, record) { return (React.createElement(React.Fragment, null,
-                React.createElement(Select, { disabled: !(isSubNdcActionsEditable(record) && isEditing(record)), defaultValue: record.ministryName ? record.ministryName : loginMinistry, style: { width: 320 }, onChange: function (value, option) {
+                React.createElement(Select, { disabled: !(isSubNdcActionsEditable(record) && isEditing(record)), defaultValue: record.ministryName ? record.ministryName : loginMinistry, onClick: function (event) {
+                        if (record.id &&
+                            isNdcActionEditable(record) &&
+                            !isEditing(record)) {
+                            form.setFieldsValue(__assign({}, record));
+                            setEditingKey(record.id);
+                        }
+                        event.stopPropagation();
+                    }, style: { width: 320 }, onChange: function (value, option) {
                         record.ministryName = option.label;
                         handleSave(record);
                     }, options: ministryOrgList }))); },
@@ -26432,50 +26505,45 @@ var NdcDetailsComponent = function (props) {
             keys.push(record.id);
         }
         setExpandedRowKeys(keys);
-        var subNdcDetails = ndcDetailsData.filter(function (ndcDetail) {
-            return (ndcDetail.parentActionId === record.id &&
-                ndcDetail.actionType === NdcDetailsActionType.SubAction);
-        });
-        var emptySubNdcRow = {
-            id: nextAvailableActionId,
-            actionType: NdcDetailsActionType.SubAction,
-            nationalPlanObjective: "",
-            kpi: "",
-            ministryName: loginMinistry,
-            status: NdcDetailsActionStatus.New,
-            parentActionId: record.id,
-        };
-        setEditingKey(nextAvailableActionId);
-        setNextAvailableActionId(function (value) { return value + 1; });
-        form.setFieldsValue({
-            nationalPlanObjective: "",
-            kpi: "",
-        });
-        setSubNdcDetailsForPeriod(__spreadArray(__spreadArray([], subNdcDetails, true), [emptySubNdcRow], false));
+        setNdcSubActionsForMainAction(record.id);
     };
-    function ndcDetailsTableContent() {
+    function addNewPeriodContent() {
+        return (React.createElement("div", null,
+            React.createElement(Row, { justify: "start", align: "middle", gutter: [16, 16] },
+                React.createElement(Col, { flex: "340px" },
+                    React.createElement(RangePicker, { onChange: onDateRangeChanged, picker: "year" })),
+                React.createElement(Col, { flex: "auto" },
+                    React.createElement(Button, { type: "primary", onClick: onAddNewPeriod, htmlType: "submit", loading: loading }, t("ndc:submit"))))));
+    }
+    function mainNdcActionTableContent() {
         return (React.createElement("div", null,
             React.createElement(Row, null,
                 React.createElement(Col, { span: 24 },
                     React.createElement(Form, { form: form, component: false },
                         React.createElement(Table, { key: tableKey, rowKey: "id", components: components, rowClassName: function () { return "editable-row"; }, bordered: true, dataSource: ndcMainDetailsForPeriod, columns: columns, expandedRowKeys: expandedRowKeys, onExpand: onMainTableRowExpand, expandable: {
-                                expandedRowRender: function (record) { return getSubNdcActionContent(record); },
+                                expandedRowRender: function (record) {
+                                    return subNdcActionTableContent();
+                                },
                                 indentSize: 0,
-                                //defaultExpandedRowKeys: [parseInt(selectedNdcDetail.current.id)],
                             }, onRow: function (record, rowIndex) {
                                 return {
                                     onClick: function () {
-                                        if (record.id && isMainNdcActionsEditable && !isEditing(record)) {
-                                            form.setFieldsValue(__assign({}, record));
-                                            setEditingKey(record.id);
-                                        }
-                                    },
-                                    onMouseLeave: function () {
                                         if (isEditing(record)) {
                                             handleSave(record);
                                         }
                                     },
                                 };
+                            }, onHeaderRow: function () {
+                                return {
+                                    onClick: function () {
+                                        if (editingKey === -1) {
+                                            var record = ndcDetailsData.find(function (item) { return item.id === editingKey; });
+                                            if (record) {
+                                                handleSave(record);
+                                            }
+                                        }
+                                    },
+                                };
                             }, footer: function () {
                                 return isGovernmentUser &&
                                     !selectedPeriod.finalized && (React.createElement(Row, { justify: "center" },
@@ -26488,6 +26556,29 @@ var NdcDetailsComponent = function (props) {
                 React.createElement(Button, { className: "mg-left-1", type: "primary", onClick: onClickedDeletePeriod, htmlType: "submit", loading: loading }, t("ndc:delete")),
                 React.createElement(Button, { className: "mg-left-1", type: "primary", onClick: onClickedFinalizePeriod, htmlType: "submit", loading: loading }, t("ndc:finalize")))) : ("")));
     }
+    function subNdcActionTableContent(record) {
+        console.log("d1 return subNdcActionTableContent", subNdcDetailsForPeriod);
+        return (React.createElement(Table, { key: subTableKey, rowKey: "id", components: components, rowClassName: function () { return "editable-row"; }, bordered: true, dataSource: subNdcDetailsForPeriod, onRow: function (record, rowIndex) {
+                return {
+                    onClick: function () {
+                        if (isEditing(record)) {
+                            handleSave(record);
+                        }
+                    },
+                };
+            }, onHeaderRow: function () {
+                return {
+                    onClick: function () {
+                        if (editingKey === -1) {
+                            var record_1 = ndcDetailsData.find(function (item) { return item.id === editingKey; });
+                            if (record_1) {
+                                handleSave(record_1);
+                            }
+                        }
+                    },
+                };
+            }, columns: columns, showHeader: false, pagination: false }));
+    }
     var onAddNewPeriod = function () { return __awaiter(void 0, void 0, void 0, function () {
         var periodItem_1, existingIndex, response, addedPeriodItem, updatedPeriodItem_1;
         return __generator(this, function (_a) {
@@ -26533,32 +26624,6 @@ var NdcDetailsComponent = function (props) {
         };
         selectedDateRangeRef.current = period;
     };
-    function addNewPeriodContent() {
-        return (React.createElement("div", null,
-            React.createElement(Row, { justify: "start", align: "middle", gutter: [16, 16] },
-                React.createElement(Col, { flex: "340px" },
-                    React.createElement(RangePicker, { onChange: onDateRangeChanged, picker: "year" })),
-                React.createElement(Col, { flex: "auto" },
-                    React.createElement(Button, { type: "primary", onClick: onAddNewPeriod, htmlType: "submit", loading: loading }, t("ndc:submit"))))));
-    }
-    function getSubNdcActionContent(record) {
-        selectedNdcDetail.current = record;
-        return (React.createElement(Table, { rowKey: "id", components: components, rowClassName: function () { return "editable-row"; }, bordered: true, dataSource: subNdcDetailsForPeriod, onRow: function (record, rowIndex) {
-                return {
-                    onClick: function () {
-                        if (record.id && isSubNdcActionsEditable(record) && !isEditing(record)) {
-                            form.setFieldsValue(__assign({}, record));
-                            setEditingKey(record.id);
-                        }
-                    },
-                    onMouseLeave: function () {
-                        if (isEditing(record)) {
-                            handleSave(record);
-                        }
-                    },
-                };
-            }, columns: columns, showHeader: false, pagination: false }));
-    }
     var onTabChange = function (key) {
         var selectedPeriod = periodItems.find(function (item) { return item.key === key; });
         if (selectedPeriod) {
@@ -26566,24 +26631,24 @@ var NdcDetailsComponent = function (props) {
         }
     };
     var onActionConfirmed = function () { return __awaiter(void 0, void 0, void 0, function () {
-        var response, response, response, result;
+        var actionResponse;
         return __generator(this, function (_a) {
             switch (_a.label) {
                 case 0:
                     if (!(actionInfo.action === "Approve")) return [3 /*break*/, 2];
-                    return [4 /*yield*/, get("national/programme/approveNdcDetailsAction", {
+                    return [4 /*yield*/, post("national/programme/approveNdcDetailsAction", {
                             id: actionInfo.recordId,
                         })];
                 case 1:
-                    response = _a.sent();
+                    actionResponse = _a.sent();
                     return [3 /*break*/, 8];
                 case 2:
                     if (!(actionInfo.action === "Reject")) return [3 /*break*/, 4];
-                    return [4 /*yield*/, get("national/programme/rejectNdcDetailsAction", {
+                    return [4 /*yield*/, post("national/programme/rejectNdcDetailsAction", {
                             id: actionInfo.recordId,
                         })];
                 case 3:
-                    response = _a.sent();
+                    actionResponse = _a.sent();
                     return [3 /*break*/, 8];
                 case 4:
                     if (!(actionInfo.action === "Finalize")) return [3 /*break*/, 6];
@@ -26591,10 +26656,7 @@ var NdcDetailsComponent = function (props) {
                             id: selectedPeriod.key,
                         })];
                 case 5:
-                    response = _a.sent();
-                    if (response) {
-                        fetchNdcDetailPeriods();
-                    }
+                    actionResponse = _a.sent();
                     return [3 /*break*/, 8];
                 case 6:
                     if (!(actionInfo.action === "Delete")) return [3 /*break*/, 8];
@@ -26602,12 +26664,12 @@ var NdcDetailsComponent = function (props) {
                             id: selectedPeriod.key,
                         })];
                 case 7:
-                    result = _a.sent();
-                    if (result) {
-                        fetchNdcDetailPeriods();
-                    }
+                    actionResponse = _a.sent();
                     _a.label = 8;
                 case 8:
+                    if (actionResponse) {
+                        fetchNdcDetailPeriods();
+                    }
                     setOpenConfirmationModal(false);
                     return [2 /*return*/];
             }
@@ -26704,7 +26766,7 @@ var NdcDetailsComponent = function (props) {
             React.createElement(Tabs, { centered: false, defaultActiveKey: "1", items: periodItems, activeKey: selectedPeriod.key, onChange: onTabChange })),
         React.createElement("div", null, selectedPeriod.key === "add_new"
             ? addNewPeriodContent()
-            : ndcDetailsTableContent()),
+            : mainNdcActionTableContent()),
         React.createElement(UserActionConfirmationModel, { t: t, actionInfo: actionInfo, onActionConfirmed: onActionConfirmed, onActionCanceled: onActionCanceled, openModal: openConfirmationModal, errorMsg: "", loading: false })));
 };