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

Fixes #1325

Browse Source
This commit is contained in:
soupette 2019-03-27 19:30:47 +01:00
parent 114ac4a30d
commit 003b9a7ef8
6 changed files with 137 additions and 157 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

16
packages/strapi-helper-plugin/lib/src/components/InputSelect/index.js
View File

@ -39,10 +39,22 @@ function InputSelect(props) {
>
{map(props.selectOptions, (option, key) => {
if (isObject(option)) {
return <SelectOption key={key} {...option} />;
if (option.label) {
return (
<option key={option.value} value={option.value}>
{option.label}
</option>
);
} else {
return <SelectOption key={key} {...option} />;
}
}
return <option key={key} value={option}>{option}</option>;
return (
<option key={key} value={option}>
{option}
</option>
);
})}
</select>
);

50
packages/strapi-plugin-settings-manager/admin/src/components/SelectOptionLanguage/index.js
View File

@ -1,50 +0,0 @@
/**
*
* SelectOption
*
*/
import React from 'react';
import PropTypes from 'prop-types';
import getFlag, { formatLanguageLocale } from '../../utils/getFlag';
import styles from './styles.scss';
/* eslint-disable react/require-default-props */
class SelectOptionLanguage extends React.Component { // eslint-disable-line react/prefer-stateless-function
/* eslint-disable jsx-a11y/no-static-element-interactions */
handleSelect = (event) => {
event.preventDefault();
event.stopPropagation();
this.props.onSelect(this.props.option, event);
}
handleMouseEnter = (event) => {
this.props.onFocus(this.props.option, event);
}
handleMouseMove = (event) => {
if (this.props.isFocused) return;
this.props.onFocus(this.props.option, event);
}
render() {
const flagName = formatLanguageLocale(this.props.option.value);
const flag = getFlag(flagName);
return (
<div className={styles.selectOption} onMouseEnter={this.handleMouseEnter} onMouseMove={this.handleMouseMove} onFocus={this.props.onFocus} onClick={this.handleSelect} id={this.props.option.value}>
<span className={`${styles.flagContainer} flag-icon flag-icon-${flag}`} />
<span className={styles.optionLabel}>{this.props.option.label}</span>
</div>
);
}
}
SelectOptionLanguage.propTypes = {
isFocused: PropTypes.bool,
onFocus: PropTypes.func,
onSelect: PropTypes.func,
option: PropTypes.object,
};
export default SelectOptionLanguage;

15
packages/strapi-plugin-settings-manager/admin/src/components/SelectOptionLanguage/styles.scss
View File

@ -1,15 +0,0 @@
.selectOption { /* stylelint-disable */
margin: 1rem;
background-image: url('assets/images/unknow_flag.png');
background-size: 1.3333em auto;
background-position: left center;
}
.flagContainer {
// margin-left: 1rem;
}
.optionLabel {
margin-left: 1rem;
text-transform: capitalize;
}

8
packages/strapi-plugin-settings-manager/admin/src/containers/App/index.js
View File

@ -11,7 +11,6 @@ import { connect } from 'react-redux';
import { createStructuredSelector } from 'reselect';
import { bindActionCreators, compose } from 'redux';
import 'flag-icon-css/css/flag-icon.css';
import 'react-select/dist/react-select.css';
import { Switch, Route } from 'react-router-dom';
import { isEmpty } from 'lodash';
@ -83,7 +82,7 @@ export function mapDispatchToProps(dispatch) {
menuFetch,
environmentsFetch,
},
dispatch
dispatch,
);
}
@ -93,7 +92,10 @@ const mapStateToProps = createStructuredSelector({
});
// Wrap the component to inject dispatch and state into it
const withConnect = connect(mapStateToProps, mapDispatchToProps);
const withConnect = connect(
mapStateToProps,
mapDispatchToProps,
);
const withReducer = strapi.injectReducer({ key: 'global', reducer, pluginId });
const withSaga = strapi.injectSaga({ key: 'global', saga, pluginId });

204
packages/strapi-plugin-settings-manager/admin/src/containers/HomePage/index.js
View File

