@pnp/spfx-controls-react
Version:
Reusable React controls for SharePoint Framework solutions
48 lines (47 loc) • 2.81 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.NoKpisCard = void 0;
var tslib_1 = require("tslib");
var React = tslib_1.__importStar(require("react"));
var react_components_1 = require("@fluentui/react-components");
var react_icons_1 = require("@fluentui/react-icons");
var Stack_1 = tslib_1.__importDefault(require("./stack/Stack"));
var useKpiStyles_1 = require("./useKpiStyles");
// Mock data for the list URL
var mockListUrl = "/sites/mock-site/Lists/Directory Status Config";
/**
* NoKpisCard Component
*/
var NoKpisCard = function () {
var styles = (0, useKpiStyles_1.useKpiStyles)();
var listUrl = mockListUrl;
var isLoading = false;
var onConfigure = React.useCallback(function () {
if (!listUrl)
return;
var host = window.location.origin;
// listUrl is already the ServerRelativeUrl, just append AllItems.aspx
var appConfigUrl = "".concat(host).concat(listUrl, "/AllItems.aspx");
window.open(appConfigUrl, "_blank");
}, [listUrl]);
return (React.createElement(react_components_1.Card, { className: styles.noKpiCardContainer },
React.createElement("div", { className: styles.noKpiBackgroundOrb1 }),
React.createElement("div", { className: styles.noKpiBackgroundOrb2 }),
React.createElement(Stack_1.default, { alignItems: "center", justifyContent: "center", gap: "s" },
React.createElement("div", { className: styles.noKpiIconContainer },
React.createElement(react_icons_1.DataBarVerticalStarRegular, { className: styles.noKpiIcon }),
React.createElement(react_icons_1.SparkleRegular, { className: styles.noKpiSparkle1 }),
React.createElement(react_icons_1.SparkleRegular, { className: styles.noKpiSparkle2 })),
React.createElement(react_components_1.Text, { className: styles.noKpiTitle }, "No KPIs Configured"),
React.createElement("div", { className: styles.noKpiDecorativeLine }),
React.createElement(react_components_1.Text, { className: styles.noKpiSubtitle },
"Start tracking your team's performance by configuring",
" ",
React.createElement("span", { className: styles.noKpiHighlight }, "KPI parameters"),
" in the App Configuration list."),
!isLoading && listUrl && (React.createElement("div", { className: styles.noKpiButtonContainer },
React.createElement(react_components_1.Button, { appearance: "outline", icon: React.createElement(react_icons_1.SettingsRegular, null), className: styles.noKpiButton, onClick: onConfigure }, "Configure KPIs"))))));
};
exports.NoKpisCard = NoKpisCard;
exports.default = exports.NoKpisCard;
//# sourceMappingURL=NoKpisCard.js.map