@undp/carbon-library 1.0.17 → 1.0.18

package/dist/cjs/index.js

@@ -2059,7 +2059,7 @@ var UserManagementComponent = function (props) {
         React.createElement(UserActionConfirmationModel, { t: t, actionInfo: actionInfo, onActionConfirmed: handleOk, onActionCanceled: handleCancel, openModal: openDeleteConfirmationModal, errorMsg: errorMsg, loading: loading })));
 };
 
-var css_248z$9 = ".programme-management .certify-list {\n  width: 110px;\n  display: flex;\n  align-items: center;\n  flex-wrap: wrap; }\n  .programme-management .certify-list .profile-icon {\n    margin-bottom: 4px; }\n\n.programme-management .table-actions-section {\n  margin-bottom: 0px; }\n  .programme-management .table-actions-section input {\n    font-family: \"Inter\";\n    font-size: 0.8rem; }\n\n.programme-management .all-check {\n  margin-right: 10px; }\n  .programme-management .all-check .ant-checkbox-inner::after {\n    background-color: rgba(58, 53, 65, 0.5); }\n  .programme-management .all-check .ant-checkbox-checked .ant-checkbox-inner::after {\n    background-color: transparent; }\n  .programme-management .all-check .ant-checkbox-checked .ant-checkbox-inner {\n    background-color: rgba(58, 53, 65, 0.5);\n    border: none; }\n\n.programme-management .ant-checkbox-checked .ant-checkbox-input[value='Retired'] + .ant-checkbox-inner {\n  background-color: rgba(58, 53, 65, 0.4);\n  border: none; }\n\n.programme-management .ant-checkbox-checked .ant-checkbox-input[value='AwaitingAuthorization'] + .ant-checkbox-inner {\n  background-color: rgba(237, 77, 71, 0.6);\n  border: none; }\n\n.programme-management .ant-checkbox-checked .ant-checkbox-input[value='Rejected'] + .ant-checkbox-inner {\n  background-color: rgba(58, 53, 65, 0.4);\n  border: none; }\n\n.programme-management .ant-checkbox-checked .ant-checkbox-input[value='Issued'] + .ant-checkbox-inner {\n  background-color: #16b1ff;\n  border: none; }\n\n.programme-management .ant-checkbox-checked .ant-checkbox-input[value='Transferred'] + .ant-checkbox-inner {\n  background-color: rgba(118, 195, 39, 0.6);\n  border: none; }\n";
+var css_248z$9 = ".programme-management .programme-title-bar {\n  display: flex;\n  flex-direction: row;\n  justify-content: space-between;\n  padding: 0px 0px 30px 0px; }\n  .programme-management .programme-title-bar .title {\n    display: flex;\n    flex-direction: column;\n    justify-content: space-between; }\n  .programme-management .programme-title-bar .actions {\n    display: flex;\n    align-items: center;\n    justify-content: flex-end; }\n  .programme-management .programme-title-bar .flex-display {\n    margin-left: 15px; }\n\n.programme-management .certify-list {\n  width: 110px;\n  display: flex;\n  align-items: center;\n  flex-wrap: wrap; }\n  .programme-management .certify-list .profile-icon {\n    margin-bottom: 4px; }\n\n.programme-management .table-actions-section {\n  margin-bottom: 0px; }\n  .programme-management .table-actions-section input {\n    font-family: \"Inter\";\n    font-size: 0.8rem; }\n\n.programme-management .all-check {\n  margin-right: 10px; }\n  .programme-management .all-check .ant-checkbox-inner::after {\n    background-color: rgba(58, 53, 65, 0.5); }\n  .programme-management .all-check .ant-checkbox-checked .ant-checkbox-inner::after {\n    background-color: transparent; }\n  .programme-management .all-check .ant-checkbox-checked .ant-checkbox-inner {\n    background-color: rgba(58, 53, 65, 0.5);\n    border: none; }\n\n.programme-management .ant-checkbox-checked .ant-checkbox-input[value=\"Retired\"] + .ant-checkbox-inner {\n  background-color: rgba(58, 53, 65, 0.4);\n  border: none; }\n\n.programme-management .ant-checkbox-checked .ant-checkbox-input[value=\"AwaitingAuthorization\"] + .ant-checkbox-inner {\n  background-color: rgba(237, 77, 71, 0.6);\n  border: none; }\n\n.programme-management .ant-checkbox-checked .ant-checkbox-input[value=\"Rejected\"] + .ant-checkbox-inner {\n  background-color: rgba(58, 53, 65, 0.4);\n  border: none; }\n\n.programme-management .ant-checkbox-checked .ant-checkbox-input[value=\"Issued\"] + .ant-checkbox-inner {\n  background-color: #16b1ff;\n  border: none; }\n\n.programme-management .ant-checkbox-checked .ant-checkbox-input[value=\"Transferred\"] + .ant-checkbox-inner {\n  background-color: rgba(118, 195, 39, 0.6);\n  border: none; }\n";
 styleInject(css_248z$9);
 
 exports.ProgrammeManagementColumns = void 0;
