yujunjun/strapi
1
0
Fork 0
mirror of https://github.com/strapi/strapi.git synced 2025-09-25 08:19:07 +00:00
Code Issues Packages Projects Releases Wiki Activity

Render publish modal

Browse Source
This commit is contained in:
Rémi de Juvigny 2023-04-27 18:36:34 +02:00
parent b83c8d9320
commit db74d609f8
10 changed files with 179 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

37
packages/core/admin/admin/src/content-manager/components/DynamicTable/BulkActionsBar/index.js
View File

@ -4,20 +4,22 @@ import { Button } from '@strapi/design-system';
import { useIntl } from 'react-intl';
import { useTracking } from '@strapi/helper-plugin';
import ConfirmDialogDeleteAll from '../ConfirmDialogDeleteAll';
import ConfirmDialogPublishAll from '../ConfirmDialogPublishAll';
const BulkActionsBar = ({
showPublish,
showDelete,
onConfirmDeleteAll,
onConfirmPublishAll,
selectedEntries,
clearSelectedEntries,
}) => {
const { formatMessage } = useIntl();
const { trackUsage } = useTracking();
const [isConfirmButtonLoading, setIsConfirmButtonLoading] = useState(false);
const [showConfirmDeleteAll, setShowConfirmDeleteAll] = useState(false);
// Bulk delete
const [showConfirmDeleteAll, setShowConfirmDeleteAll] = useState(false);
const handleToggleShowDeleteAllModal = () => {
if (!showConfirmDeleteAll) {
trackUsage('willBulkDeleteEntries');
@ -39,16 +41,45 @@ const BulkActionsBar = ({
}
};
// Bulk publish
const [showConfirmPublishAll, setShowConfirmPublishAll] = useState(false);
const handleToggleShowPublishAllModal = () => {
if (!showConfirmPublishAll) {
trackUsage('willBulkPublishEntries');
}
setShowConfirmPublishAll((prev) => !prev);
};
const handleConfirmPublishAll = async () => {
try {
setIsConfirmButtonLoading(true);
await onConfirmPublishAll(selectedEntries);
handleToggleShowPublishAllModal();
clearSelectedEntries();
setIsConfirmButtonLoading(false);
} catch (err) {
setIsConfirmButtonLoading(false);
handleToggleShowPublishAllModal();
}
};
return (
<>
{showPublish && (
<>
<Button variant="tertiary">
<Button variant="tertiary" onClick={handleToggleShowPublishAllModal}>
{formatMessage({ id: 'app.utils.publish', defaultMessage: 'Publish' })}
</Button>
<Button variant="tertiary">
{formatMessage({ id: 'app.utils.unpublish', defaultMessage: 'Unpublish' })}
</Button>
<ConfirmDialogPublishAll
isOpen={showConfirmPublishAll}
onToggleDialog={handleToggleShowPublishAllModal}
isConfirmButtonLoading={isConfirmButtonLoading}
onConfirm={handleConfirmPublishAll}
/>
</>
)}
{showDelete && (

73
packages/core/admin/admin/src/content-manager/components/DynamicTable/ConfirmDialogPublishAll/index.js Normal file
View File

@ -0,0 +1,73 @@
import React from 'react';
import PropTypes from 'prop-types';
import { useIntl } from 'react-intl';
import { Dialog, DialogBody, DialogFooter, Flex, Typography, Button } from '@strapi/design-system';
import { ExclamationMarkCircle, Check } from '@strapi/icons';
import InjectionZoneList from '../../InjectionZoneList';
import { getTrad } from '../../../utils';
const ConfirmDialogPublishAll = ({ isConfirmButtonLoading, isOpen, onToggleDialog, onConfirm }) => {
const { formatMessage } = useIntl();
return (
<Dialog
onClose={onToggleDialog}
title={formatMessage({
id: 'app.components.ConfirmDialog.title',
defaultMessage: 'Confirmation',
})}
labelledBy="confirmation"
describedBy="confirm-description"
isOpen={isOpen}
>
<DialogBody icon={<ExclamationMarkCircle />}>
<Flex direction="column" alignItems="stretch" gap={2}>
<Flex justifyContent="center">
<Typography id="confirm-description">
{formatMessage({
id: getTrad('popUpWarning.bodyMessage.contentType.publish.all'),
defaultMessage: 'Are you sure you want to publish these entries?',
})}
</Typography>
</Flex>
<Flex>
<InjectionZoneList area="contentManager.listView.publishModalAdditionalInfos" />
</Flex>
</Flex>
</DialogBody>
<DialogFooter
startAction={
<Button onClick={onToggleDialog} variant="tertiary">
{formatMessage({
id: 'app.components.Button.cancel',
defaultMessage: 'Cancel',
})}
</Button>
}
endAction={
<Button
onClick={onConfirm}
variant="secondary"
startIcon={<Check />}
id="confirm-publish"
loading={isConfirmButtonLoading}
>
{formatMessage({
id: 'app.utils.publish',
defaultMessage: 'Publish',
})}
</Button>
}
/>
</Dialog>
);
};
ConfirmDialogPublishAll.propTypes = {
isConfirmButtonLoading: PropTypes.bool.isRequired,
isOpen: PropTypes.bool.isRequired,
onConfirm: PropTypes.func.isRequired,
onToggleDialog: PropTypes.func.isRequired,
};
export default ConfirmDialogPublishAll;

3
packages/core/admin/admin/src/content-manager/components/DynamicTable/index.js
View File

@ -23,6 +23,7 @@ const DynamicTable = ({
isLoading,
onConfirmDelete,
onConfirmDeleteAll,
onConfirmPublishAll,
layout,
rows,
}) => {
@ -105,6 +106,7 @@ const DynamicTable = ({
showPublish={canPublish && hasDraftAndPublish}
showDelete={canDelete}
onConfirmDeleteAll={onConfirmDeleteAll}
onConfirmPublishAll={onConfirmPublishAll}
selectedEntries={selectedEntries}
clearSelectedEntries={clearSelectedEntries}
/>
@ -149,6 +151,7 @@ DynamicTable.propTypes = {
}).isRequired,
onConfirmDelete: PropTypes.func.isRequired,
onConfirmDeleteAll: PropTypes.func.isRequired,
onConfirmPublishAll: PropTypes.func.isRequired,
rows: PropTypes.array.isRequired,
};

8
packages/core/admin/admin/src/content-manager/pages/ListView/index.js
View File

@ -179,6 +179,11 @@ function ListView({
[fetchData, params, slug, toggleNotification, formatAPIError, post]
);
const handleConfirmPublishAllData = (ids) => {
// TODO make a request to the API and refetch the data
console.log('Publishing all data', ids);
};
const handleConfirmDeleteData = useCallback(
async (idToDelete) => {
try {
@ -334,8 +339,9 @@ function ListView({
canDelete={canDelete}
canPublish={canPublish}
contentTypeName={headerLayoutTitle}
onConfirmDeleteAll={handleConfirmDeleteAllData}
onConfirmDelete={handleConfirmDeleteData}
onConfirmDeleteAll={handleConfirmDeleteAllData}
onConfirmPublishAll={handleConfirmPublishAllData}
isBulkable={isBulkable}
isLoading={isLoading}
// FIXME: remove the layout props drilling

6
packages/core/admin/admin/src/injectionZones.js
View File

@ -13,7 +13,11 @@ const injectionZones = {
},
contentManager: {
editView: { informations: [], 'right-links': [] },
listView: { actions: [], deleteModalAdditionalInfos: [] },
listView: {
actions: [],
deleteModalAdditionalInfos: [],
publishModalAdditionalInfos: [],
},
},
};

3
packages/core/admin/admin/src/translations/en.json
View File

@ -792,7 +792,8 @@
"content-manager.plugin.description.long": "Quick way to see, edit and delete the data in your database.",
"content-manager.plugin.description.short": "Quick way to see, edit and delete the data in your database.",
"content-manager.popUpWarning.bodyMessage.contentType.delete": "Are you sure to delete Content-Type?",
"content-manager.popUpWarning.bodyMessage.contentType.delete.all": "Are you sure to delete all Content-Types?",
"content-manager.popUpWarning.bodyMessage.contentType.delete.all": "Are you sure you want to delete these entries?",
"content-manager.popUpWarning.bodyMessage.contentType.publish.all": "Are you sure you want to publish these entries?",
"content-manager.popUpWarning.warning.has-draft-relations.title": "Confirmation",
"content-manager.popUpWarning.warning.publish-question": "Do you still want to publish?",
"content-manager.popUpWarning.warning.unpublish": "If you don't publish this content, it will automatically turn into a Draft.",

14
packages/plugins/i18n/admin/src/components/CMListViewInjectedComponents/DeleteModalAdditionalInfos/index.js
View File

@ -4,6 +4,14 @@ import { Typography } from '@strapi/design-system';
import { getTrad } from '../../../utils';
import useHasI18n from '../../../hooks/useHasI18n';
const Emphasis = (chunks) => {
return (
<Typography fontWeight="semiBold" textColor="danger500">
{chunks}
</Typography>
);
};
const DeleteModalAdditionalInfos = () => {
const hasI18nEnabled = useHasI18n();
const { formatMessage } = useIntl();
@ -21,11 +29,7 @@ const DeleteModalAdditionalInfos = () => {
'This will delete the active locale versions <em>(from Internationalization)</em>',
},
{
em: (chunks) => (
<Typography fontWeight="semiBold" textColor="danger500">
{chunks}
</Typography>
),
em: Emphasis,
}
)}
</Typography>

39
packages/plugins/i18n/admin/src/components/CMListViewInjectedComponents/PublishModalAdditionalInfos/index.js Normal file
View File

@ -0,0 +1,39 @@
import React from 'react';
import { useIntl } from 'react-intl';
import { Typography } from '@strapi/design-system';
import { getTrad } from '../../../utils';
import useHasI18n from '../../../hooks/useHasI18n';
const Emphasis = (chunks) => {
return (
<Typography fontWeight="semiBold" textColor="danger500">
{chunks}
</Typography>
);
};
const PublishModalAdditionalInfos = () => {
const hasI18nEnabled = useHasI18n();
const { formatMessage } = useIntl();
if (!hasI18nEnabled) {
return null;
}
return (
<Typography textColor="danger500">
{formatMessage(
{
id: getTrad('Settings.list.actions.publishAdditionalInfos'),
defaultMessage:
'This will publish the active locale versions <em>(from Internationalization)</em>',
},
{
em: Emphasis,
}
)}
</Typography>
);
};
export default PublishModalAdditionalInfos;

6
packages/plugins/i18n/admin/src/index.js
View File

@ -14,6 +14,7 @@ import mutateCTBContentTypeSchema from './utils/mutateCTBContentTypeSchema';
import LOCALIZED_FIELDS from './utils/localizedFields';
import i18nReducers from './hooks/reducers';
import DeleteModalAdditionalInfos from './components/CMListViewInjectedComponents/DeleteModalAdditionalInfos';
import PublishModalAdditionalInfos from './components/CMListViewInjectedComponents/PublishModalAdditionalInfos';
import addLocaleToCollectionTypesLinksHook from './contentManagerHooks/addLocaleToCollectionTypesLinks';
import addLocaleToSingleTypesLinksHook from './contentManagerHooks/addLocaleToSingleTypesLinks';
import addColumnToTableHook from './contentManagerHooks/addColumnToTable';
@ -82,6 +83,11 @@ export default {
Component: DeleteModalAdditionalInfos,
});
app.injectContentManagerComponent('listView', 'publishModalAdditionalInfos', {
name: 'i18n-delete-bullets-in-modal',
Component: PublishModalAdditionalInfos,
});
const ctbPlugin = app.getPlugin('content-type-builder');
if (ctbPlugin) {

1
packages/plugins/i18n/admin/src/translations/en.json
View File

@ -12,6 +12,7 @@
"Settings.list.actions.add": "Add new locale",
"Settings.list.actions.delete": "Delete a locale",
"Settings.list.actions.deleteAdditionalInfos": "This will delete the active locale versions <em>(from Internationalization)</em>",
"Settings.list.actions.publishAdditionalInfos": "This will publish only the active locale versions <em>(from Internationalization)</em>",
"Settings.list.actions.edit": "Edit a locale",
"Settings.list.description": "Configure the settings for the Internationalization plugin",
"Settings.list.empty.description": "This is not a usual behavior, meaning that you have eventually modified the database manually. Make sure to have at least one locale saved in your database in order to be able to use Strapi correctly.",