@undp/carbon-library 1.0.135-CARBON-343.10 → 1.0.135-CARBON-343.12

package/dist/esm/index.js

@@ -23616,6 +23616,9 @@ var NdcDetailsComponent = function (props) {
     var _c = useState([]), periodItems = _c[0], setPeriodItems = _c[1];
     var _d = useState("add_new"), selectedTab = _d[0], setSelectedTab = _d[1];
     var selectedPeriod = useRef({});
+    var inRange = function (num, min, max) {
+        return num >= min && num <= max;
+    };
     var handleSave = function (row) {
         var newData = __spreadArray([], ndcDetailsData, true);
         var index = newData.findIndex(function (item) { return row.key === item.key; });
@@ -23623,6 +23626,18 @@ var NdcDetailsComponent = function (props) {
         newData.splice(index, 1, __assign(__assign({}, item), row));
         setNdcDetailsData(newData);
     };
+    var getNdcDetailsForPeriod = function () {
+        var range = selectedTab.split("-");
+        if (range.length > 1) {
+            var filteredData = ndcDetailsData.filter(function (item) {
+                return inRange(Number(moment(item.startDate).year()), Number(range[0]), Number(range[1]));
+            });
+            return filteredData;
+        }
+        else {
+            return [];
+        }
+    };
     var defaultColumns = [
         {
             title: t("ndc:ndcColumnsNationalPlanObj"),
@@ -23699,7 +23714,10 @@ var NdcDetailsComponent = function (props) {
                 end: selectedPeriod.current.end,
                 children: ndcDetailsTableContent(),
             };
-            var existingIndex = periodItemsRef.current.findIndex(function (item) { return item.start === newPeriodItem_1.start || item.end === newPeriodItem_1.end; });
+            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);
@@ -23740,32 +23758,65 @@ var NdcDetailsComponent = function (props) {
     };
     useEffect(function () {
         var defaultNdcDetails = [
+            {
+                startDate: new Date("2019-03-25"),
+                endDate: new Date("2020-03-25"),
+                nationalPlanObj: "Enhance value addition in key growth opportunities",
+                kpi: 25,
+            },
+            {
+                startDate: new Date("2018-03-25"),
+                endDate: new Date("2019-03-25"),
+                nationalPlanObj: "Strengthen the private sector to create 10,000 jobs",
+                kpi: 10500,
+            },
+            {
+                startDate: new Date("2021-03-25"),
+                endDate: new Date("2022-03-25"),
+                nationalPlanObj: "Consolidate and increase the stock and quality of productive infrastructure by 50%",
+                kpi: 48,
+            },
+            {
+                startDate: new Date("2022-03-25"),
+                endDate: new Date("2022-05-25"),
+                nationalPlanObj: "Enhance the productivity and social wellbeing of the population",
+                kpi: 20,
+            },
             {
                 startDate: new Date("2022-03-25"),
                 endDate: new Date("2023-03-25"),
-                nationalPlanObj: "sample text1",
-                kpi: 23,
+                nationalPlanObj: "Strengthen the role of the state in guiding and facilitating development",
+                kpi: 10,
             },
+        ];
+        var initialPeriods = [
             {
-                startDate: new Date("2023-03-25"),
-                endDate: new Date("2024-03-25"),
-                nationalPlanObj: "sample text2",
-                kpi: 34,
+                key: "add_new",
+                label: "Add New",
+                children: addNewPeriodContent(),
             },
             {
-                startDate: new Date("2024-03-25"),
-                endDate: new Date("2025-03-25"),
-                nationalPlanObj: "sample text3",
-                kpi: 25,
+                key: "2019-2020",
+                label: "2019-2020",
+                start: 2019,
+                end: 2020,
+                children: ndcDetailsTableContent(),
+            },
+            {
+                key: "2020-2023",
+                label: "2020-2023",
+                start: 2020,
+                end: 2023,
+                children: ndcDetailsTableContent(),
             },
         ];
-        var addNewItem = {
+        ({
             key: "add_new",
             label: "Add New",
             children: addNewPeriodContent(),
-        };
-        setPeriodItems([addNewItem]);
-        periodItemsRef.current = [addNewItem];
+        });
+        setPeriodItems(initialPeriods);
+        periodItemsRef.current = initialPeriods;
         setNdcDetailsData(defaultNdcDetails);
     }, []);
     return (React.createElement("div", { className: "ndc-management content-container" },
@@ -23778,10 +23829,10 @@ var NdcDetailsComponent = function (props) {
             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, { components: components, rowClassName: function () { return "editable-row"; }, bordered: true, dataSource: ndcDetailsData, columns: columns, footer: function () { return (React.createElement(Row, { justify: "center" },
+                React.createElement(Table, { components: components, rowClassName: function () { return "editable-row"; }, bordered: true, dataSource: getNdcDetailsForPeriod(), columns: columns, footer: function () { return (React.createElement(Row, { justify: "center" },
                         React.createElement(Button, { onClick: onAddNewNdcDetail, type: "default", style: {
                                 marginBottom: 16,
-                                width: '100%'
+                                width: "100%",
                             } }, t("ndc:addNdcAction")))); } }))))));
 };