@@ -2073,11 +2073,13 @@ exports.ProgrammeManagementColumns = void 0;
     ProgrammeManagementColumns[ProgrammeManagementColumns["creditTransferred"] = 6] = "creditTransferred";
     ProgrammeManagementColumns[ProgrammeManagementColumns["certifierId"] = 7] = "certifierId";
     ProgrammeManagementColumns[ProgrammeManagementColumns["serialNo"] = 8] = "serialNo";
+    ProgrammeManagementColumns[ProgrammeManagementColumns["emissionsReductionExpected"] = 9] = "emissionsReductionExpected";
+    ProgrammeManagementColumns[ProgrammeManagementColumns["emissionsReductionAchieved"] = 10] = "emissionsReductionAchieved";
 })(exports.ProgrammeManagementColumns || (exports.ProgrammeManagementColumns = {}));
 
 var Search = antd.Input.Search;
 var ProgrammeManagementComponent = function (props) {
-    var t = props.t, visibleColumns = props.visibleColumns, useUserContext = props.useUserContext, useConnection = props.useConnection, onNavigateToProgrammeView = props.onNavigateToProgrammeView;
+    var t = props.t, visibleColumns = props.visibleColumns, useUserContext = props.useUserContext, useConnection = props.useConnection, onNavigateToProgrammeView = props.onNavigateToProgrammeView, onClickAddProgramme = props.onClickAddProgramme;
     var _a = useConnection(); _a.get; _a.delete; var post = _a.post;
     var _b = React.useState(), totalProgramme = _b[0], setTotalProgramme = _b[1];
     var _c = React.useState(false), loading = _c[0], setLoading = _c[1];
@@ -2103,7 +2105,8 @@ var ProgrammeManagementComponent = function (props) {
             console.log(checkedValues);
             if (checkedValues !== selectedStatus) {
                 setSelectedStatus(checkedValues);
-                setIndeterminate(!!checkedValues.length && checkedValues.length < Object.keys(statusOptions).length);
+                setIndeterminate(!!checkedValues.length &&
+                    checkedValues.length < Object.keys(statusOptions).length);
                 setCheckAll(checkedValues.length === Object.keys(statusOptions).length);
             }
             if (checkedValues.length === 0) {
@@ -2119,8 +2122,8 @@ var ProgrammeManagementComponent = function (props) {
             //   },
             // ]);
             setStatusFilter({
-                key: 'currentStage',
-                operation: 'in',
+                key: "currentStage",
+                operation: "in",
                 value: checkedValues,
             });
             return [2 /*return*/];
@@ -2135,11 +2138,11 @@ var ProgrammeManagementComponent = function (props) {
     };
     var columns = [
         {
-            title: t('programme:title'),
-            dataIndex: 'title',
+            title: t("programme:title"),
+            dataIndex: "title",
             key: exports.ProgrammeManagementColumns.title,
             sorter: true,
-            align: 'left',
+            align: "left",
             render: function (item) {
                 return React.createElement("span", { className: "clickable" }, item);
             },
@@ -2152,32 +2155,32 @@ var ProgrammeManagementComponent = function (props) {
             },
         },
         {
-            title: t('common:company'),
-            dataIndex: 'company',
+            title: t("common:company"),
+            dataIndex: "company",
             key: exports.ProgrammeManagementColumns.company,
-            align: 'left',
+            align: "left",
             render: function (item, itemObj) {
                 var elements = item.map(function (obj) {
                     return (React.createElement(antd.Tooltip, { title: obj.name, color: TooltipColor, key: TooltipColor },
                         React.createElement("div", null,
                             React.createElement(ProfileIcon, { icon: obj.logo, bg: getCompanyBgColor(obj.companyRole), name: obj.name }))));
                 });
-                return React.createElement("div", { style: { display: 'flex', alignItems: 'center' } }, elements);
+                return (React.createElement("div", { style: { display: "flex", alignItems: "center" } }, elements));
             },
         },
         {
-            title: t('programme:sector'),
-            dataIndex: 'sector',
+            title: t("programme:sector"),
+            dataIndex: "sector",
             sorter: true,
             key: exports.ProgrammeManagementColumns.sector,
-            align: 'left',
+            align: "left",
         },
         {
-            title: t('programme:status'),
-            dataIndex: 'currentStage',
+            title: t("programme:status"),
+            dataIndex: "currentStage",
             key: exports.ProgrammeManagementColumns.currentStage,
             sorter: true,
-            align: 'center',
+            align: "center",
             render: function (item) {
                 return (React.createElement(antd.Tag, { className: "clickable", color: getStageTagType(item) }, getStageEnumVal(item)));
             },
@@ -2191,44 +2194,62 @@ var ProgrammeManagementComponent = function (props) {
             },
         },
         {
-            title: t('programme:issued'),
-            dataIndex: 'creditIssued',
+            title: t("programme:issued"),
+            dataIndex: "creditIssued",
             key: exports.ProgrammeManagementColumns.creditIssued,
             sorter: true,
-            align: 'right',
+            align: "right",
             render: function (item) {
-                return item ? addCommSep(Number(item)) : '-';
+                return item ? addCommSep(Number(item)) : "-";
             },
         },
         {
-            title: t('programme:balance'),
-            dataIndex: 'creditBalance',
+            title: t("programme:balance"),
+            dataIndex: "creditBalance",
             key: exports.ProgrammeManagementColumns.creditBalance,
             sorter: true,
-            align: 'right',
+            align: "right",
             render: function (item) {
-                return item ? addCommSep(Number(item)) : '-';
+                return item ? addCommSep(Number(item)) : "-";
             },
         },
         {
-            title: t('programme:transferred'),
-            dataIndex: 'creditTransferred',
+            title: t("programme:transferred"),
+            dataIndex: "creditTransferred",
             key: exports.ProgrammeManagementColumns.creditTransferred,
             sorter: true,
-            align: 'right',
+            align: "right",
             render: function (item) {
-                return item ? addCommSep(sumArray(item)) : '-';
+                return item ? addCommSep(sumArray(item)) : "-";
             },
         },
         {
-            title: t('programme:certifiers'),
-            dataIndex: 'certifierId',
+            title: t("programme:emissionsReductionExpected"),
+            dataIndex: "emissionsReductionExpected",
+            key: exports.ProgrammeManagementColumns.emissionsReductionExpected,
+            align: "right",
+            render: function (item) {
+                return item ? item : "-";
+            },
+        },
+        {
+            title: t("programme:emissionsReductionAchieved"),
+            dataIndex: "emissionsReductionAchieved",
+            key: exports.ProgrammeManagementColumns.emissionsReductionAchieved,
+            align: "right",
+            render: function (item) {
+                return item ? item : "-";
+            },
+        },
+        {
+            title: t("programme:certifiers"),
+            dataIndex: "certifierId",
             key: exports.ProgrammeManagementColumns.certifierId,
-            align: 'left',
+            align: "left",
             sorter: true,
             render: function (item, itemObj) {
                 if (item === null) {
-                    return;
+                    return "-";
                 }
                 var cMap = {};
                 for (var _i = 0, _a = itemObj.certifier; _i < _a.length; _i++) {
@@ -2248,10 +2269,10 @@ var ProgrammeManagementComponent = function (props) {
             },
         },
         {
-            title: t('programme:serialNoh'),
-            dataIndex: 'serialNo',
+            title: t("programme:serialNoh"),
+            dataIndex: "serialNo",
             key: exports.ProgrammeManagementColumns.serialNo,
-            align: 'left',
+            align: "left",
         },
     ].filter(function (column) { return visibleColumns.includes(column.key); });
     var getAllProgramme = function () { return __awaiter(void 0, void 0, void 0, function () {
@@ -2267,30 +2288,30 @@ var ProgrammeManagementComponent = function (props) {
                     if (statusFilter) {
                         filter.push(statusFilter);
                     }
-                    if (search && search !== '') {
+                    if (search && search !== "") {
                         filter.push({
-                            key: 'title',
-                            operation: 'like',
+                            key: "title",
+                            operation: "like",
                             value: "".concat(search, "%"),
                         });
                     }
                     if (sortOrder && sortField) {
                         sort = {
-                            key: sortField === 'certifierId' ? 'certifierId[1]' : sortField,
+                            key: sortField === "certifierId" ? "certifierId[1]" : sortField,
                             order: sortOrder,
                             nullFirst: false,
                         };
                     }
                     else {
                         sort = {
-                            key: 'programmeId',
-                            order: 'DESC',
+                            key: "programmeId",
+                            order: "DESC",
                         };
                     }
                     _a.label = 1;
                 case 1:
                     _a.trys.push([1, 3, , 4]);
-                    return [4 /*yield*/, post('national/programme/query', {
+                    return [4 /*yield*/, post("national/programme/query", {
                             page: currentPage,
                             size: pageSize,
                             filterAnd: filter,
@@ -2304,12 +2325,12 @@ var ProgrammeManagementComponent = function (props) {
                     return [3 /*break*/, 4];
                 case 3:
                     error_1 = _a.sent();
-                    console.log('Error in getting programme', error_1);
+                    console.log("Error in getting programme", error_1);
                     antd.message.open({
-                        type: 'error',
+                        type: "error",
                         content: error_1.message,
                         duration: 3,
-                        style: { textAlign: 'right', marginRight: 15, marginTop: 10 },
+                        style: { textAlign: "right", marginRight: 15, marginTop: 10 },
                     });
                     setLoading(false);
                     return [3 /*break*/, 4];
@@ -2340,19 +2361,27 @@ var ProgrammeManagementComponent = function (props) {
     };
     var handleTableChange = function (pag, sorter) {
         console.log(pag, sorter);
-        setSortOrder(sorter.order === 'ascend' ? 'ASC' : sorter.order === 'descend' ? 'DESC' : undefined);
+        setSortOrder(sorter.order === "ascend"
+            ? "ASC"
+            : sorter.order === "descend"
+                ? "DESC"
+                : undefined);
         setSortField(sorter.columnKey);
         // setCurrentPage(1);
     };
     return (React.createElement("div", { className: "content-container programme-management" },
-        React.createElement("div", { className: "title-bar" },
-            React.createElement("div", { className: "body-title" }, t('programme:viewProgrammes')),
-            React.createElement("div", { className: "body-sub-title" }, t('programme:desc'))),
+        React.createElement("div", { className: "programme-title-bar" },
+            React.createElement("div", { className: "title-bar" },
+                React.createElement("div", { className: "body-title" }, t("programme:viewProgrammes")),
+                React.createElement("div", { className: "body-sub-title" }, t("programme:desc"))),
+            React.createElement("div", { className: "actions" },
+                React.createElement("div", { className: "action-bar" },
+                    React.createElement(antd.Button, { type: "primary", size: "large", block: true, icon: React.createElement(icons.PlusOutlined, null), onClick: onClickAddProgramme }, t("programme:addProgramme"))))),
         React.createElement("div", { className: "content-card" },
             React.createElement(antd.Row, { className: "table-actions-section" },
                 React.createElement(antd.Col, { lg: { span: 16 }, md: { span: 16 } },
                     React.createElement("div", { className: "action-bar" },
-                        React.createElement(antd.Checkbox, { className: "all-check", disabled: loading, indeterminate: indeterminate, onChange: onCheckAllChange, checked: checkAll, defaultChecked: true }, t('programme:all')),
+                        React.createElement(antd.Checkbox, { className: "all-check", disabled: loading, indeterminate: indeterminate, onChange: onCheckAllChange, checked: checkAll, defaultChecked: true }, t("programme:all")),
                         React.createElement(antd.Checkbox.Group, { disabled: loading, options: statusOptions, defaultValue: statusOptions.map(function (e) { return e.value; }), value: selectedStatus, onChange: onStatusQuery }))),
                 React.createElement(antd.Col, { lg: { span: 8 }, md: { span: 8 } },
                     React.createElement("div", { className: "filter-section" },
@@ -2360,17 +2389,17 @@ var ProgrammeManagementComponent = function (props) {
                             React.createElement(antd.Checkbox, { className: "label", onChange: function (v) {
                                     return setDataFilter(v.target.checked
                                         ? {
-                                            key: 'companyId',
-                                            operation: 'ANY',
+                                            key: "companyId",
+                                            operation: "ANY",
                                             value: userInfoState === null || userInfoState === void 0 ? void 0 : userInfoState.companyId,
                                         }
                                         : undefined);
-                                } }, t('view:seeMine'))),
+                                } }, t("view:seeMine"))),
                         React.createElement("div", { className: "search-bar" },
-                            React.createElement(Search, { onPressEnter: onSearch, placeholder: "".concat(t('programme:searchByName')), allowClear: true, 
+                            React.createElement(Search, { onPressEnter: onSearch, placeholder: "".concat(t("programme:searchByName")), allowClear: true, 
                                 // onChange={(e) => setSearchText(e.target.value)}
                                 onChange: function (e) {
-                                    return e.target.value === ''
+                                    return e.target.value === ""
                                         ? setSearch(e.target.value)
                                         : setSearchText(e.target.value);
                                 }, onSearch: setSearch, style: { width: 265 } }))))),
@@ -2384,10 +2413,14 @@ var ProgrammeManagementComponent = function (props) {
                                 showQuickJumper: true,
                                 showSizeChanger: true,
                                 onChange: onChange,
-                            }, onChange: function (val, filter, sorter) { return handleTableChange(val, sorter); }, 
+                            }, onChange: function (val, filter, sorter) {
+                                return handleTableChange(val, sorter);
+                            }, 
                             // scroll={{ x: 1500 }}
                             locale: {
-                                emptyText: (React.createElement(antd.Empty, { image: antd.Empty.PRESENTED_IMAGE_SIMPLE, description: tableData.length === 0 ? t('programme:noProgrammes') : null })),
+                                emptyText: (React.createElement(antd.Empty, { image: antd.Empty.PRESENTED_IMAGE_SIMPLE, description: tableData.length === 0
+                                        ? t("programme:noProgrammes")
+                                        : null })),
                             } })))))));
 };