burdy
Version:
Open Source Headless Platform
143 lines (142 loc) • 5 kB
JavaScript
;
var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
if (k2 === undefined) k2 = k;
Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
}) : (function(o, m, k, k2) {
if (k2 === undefined) k2 = k;
o[k2] = m[k];
}));
var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
Object.defineProperty(o, "default", { enumerable: true, value: v });
}) : function(o, v) {
o["default"] = v;
});
var __importStar = (this && this.__importStar) || function (mod) {
if (mod && mod.__esModule) return mod;
var result = {};
if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
__setModuleDefault(result, mod);
return result;
};
var __importDefault = (this && this.__importDefault) || function (mod) {
return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
const react_1 = __importStar(require("react"));
const react_2 = require("@fluentui/react");
const auth_context_1 = require("../authentication/context/auth.context");
const react_router_dom_1 = require("react-router-dom");
const hooks_1 = __importDefault(require("../../../shared/features/hooks"));
const theme = (0, react_2.getTheme)();
const styles = (0, react_2.mergeStyleSets)({
panels: {
display: 'grid',
gridTemplateColumns: 'repeat(auto-fill, minmax(130px,1fr))',
gridColumnGap: 20,
margin: '50px auto',
maxWidth: 720,
gap: '20px'
},
gridItem: {
display: 'flex',
justifyContent: 'center',
alignItems: 'center'
},
card: {
height: 132,
width: 132,
padding: '24px 24px 10px',
display: 'flex',
flexDirection: 'column',
alignItems: 'center',
boxShadow: theme.effects.elevation8,
'&:hover': {
cursor: 'pointer',
backgroundColor: theme.palette.neutralLighter,
boxShadow: theme.effects.elevation16
}
},
icon: {
fontSize: 38,
flex: 1,
display: 'flex',
justifyContent: 'center',
alignItems: 'center',
color: theme.palette.themePrimary
},
title: {
marginBottom: 10,
fontWeight: 600,
fontSize: theme.fonts.mediumPlus.fontSize,
height: 42,
display: 'flex',
justifyContent: 'center',
alignItems: 'center',
textAlign: 'center'
}
});
const defaultLinks = [
{
title: 'Assets',
key: 'assets',
icon: 'PhotoVideoMedia',
url: '/assets',
permissions: ['assets_list']
},
{
title: 'Sites',
key: 'sites',
icon: 'ReopenPages',
url: '/sites',
permissions: ['sites_list']
},
{
title: 'Content Type Builder',
key: 'content-types',
icon: 'PageHeaderEdit',
url: '/content-types',
permissions: ['content_types_list']
},
{
title: 'Tags',
key: 'tags',
icon: 'Tag',
url: '/tags',
permissions: ['tags_list']
},
{
title: 'Users',
key: 'users',
icon: 'People',
url: '/users',
permissions: ['users_administration']
},
{
title: 'Settings',
key: 'settings',
icon: 'Settings',
url: '/settings',
permissions: ['settings']
}
];
const Dashboard = () => {
const { filterPermissions } = (0, auth_context_1.useAuth)();
const links = (0, react_1.useMemo)(() => {
return hooks_1.default.applySyncFilters('dashboard/links', defaultLinks);
}, []);
const defaultSection = (0, react_1.useMemo)(() => {
return (react_1.default.createElement("div", { className: styles.panels }, filterPermissions(links).map((item) => (react_1.default.createElement("div", { key: item.key, "data-cy": `dashboard-${item.key}`, className: styles.gridItem },
react_1.default.createElement(react_router_dom_1.Link, { className: styles.card, to: item.url },
react_1.default.createElement("div", { className: styles.icon },
react_1.default.createElement(react_2.Icon, { iconName: item.icon })),
react_1.default.createElement("div", { className: styles.title }, item.title)))))));
}, [links]);
const sections = (0, react_1.useMemo)(() => {
return hooks_1.default.applySyncFilters('dashboard/sections', [{
key: 'default',
component: defaultSection
}]);
}, [defaultSection]);
return (react_1.default.createElement("div", { style: { padding: '0 1rem', overflow: 'auto' } }, sections.map(({ key, component }) => (react_1.default.createElement("section", { key: key }, component)))));
};
exports.default = Dashboard;