mirror of
https://github.com/strapi/strapi.git
synced 2025-09-26 00:39:49 +00:00
Init Edit view
This commit is contained in:
soupette
parent
39edb955d6
commit
d3ea25e700
@ -1,7 +1,129 @@
|
||||
import React from 'react';
|
||||
import React, { memo, useEffect, useReducer } from 'react';
|
||||
import PropTypes from 'prop-types';
|
||||
import { get } from 'lodash';
|
||||
import {
|
||||
getQueryParameters,
|
||||
LoadingIndicatorPage,
|
||||
PluginHeader,
|
||||
request,
|
||||
templateObject,
|
||||
} from 'strapi-helper-plugin';
|
||||
import pluginId from '../../pluginId';
|
||||
|
||||
function EditView() {
|
||||
return <div>Coming soon</div>;
|
||||
import Container from '../../components/Container';
|
||||
|
||||
import init from './init';
|
||||
import reducer, { initialState } from './reducer';
|
||||
|
||||
const getRequestUrl = path => `/${pluginId}/explorer/${path}`;
|
||||
|
||||
function EditView({
|
||||
layouts,
|
||||
location: { search },
|
||||
match: {
|
||||
params: { slug, id },
|
||||
},
|
||||
}) {
|
||||
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 },
|
||||
});
|
||||
|
||||
dispatch({
|
||||
type: 'GET_DATA_SUCCEEDED',
|
||||
data,
|
||||
});
|
||||
};
|
||||
|
||||
if (!isCreatingEntry) {
|
||||
fetchData();
|
||||
}
|
||||
}, [id, isCreatingEntry, slug, source]);
|
||||
|
||||
if (shouldShowLoader) {
|
||||
return <LoadingIndicatorPage />;
|
||||
}
|
||||
|
||||
const handleSubmit = e => {
|
||||
e.preventDefault();
|
||||
};
|
||||
|
||||
const pluginHeaderTitle = isCreatingEntry
|
||||
? { id: `${pluginId}.containers.Edit.pluginHeader.title.new` }
|
||||
: templateObject({ mainField: displayedFieldNameInHeader }, initialData)
|
||||
.mainField;
|
||||
|
||||
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}
|
||||
/>
|
||||
</form>
|
||||
</Container>
|
||||
);
|
||||
}
|
||||
|
||||
export default EditView;
|
||||
EditView.propTypes = {
|
||||
layouts: PropTypes.object,
|
||||
location: PropTypes.shape({
|
||||
search: PropTypes.string,
|
||||
}),
|
||||
match: PropTypes.shape({
|
||||
params: PropTypes.shape({
|
||||
id: PropTypes.string.isRequired,
|
||||
slug: PropTypes.string.isRequired,
|
||||
}),
|
||||
}),
|
||||
};
|
||||
|
||||
export default memo(EditView);
|
||||
|
||||
@ -0,0 +1,5 @@
|
||||
function init(initialState) {
|
||||
return initialState;
|
||||
}
|
||||
|
||||
export default init;
|
||||
@ -0,0 +1,23 @@
|
||||
import { fromJS } from 'immutable';
|
||||
|
||||
const initialState = fromJS({
|
||||
initialData: {},
|
||||
isLoading: true,
|
||||
modifiedData: {},
|
||||
isSubmitting: false,
|
||||
});
|
||||
|
||||
function reducer(state, action) {
|
||||
switch (action.type) {
|
||||
case 'GET_DATA_SUCCEEDED':
|
||||
return state
|
||||
.update('isLoading', () => false)
|
||||
.update('initialData', () => fromJS(action.data))
|
||||
.update('modifiedData', () => fromJS(action.data));
|
||||
default:
|
||||
return state;
|
||||
}
|
||||
}
|
||||
|
||||
export default reducer;
|
||||
export { initialState };
|
||||
@ -145,7 +145,6 @@ function ListView({
|
||||
return { ...getMetaDatas([label, 'list']), name: label };
|
||||
});
|
||||
};
|
||||
|
||||
const handleChangeListLabels = ({ name, value }) => {
|
||||
const currentSort = getSearchParams()._sort;
|
||||
|
||||
@ -187,7 +186,6 @@ function ListView({
|
||||
setIdToDelete(id);
|
||||
toggleModalDelete();
|
||||
};
|
||||
|
||||
const handleSubmit = (filters = []) => {
|
||||
emitEvent('didFilterEntries');
|
||||
toggleFilterPickerState();
|
||||
|
||||
@ -38,31 +38,24 @@ function Main({ emitEvent, getLayout, layouts, location: { pathname } }) {
|
||||
const renderRoute = (props, Component) => (
|
||||
<Component emitEvent={emitEvent} layouts={layouts} {...props} />
|
||||
);
|
||||
const routes = [
|
||||
{
|
||||
path: 'ctm-configurations/models/:name/:settingType',
|
||||
comp: SettingViewModel,
|
||||
},
|
||||
{ path: 'ctm-configurations/groups/:name', comp: SettingViewGroup },
|
||||
{ path: 'ctm-configurations/:type', comp: SettingsView },
|
||||
{ path: ':slug/:id', comp: EditView },
|
||||
{ path: ':slug', comp: ListView },
|
||||
].map(({ path, comp }) => (
|
||||
<Route
|
||||
key={path}
|
||||
path={`/plugins/${pluginId}/${path}`}
|
||||
render={props => renderRoute(props, comp)}
|
||||
/>
|
||||
));
|
||||
|
||||
return (
|
||||
<Switch>
|
||||
<Route
|
||||
path={`/plugins/${pluginId}/ctm-configurations/models/:name/:settingType`}
|
||||
render={props => renderRoute(props, SettingViewModel)}
|
||||
/>
|
||||
<Route
|
||||
path={`/plugins/${pluginId}/ctm-configurations/groups/:name`}
|
||||
component={SettingViewGroup}
|
||||
/>
|
||||
<Route
|
||||
path={`/plugins/${pluginId}/ctm-configurations/:type`}
|
||||
render={props => renderRoute(props, SettingsView)}
|
||||
/>
|
||||
<Route
|
||||
path={`/plugins/${pluginId}/:slug/:id`}
|
||||
render={props => renderRoute(props, EditView)}
|
||||
/>
|
||||
<Route
|
||||
path={`/plugins/${pluginId}/:slug`}
|
||||
render={props => renderRoute(props, ListView)}
|
||||
/>
|
||||
</Switch>
|
||||
);
|
||||
return <Switch>{routes}</Switch>;
|
||||
}
|
||||
|
||||
Main.propTypes = {
|
||||
|
||||
@ -106,17 +106,17 @@ function SettingsView({
|
||||
actions={getPluginHeaderActions()}
|
||||
title="Content Manager"
|
||||
description={{
|
||||
id: 'content-manager.containers.SettingsPage.pluginHeaderDescription',
|
||||
id: `${pluginId}.containers.SettingsPage.pluginHeaderDescription`,
|
||||
}}
|
||||
/>
|
||||
<PopUpWarning
|
||||
isOpen={showWarningSubmit}
|
||||
toggleModal={toggleWarningSubmit}
|
||||
content={{
|
||||
title: 'content-manager.popUpWarning.title',
|
||||
message: 'content-manager.popUpWarning.warning.updateAllSettings',
|
||||
cancel: 'content-manager.popUpWarning.button.cancel',
|
||||
confirm: 'content-manager.popUpWarning.button.confirm',
|
||||
title: `${pluginId}.popUpWarning.title`,
|
||||
message: `${pluginId}.popUpWarning.warning.updateAllSettings`,
|
||||
cancel: `${pluginId}.popUpWarning.button.cancel`,
|
||||
confirm: `${pluginId}.popUpWarning.button.confirm`,
|
||||
}}
|
||||
popUpWarningType="danger"
|
||||
onConfirm={() => onSubmit()}
|
||||
@ -125,10 +125,10 @@ function SettingsView({
|
||||
isOpen={showWarningCancel}
|
||||
toggleModal={toggleWarningCancel}
|
||||
content={{
|
||||
title: 'content-manager.popUpWarning.title',
|
||||
message: 'content-manager.popUpWarning.warning.cancelAllSettings',
|
||||
cancel: 'content-manager.popUpWarning.button.cancel',
|
||||
confirm: 'content-manager.popUpWarning.button.confirm',
|
||||
title: `${pluginId}.popUpWarning.title`,
|
||||
message: `${pluginId}.popUpWarning.warning.cancelAllSettings`,
|
||||
cancel: `${pluginId}.popUpWarning.button.cancel`,
|
||||
confirm: `${pluginId}.popUpWarning.button.confirm`,
|
||||
}}
|
||||
popUpWarningType="danger"
|
||||
onConfirm={() => {
|
||||
@ -138,8 +138,8 @@ function SettingsView({
|
||||
/>
|
||||
<Row className="row">
|
||||
<Block
|
||||
description="content-manager.containers.SettingsPage.Block.generalSettings.description"
|
||||
title="content-manager.containers.SettingsPage.Block.generalSettings.title"
|
||||
description={`${pluginId}.containers.SettingsPage.Block.generalSettings.description`}
|
||||
title={`${pluginId}.containers.SettingsPage.Block.generalSettings.title`}
|
||||
style={{ marginBottom: 7 }}
|
||||
>
|
||||
<form style={{ paddingTop: '2.6rem' }}>
|
||||
|
||||
@ -33,6 +33,7 @@
|
||||
"components.TableEmpty.withSearch": "There is no {contentType} corresponding to the search ({search})...",
|
||||
"components.TableEmpty.withoutFilter": "There is no {contentType}...",
|
||||
"containers.Edit.addAnItem": "Add an item...",
|
||||
"containers.Edit.pluginHeader.title.new": "Create an Entry",
|
||||
"containers.Edit.clickToJump": "Click to jump to the entry",
|
||||
"containers.Edit.delete": "Delete",
|
||||
"containers.Edit.editing": "Editing...",
|
||||
|
||||
@ -31,6 +31,7 @@
|
||||
"components.TableEmpty.withSearch": "Aucun {contentType} n'a été trouvé avec cette recherche ({search})...",
|
||||
"components.TableEmpty.withoutFilter": "Aucun {contentType} n'a été trouvé...",
|
||||
"containers.Edit.addAnItem": "Ajouter un élément...",
|
||||
"containers.Edit.pluginHeader.title.new": "Créer un document",
|
||||
"containers.Edit.clickToJump": "Cliquer pour voir l'entrée",
|
||||
"containers.Edit.delete": "Supprimer",
|
||||
"containers.Edit.editing": "Édition en cours...",
|
||||
|
||||
@ -256,7 +256,7 @@ module.exports = {
|
||||
},
|
||||
},
|
||||
settings: {
|
||||
mainField: 'id',
|
||||
mainField: 'title',
|
||||
defaultSortBy: 'id',
|
||||
defaultSortOrder: 'ASC',
|
||||
searchable: true,
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user