@craftercms/studio-ui
Version:
Services, components, models & utils to build CrafterCMS authoring extensions.
167 lines (165 loc) • 6.32 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 { useSpreadStateWithSelected } from '../SiteDashboard/utils';
import DashletCard from '../DashletCard/DashletCard';
import palette from '../../styles/palette';
import { defineMessages, FormattedMessage, useIntl } from 'react-intl';
import React, { useEffect, useMemo } from 'react';
import {
DashletEmptyMessage,
DenseCheckbox,
getItemSkeleton,
List,
ListItem,
ListItemAvatar,
ListItemIcon,
PersonAvatar
} from '../DashletCard/dashletCommons';
import useActiveSiteId from '../../hooks/useActiveSiteId';
import { fetchScheduled } from '../../services/dashboard';
import IconButton from '@mui/material/IconButton';
import { RefreshRounded } from '@mui/icons-material';
import Checkbox from '@mui/material/Checkbox';
import ListItemText from '@mui/material/ListItemText';
import Typography from '@mui/material/Typography';
import { LIVE_COLOUR, STAGING_COLOUR } from '../ItemPublishingTargetIcon/styles';
const messages = defineMessages({
staging: { id: 'words.staging', defaultMessage: 'Staging' },
live: { id: 'words.live', defaultMessage: 'Live' }
});
export function ScheduledDashlet(props) {
const { borderLeftColor = palette.blue.tint } = props;
const site = useActiveSiteId();
const { formatMessage } = useIntl();
const [{ loading, total, items, isAllSelected }, setState, onSelectItem, onSelectAll, isSelected] =
useSpreadStateWithSelected({
loading: false,
items: null,
total: null,
selected: {},
isAllSelected: false,
hasSelected: false
});
const onRefresh = useMemo(
() => () => {
setState({ loading: true, items: null, selected: {}, isAllSelected: false });
fetchScheduled(site, {
limit: 10,
offset: 0,
dateFrom: '2022-03-28T22:00:00.000Z',
dateTo: '2022-04-28T22:00:00.000Z'
}).subscribe((items) => {
setState({ loading: false, items, total: items.total });
});
},
[setState, site]
);
useEffect(() => {
onRefresh();
}, [onRefresh]);
return React.createElement(
DashletCard,
Object.assign({}, props, {
borderLeftColor: borderLeftColor,
title: React.createElement(FormattedMessage, {
id: 'scheduledDashlet.widgetTitle',
defaultMessage: 'Scheduled for Publish'
}),
headerAction: React.createElement(IconButton, { onClick: onRefresh }, React.createElement(RefreshRounded, null)),
actionsBar: React.createElement(
React.Fragment,
null,
React.createElement(DenseCheckbox, { disabled: loading, checked: isAllSelected, onChange: onSelectAll })
)
}),
loading && getItemSkeleton({ numOfItems: 3, showAvatar: true, showCheckbox: true }),
items &&
React.createElement(
List,
null,
items.map((item, index) =>
React.createElement(
ListItem,
{ key: index },
React.createElement(
ListItemIcon,
null,
React.createElement(Checkbox, {
edge: 'start',
checked: isSelected(item),
onChange: (e) => onSelectItem(e, item)
})
),
React.createElement(ListItemAvatar, null, React.createElement(PersonAvatar, { person: item.submitter })),
React.createElement(ListItemText, {
primary: React.createElement(FormattedMessage, {
id: 'pendingApprovalDashlet.entryPrimaryText',
defaultMessage: '{name} submitted to <render_target>{publishingTarget}</render_target>',
values: {
name: item.submitter.firstName,
publishingTarget: item.publishingTarget,
render_target(target) {
return React.createElement(
Typography,
{
component: 'span',
fontWeight: 'bold',
color: target[0] === 'live' ? LIVE_COLOUR : STAGING_COLOUR
},
messages[target[0]] ? formatMessage(messages[target[0]]).toLowerCase() : target[0]
);
}
}
}),
secondary: React.createElement(
Typography,
{ color: 'text.secondary', variant: 'body2' },
React.createElement(FormattedMessage, {
id: 'pendingApprovalDashlet.noSubmissionCommentAvailable',
defaultMessage: 'Submission comment not provided'
})
)
})
)
)
),
total === 0 &&
React.createElement(
DashletEmptyMessage,
null,
React.createElement(FormattedMessage, {
id: 'pendingApprovalDashlet.noPendingItems',
defaultMessage: 'There are no items pending approval'
})
)
);
}
export default ScheduledDashlet;