Edit the content-type btn

This commit is contained in:
Virginie Ky 2019-11-07 16:38:57 +01:00 committed by Alexandre Bodin
parent 952fed3e59
commit 744850a3a5
12 changed files with 138 additions and 30 deletions

View File

@ -2,9 +2,6 @@ import styled from 'styled-components';
const Container = styled.div` const Container = styled.div`
padding: 18px 30px 18px 30px; padding: 18px 30px 18px 30px;
> div:first-child {
margin-bottom: 12px;
}
`; `;
export default Container; export default Container;

View File

@ -6,7 +6,7 @@ const LayoutTitle = styled.div`
font-weight: 500; font-weight: 500;
line-height: 18px; line-height: 18px;
> p { p {
margin-bottom: 29px; margin-bottom: 29px;
color: #787e8f; color: #787e8f;
font-weight: 400; font-weight: 400;

View File

@ -3,10 +3,9 @@ import PropTypes from 'prop-types';
import { get, isEqual, upperFirst } from 'lodash'; import { get, isEqual, upperFirst } from 'lodash';
import { withRouter } from 'react-router-dom'; import { withRouter } from 'react-router-dom';
import { FormattedMessage } from 'react-intl'; import { FormattedMessage } from 'react-intl';
import { Inputs as Input } from '@buffetjs/custom'; import { Inputs as Input, Header } from '@buffetjs/custom';
import { import {
BackHeader, BackHeader,
PluginHeader,
LoadingIndicatorPage, LoadingIndicatorPage,
PopUpWarning, PopUpWarning,
// contexts // contexts
@ -32,7 +31,7 @@ const SettingsViewWrapper = ({
onConfirmSubmit, onConfirmSubmit,
slug, slug,
}) => { }) => {
const { emitEvent } = useGlobalContext(); const { emitEvent, formatMessage } = useGlobalContext();
const [showWarningCancel, setWarningCancel] = useState(false); const [showWarningCancel, setWarningCancel] = useState(false);
const [showWarningSubmit, setWarningSubmit] = useState(false); const [showWarningSubmit, setWarningSubmit] = useState(false);
@ -50,30 +49,38 @@ const SettingsViewWrapper = ({
return [ return [
{ {
label: `${pluginId}.popUpWarning.button.cancel`, color: 'cancel',
kind: 'secondary',
onClick: toggleWarningCancel, onClick: toggleWarningCancel,
title: formatMessage({
id: `${pluginId}.popUpWarning.button.cancel`,
}),
type: 'button', type: 'button',
}, },
{ {
kind: 'primary', color: 'success',
label: `${pluginId}.containers.Edit.submit`, title: formatMessage({
id: `${pluginId}.containers.Edit.submit`,
}),
type: 'submit', type: 'submit',
}, },
]; ];
}; };
const pluginHeaderProps = { const headerProps = {
actions: getPluginHeaderActions(), actions: getPluginHeaderActions(),
title: { title: {
label: formatMessage(
{
id: `${pluginId}.components.SettingsViewWrapper.pluginHeader.title`, id: `${pluginId}.components.SettingsViewWrapper.pluginHeader.title`,
values: { name: upperFirst(slug) },
}, },
description: { { name: upperFirst(slug) }
),
},
content: formatMessage({
id: `${pluginId}.components.SettingsViewWrapper.pluginHeader.description.${ id: `${pluginId}.components.SettingsViewWrapper.pluginHeader.description.${
isEditSettings ? 'edit' : 'list' isEditSettings ? 'edit' : 'list'
}-settings`, }-settings`,
}, }),
}; };
const getSelectOptions = input => { const getSelectOptions = input => {
@ -129,8 +136,13 @@ const SettingsViewWrapper = ({
<BackHeader onClick={goBack} /> <BackHeader onClick={goBack} />
<Container className="container-fluid"> <Container className="container-fluid">
<form onSubmit={handleSubmit}> <form onSubmit={handleSubmit}>
<PluginHeader {...pluginHeaderProps} /> <Header {...headerProps} />
<div className="row"> <div
className="row"
style={{
paddingTop: '3px',
}}
>
<Block <Block
style={{ style={{
marginBottom: '13px', marginBottom: '13px',

View File

@ -29,15 +29,18 @@ import SortableList from '../../components/SortableList';
import { unformatLayout } from '../../utils/layout'; import { unformatLayout } from '../../utils/layout';
import LayoutDndProvider from '../LayoutDndProvider'; import LayoutDndProvider from '../LayoutDndProvider';
import getInputProps from './utils/getInputProps'; import getInputProps from './utils/getInputProps';
import getInjectedComponents from '../../utils/getComponents';
import reducer, { initialState } from './reducer'; import reducer, { initialState } from './reducer';
const EditSettingsView = ({ const EditSettingsView = ({
currentEnvironment,
deleteLayout, deleteLayout,
deleteLayouts, deleteLayouts,
componentsAndModelsMainPossibleMainFields, componentsAndModelsMainPossibleMainFields,
history: { push }, history: { push },
location: { search }, location: { search },
plugins,
slug, slug,
}) => { }) => {
const { componentSlug, type } = useParams(); const { componentSlug, type } = useParams();
@ -379,10 +382,34 @@ const EditSettingsView = ({
> >
<div className="row"> <div className="row">
<LayoutTitle className={fieldsReorderClassName}> <LayoutTitle className={fieldsReorderClassName}>
<div
style={{
display: 'flex',
justifyContent: 'space-between',
}}
>
<div>
<FormTitle <FormTitle
title={`${pluginId}.global.displayedFields`} title={`${pluginId}.global.displayedFields`}
description={`${pluginId}.containers.SettingPage.editSettings.description`} description={`${pluginId}.containers.SettingPage.editSettings.description`}
/> />
</div>
<div
style={{
marginTop: -6,
}}
>
{getInjectedComponents(
'left.links',
plugins,
currentEnvironment,
slug,
source,
emitEvent,
push
)}
</div>
</div>
</LayoutTitle> </LayoutTitle>
{type !== 'components' && ( {type !== 'components' && (
<LayoutTitle className="col-4"> <LayoutTitle className="col-4">
@ -445,6 +472,7 @@ EditSettingsView.defaultProps = {
}; };
EditSettingsView.propTypes = { EditSettingsView.propTypes = {
currentEnvironment: PropTypes.string,
deleteLayout: PropTypes.func.isRequired, deleteLayout: PropTypes.func.isRequired,
deleteLayouts: PropTypes.func, deleteLayouts: PropTypes.func,
componentsAndModelsMainPossibleMainFields: PropTypes.object.isRequired, componentsAndModelsMainPossibleMainFields: PropTypes.object.isRequired,
@ -454,6 +482,7 @@ EditSettingsView.propTypes = {
location: PropTypes.shape({ location: PropTypes.shape({
search: PropTypes.string.isRequired, search: PropTypes.string.isRequired,
}).isRequired, }).isRequired,
plugins: PropTypes.object,
slug: PropTypes.string, slug: PropTypes.string,
}; };

View File

@ -57,7 +57,7 @@ const Header = () => {
type: 'button', type: 'button',
}, },
{ {
color: 'primary', color: 'success',
title: formatMessage({ title: formatMessage({
id: `${pluginId}.containers.Edit.submit`, id: `${pluginId}.containers.Edit.submit`,
}), }),

View File

@ -20,9 +20,9 @@ import SelectWrapper from '../../components/SelectWrapper';
import EditViewDataManagerProvider from '../EditViewDataManagerProvider'; import EditViewDataManagerProvider from '../EditViewDataManagerProvider';
import EditViewProvider from '../EditViewProvider'; import EditViewProvider from '../EditViewProvider';
import Header from './Header'; import Header from './Header';
import getInjectedComponents from './utils/getComponents';
import createAttributesLayout from './utils/createAttributesLayout'; import createAttributesLayout from './utils/createAttributesLayout';
import { LinkWrapper, SubWrapper } from './components'; import { LinkWrapper, SubWrapper } from './components';
import getInjectedComponents from '../../utils/getComponents';
import init from './init'; import init from './init';
import reducer, { initialState } from './reducer'; import reducer, { initialState } from './reducer';
@ -152,7 +152,7 @@ const EditView = ({
<BackHeader onClick={() => redirectToPreviousPage()} /> <BackHeader onClick={() => redirectToPreviousPage()} />
<Container className="container-fluid"> <Container className="container-fluid">
<Header /> <Header />
<div className="row"> <div className="row" style={{ paddingTop: 13 }}>
<div className="col-md-12 col-lg-9"> <div className="col-md-12 col-lg-9">
{formattedContentTypeLayout.map((block, blockIndex) => { {formattedContentTypeLayout.map((block, blockIndex) => {
if (isDynamicZone(block)) { if (isDynamicZone(block)) {
@ -285,7 +285,8 @@ const EditView = ({
currentEnvironment, currentEnvironment,
slug, slug,
source, source,
emitEvent emitEvent,
true
)} )}
</ul> </ul>
</LinkWrapper> </LinkWrapper>

View File

@ -4,7 +4,7 @@ import { Button } from 'strapi-helper-plugin';
import RemoveIcon from '../../assets/images/icon-cross-blue.svg'; import RemoveIcon from '../../assets/images/icon-cross-blue.svg';
const Wrapper = styled.div` const Wrapper = styled.div`
padding-top: 19px; padding-top: 1px;
`; `;
const AddFilterCta = styled(Button)` const AddFilterCta = styled(Button)`

View File

@ -57,6 +57,7 @@
"containers.Edit.submit": "Save", "containers.Edit.submit": "Save",
"containers.Edit.Link.Layout": "Configure the layout", "containers.Edit.Link.Layout": "Configure the layout",
"containers.Edit.Link.Fields": "Edit the fields", "containers.Edit.Link.Fields": "Edit the fields",
"containers.Edit.Link.Model": "Edit the content-type",
"containers.EditView.notification.errors": "The form contains some errors", "containers.EditView.notification.errors": "The form contains some errors",
"containers.Home.introduction": "To edit your entries go to the specific link in the left menu. This plugin doesn't have a proper way to edit settings and it's still under active development.", "containers.Home.introduction": "To edit your entries go to the specific link in the left menu. This plugin doesn't have a proper way to edit settings and it's still under active development.",
"containers.Home.pluginHeaderDescription": "Manage your entries through a powerful and beautiful interface.", "containers.Home.pluginHeaderDescription": "Manage your entries through a powerful and beautiful interface.",

View File

@ -57,6 +57,7 @@
"containers.EditView.notification.errors": "Le formulaire contient des erreurs", "containers.EditView.notification.errors": "Le formulaire contient des erreurs",
"containers.Edit.Link.Layout": "Paramétrer la vue", "containers.Edit.Link.Layout": "Paramétrer la vue",
"containers.Edit.Link.Fields": "Éditer le modèle", "containers.Edit.Link.Fields": "Éditer le modèle",
"containers.Edit.Link.Model": "Éditer le modèle",
"containers.Home.introduction": "Pour éditer du contenu, choisissez un type de données dans le menu de gauche.", "containers.Home.introduction": "Pour éditer du contenu, choisissez un type de données dans le menu de gauche.",
"containers.Home.pluginHeaderDescription": "Créer et modifier votre type de contenu", "containers.Home.pluginHeaderDescription": "Créer et modifier votre type de contenu",
"containers.Home.pluginHeaderTitle": "Type de contenu", "containers.Home.pluginHeaderTitle": "Type de contenu",

View File

@ -1,6 +1,6 @@
import React from 'react'; import React from 'react';
import { get } from 'lodash'; import { get } from 'lodash';
import pluginId from '../../../pluginId'; import pluginId from '../pluginId';
/** /**
* Retrieve external links from injected components * Retrieve external links from injected components
@ -12,7 +12,8 @@ const getInjectedComponents = (
currentEnvironment, currentEnvironment,
slug, slug,
source, source,
emitEvent emitEvent,
push
) => { ) => {
const componentsToInject = Object.keys(plugins).reduce((acc, current) => { const componentsToInject = Object.keys(plugins).reduce((acc, current) => {
// Retrieve injected compos from plugin // Retrieve injected compos from plugin
@ -35,6 +36,7 @@ const getInjectedComponents = (
getContentTypeBuilderBaseUrl={() => getContentTypeBuilderBaseUrl={() =>
'/plugins/content-type-builder/models/' '/plugins/content-type-builder/models/'
} }
push={push}
{...compo.props} {...compo.props}
key={compo.key} key={compo.key}
onClick={() => { onClick={() => {

View File

@ -0,0 +1,59 @@
/**
*
* EditViewButton
*
*/
import React from 'react';
import PropTypes from 'prop-types';
import { useGlobalContext } from 'strapi-helper-plugin';
import { Button } from '@buffetjs/core';
// Create link from content-type-builder to content-manager
function EditViewButton(props) {
const { formatMessage } = useGlobalContext();
// Retrieve URL from props
const base = `${props.getContentTypeBuilderBaseUrl()}${props.getModelName()}`;
const url =
props.getSource() === 'users-permissions'
? `${base}&source=${props.getSource()}`
: base;
const handleClick = () => {
props.push(url);
};
if (props.getSource() === 'admin') {
return null;
}
if (props.currentEnvironment === 'development') {
return (
<Button
{...props}
onClick={handleClick}
icon={<i className="fa fa-cog"></i>}
label={formatMessage({
id: 'content-manager.containers.Edit.Link.Model',
})}
style={{
paddingLeft: 15,
paddingRight: 15,
outline: 0,
}}
></Button>
);
}
return null;
}
EditViewButton.propTypes = {
currentEnvironment: PropTypes.string.isRequired,
getContentTypeBuilderBaseUrl: PropTypes.func.isRequired,
getModelName: PropTypes.func.isRequired,
getSource: PropTypes.func.isRequired,
push: PropTypes.func.isRequired,
};
export default EditViewButton;

View File

@ -4,6 +4,7 @@ import pluginPkg from '../../package.json';
import App from './containers/App'; import App from './containers/App';
import Initializer from './containers/Initializer'; import Initializer from './containers/Initializer';
import Link from './InjectedComponents/ContentManager/EditViewLink'; import Link from './InjectedComponents/ContentManager/EditViewLink';
import Button from './InjectedComponents/ContentManager/EditViewButton';
import lifecycles from './lifecycles'; import lifecycles from './lifecycles';
import trads from './translations'; import trads from './translations';
import pluginId from './pluginId'; import pluginId from './pluginId';
@ -34,6 +35,12 @@ const plugin = {
icon: 'fa-cog', icon: 'fa-cog',
}, },
}, },
{
plugin: 'content-manager.editPage',
area: 'left.links',
component: Button,
key: 'content-type-builder.form',
},
], ],
layout: null, layout: null,
lifecycles, lifecycles,
@ -53,7 +60,6 @@ const plugin = {
? `/models/${uid}&source=${source}` ? `/models/${uid}&source=${source}`
: `/models/${uid}`; : `/models/${uid}`;
}, },
trads, trads,
}; };