strapi-custom-action-perform-page
Version:
A configurable Strapi admin page to trigger custom actions via buttons linked to API endpoints.
167 lines (165 loc) • 6.2 kB
JavaScript
"use strict";
Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
const jsxRuntime = require("react/jsx-runtime");
const admin = require("@strapi/strapi/admin");
const reactRouterDom = require("react-router-dom");
const designSystem = require("@strapi/design-system");
const reactIntl = require("react-intl");
const styled = require("styled-components");
const react = require("react");
const _interopDefault = (e) => e && e.__esModule ? e : { default: e };
const styled__default = /* @__PURE__ */ _interopDefault(styled);
const PLUGIN_VERSION = "1.0.0";
const PageWrapper = styled__default.default.div`
display: flex;
justify-content: center;
align-items: center;
height: auto;
margin-top: 80px;
`;
const Card = styled__default.default.div`
background: #212134;
padding: 32px 48px;
border-radius: 12px;
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
max-width: 600px;
width: 100%;
text-align: center;
`;
const Title = styled__default.default.h1`
font-size: 32px;
font-weight: 600;
color: #ffffff;
margin-bottom: 24px;
`;
const Spacer = styled__default.default.div`
height: 24px;
`;
const LoadingSpinner = styled__default.default.div`
margin: 10px;
font-size: 16px;
color: #ffffff;
text-align: center;
`;
const ErrorMessage = styled__default.default.div`
color: #ff4d4f;
font-size: 16px;
margin-top: 16px;
text-align: center;
`;
const getEnvironmentKey = () => {
return window.location.hostname === "localhost" ? "localhost" : "production";
};
const DynamicDropdownActionPerform = () => {
const [buttons, setButtons] = react.useState([]);
const [selected, setSelected] = react.useState("");
const [loading, setLoading] = react.useState(true);
const [error, setError] = react.useState(null);
const [title, setTitle] = react.useState("");
react.useEffect(() => {
setLoading(true);
fetch("/api/strapi-custom-action-perform-page/config").then((res) => res.json()).then((data) => {
console.log("Fetched title:", data);
setTitle(data.title);
setLoading(false);
if (Array.isArray(data.downloadButtons)) {
setButtons(data.downloadButtons);
} else {
setError("Failed to load data. Please try again later.");
}
}).catch((err) => {
console.error(err);
setError("An error occurred while fetching the data.");
setLoading(false);
});
}, []);
const handleDownload = () => {
if (!selected) return;
const envKey = getEnvironmentKey();
const selectedOption = buttons.find((btn) => btn.label === selected);
if (selectedOption && selectedOption.endpoints?.[envKey]) {
window.location.href = selectedOption.endpoints[envKey];
} else {
setError("Selected option is invalid or no endpoint available.");
}
};
return /* @__PURE__ */ jsxRuntime.jsx(PageWrapper, { children: /* @__PURE__ */ jsxRuntime.jsxs(Card, { children: [
/* @__PURE__ */ jsxRuntime.jsx(Title, { children: title ? title : "Perform Action" }),
loading && /* @__PURE__ */ jsxRuntime.jsx(LoadingSpinner, { children: "Loading..." }),
error && /* @__PURE__ */ jsxRuntime.jsx(ErrorMessage, { children: error }),
!loading && !error && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
/* @__PURE__ */ jsxRuntime.jsx(
designSystem.SingleSelect,
{
label: "Select Enquiry Type",
placeholder: "Choose an option",
value: selected,
onChange: setSelected,
children: buttons.map((btn, index) => /* @__PURE__ */ jsxRuntime.jsx(designSystem.SingleSelectOption, { value: btn.label, children: btn.label }, index))
}
),
/* @__PURE__ */ jsxRuntime.jsx(Spacer, {}),
selected && buttons.find((btn) => btn.label === selected)?.buttonText && /* @__PURE__ */ jsxRuntime.jsx(designSystem.Button, { onClick: handleDownload, children: buttons.find((btn) => btn.label === selected).buttonText })
] })
] }) });
};
const FooterDiv = styled__default.default.div`
background-color: #212134;
max-width: 800px;
width: 100%;
margin: 0 auto;
margin-top: 300px; /* Reduced margin-top for better spacing */
padding: 20px 40px;
text-align: center; /* Center the footer text */
`;
const Anchor = styled__default.default.a`
color: white;
text-decoration: none;
&:hover {
text-decoration: underline; /* Added hover effect for better UX */
}
`;
const VersionText = styled__default.default.div`
margin-top: 15px;
color: #fff;
font-size: 14px;
`;
const HomePage = () => {
const { formatMessage } = reactIntl.useIntl();
return /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Main, { children: [
/* @__PURE__ */ jsxRuntime.jsx(DynamicDropdownActionPerform, {}),
/* @__PURE__ */ jsxRuntime.jsxs(FooterDiv, { children: [
/* @__PURE__ */ jsxRuntime.jsxs(designSystem.Typography, { variant: "pi", textColor: "neutral600", style: { marginTop: "40px" }, children: [
"By Uzair Sayyed",
" "
] }),
/* @__PURE__ */ jsxRuntime.jsxs(designSystem.Typography, { variant: "pi", textColor: "neutral600", style: { marginTop: "10px" }, children: [
"© ",
(/* @__PURE__ */ new Date()).getFullYear(),
" ",
/* @__PURE__ */ jsxRuntime.jsx(
Anchor,
{
href: "https://nipralo.com",
target: "_blank",
"aria-label": "Visit Nipralo Technologies",
children: "Nipralo Technologies"
}
),
" ",
"All rights reserved."
] }),
/* @__PURE__ */ jsxRuntime.jsx(VersionText, { children: /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Typography, { variant: "pi", textColor: "neutral600", children: [
"Version: ",
PLUGIN_VERSION
] }) })
] })
] });
};
const App = () => {
return /* @__PURE__ */ jsxRuntime.jsxs(reactRouterDom.Routes, { children: [
/* @__PURE__ */ jsxRuntime.jsx(reactRouterDom.Route, { index: true, element: /* @__PURE__ */ jsxRuntime.jsx(HomePage, {}) }),
/* @__PURE__ */ jsxRuntime.jsx(reactRouterDom.Route, { path: "*", element: /* @__PURE__ */ jsxRuntime.jsx(admin.Page.Error, {}) })
] });
};
exports.App = App;