@undp/carbon-library 1.0.17-CARBON-363.35 → 1.0.17-CARBON-363.97

package/dist/cjs/types/Components/Common/AntComponents/antTableComponents.d.ts

@@ -9,13 +9,14 @@ interface EditableRowProps {
     index: number;
 }
 export declare const EditableRow: React.FC<EditableRowProps>;
-interface EditableCellProps {
-    title: React.ReactNode;
-    editable: boolean;
-    children: React.ReactNode;
-    dataIndex: keyof Item;
+interface EditableCellProps extends React.HTMLAttributes<HTMLElement> {
+    editing: boolean;
+    dataIndex: string;
+    title: any;
+    inputType: "number" | "text";
     record: Item;
-    handleSave: (record: Item) => void;
+    index: number;
+    children: React.ReactNode;
 }
 export declare const EditableCell: React.FC<EditableCellProps>;
 export {};

package/dist/cjs/types/Definitions/Definitions/ndcDetails.definitions.d.ts

@@ -7,10 +7,10 @@ export type Period = {
     deleted: boolean;
 };
 export type NdcDetail = {
-    id?: number;
+    id: number;
     actionType: NdcDetailsActionType;
     nationalPlanObjective: string;
-    kpi: number;
+    kpi: number | string;
     ministryName: string;
     periodId?: number;
     status: NdcDetailsActionStatus;
@@ -25,6 +25,7 @@ export declare enum NdcDetailsActionType {
     SubAction = "SubAction"
 }
 export declare enum NdcDetailsActionStatus {
+    New = "New",
     Pending = "Pending",
     Approved = "Approved",
     Rejected = "Rejected"

package/dist/esm/index.js

@@ -1,6 +1,6 @@
 import { PlusOutlined, FilterOutlined, BankOutlined, SafetyOutlined, AuditOutlined, ExperimentOutlined, UploadOutlined, UserOutlined, MinusCircleOutlined, StarOutlined, ToolOutlined, EyeOutlined, SearchOutlined, EllipsisOutlined, EditOutlined, DeleteOutlined, FileAddOutlined, CheckCircleOutlined, ExclamationCircleOutlined, BookOutlined, CaretDownOutlined, LockOutlined, EyeInvisibleOutlined, GlobalOutlined, FlagOutlined, LineChartOutlined, LikeOutlined, DislikeOutlined } from '@ant-design/icons';
 import { Input, Radio, Space, Row, Col, Button, Dropdown, Table, Empty, message, Form, Steps, Upload, InputNumber, Tooltip, Select, Modal, Alert, Skeleton, Card, Tag, Checkbox, DatePicker, Popover, List, Typography, Spin, Tabs, Progress } from 'antd';
-import React, { useState, useEffect, useRef, useContext } from 'react';
+import React, { useState, useEffect, useRef } from 'react';
 import { DateTime } from 'luxon';
 import { Buffer } from 'buffer';
 import PhoneInput, { formatPhoneNumberIntl, formatPhoneNumber } from 'react-phone-number-input';
@@ -26123,55 +26123,22 @@ var RegistryDashboardComponent = function (props) {
                                     lastUpdateTransferLocations))))))))) : ("")));
 };
 
-var EditableContext = React.createContext(null);
-var EditableRow = function (_a) {
-    _a.index; var props = __rest(_a, ["index"]);
-    var form = Form.useForm()[0];
-    return (React.createElement(Form, { form: form, component: false },
-        React.createElement(EditableContext.Provider, { value: form },
-            React.createElement("tr", __assign({}, props)))));
-};
+React.createContext(null);
 var EditableCell = function (_a) {
-    _a.title; var 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 = useState(false), editing = _b[0], setEditing = _b[1];
-    var inputRef = useRef(null);
-    var form = useContext(EditableContext);
-    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(Form.Item, { style: { margin: 0 }, name: dataIndex },
-            React.createElement(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));
+    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" });
     }
-    return React.createElement("td", __assign({}, restProps), childNode);
+    else if (dataIndex === "kpi") {
+        inputNode = React.createElement(InputNumber, { placeholder: "Enter Kpi" });
+    }
+    return (React.createElement("td", __assign({}, restProps), editing ? (React.createElement(Form.Item, { name: dataIndex, style: { margin: 0 }, rules: [
+            {
+                required: true,
+                message: "Please Input ".concat(title, "!"),
+            },
+        ] }, inputNode)) : (children)));
 };
 
 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";
