yujunjun/strapi
1
0
Fork 0
mirror of https://github.com/strapi/strapi.git synced 2025-12-28 07:33:17 +00:00
Code Issues Packages Projects Releases Wiki Activity

Display plugin heeader and handle delete

Browse Source
This commit is contained in:
soupette 2019-07-11 15:33:49 +02:00
parent d3ea25e700
commit 38ca54f8a9
2 changed files with 130 additions and 56 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

183
packages/strapi-plugin-content-manager/admin/src/containers/EditView/index.js
View File

@ -1,10 +1,12 @@
import React, { memo, useEffect, useReducer } from 'react';
import React, { memo, useEffect, useState, useReducer } from 'react';
import PropTypes from 'prop-types';
import { get } from 'lodash';
import {
BackHeader,
getQueryParameters,
LoadingIndicatorPage,
PluginHeader,
PopUpWarning,
request,
templateObject,
} from 'strapi-helper-plugin';
@ -20,36 +22,38 @@ const getRequestUrl = path => `/${pluginId}/explorer/${path}`;
function EditView({
layouts,
location: { search },
history: { push },
match: {
params: { slug, id },
},
}) {
const [showWarningCancel, setWarningCancel] = useState(false);
const [showWarningDelete, setWarningDelete] = useState(false);
const [isSubmitting, setIsSubmitting] = useState(false);
const [reducerState, dispatch] = useReducer(reducer, initialState, () =>
init(initialState)
);
const layout = get(layouts, [slug], {});
const displayedFieldNameInHeader = get(
layout,
['settings', 'mainField'],
'id'
);
const state = reducerState.toJS();
const { initialData, isLoading, isSubmitting } = state;
const isCreatingEntry = id === 'create';
const source = getQueryParameters(search, 'source');
const shouldShowLoader = !isCreatingEntry && isLoading;
useEffect(() => {
const fetchData = async () => {
const data = await request(getRequestUrl(`${slug}/${id}`), {
method: 'GET',
params: { source },
});
try {
const data = await request(getRequestUrl(`${slug}/${id}`), {
method: 'GET',
params: { source },
});
dispatch({
type: 'GET_DATA_SUCCEEDED',
data,
});
dispatch({
type: 'GET_DATA_SUCCEEDED',
data,
});
} catch (err) {
strapi.notification.error(`${pluginId}.error.record.fetch`);
}
};
if (!isCreatingEntry) {
@ -61,59 +65,128 @@ function EditView({
return <LoadingIndicatorPage />;
}
const state = reducerState.toJS();
const { initialData, isLoading } = state;
const toggleWarningCancel = () => setWarningCancel(prevState => !prevState);
const toggleWarningDelete = () => setWarningDelete(prevState => !prevState);
const redirectURL = search.split('redirectUrl=')[1];
const redirectToPreviousPage = () => push(redirectURL);
const handleConfirmDelete = async () => {
toggleWarningDelete();
setIsSubmitting(true);
try {
await request(getRequestUrl(`${slug}/${id}`), {
method: 'DELETE',
params: { source },
});
strapi.notification.success(`${pluginId}.success.record.delete`);
redirectToPreviousPage();
} catch (err) {
setIsSubmitting(false);
strapi.notification.error(`${pluginId}.error.record.delete`);
}
};
const handleSubmit = e => {
e.preventDefault();
};
const displayedFieldNameInHeader = get(
layout,
['settings', 'mainField'],
'id'
);
const pluginHeaderTitle = isCreatingEntry
? { id: `${pluginId}.containers.Edit.pluginHeader.title.new` }
: templateObject({ mainField: displayedFieldNameInHeader }, initialData)
.mainField;
console.log(redirectURL);
return (
<Container className="container-fluid">
<form onSubmit={handleSubmit}>
<PluginHeader
actions={[
{
label: `${pluginId}.containers.Edit.reset`,
kind: 'secondary',
onClick: () => {},
type: 'button',
disabled: isSubmitting, // TODO STATE WHEN SUBMITING
},
{
kind: 'primary',
label: `${pluginId}.containers.Edit.submit`,
type: 'submit',
loader: isSubmitting,
style: isSubmitting
? { marginRight: '18px', flexGrow: 2 }
: { flexGrow: 2 },
disabled: isSubmitting, // TODO STATE WHEN SUBMITING
},
]}
subActions={
isCreatingEntry
? []
: [
{
label: 'app.utils.delete',
kind: 'delete',
onClick: () => {},
type: 'button',
disabled: isSubmitting, // TODO STATE WHEN SUBMITING
},
]
}
title={pluginHeaderTitle}
<>
<BackHeader onClick={() => redirectToPreviousPage()} />
<Container className="container-fluid">
<form onSubmit={handleSubmit}>
<PluginHeader
actions={[
{
label: `${pluginId}.containers.Edit.reset`,
kind: 'secondary',
onClick: () => {
toggleWarningCancel();
},
type: 'button',
disabled: isSubmitting, // TODO STATE WHEN SUBMITING
},
{
kind: 'primary',
label: `${pluginId}.containers.Edit.submit`,
type: 'submit',
loader: isSubmitting,
style: isSubmitting
? { marginRight: '18px', flexGrow: 2 }
: { flexGrow: 2 },
disabled: isSubmitting, // TODO STATE WHEN SUBMITING
},
]}
subActions={
isCreatingEntry
? []
: [
{
label: 'app.utils.delete',
kind: 'delete',
onClick: () => {
toggleWarningDelete();
},
type: 'button',
disabled: isSubmitting, // TODO STATE WHEN SUBMITING
},
]
}
title={pluginHeaderTitle}
/>
</form>
<PopUpWarning
isOpen={showWarningCancel}
toggleModal={toggleWarningCancel}
content={{
title: `${pluginId}.popUpWarning.title`,
message: `${pluginId}.popUpWarning.warning.cancelAllSettings`,
cancel: `${pluginId}.popUpWarning.button.cancel`,
confirm: `${pluginId}.popUpWarning.button.confirm`,
}}
popUpWarningType="danger"
onConfirm={() => {
dispatch({
type: 'RESET_FORM',
});
toggleWarningCancel();
}}
/>
</form>
</Container>
<PopUpWarning
isOpen={showWarningDelete}
toggleModal={toggleWarningDelete}
content={{
title: `${pluginId}.popUpWarning.title`,
message: `${pluginId}.popUpWarning.bodyMessage.contentType.delete`,
cancel: `${pluginId}.popUpWarning.button.cancel`,
confirm: `${pluginId}.popUpWarning.button.confirm`,
}}
popUpWarningType="danger"
onConfirm={handleConfirmDelete}
/>
</Container>
</>
);
}
EditView.propTypes = {
history: PropTypes.shape({
push: PropTypes.func.isRequired,
}),
layouts: PropTypes.object,
location: PropTypes.shape({
search: PropTypes.string,

3
packages/strapi-plugin-content-manager/admin/src/containers/EditView/reducer.js
View File

@ -4,7 +4,6 @@ const initialState = fromJS({
initialData: {},
isLoading: true,
modifiedData: {},
isSubmitting: false,
});
function reducer(state, action) {
@ -14,6 +13,8 @@ function reducer(state, action) {
.update('isLoading', () => false)
.update('initialData', () => fromJS(action.data))
.update('modifiedData', () => fromJS(action.data));
case 'RESET_FORM':
return state.update('modifiedData', () => state.get('initialData'));
default:
return state;
}