@undp/carbon-library 1.0.16-CARBON-363.15 → 1.0.16-CARBON-363.41

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

@@ -0,0 +1,8 @@
+export type Period = {
+    id?: number;
+    key?: string;
+    startYear: number;
+    endYear: number;
+    finalized?: boolean;
+    deleted?: boolean;
+};

package/dist/esm/index.js

@@ -24734,23 +24734,21 @@ var NdcActionType;
     NdcActionType[NdcActionType["sub"] = 1] = "sub";
 })(NdcActionType || (NdcActionType = {}));
 var NdcDetailsComponent = function (props) {
-    var t = props.t; props.useConnection; var useUserContext = props.useUserContext;
+    var t = props.t, useConnection = props.useConnection, useUserContext = props.useUserContext;
     var RangePicker = DatePicker.RangePicker;
     var _a = useState([]), ndcDetailsData = _a[0], setNdcDetailsData = _a[1];
     var _b = useState(false), loading = _b[0]; _b[1];
-    var periodItemsRef = useRef([]);
     var _c = useState([]), periodItems = _c[0], setPeriodItems = _c[1];
-    var _d = useState("add_new"), selectedTab = _d[0], setSelectedTab = _d[1];
-    var selectedPeriod = useRef({});
+    var _d = useState({}), selectedPeriod = _d[0], setSelectedPeriod = _d[1];
+    var selectedDateRangeRef = useRef({});
     var addedNdcDetailId = useRef(0);
     var selectedNdcDetail = useRef({});
     var _e = useState(0), tableKey = _e[0], setTableKey = _e[1];
+    var _f = useConnection(), get = _f.get, post = _f.post;
     var userInfoState = useUserContext().userInfoState;
-    var isAddRangeVisible = function () {
-        return (((userInfoState === null || userInfoState === void 0 ? void 0 : userInfoState.companyRole) === CompanyRole.MINISTRY ||
-            (userInfoState === null || userInfoState === void 0 ? void 0 : userInfoState.companyRole) === CompanyRole.GOVERNMENT) &&
-            (userInfoState === null || userInfoState === void 0 ? void 0 : userInfoState.userRole) !== Role.ViewOnly);
-    };
+    var isAddRangeVisible = ((userInfoState === null || userInfoState === void 0 ? void 0 : userInfoState.companyRole) === CompanyRole.MINISTRY ||
+        (userInfoState === null || userInfoState === void 0 ? void 0 : userInfoState.companyRole) === CompanyRole.GOVERNMENT) &&
+        (userInfoState === null || userInfoState === void 0 ? void 0 : userInfoState.userRole) !== Role.ViewOnly;
     var isAddNdcActionVisible = function () {
         return ((userInfoState === null || userInfoState === void 0 ? void 0 : userInfoState.companyRole) === CompanyRole.GOVERNMENT &&
             (userInfoState === null || userInfoState === void 0 ? void 0 : userInfoState.userRole) !== Role.ViewOnly);
@@ -24759,7 +24757,8 @@ var NdcDetailsComponent = function (props) {
         return num >= min && num <= max;
     };
     function onAddNewSubNdcDetail() {
-        var range = selectedTab.split('-');
+        //const range = selectedPeriod.split("-");
+        var range = [];
         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) {
@@ -24769,9 +24768,9 @@ var NdcDetailsComponent = function (props) {
                 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: '',
+                nationalPlanObj: "",
+                kpi: "",
+                ministry: "",
             };
             if (!ndcDetail.subNdcDetails) {
                 ndcDetail.subNdcDetails = [];
@@ -24815,7 +24814,8 @@ var NdcDetailsComponent = function (props) {
         });
     };
     var getNdcDetailsForPeriod = function () {
-        var range = selectedTab.split("-");
+        //const range = selectedPeriod.split("-");
+        var range = [];
         if (range.length > 1) {
             var filteredData = ndcDetailsData.filter(function (item) {
                 return inRange(Number(moment(item.startDate).year()), Number(range[0]), Number(range[1]));
@@ -24830,12 +24830,11 @@ var NdcDetailsComponent = function (props) {
         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()) !== '' &&
+            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()) !==
-                    '' &&
+                ((_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((_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();
             }
@@ -24890,7 +24889,8 @@ var NdcDetailsComponent = function (props) {
             }); } });
     });
     function onAddNewNdcDetail() {
-        var range = selectedTab.split("-");
+        //const range = selectedPeriod.split("-");
+        var range = [];
         var ndcActionId = ++addedNdcDetailId.current;
         var newData = {
             key: ndcActionId,
@@ -24921,86 +24921,138 @@ var NdcDetailsComponent = function (props) {
             cell: EditableCell,
         },
     };
-    //commented because rendering issue
-    function ndcDetailsTableContent() {
-        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 () {
-        if (selectedPeriod && selectedPeriod.current) {
-            var newPeriodItem_1 = {
-                key: "".concat(selectedPeriod.current.start, "-").concat(selectedPeriod.current.end),
-                label: "".concat(selectedPeriod.current.start, "-").concat(selectedPeriod.current.end),
-                start: selectedPeriod.current.start,
-                end: selectedPeriod.current.end,
-                children: ndcDetailsTableContent(),
-            };
-            var existingIndex = periodItemsRef.current.findIndex(function (item) {
-                return inRange(newPeriodItem_1.start, item.start, item.end) ||
-                    inRange(newPeriodItem_1.end, item.start, item.end);
-            });
-            if (existingIndex === -1) {
-                setPeriodItems(function (items) { return __spreadArray(__spreadArray([], items, true), [newPeriodItem_1], false); });
-                periodItemsRef.current = __spreadArray(__spreadArray([], periodItemsRef.current, true), [newPeriodItem_1], false);
-            }
-            else {
-                message.open({
-                    type: "error",
-                    content: t("ndc:rangeAlreadyExists"),
-                    duration: 3,
-                    style: { textAlign: "right", marginRight: 15, marginTop: 10 },
-                });
+    var onDeletePeriod = function () { return __awaiter(void 0, void 0, void 0, function () {
+        var result;
+        return __generator(this, function (_a) {
+            switch (_a.label) {
+                case 0: return [4 /*yield*/, post("national/programme/deleteNdcDetailsPeriod", {
+                        id: selectedPeriod.id,
+                    })];
+                case 1:
+                    result = _a.sent();
+                    if (result) {
+                        fetchNdcDetailPeriods();
+                    }
+                    return [2 /*return*/];
             }
-        }
+        });
+    }); };
+    var onFinalizePeriod = function () {
+        //
     };
-    useEffect(function () {
-        if (periodItems && periodItems.length > 3) {
-            setSelectedTab(periodItems[periodItems.length - 1].key);
-        }
-    }, [periodItems]);
+    function ndcDetailsTableContent() {
+        return (React.createElement("div", null,
+            React.createElement(Row, null,
+                React.createElement(Col, { span: 24 },
+                    React.createElement(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(Row, { justify: "center" },
+                                React.createElement(Button, { onClick: onAddNewNdcDetail, type: "default", style: {
+                                        marginBottom: 16,
+                                        width: "100%",
+                                    } }, t("ndc:addNdcAction"))));
+                        } }))),
+            React.createElement(Row, null,
+                React.createElement(Col, { span: 24 },
+                    React.createElement(Button, { type: "primary", onClick: onDeletePeriod, htmlType: "submit", loading: loading }, t("ndc:delete")),
+                    React.createElement(Button, { type: "primary", onClick: onFinalizePeriod, htmlType: "submit", loading: loading }, t("ndc:finalize"))))));
+    }
+    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) {
+            switch (_a.label) {
+                case 0:
+                    if (!(selectedDateRangeRef && selectedDateRangeRef.current)) return [3 /*break*/, 3];
+                    periodItem_1 = {
+                        startYear: selectedDateRangeRef.current.startYear,
+                        endYear: selectedDateRangeRef.current.endYear,
+                        finalized: false,
+                    };
+                    existingIndex = periodItems.findIndex(function (item) {
+                        return inRange(periodItem_1.startYear, item.startYear, item.endYear) ||
+                            inRange(periodItem_1.endYear, item.startYear, item.endYear);
+                    });
+                    if (!(existingIndex === -1)) return [3 /*break*/, 2];
+                    return [4 /*yield*/, post("national/programme/addNdcDetailsPeriod", __assign({}, periodItem_1))];
+                case 1:
+                    response = _a.sent();
+                    if (response && response.data) {
+                        addedPeriodItem = response.data;
+                        updatedPeriodItem_1 = __assign(__assign({}, addedPeriodItem), { key: addedPeriodItem.id, label: "".concat(addedPeriodItem.startYear, "-").concat(addedPeriodItem.endYear) });
+                        setPeriodItems(function (items) { return __spreadArray(__spreadArray([], items, true), [updatedPeriodItem_1], false); });
+                        setSelectedPeriod(updatedPeriodItem_1);
+                    }
+                    return [3 /*break*/, 3];
+                case 2:
+                    message.open({
+                        type: "error",
+                        content: t("ndc:rangeAlreadyExists"),
+                        duration: 3,
+                        style: { textAlign: "right", marginRight: 15, marginTop: 10 },
+                    });
+                    _a.label = 3;
+                case 3: return [2 /*return*/];
+            }
+        });
+    }); };
     var onDateRangeChanged = function (range) {
         var period = {
-            start: Number(moment(range[0]).year()),
-            end: Number(moment(range[1]).year()),
+            startYear: Number(moment(range[0]).year()),
+            endYear: Number(moment(range[1]).year()),
         };
-        selectedPeriod.current = period;
+        selectedDateRangeRef.current = period;
     };
     function addNewPeriodContent() {
         return (React.createElement("div", null,
-            React.createElement(Row, null,
-                React.createElement(RangePicker, { onChange: onDateRangeChanged, picker: "year" })),
-            React.createElement(Row, { className: "mg-top-1" },
-                React.createElement("div", { className: "ndc-steps-actions" },
-                    React.createElement(Button, { type: "primary", onClick: onAddNewPeriod, htmlType: "submit", loading: loading }, t("ndc:submit")),
-                    React.createElement(Button, { className: "back-btn", onClick: onCancelPeriod, loading: loading }, t("ndc:back"))))));
+            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, { components: components, rowClassName: function () { return "editable-row"; }, bordered: true, dataSource: getSubNdcDetails(record.key), columns: columns, showHeader: false, pagination: false }));
     }
     var onTabChange = function (key) {
-        setSelectedTab(key);
+        var selectedPeriod = periodItems.find(function (item) { return item.key === key; });
+        setSelectedPeriod(selectedPeriod);
     };
