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

Created and designed PopUpWarning

Browse Source
This commit is contained in:
cyril lopez 2017-08-07 14:03:22 +02:00
parent d5adb8cdaa
commit 8d20f61e6f
12 changed files with 174 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
packages/strapi-plugin-settings-manager/admin/src/components/InputText/index.js
View File

@ -128,7 +128,7 @@ class InputText extends React.Component { // eslint-disable-line react/prefer-st
const label = this.props.name ? <label htmlFor={this.props.name}><FormattedMessage {...{id: this.props.name}} /></label> : '';
return (
<div className={`${this.props.styles.inputText} ${bootStrapClass} ${bootStrapClassDanger}`}>
{name}
{label}
<input
name={this.props.target}
id={this.props.name}

45
packages/strapi-plugin-settings-manager/admin/src/components/PopUpWarning/index.js Normal file
View File

@ -0,0 +1,45 @@
/**
*
* PopUpWarning
*
*/
import React from 'react';
// modal
import { Button, Modal, ModalHeader, ModalBody } from 'reactstrap';
import { FormattedMessage } from 'react-intl';
import styles from './styles.scss';
class PopUpWarning extends React.Component { // eslint-disable-line react/prefer-stateless-function
render() {
return (
<div className={styles.popUpWarning}>
<Modal isOpen={this.props.isOpen} toggle={this.props.toggleModal} className={styles.modalPosition}>
<ModalHeader toggle={this.props.toggleModal} className={styles.header}>
<FormattedMessage {...{id: 'popUpWarning.title'}} />
</ModalHeader>
<div className={styles.bordered} />
<ModalBody className={styles.modalBody}>
<FormattedMessage {...{id: this.props.warningMessage}} />
<div className={styles.buttonContainer}>
<Button onClick={this.props.toggleModal} className={styles.secondary}>Cancel</Button>
<Button onClick={this.props.handleConfirm} className={styles.primary}>Confirm</Button>{' '}
</div>
</ModalBody>
</Modal>
</div>
);
}
}
PopUpWarning.propTypes = {
handleConfirm: React.PropTypes.func,
isOpen: React.PropTypes.bool.isRequired,
toggleModal: React.PropTypes.func.isRequired,
warningMessage: React.PropTypes.string,
}
export default PopUpWarning;

74
packages/strapi-plugin-settings-manager/admin/src/components/PopUpWarning/styles.scss Normal file
View File

@ -0,0 +1,74 @@
.popUpWarning { /* stylelint-disable */
width: 37.5rem!important;
}
.header {
border: none!important;
> h4 {
width: 100%;
text-align: center;
font-family: Lato;
font-weight: bold!important;
font-size: 1.8rem!important;
}
}
.centered {
justify-content: center;
}
.bordered {
margin-left: 3rem;
margin-right: 3rem;
border: 1px solid #F6F6F6;
}
.noBorder {
border: none!important;
}
.modalFooter {
margin-top: 4.5rem;
margin-bottom: 3.5rem;
padding-left: 3.1rem !important;
> input {
margin-top: 1.3rem!important;
}
}
.primary {
font-family: Lato;
background: linear-gradient(315deg, #0097F6 0%, #005EEA 100%);
color: white;
width: 15rem;
}
.secondary {
font-family: Lato;
width: 15rem;
color: #F64D0A;
border: 0.1rem solid #F64D0A;
}
.buttonContainer {
width: 100%;
padding: 0 .5rem;
display: flex;
margin-top: 3.5rem;
justify-content: space-between;
}
.modalBody {
text-align: center;
font-size: 1.4rem;
}
.modalPosition {
top: 18.7rem;
width: 37.5rem;
}

11
packages/strapi-plugin-settings-manager/admin/src/components/PopUpWarning/tests/index.test.js Normal file
View File

@ -0,0 +1,11 @@
// import PopUpWarning from '../index';
import expect from 'expect';
// import { shallow } from 'enzyme';
// import React from 'react';
describe('<PopUpWarning />', () => {
it('Expect to have unit tests specified', () => {
expect(true).toEqual(false);
});
});

19
packages/strapi-plugin-settings-manager/admin/src/components/RowDatabase/index.js
View File

@ -8,6 +8,7 @@ import React from 'react';
// modal
import { Button, Modal, ModalHeader, ModalBody, ModalFooter } from 'reactstrap';
import PopUpForm from 'components/PopUpForm';
import PopUpWarning from 'components/PopUpWarning';
import styles from 'components/List/styles.scss';
class RowDatabase extends React.Component { // eslint-disable-line react/prefer-stateless-function
@ -17,6 +18,7 @@ class RowDatabase extends React.Component { // eslint-disable-line react/prefer-
this.state = {
modal: false,
databaseName: '',
warning: false,
};
}
@ -29,12 +31,19 @@ class RowDatabase extends React.Component { // eslint-disable-line react/prefer-
this.setState({ modal: !this.state.modal });
}
toggleWarning = () => this.setState({ warning: !this.state.warning })
handleSubmit = (e) => {
e.preventDefault();
this.props.handleSubmit(this.state.databaseName);
this.setState({ modal: !this.state.modal });
}
deleteDatabase = () => {
this.setState({ warning: !this.state.warning });
this.props.handleDatabaseDelete(this.props.data.name);
}
render() {
return (
<li>
@ -50,7 +59,7 @@ class RowDatabase extends React.Component { // eslint-disable-line react/prefer-
<div className={styles.flexed}>
<div><i className="fa fa-pencil" onClick={this.showDatabaseModal} id={this.props.data.name} /></div>
<div className={styles.leftSpaced}><i id={this.props.data.name} className="fa fa-trash" onClick={this.props.handleDatabaseDelete} /></div>
<div className={styles.leftSpaced}><i id={this.props.data.name} className="fa fa-trash" onClick={this.toggleWarning} /></div>
</div>
</div>
<div>
@ -71,6 +80,14 @@ class RowDatabase extends React.Component { // eslint-disable-line react/prefer-
</form>
</Modal>
</div>
<div>
<PopUpWarning
isOpen={this.state.warning}
toggleModal={this.toggleWarning}
handleConfirm={this.deleteDatabase}
warningMessage={'popUpWarning.databases.delete.message'}
/>
</div>
</li>
);
}

7
packages/strapi-plugin-settings-manager/admin/src/containers/Home/actions.js
View File

@ -28,6 +28,7 @@ import {
SPECIFIC_DATABASE_FETCH_SUCCEEDED,
DATABASE_EDIT,
LANGUAGE_ACTION_ERROR,
DATABASE_ACTION_ERROR,
} from './constants';
export function defaultAction() {
@ -214,6 +215,12 @@ export function databaseActionSucceeded() {
};
}
export function databaseActionError() {
return {
type: DATABASE_ACTION_ERROR,
};
}
export function databaseDelete(databaseToDelete, endPoint) {
return {
type: DATABASE_DELETE,

1
packages/strapi-plugin-settings-manager/admin/src/containers/Home/constants.js
View File

@ -27,3 +27,4 @@ export const DATABASE_DELETE = 'SettingsManager/Home/DATABASE_DELETE';
export const SPECIFIC_DATABASE_FETCH = 'SettingsManager/Home/SPECIFIC_DATABASE_FETCH';
export const SPECIFIC_DATABASE_FETCH_SUCCEEDED = 'SettingsManager/Home/SPECIFIC_DATABASE_FETCH_SUCCEEDED';
export const DATABASE_EDIT = 'SettingsManager/Home/DATABASE_EDIT';
export const DATABASE_ACTION_ERROR = 'SettingsManager/Home/DATABASE_ACTION_ERROR';

5
packages/strapi-plugin-settings-manager/admin/src/containers/Home/index.js
View File

@ -257,8 +257,9 @@ export class Home extends React.Component { // eslint-disable-line react/prefer-
this.props.languageDelete(target.id);
}
handleDatabaseDelete = ({ target }) => {
this.props.databaseDelete(target.id, this.props.params.env);
handleDatabaseDelete = (dbName) => {
window.Strapi.notification.info('Deleting database');
this.props.databaseDelete(dbName, this.props.params.env);
}

6
packages/strapi-plugin-settings-manager/admin/src/containers/Home/reducer.js
View File

@ -19,6 +19,8 @@ import {
LANGUAGE_DELETE,
SPECIFIC_DATABASE_FETCH_SUCCEEDED,
LANGUAGE_ACTION_ERROR,
DATABASE_DELETE,
DATABASE_ACTION_ERROR,
} from './constants';
/* eslint-disable new-cap */
@ -63,6 +65,9 @@ function homeReducer(state = initialState, action) {
case LANGUAGE_DELETE:
return state
.updateIn(['configsDisplay', 'sections'], list => remove(list, (language) => language.name !== action.languageToDelete));
case DATABASE_DELETE:
return state
.updateIn(['configsDisplay', 'sections'], list => remove(list, (database) => database.name !== action.databaseToDelete));
case LANGUAGES_FETCH_SUCCEEDED:
return state
.set('loading', false)
@ -84,6 +89,7 @@ function homeReducer(state = initialState, action) {
case LANGUAGE_ACTION_ERROR:
return state.set('didCreatedNewLanguage', true);
case DATABASE_ACTION_SUCCEEDED:
case DATABASE_ACTION_ERROR:
return state.set('didCreatedNewDb', true);
case SPECIFIC_DATABASE_FETCH_SUCCEEDED:
return state

3
packages/strapi-plugin-settings-manager/admin/src/containers/Home/sagas.js
View File

@ -29,6 +29,7 @@ import {
languageActionError,
databaseActionSucceeded,
specificDatabaseFetchSucceeded,
databaseActionError,
} from './actions';
export function* editDatabase(action) {
@ -77,9 +78,9 @@ export function* deleteDatabase(action) {
}, 4000);
});
yield put(databaseActionSucceeded());
} catch(error) {
yield put(databaseActionError());
window.Strapi.notification.error('an error occured');
}
}

3
packages/strapi-plugin-settings-manager/admin/src/translations/en.json
View File

@ -81,6 +81,9 @@
"list.databases.title.singular": "connection in this environment",
"list.databases.title.plural": "connections in this environment",
"popUpWarning.title": "Please confirm",
"popUpWarning.databases.delete.message": "Are you sure you want to delete this connection ?",
"language.af": "Afrikaans",
"language.af_NA": "Afrikaans (Namibië)",
"language.af_ZA": "Afrikaans (Suid-Afrika)",

3
packages/strapi-plugin-settings-manager/admin/src/translations/fr.json
View File

@ -81,6 +81,9 @@
"list.databases.title.singular": "connexion dans cet environnement",
"list.databases.title.plural": "connexions dans cet environnement",
"popUpWarning.title": "Merci de confirmer",
"popUpWarning.databases.delete.message": "Etes-vous sûre de vouloir supprimer cette connexion ?",
"language.af": "Afrikaans",
"language.af_NA": "Afrikaans (Namibië)",
"language.af_ZA": "Afrikaans (Suid-Afrika)",