@@ -26184,6 +26151,7 @@ var NdcDetailsActionType;
 })(NdcDetailsActionType || (NdcDetailsActionType = {}));
 var NdcDetailsActionStatus;
 (function (NdcDetailsActionStatus) {
+    NdcDetailsActionStatus["New"] = "New";
     NdcDetailsActionStatus["Pending"] = "Pending";
     NdcDetailsActionStatus["Approved"] = "Approved";
     NdcDetailsActionStatus["Rejected"] = "Rejected";
@@ -26222,6 +26190,12 @@ var NdcDetailsComponent = function (props) {
     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 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 isEditing = function (record) { return record.id === editingKey; };
     var userInfoState = useUserContext().userInfoState;
     var loginMinistry = (userInfoState === null || userInfoState === void 0 ? void 0 : userInfoState.companyRole) === CompanyRole.GOVERNMENT
         ? process.env.REACT_APP_GOVERNMENT_MINISTRY
@@ -26249,42 +26223,40 @@ 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 getSubNdcDetailsForPeriod = function (id) {
-        var subNdcDetails = ndcDetailsData.filter(function (ndcDetail) {
-            return (ndcDetail.parentActionId === id &&
-                ndcDetail.actionType === NdcDetailsActionType.SubAction);
-        });
-        var emptySubNdcRow = {
-            actionType: NdcDetailsActionType.SubAction,
-            nationalPlanObjective: "",
-            kpi: 0,
-            ministryName: loginMinistry,
-            status: NdcDetailsActionStatus.Pending,
-            parentActionId: id,
-        };
-        return __spreadArray(__spreadArray([], subNdcDetails, true), [emptySubNdcRow], false);
-    };
     var inRange = function (num, min, max) {
         return num >= min && num <= max;
     };
     var handleSave = function (row) { return __awaiter(void 0, void 0, void 0, function () {
-        var updatedItemIndex;
+        var updatedFields, updatedItem, exception_1;
         return __generator(this, function (_a) {
             switch (_a.label) {
                 case 0:
-                    updatedItemIndex = ndcDetailsData.findIndex(function (item) { return item.id === row.id; });
-                    if (!(updatedItemIndex === -1)) return [3 /*break*/, 2];
-                    return [4 /*yield*/, post("national/programme/addNdcDetailsAction", __assign(__assign({}, row), { kpi: parseInt(row.kpi) }))];
+                    _a.trys.push([0, 6, , 7]);
+                    return [4 /*yield*/, form.validateFields()];
                 case 1:
+                    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) }))];
+                case 2:
                     _a.sent();
-                    return [3 /*break*/, 4];
-                case 2: return [4 /*yield*/, put("national/programme/updateNdcDetailsAction", __assign(__assign({}, row), { kpi: parseInt(row.kpi) }))];
+                    return [3 /*break*/, 5];
                 case 3:
-                    _a.sent();
-                    _a.label = 4;
+                    updatedItem.status = NdcDetailsActionStatus.Pending;
+                    return [4 /*yield*/, put("national/programme/updateNdcDetailsAction", __assign(__assign({}, updatedItem), { kpi: parseInt(updatedItem.kpi) }))];
                 case 4:
+                    _a.sent();
+                    _a.label = 5;
+                case 5:
                     fetchNdcDetailActions();
-                    return [2 /*return*/];
+                    setEditingKey(-1);
+                    return [3 /*break*/, 7];
+                case 6:
+                    exception_1 = _a.sent();
+                    console.log("error", exception_1);
+                    return [3 /*break*/, 7];
+                case 7: return [2 /*return*/];
             }
         });
     }); };
