@undp/carbon-library 1.0.135-CARBON-343.1 → 1.0.135-CARBON-343.2

package/dist/cjs/index.js

@@ -23568,7 +23568,239 @@ 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 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 }, onClick: toggleEdit }, children));
+    }
+    return React.createElement("td", __assign({}, restProps), childNode);
+};
+
+var NdcDetailsComponent = function (props) {
+    var t = props.t; props.useConnection;
+    var RangePicker = antd.DatePicker.RangePicker;
+    var _a = React.useState([]), ndcDetailsData = _a[0], setNdcDetailsData = _a[1];
+    var _b = React.useState(false), loading = _b[0]; _b[1];
+    var _c = React.useState([]), periodItems = _c[0], setPeriodItems = _c[1];
+    var _d = React.useState('add_new'), selectedTab = _d[0], setSelectedTab = _d[1];
+    var selectedPeriod = React.useRef({});
+    var handleSave = function (row) {
+        var newData = __spreadArray([], ndcDetailsData, true);
+        var index = newData.findIndex(function (item) { return row.key === item.key; });
+        var item = newData[index];
+        newData.splice(index, 1, __assign(__assign({}, item), row));
+        setNdcDetailsData(newData);
+    };
+    var defaultColumns = [
+        {
+            title: t('ndc:ndcColumnsStartDate'),
+            dataIndex: 'startDate',
+            key: 'startDate',
+            align: 'left',
+            editable: true,
+            render: function (record) {
+                return (React.createElement("div", null,
+                    React.createElement("p", null, moment(record.startDate).format('DD-MM-YYYY'))));
+            },
+        },
+        {
+            title: t('ndc:ndcColumnsEndDate'),
+            dataIndex: 'endDate',
+            key: 'endDate',
+            align: 'left',
+            editable: true,
+            render: function (record) {
+                return (React.createElement("div", null,
+                    React.createElement("p", null, moment(record.endDate).format('DD-MM-YYYY'))));
+            },
+        },
+        {
+            title: t('ndc:ndcColumnsNationalPlanObj'),
+            dataIndex: 'nationalPlanObj',
+            key: 'nationalPlanObj',
+            align: 'left',
+            editable: true,
+        },
+        {
+            title: t('ndc:ndcColumnsKpi'),
+            dataIndex: 'kpi',
+            key: 'kpi',
+            align: 'left',
+            editable: true,
+        },
+    ];
+    var columns = defaultColumns.map(function (col) {
+        if (!col.editable) {
+            return col;
+        }
+        return __assign(__assign({}, col), { onCell: function (record) { return ({
+                record: record,
+                editable: col.editable,
+                dataIndex: col.dataIndex,
+                title: col.title,
+                handleSave: handleSave,
+            }); } });
+    });
+    function onAddNewNdcDetail() {
+        var newData = {
+            startDate: new Date('2014-12-24 23:12:00'),
+            endDate: new Date('2014-12-24 23:12:00'),
+            nationalPlanObj: 'sample text2',
+            kpi: 34,
+        };
+        setNdcDetailsData(__spreadArray(__spreadArray([], ndcDetailsData, true), [newData], false));
+    }
+    var components = {
+        body: {
+            row: EditableRow,
+            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),
+                children: ndcDetailsTableContent(),
+            };
+            setPeriodItems(function (items) { return __spreadArray(__spreadArray([], items, true), [newPeriodItem_1], false); });
+        }
+    };
+    var onDateRangeChanged = function (range) {
+        var period = {
+            start: Number(moment(range[0]).year()),
+            end: Number(moment(range[1]).year()),
+        };
+        selectedPeriod.current = period;
+    };
+    function addNewPeriodContent() {
+        return (React.createElement("div", null,
+            React.createElement(antd.Row, null,
+                React.createElement(RangePicker, { onChange: onDateRangeChanged, picker: "year" })),
+            React.createElement(antd.Row, null,
+                React.createElement("div", { className: "steps-actions" },
+                    React.createElement(antd.Button, { type: "primary", onClick: onAddNewPeriod, htmlType: "submit", loading: loading }, t('ndc:submit')),
+                    React.createElement(antd.Button, { className: "back-btn", onClick: onCancelPeriod, loading: loading }, t('ndc:back'))))));
+    }
+    var onTabChange = function (key) {
+        setSelectedTab(key);
+    };
+    React.useEffect(function () {
+        var defaultNdcDetails = [
+            {
+                startDate: new Date('2022-03-25'),
+                endDate: new Date('2023-03-25'),
+                nationalPlanObj: 'sample text1',
+                kpi: 23,
+            },
+            {
+                startDate: new Date('2023-03-25'),
+                endDate: new Date('2024-03-25'),
+                nationalPlanObj: 'sample text2',
+                kpi: 34,
+            },
+            {
+                startDate: new Date('2024-03-25'),
+                endDate: new Date('2025-03-25'),
+                nationalPlanObj: 'sample text3',
+                kpi: 25,
+            },
+        ];
+        var addNewItem = {
+            key: 'add_new',
+            label: 'Add New',
+            children: addNewPeriodContent(),
+        };
+        setPeriodItems([addNewItem]);
+        setNdcDetailsData(defaultNdcDetails);
+    }, []);
+    return (React.createElement("div", { className: "ndc-management content-container" },
+        React.createElement("div", { className: "title-bar" },
+            React.createElement(antd.Row, { justify: "space-between", align: "middle" },
+                React.createElement(antd.Col, { span: 20 },
+                    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(antd.Tabs, { defaultActiveKey: "1", items: periodItems, onChange: onTabChange })),
+        selectedTab !== 'add_new' && (React.createElement("div", null,
+            React.createElement("div", null,
+                React.createElement(antd.Button, { onClick: onAddNewNdcDetail, type: "primary", style: {
+                        marginBottom: 16,
+                    } }, "Add a row"),
+                React.createElement(antd.Table, { components: components, rowClassName: function () { return 'editable-row'; }, bordered: true, dataSource: ndcDetailsData, columns: columns }))))));
+};
 
 var ImgWithFallback = function (_a) {
     var src = _a.src, alt = _a.alt, fallbackSrc = _a.fallbackSrc, mediaType = _a.mediaType, className = _a.className, delegated = __rest(_a, ["src", "alt", "fallbackSrc", "mediaType", "className"]);
@@ -25039,6 +25271,7 @@ exports.MrvDashboardComponent = MrvDashboardComponent;
 exports.NdcActionBody = NdcActionBody;
 exports.NdcActionManagementComponent = NdcActionManagementComponent;
 exports.NdcActionViewComponent = NdcActionViewComponent;
+exports.NdcDetailsComponent = NdcDetailsComponent;
 exports.OrganisationStatus = OrganisationStatus;
 exports.ProfileIcon = ProfileIcon;
 exports.ProgrammeCertify = ProgrammeCertify;