@craftercms/studio-ui
Version:
Services, components, models & utils to build CrafterCMS authoring extensions.
123 lines (121 loc) • 4.4 kB
JavaScript
/*
* Copyright (C) 2007-2022 Crafter Software Corporation. All Rights Reserved.
*
* This program is free software: you can redistribute it and/or modify
* it under the terms of the GNU Lesser General Public License version 3 as published by
* the Free Software Foundation.
*
* This program is distributed in the hope that it will be useful,
* but WITHOUT ANY WARRANTY; without even the implied warranty of
* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
* GNU Lesser General Public License for more details.
*
* You should have received a copy of the GNU Lesser General Public License
* along with this program. If not, see <http://www.gnu.org/licenses/>.
*/
/*
* Copyright (C) 2007-2022 Crafter Software Corporation. All Rights Reserved.
*
* This program is free software: you can redistribute it and/or modify
* it under the terms of the GNU General Public License version 3 as published by
* the Free Software Foundation.
*
* This program is distributed in the hope that it will be useful,
* but WITHOUT ANY WARRANTY; without even the implied warranty of
* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
* GNU General Public License for more details.
*
* You should have received a copy of the GNU General Public License
* along with this program. If not, see <http://www.gnu.org/licenses/>.
*/
import DashletCard from '../DashletCard/DashletCard';
import palette from '../../styles/palette';
import { FormattedMessage } from 'react-intl';
import React, { useEffect, useMemo } from 'react';
import useSpreadState from '../../hooks/useSpreadState';
import useActiveSiteId from '../../hooks/useActiveSiteId';
import IconButton from '@mui/material/IconButton';
import { RefreshRounded } from '@mui/icons-material';
import { fetchPublishingStats } from '../../services/dashboard';
import Skeleton from '@mui/material/Skeleton';
import Stack from '@mui/material/Stack';
import Box from '@mui/material/Box';
import Typography from '@mui/material/Typography';
export function DevContentOpsDashlet(props) {
const { borderLeftColor = palette.teal.main } = props;
const site = useActiveSiteId();
const [{ stats, loading }, setState] = useSpreadState({
stats: null,
loading: false
});
const onRefresh = useMemo(
() => () => {
setState({ stats: null, loading: true });
fetchPublishingStats(site, 30).subscribe((stats) => {
setState({ stats, loading: false });
});
},
[site, setState]
);
useEffect(() => {
onRefresh();
}, [onRefresh]);
return React.createElement(
DashletCard,
Object.assign({}, props, {
sxs: { content: { pt: 2 } },
borderLeftColor: borderLeftColor,
title: React.createElement(FormattedMessage, {
id: 'devContentOpsDashlet.widgetTitle',
defaultMessage: 'DevContentOps'
}),
headerAction: React.createElement(IconButton, { onClick: onRefresh }, React.createElement(RefreshRounded, null))
}),
loading &&
React.createElement(
React.Fragment,
null,
React.createElement(Skeleton, null),
React.createElement(Skeleton, null)
),
stats &&
React.createElement(
Stack,
{ direction: 'column', spacing: 2 },
React.createElement(
Box,
null,
React.createElement(Typography, {
variant: 'h2',
component: 'span',
children: stats.numberOfPublishes,
lineHeight: 1
}),
React.createElement(Typography, { component: 'span', children: 'Publishes' })
),
React.createElement(
Box,
null,
React.createElement(Typography, {
variant: 'h2',
component: 'span',
children: stats.numberOfNewAndPublishedItems,
lineHeight: 1
}),
React.createElement(Typography, { component: 'span', children: 'Created & Published' })
),
React.createElement(
Box,
null,
React.createElement(Typography, {
variant: 'h2',
component: 'span',
children: stats.numberOfEditedAndPublishedItems,
lineHeight: 1
}),
React.createElement(Typography, { component: 'span', children: 'Edited & Published' })
)
)
);
}
export default DevContentOpsDashlet;