@@ -26335,8 +26307,6 @@ var NdcDetailsComponent = function (props) {
             align: "left",
             width: "40%",
             editable: true,
-            render: function (_, record) { return (React.createElement(React.Fragment, null, record.nationalPlanObjective ? (React.createElement(Space, { size: "middle" },
-                React.createElement("span", null, record.nationalPlanObjective))) : (React.createElement("input", { placeholder: "Please add the National Plan Objective", className: "ant-input", type: "text" })))); },
         },
         {
             title: t("ndc:ndcColumnsKpi"),
@@ -26345,8 +26315,6 @@ var NdcDetailsComponent = function (props) {
             align: "left",
             width: "15%",
             editable: true,
-            render: function (_, record) { return (React.createElement(React.Fragment, null, record.kpi ? (React.createElement(Space, { size: "middle" },
-                React.createElement("span", null, record.kpi))) : (React.createElement("input", { placeholder: "Enter Kpi", className: "ant-input", type: "text" })))); },
         },
         {
             title: t("ndc:ndcColumnsMinistry"),
@@ -26356,7 +26324,10 @@ var NdcDetailsComponent = function (props) {
             width: "30%",
             editable: false,
             render: function (_, record) { return (React.createElement(React.Fragment, null,
-                React.createElement(Select, { disabled: !isSubNdcActionsEditable(record), defaultValue: record.ministryName ? record.ministryName : loginMinistry, style: { width: 320 }, onChange: function () { }, options: ministryOrgList }))); },
+                React.createElement(Select, { disabled: !(isSubNdcActionsEditable(record) && isEditing(record)), defaultValue: record.ministryName ? record.ministryName : loginMinistry, style: { width: 320 }, onChange: function (value, option) {
+                        record.ministryName = option.label;
+                        handleSave(record);
+                    }, options: ministryOrgList }))); },
         },
         {
             title: t("ndc:ndcColumnsStatus"),
@@ -26368,7 +26339,8 @@ var NdcDetailsComponent = function (props) {
             render: function (_, record) {
                 var menu = actionMenu(record);
                 return (React.createElement(React.Fragment, null,
-                    record.actionType === NdcDetailsActionType.SubAction ? (React.createElement(Tooltip, { title: record.status, color: TooltipColor, key: TooltipColor },
+                    record.actionType === NdcDetailsActionType.SubAction &&
+                        record.status !== NdcDetailsActionStatus.New ? (React.createElement(Tooltip, { title: record.status, color: TooltipColor, key: TooltipColor },
                         React.createElement(Tag, { className: "clickable", color: getNdcActionStatusTagType(record.status) }, addSpaces(record.status)))) : (""),
                     record.actionType === NdcDetailsActionType.SubAction && menu ? (React.createElement(Popover, { placement: "bottomRight", content: menu, trigger: "click" },
                         React.createElement(EllipsisOutlined, { rotate: 90, style: {
@@ -26386,50 +26358,44 @@ var NdcDetailsComponent = function (props) {
         return __assign(__assign({}, col), { onCell: function (record) {
                 return {
                     record: record,
-                    editable: record.actionType === NdcDetailsActionType.MainAction
-                        ? isMainNdcActionsEditable
-                        : isSubNdcActionsEditable(record),
+                    editing: isEditing(record),
                     dataIndex: col.dataIndex,
                     title: col.title,
-                    handleSave: handleSave,
                 };
             } });
     });
     function onClickedAddNewNdcDetail() {
         return __awaiter(this, void 0, void 0, function () {
-            var periodId, newData, response, newlyCreatedNdcAction_1;
+            var periodId, newData_1;
             return __generator(this, function (_a) {
-                switch (_a.label) {
-                    case 0:
-                        if (!(selectedPeriod.key !== "add_new")) return [3 /*break*/, 2];
-                        periodId = parseInt(selectedPeriod.key);
-                        newData = {
-                            actionType: NdcDetailsActionType.MainAction,
-                            nationalPlanObjective: "",
-                            kpi: 0,
-                            ministryName: loginMinistry,
-                            periodId: periodId,
-                            status: NdcDetailsActionStatus.Pending,
-                        };
-                        return [4 /*yield*/, post("national/programme/addNdcDetailsAction", __assign({}, newData))];
-                    case 1:
-                        response = _a.sent();
-                        if (response && response.data) {
-                            newlyCreatedNdcAction_1 = response.data;
-                            setNdcDetailsData(function (ndcDetailsData) { return __spreadArray(__spreadArray([], ndcDetailsData, true), [
-                                newlyCreatedNdcAction_1,
-                            ], false); });
-                            setTableKey(function (key) { return key + 1; });
-                        }
-                        _a.label = 2;
-                    case 2: return [2 /*return*/];
+                if (selectedPeriod.key !== "add_new") {
+                    form.setFieldsValue({
+                        nationalPlanObjective: "",
+                        kpi: "",
+                    });
+                    periodId = parseInt(selectedPeriod.key);
+                    newData_1 = {
+                        id: nextAvailableActionId,
+                        actionType: NdcDetailsActionType.MainAction,
+                        nationalPlanObjective: "",
+                        kpi: "",
+                        ministryName: loginMinistry,
+                        periodId: periodId,
+                        status: NdcDetailsActionStatus.New,
+                    };
+                    setEditingKey(nextAvailableActionId);
+                    setNextAvailableActionId(function (value) { return value + 1; });
+                    setNdcDetailsData(function (ndcDetailsData) { return __spreadArray(__spreadArray([], ndcDetailsData, true), [
+                        newData_1,
+                    ], false); });
+                    setTableKey(function (key) { return key + 1; });
                 }
+                return [2 /*return*/];
             });
         });
     }
     var components = {
         body: {
-            row: EditableRow,
             cell: EditableCell,
         },
     };
@@ -26460,22 +26426,64 @@ var NdcDetailsComponent = function (props) {
             return [2 /*return*/];
         });
     }); };
+    var onMainTableRowExpand = function (expanded, record) {
+        var keys = [];
+        if (expanded) {
+            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));
+    };
     function ndcDetailsTableContent() {
         return (React.createElement("div", null,
             React.createElement(Row, null,
                 React.createElement(Col, { span: 24 },
-                    React.createElement(Table, { key: tableKey, rowKey: "id", components: components, rowClassName: function () { return "editable-row"; }, bordered: true, dataSource: ndcMainDetailsForPeriod, columns: columns, expandable: {
-                            expandedRowRender: function (record) { return getSubNdcActionContent(record); },
-                            indentSize: 0,
-                            //defaultExpandedRowKeys: [parseInt(selectedNdcDetail.current.id)],
-                        }, footer: function () {
-                            return isGovernmentUser &&
-                                !selectedPeriod.finalized && (React.createElement(Row, { justify: "center" },
-                                React.createElement(Button, { onClick: onClickedAddNewNdcDetail, type: "default", style: {
-                                        marginBottom: 16,
-                                        width: "100%",
-                                    } }, t("ndc:addNdcAction"))));
-                        } }))),
+                    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); },
+                                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);
+                                        }
+                                    },
+                                };
+                            }, footer: function () {
+                                return isGovernmentUser &&
+                                    !selectedPeriod.finalized && (React.createElement(Row, { justify: "center" },
+                                    React.createElement(Button, { onClick: onClickedAddNewNdcDetail, type: "default", style: {
+                                            marginBottom: 16,
+                                            width: "100%",
+                                        } }, t("ndc:addNdcAction"))));
+                            } })))),
             isGovernmentUser && !selectedPeriod.finalized ? (React.createElement(Row, { justify: "end" },
                 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")))) : ("")));
@@ -26535,7 +26543,21 @@ var NdcDetailsComponent = function (props) {
     }
     function getSubNdcActionContent(record) {
         selectedNdcDetail.current = record;
-        return (React.createElement(Table, { rowKey: "id", components: components, rowClassName: function () { return "editable-row"; }, bordered: true, dataSource: getSubNdcDetailsForPeriod(record.id), columns: columns, showHeader: false, pagination: false }));
+        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; });
@@ -26554,7 +26576,6 @@ var NdcDetailsComponent = function (props) {
                         })];
                 case 1:
                     response = _a.sent();