+    var fetchNdcDetailPeriods = function () { return __awaiter(void 0, void 0, void 0, function () {
+        var periods, addNewTab, response;
+        return __generator(this, function (_a) {
+            switch (_a.label) {
+                case 0:
+                    periods = [];
+                    addNewTab = {
+                        id: "add_new",
+                        key: "add_new",
+                        label: "Add New",
+                        startYear: 0,
+                        endYear: 0,
+                    };
+                    return [4 /*yield*/, get("national/programme/queryNdcDetailsPeriod")];
+                case 1:
+                    response = _a.sent();
+                    if (response && response.data) {
+                        periods = response.data.map(function (period) {
+                            return __assign(__assign({}, period), { key: period.id, label: "".concat(period.startYear, "-").concat(period.endYear) });
+                        });
+                    }
+                    if (isAddRangeVisible) {
+                        periods.unshift(addNewTab);
+                    }
+                    setPeriodItems(periods);
+                    setSelectedPeriod(addNewTab);
+                    return [2 /*return*/];
+            }
+        });
+    }); };
     useEffect(function () {
+        fetchNdcDetailPeriods();
         var defaultNdcDetails = [
             {
                 key: 1,
@@ -25206,7 +25258,7 @@ var NdcDetailsComponent = function (props) {
                 startDate: new Date("2022-03-25"),
                 endDate: new Date("2023-03-25"),
                 nationalPlanObj: "Other",
-                kpi: '',
+                kpi: "",
                 ministry: "Ministry of Environment",
                 subNdcDetails: [
                     {
@@ -25232,34 +25284,7 @@ var NdcDetailsComponent = function (props) {
                 ],
             },
         ];
-        var initialPeriods = [
-            {
-                key: "2019-2020",
-                label: "2019-2020",
-                start: 2019,
-                end: 2020,
-                children: ndcDetailsTableContent(),
-            },
-            {
-                key: "2021-2023",
-                label: "2021-2023",
-                start: 2021,
-                end: 2021,
-                children: ndcDetailsTableContent(),
-            },
-        ];
-        if (isAddRangeVisible()) {
-            initialPeriods.unshift({
-                key: "add_new",
-                label: "Add New",
-                start: 0,
-                end: 0,
-                children: addNewPeriodContent(),
-            });
-        }
         addedNdcDetailId.current = 20;
-        setPeriodItems(initialPeriods);
-        periodItemsRef.current = initialPeriods;
         setNdcDetailsData(defaultNdcDetails);
     }, []);
     return (React.createElement("div", { className: "ndc-management content-container" },
@@ -25269,20 +25294,10 @@ var NdcDetailsComponent = function (props) {
                     React.createElement("div", { className: "body-title" }, t("ndc:ndcTitle")),
                     React.createElement("div", { className: "body-sub-title" }, t("ndc:ndcSubTitle"))))),
         React.createElement("div", null,
-            React.createElement(Tabs, { centered: false, defaultActiveKey: "1", items: periodItems, activeKey: selectedTab, onChange: onTabChange })),
-        selectedTab !== "add_new" && (React.createElement("div", null,
-            React.createElement("div", null,
-                React.createElement(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(Row, { justify: "center" },
-                            React.createElement(Button, { onClick: onAddNewNdcDetail, type: "default", style: {
-                                    marginBottom: 16,
-                                    width: "100%",
-                                } }, t("ndc:addNdcAction"))));
-                    } }))))));
+            React.createElement(Tabs, { centered: false, defaultActiveKey: "1", items: periodItems, activeKey: selectedPeriod, onChange: onTabChange })),
+        React.createElement("div", null, selectedPeriod.id === "add_new"
+            ? addNewPeriodContent()
+            : ndcDetailsTableContent())));
 };
 
 var ImgWithFallback = function (_a) {