@ -26,9 +26,10 @@ import {
} from 'lodash';
import { FormattedMessage } from 'react-intl';
import Helmet from 'react-helmet';
import Select from 'react-select';
import { router } from 'app';
import InputSelect from 'strapi-helper-plugin/lib/src/components/InputSelect';
import pluginId from '../../pluginId';
// design
import ContentHeader from '../../components/ContentHeader';
@ -36,15 +37,11 @@ import EditForm from '../../components/EditForm';
import HeaderNav from '../../components/HeaderNav';
import List from '../../components/List';
import RowDatabase from '../../components/RowDatabase';
import SelectOptionLanguage from '../../components/SelectOptionLanguage';
import RowLanguage from '../../components/RowLanguage';
import PluginLeftMenu from '../../components/PluginLeftMenu';
// utils
import unknowFlag from 'assets/images/unknow_flag.png';
import supportedFlags from 'utils/supportedFlags.json';
import { checkFormValidity, getRequiredInputsDb } from '../../utils/inputValidations';
import getFlag, { formatLanguageLocale } from '../../utils/getFlag';
import { formatLanguageLocale } from '../../utils/getFlag';
import sendUpdatedParams from '../../utils/sendUpdatedParams';
// App selectors
import { makeSelectSections, makeSelectEnvironments } from '../App/selectors';
@ -74,7 +71,8 @@ import styles from './styles.scss';
import config from './config.json';
/* eslint-disable react/require-default-props */
export class HomePage extends React.Component { // eslint-disable-line react/prefer-stateless-function
export class HomePage extends React.Component {
// eslint-disable-line react/prefer-stateless-function
constructor(props) {
super(props);
this.customComponents = config.customComponents;
@ -98,7 +96,10 @@ export class HomePage extends React.Component { // eslint-disable-line react/pre
if (this.props.match.params.slug) {
this.handleFetch(this.props);
} else {
router.push(`/plugins/settings-manager/${get(this.props.menuSections, ['0', 'items', '0', 'slug']) || 'application'}`);
router.push(
`/plugins/settings-manager/${get(this.props.menuSections, ['0', 'items', '0', 'slug']) ||
'application'}`,
);
}
}
@ -112,7 +113,11 @@ export class HomePage extends React.Component { // eslint-disable-line react/pre
// redirect user if no params slug provided
router.push(`/plugins/settings-manager/${get(this.props.menuSections, ['0', 'items', '0', 'slug'])}`);
}
} else if (this.props.match.params.env !== nextProps.match.params.env && nextProps.match.params.env && this.props.match.params.env) {
} else if (
this.props.match.params.env !== nextProps.match.params.env &&
nextProps.match.params.env &&
this.props.match.params.env
) {
// get data if params env updated
this.handleFetch(nextProps);
}
@ -130,7 +135,7 @@ export class HomePage extends React.Component { // eslint-disable-line react/pre
/* eslint-disable react/sort-comp */
/* eslint-disable jsx-a11y/no-static-element-interactions */
addConnection = (e) => {
addConnection = e => {
e.preventDefault();
const newData = {};
/* eslint-disable no-template-curly-in-string */
@ -151,18 +156,18 @@ export class HomePage extends React.Component { // eslint-disable-line react/pre
} else {
this.props.setErrors(formErrors);
}
}
};
emptyDbModifiedData = () => {
this.setState({ toggleDefaultConnection: false });
this.props.emptyDbModifiedData();
}
};
getDatabase = (databaseName) => {
getDatabase = databaseName => {
// allow state here just for modal purpose
this.props.specificDatabaseFetch(databaseName, this.props.match.params.env);
// this.setState({ modal: !this.state.modal });
}
};
handleDefaultLanguageChange = ({ target }) => {
// create new object configsDisplay based on store property configsDisplay
@ -192,13 +197,19 @@ export class HomePage extends React.Component { // eslint-disable-line react/pre
const defaultLanguageArray = formatLanguageLocale(target.id);
// Edit the new config
this.props.editSettings({ 'language.defaultLocale': join(defaultLanguageArray, '_') }, 'i18n', this.context);
}
this.props.editSettings(
{ 'language.defaultLocale': join(defaultLanguageArray, '_') },
'i18n',
this.context,
);
};
handleFetch(props) {
const apiUrl = props.match.params.env ? `${props.match.params.slug}/${props.match.params.env}` : props.match.params.slug;
const apiUrl = props.match.params.env
? `${props.match.params.slug}/${props.match.params.env}`
: props.match.params.slug;
switch(props.match.params.slug) {
switch (props.match.params.slug) {
case 'languages':
return this.props.languagesFetch();
case 'databases':
@ -222,21 +233,31 @@ export class HomePage extends React.Component { // eslint-disable-line react/pre
if (this.props.match.params.slug === 'databases') {
if (name === this.props.home.dbNameTarget) {
const formErrors = value === this.props.home.addDatabaseSection.sections[1].items[0].value ?
[{ target: name, errors: [{ id: 'settings-manager.request.error.database.exist' }] }] : [];
const formErrors =
value === this.props.home.addDatabaseSection.sections[1].items[0].value
? [{ target: name, errors: [{ id: 'settings-manager.request.error.database.exist' }] }]
: [];
this.props.setErrors(formErrors);
} else if (endsWith(name, '.settings.client')) {
const item = find(this.props.home.addDatabaseSection.sections[0].items[1].items, { value });
this.props.changeInput('database.connections.${name}.settings.port', item.port);
this.props.changeInput(`database.connections.${this.props.home.addDatabaseSection.sections[1].items[0].value}.settings.port`, item.port);
this.props.changeInput(
`database.connections.${
this.props.home.addDatabaseSection.sections[1].items[0].value
}.settings.port`,
item.port,
);
} else {
this.props.setErrors([]);
}
}
this.props.changeInput(name, value);
}
};
handleChangeLanguage = (value) => this.props.changeInput('language.defaultLocale', value.value);
handleChangeLanguage = ({ target: { value } }) => {
console.log({ value });
this.props.changeInput('language.defaultLocale', value);
};
handleCancel = () => this.props.cancelChanges();
@ -245,28 +266,33 @@ export class HomePage extends React.Component { // eslint-disable-line react/pre
? this.props.home.addDatabaseSection.sections[1].items[0].value
: this.props.home.modifiedData[this.props.home.dbNameTarget];
const target = { name: 'database.defaultConnection', value };
this.handleChange({target});
this.handleChange({ target });
this.setState({ toggleDefaultConnection: !this.state.toggleDefaultConnection });
}
};
handleSubmit = (e) => { // eslint-disable-line consistent-return
handleSubmit = e => {
// eslint-disable-line consistent-return
e.preventDefault();
const apiUrl = this.props.match.params.env ? `${this.props.match.params.slug}/${this.props.match.params.env}` : this.props.match.params.slug;
const apiUrl = this.props.match.params.env
? `${this.props.match.params.slug}/${this.props.match.params.env}`
: this.props.match.params.slug;
const isCreatingNewFields = this.props.match.params.slug === 'security';
// send only updated settings
const body = this.sendUpdatedParams(isCreatingNewFields);
const formErrors = checkFormValidity(body, this.props.home.formValidations);
if (isEmpty(body)) return strapi.notification.info('settings-manager.strapi.notification.info.settingsEqual');
if (isEmpty(body))
return strapi.notification.info('settings-manager.strapi.notification.info.settingsEqual');
if (isEmpty(formErrors)) {
this.props.editSettings(body, apiUrl, this.context);
} else {
this.props.setErrors(formErrors);
}
}
};
handleSubmitEditDatabase = (databaseName) => { // eslint-disable-line consistent-return
handleSubmitEditDatabase = databaseName => {
// eslint-disable-line consistent-return
const body = this.sendUpdatedParams();
const apiUrl = `${databaseName}/${this.props.match.params.env}`;
const formErrors = checkFormValidity(body, this.props.home.formValidations, this.props.home.formErrors);
@ -276,25 +302,21 @@ export class HomePage extends React.Component { // eslint-disable-line react/pre
return strapi.notification.info('settings-manager.strapi.notification.info.settingsEqual');
}
if (isEmpty(formErrors)) {
this.props.databaseEdit(body, apiUrl, this.context);
} else {
this.props.setErrors(formErrors);
}
}
};
// retrieve the language to delete using the target id
handleLanguageDelete = (languaToDelete) => this.props.languageDelete(languaToDelete);
handleLanguageDelete = languaToDelete => this.props.languageDelete(languaToDelete);
handleDatabaseDelete = (dbName) => {
handleDatabaseDelete = dbName => {
this.context.enableGlobalOverlayBlocker();
strapi.notification.success('settings-manager.strapi.notification.success.databaseDelete');
this.props.databaseDelete(dbName, this.props.match.params.env, this.context);
}
// function used for react-select option
optionComponent = (props) => <SelectOptionLanguage {...props} />;
};
// custom Row rendering for the component List with params slug === languages
renderRowLanguage = (props, key, liStyles) => (
@ -306,22 +328,36 @@ export class HomePage extends React.Component { // eslint-disable-line react/pre
listLanguages={this.props.home.listLanguages}
onDefaultLanguageChange={this.handleDefaultLanguageChange}
/>
)
);
renderListTitle = () => {
const availableContentNumber = size(this.props.home.configsDisplay.sections);
const title = availableContentNumber > 1 ? `list.${this.props.match.params.slug}.title.plural` : `list.${this.props.match.params.slug}.title.singular`;
const title =
availableContentNumber > 1
? `list.${this.props.match.params.slug}.title.plural`
: `list.${this.props.match.params.slug}.title.singular`;
const titleDisplay = title ? <FormattedMessage id={`settings-manager.${title}`} /> : '';
return <span>{availableContentNumber}&nbsp;{titleDisplay}</span>;
}
return (
<span>
{availableContentNumber}&nbsp;{titleDisplay}
</span>
);
};
renderListButtonLabel = () => `list.${this.props.match.params.slug}.button.label`;
renderPopUpFormDatabase = (section, props, popUpStyles) => (
renderPopUpFormDatabase = (section, props, popUpStyles) =>
map(section.items, (item, key) => {
const isActive = props.values[this.props.home.dbNameTarget] === this.props.home.modifiedData['database.defaultConnection'] ?
<div className={popUpStyles.rounded}><i className="fa fa-check" /></div> : '';
const isActive =
props.values[this.props.home.dbNameTarget] ===
this.props.home.modifiedData['database.defaultConnection'] ? (
<div className={popUpStyles.rounded}>
<i className="fa fa-check" />
</div>
) : (
''
);
if (item.name === 'form.database.item.default') {
return (
@ -331,39 +367,35 @@ export class HomePage extends React.Component { // eslint-disable-line react/pre
id={item.target}
onClick={this.handleSetDefaultConnectionDb}
>
<FormattedMessage id={`settings-manager.${item.name}`} />{isActive}
<FormattedMessage id={`settings-manager.${item.name}`} />
{isActive}
</div>
);
}
return (
props.renderInput(item, key)
);
})
)
return props.renderInput(item, key);
});
renderPopUpFormLanguage = (section) => (
map(section.items, (item) => {
const value = this.props.home.modifiedData[item.target] || this.props.home.selectOptions.options[0].value;
renderPopUpFormLanguage = section =>
map(section.items, item => {
const value =
this.props.home.modifiedData[item.target] || this.props.home.selectOptions.options[0].value;
return (
<div className={`col-md-6`} key={item.name}>
<div className={styles.modalLanguageLabel}>
<FormattedMessage id={`settings-manager.${item.name}`} />
</div>
<Select
<InputSelect
name={item.target}
value={value}
options={this.props.home.selectOptions.options}
selectOptions={this.props.home.selectOptions.options}
onChange={this.handleChangeLanguage}
valueComponent={this.valueComponent}
optionComponent={this.optionComponent}
clearable={false}
validations={{}}
/>
<div className={styles.popUpSpacer} />
</div>
);
})
)
});
renderRowDatabase = (props, key) => (
<RowDatabase
@ -380,22 +412,30 @@ export class HomePage extends React.Component { // eslint-disable-line react/pre
error={this.props.home.error}
resetToggleDefaultConnection={this.resetToggleDefaultConnection}
/>
)
);
renderComponent = () => {
// check if settingName (params.slug) has a custom view display
let specificComponent = findKey(this.customComponents, (value) => includes(value, this.props.match.params.slug));
let specificComponent = findKey(this.customComponents, value =>
includes(value, this.props.match.params.slug),
);
if (!specificComponent) {
// Check if params env : render HeaderNav component
specificComponent = !this.props.match.params.env ? 'defaultComponent' : 'defaultComponentWithEnvironments';
specificComponent = !this.props.match.params.env
? 'defaultComponent'
: 'defaultComponentWithEnvironments';
}
// if custom view display render specificComponent
const Component = this.components[specificComponent];
const addRequiredInputDesign = this.props.match.params.slug === 'databases';
const listTitle = ['languages', 'databases'].includes(this.props.match.params.slug) ? this.renderListTitle() : '';
const listButtonLabel = ['languages', 'databases'].includes(this.props.match.params.slug) ? this.renderListButtonLabel() : '';
const listTitle = ['languages', 'databases'].includes(this.props.match.params.slug)
? this.renderListTitle()
: '';
const listButtonLabel = ['languages', 'databases'].includes(this.props.match.params.slug)
? this.renderListButtonLabel()
: '';
// check if HeaderNav component needs to render a form or a list
const renderListComponent = this.props.match.params.slug === 'databases';
@ -459,7 +499,7 @@ export class HomePage extends React.Component { // eslint-disable-line react/pre
showLoader={this.props.home.showLoader}
/>
);
}
};
// Set the toggleDefaultConnection to false
resetToggleDefaultConnection = () => this.setState({ toggleDefaultConnection: false });
@ -467,30 +507,19 @@ export class HomePage extends React.Component { // eslint-disable-line react/pre
// Hide database modal
toggle = () => this.setState({ modal: !this.state.modal });
// function used for react-select
valueComponent = (props) => {
const flagName = formatLanguageLocale(props.value.value);
const flag = getFlag(flagName);
const spanStyle = includes(supportedFlags.flags, flag) ? {} : { backgroundImage: `url(${unknowFlag})` };
return (
<span className={`${styles.flagContainer} flag-icon-background flag-icon-${flag}`} style={spanStyle}>
<FormattedMessage id="settings-manager.selectValue" defaultMessage='{language}' values={{ language: props.value.label}} className={styles.marginLeft} />
</span>
);
}
render() {
return (
<div className="container-fluid">
<div className="row">
<PluginLeftMenu sections={this.props.menuSections} environments={this.props.environments} envParams={this.props.match.params.env} />
<PluginLeftMenu
sections={this.props.menuSections}
environments={this.props.environments}
envParams={this.props.match.params.env}
/>
<div className={`${styles.home} col-md-9`}>
<Helmet
title="Settings Manager"
meta={[
{ name: 'Settings Manager Plugin', content: 'Modify your app settings' },
]}
meta={[{ name: 'Settings Manager Plugin', content: 'Modify your app settings' }]}
/>
<ContentHeader
name={this.props.home.configsDisplay.name}
@ -531,7 +560,7 @@ function mapDispatchToProps(dispatch) {
setErrors,
specificDatabaseFetch,
},
dispatch
dispatch,
);
}
@ -563,7 +592,10 @@ HomePage.propTypes = {
specificDatabaseFetch: PropTypes.func.isRequired,
};
const withConnect = connect(mapStateToProps, mapDispatchToProps);
const withConnect = connect(
mapStateToProps,
mapDispatchToProps,
);
const withReducer = strapi.injectReducer({ key: 'homePage', reducer, pluginId });
const withSaga = strapi.injectSaga({ key: 'homePage', saga, pluginId });

1
packages/strapi-plugin-settings-manager/package.json
View File

@ -25,7 +25,6 @@
"devDependencies": {
"cross-env": "^5.2.0",
"flag-icon-css": "^2.8.0",
"react-select": "^1.0.0-rc.5",
"rimraf": "^2.6.3",
"strapi-helper-plugin": "3.0.0-alpha.25.2"
},