-                    console.log("response", response);
                     return [3 /*break*/, 8];
                 case 2:
                     if (!(actionInfo.action === "Reject")) return [3 /*break*/, 4];
@@ -26563,7 +26584,6 @@ var NdcDetailsComponent = function (props) {
                         })];
                 case 3:
                     response = _a.sent();
-                    console.log("response", response);
                     return [3 /*break*/, 8];
                 case 4:
                     if (!(actionInfo.action === "Finalize")) return [3 /*break*/, 6];
@@ -26572,7 +26592,6 @@ var NdcDetailsComponent = function (props) {
                         })];
                 case 5:
                     response = _a.sent();
-                    console.log("response", response);
                     if (response) {
                         fetchNdcDetailPeriods();
                     }
@@ -26635,13 +26654,15 @@ var NdcDetailsComponent = function (props) {
         });
     }); };
     var fetchNdcDetailActions = function () { return __awaiter(void 0, void 0, void 0, function () {
-        var response;
+        var response, maxActionId;
         return __generator(this, function (_a) {
             switch (_a.label) {
                 case 0: return [4 /*yield*/, get("national/programme/queryNdcDetailsAction")];
                 case 1:
                     response = _a.sent();
                     if (response && response.data) {
+                        maxActionId = Math.max.apply(Math, response.data.map(function (item) { return item.id; }));
+                        setNextAvailableActionId(maxActionId + 1);
                         setNdcDetailsData(response.data);
                     }
                     return [2 /*return*/];
@@ -26655,7 +26676,6 @@ var NdcDetailsComponent = function (props) {
                 case 0: return [4 /*yield*/, get("national/organisation/getMinistries")];
                 case 1:
                     response = _a.sent();
-                    console.log("fetchMinistries", response);
                     if (response && response.data) {
                         ministryOrgDetails = response.data.map(function (value) {
                             return {