mirror of
https://github.com/strapi/strapi.git
synced 2025-08-11 18:27:22 +00:00
Created and designed PopUpWarning
This commit is contained in:
parent
d5adb8cdaa
commit
8d20f61e6f
@ -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> : '';
|
const label = this.props.name ? <label htmlFor={this.props.name}><FormattedMessage {...{id: this.props.name}} /></label> : '';
|
||||||
return (
|
return (
|
||||||
<div className={`${this.props.styles.inputText} ${bootStrapClass} ${bootStrapClassDanger}`}>
|
<div className={`${this.props.styles.inputText} ${bootStrapClass} ${bootStrapClassDanger}`}>
|
||||||
{name}
|
{label}
|
||||||
<input
|
<input
|
||||||
name={this.props.target}
|
name={this.props.target}
|
||||||
id={this.props.name}
|
id={this.props.name}
|
||||||
|
@ -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;
|
@ -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;
|
||||||
|
}
|
@ -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);
|
||||||
|
});
|
||||||
|
});
|
@ -8,6 +8,7 @@ import React from 'react';
|
|||||||
// modal
|
// modal
|
||||||
import { Button, Modal, ModalHeader, ModalBody, ModalFooter } from 'reactstrap';
|
import { Button, Modal, ModalHeader, ModalBody, ModalFooter } from 'reactstrap';
|
||||||
import PopUpForm from 'components/PopUpForm';
|
import PopUpForm from 'components/PopUpForm';
|
||||||
|
import PopUpWarning from 'components/PopUpWarning';
|
||||||
import styles from 'components/List/styles.scss';
|
import styles from 'components/List/styles.scss';
|
||||||
|
|
||||||
class RowDatabase extends React.Component { // eslint-disable-line react/prefer-stateless-function
|
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 = {
|
this.state = {
|
||||||
modal: false,
|
modal: false,
|
||||||
databaseName: '',
|
databaseName: '',
|
||||||
|
warning: false,
|
||||||
};
|
};
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -29,12 +31,19 @@ class RowDatabase extends React.Component { // eslint-disable-line react/prefer-
|
|||||||
this.setState({ modal: !this.state.modal });
|
this.setState({ modal: !this.state.modal });
|
||||||
}
|
}
|
||||||
|
|
||||||
|
toggleWarning = () => this.setState({ warning: !this.state.warning })
|
||||||
|
|
||||||
handleSubmit = (e) => {
|
handleSubmit = (e) => {
|
||||||
e.preventDefault();
|
e.preventDefault();
|
||||||
this.props.handleSubmit(this.state.databaseName);
|
this.props.handleSubmit(this.state.databaseName);
|
||||||
this.setState({ modal: !this.state.modal });
|
this.setState({ modal: !this.state.modal });
|
||||||
}
|
}
|
||||||
|
|
||||||
|
deleteDatabase = () => {
|
||||||
|
this.setState({ warning: !this.state.warning });
|
||||||
|
this.props.handleDatabaseDelete(this.props.data.name);
|
||||||
|
}
|
||||||
|
|
||||||
render() {
|
render() {
|
||||||
return (
|
return (
|
||||||
<li>
|
<li>
|
||||||
@ -50,7 +59,7 @@ class RowDatabase extends React.Component { // eslint-disable-line react/prefer-
|
|||||||
<div className={styles.flexed}>
|
<div className={styles.flexed}>
|
||||||
|
|
||||||
<div><i className="fa fa-pencil" onClick={this.showDatabaseModal} id={this.props.data.name} /></div>
|
<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>
|
</div>
|
||||||
<div>
|
<div>
|
||||||
@ -71,6 +80,14 @@ class RowDatabase extends React.Component { // eslint-disable-line react/prefer-
|
|||||||
</form>
|
</form>
|
||||||
</Modal>
|
</Modal>
|
||||||
</div>
|
</div>
|
||||||
|
<div>
|
||||||
|
<PopUpWarning
|
||||||
|
isOpen={this.state.warning}
|
||||||
|
toggleModal={this.toggleWarning}
|
||||||
|
handleConfirm={this.deleteDatabase}
|
||||||
|
warningMessage={'popUpWarning.databases.delete.message'}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
</li>
|
</li>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
@ -28,6 +28,7 @@ import {
|
|||||||
SPECIFIC_DATABASE_FETCH_SUCCEEDED,
|
SPECIFIC_DATABASE_FETCH_SUCCEEDED,
|
||||||
DATABASE_EDIT,
|
DATABASE_EDIT,
|
||||||
LANGUAGE_ACTION_ERROR,
|
LANGUAGE_ACTION_ERROR,
|
||||||
|
DATABASE_ACTION_ERROR,
|
||||||
} from './constants';
|
} from './constants';
|
||||||
|
|
||||||
export function defaultAction() {
|
export function defaultAction() {
|
||||||
@ -214,6 +215,12 @@ export function databaseActionSucceeded() {
|
|||||||
};
|
};
|
||||||
}
|
}
|
||||||
|
|
||||||
|
export function databaseActionError() {
|
||||||
|
return {
|
||||||
|
type: DATABASE_ACTION_ERROR,
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
||||||
export function databaseDelete(databaseToDelete, endPoint) {
|
export function databaseDelete(databaseToDelete, endPoint) {
|
||||||
return {
|
return {
|
||||||
type: DATABASE_DELETE,
|
type: DATABASE_DELETE,
|
||||||
|
@ -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 = 'SettingsManager/Home/SPECIFIC_DATABASE_FETCH';
|
||||||
export const SPECIFIC_DATABASE_FETCH_SUCCEEDED = 'SettingsManager/Home/SPECIFIC_DATABASE_FETCH_SUCCEEDED';
|
export const SPECIFIC_DATABASE_FETCH_SUCCEEDED = 'SettingsManager/Home/SPECIFIC_DATABASE_FETCH_SUCCEEDED';
|
||||||
export const DATABASE_EDIT = 'SettingsManager/Home/DATABASE_EDIT';
|
export const DATABASE_EDIT = 'SettingsManager/Home/DATABASE_EDIT';
|
||||||
|
export const DATABASE_ACTION_ERROR = 'SettingsManager/Home/DATABASE_ACTION_ERROR';
|
||||||
|
@ -257,8 +257,9 @@ export class Home extends React.Component { // eslint-disable-line react/prefer-
|
|||||||
this.props.languageDelete(target.id);
|
this.props.languageDelete(target.id);
|
||||||
}
|
}
|
||||||
|
|
||||||
handleDatabaseDelete = ({ target }) => {
|
handleDatabaseDelete = (dbName) => {
|
||||||
this.props.databaseDelete(target.id, this.props.params.env);
|
window.Strapi.notification.info('Deleting database');
|
||||||
|
this.props.databaseDelete(dbName, this.props.params.env);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
|
@ -19,6 +19,8 @@ import {
|
|||||||
LANGUAGE_DELETE,
|
LANGUAGE_DELETE,
|
||||||
SPECIFIC_DATABASE_FETCH_SUCCEEDED,
|
SPECIFIC_DATABASE_FETCH_SUCCEEDED,
|
||||||
LANGUAGE_ACTION_ERROR,
|
LANGUAGE_ACTION_ERROR,
|
||||||
|
DATABASE_DELETE,
|
||||||
|
DATABASE_ACTION_ERROR,
|
||||||
} from './constants';
|
} from './constants';
|
||||||
|
|
||||||
/* eslint-disable new-cap */
|
/* eslint-disable new-cap */
|
||||||
@ -63,6 +65,9 @@ function homeReducer(state = initialState, action) {
|
|||||||
case LANGUAGE_DELETE:
|
case LANGUAGE_DELETE:
|
||||||
return state
|
return state
|
||||||
.updateIn(['configsDisplay', 'sections'], list => remove(list, (language) => language.name !== action.languageToDelete));
|
.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:
|
case LANGUAGES_FETCH_SUCCEEDED:
|
||||||
return state
|
return state
|
||||||
.set('loading', false)
|
.set('loading', false)
|
||||||
@ -84,6 +89,7 @@ function homeReducer(state = initialState, action) {
|
|||||||
case LANGUAGE_ACTION_ERROR:
|
case LANGUAGE_ACTION_ERROR:
|
||||||
return state.set('didCreatedNewLanguage', true);
|
return state.set('didCreatedNewLanguage', true);
|
||||||
case DATABASE_ACTION_SUCCEEDED:
|
case DATABASE_ACTION_SUCCEEDED:
|
||||||
|
case DATABASE_ACTION_ERROR:
|
||||||
return state.set('didCreatedNewDb', true);
|
return state.set('didCreatedNewDb', true);
|
||||||
case SPECIFIC_DATABASE_FETCH_SUCCEEDED:
|
case SPECIFIC_DATABASE_FETCH_SUCCEEDED:
|
||||||
return state
|
return state
|
||||||
|
@ -29,6 +29,7 @@ import {
|
|||||||
languageActionError,
|
languageActionError,
|
||||||
databaseActionSucceeded,
|
databaseActionSucceeded,
|
||||||
specificDatabaseFetchSucceeded,
|
specificDatabaseFetchSucceeded,
|
||||||
|
databaseActionError,
|
||||||
} from './actions';
|
} from './actions';
|
||||||
|
|
||||||
export function* editDatabase(action) {
|
export function* editDatabase(action) {
|
||||||
@ -77,9 +78,9 @@ export function* deleteDatabase(action) {
|
|||||||
}, 4000);
|
}, 4000);
|
||||||
});
|
});
|
||||||
|
|
||||||
yield put(databaseActionSucceeded());
|
|
||||||
|
|
||||||
} catch(error) {
|
} catch(error) {
|
||||||
|
yield put(databaseActionError());
|
||||||
window.Strapi.notification.error('an error occured');
|
window.Strapi.notification.error('an error occured');
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
@ -81,6 +81,9 @@
|
|||||||
"list.databases.title.singular": "connection in this environment",
|
"list.databases.title.singular": "connection in this environment",
|
||||||
"list.databases.title.plural": "connections 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": "Afrikaans",
|
||||||
"language.af_NA": "Afrikaans (Namibië)",
|
"language.af_NA": "Afrikaans (Namibië)",
|
||||||
"language.af_ZA": "Afrikaans (Suid-Afrika)",
|
"language.af_ZA": "Afrikaans (Suid-Afrika)",
|
||||||
|
@ -81,6 +81,9 @@
|
|||||||
"list.databases.title.singular": "connexion dans cet environnement",
|
"list.databases.title.singular": "connexion dans cet environnement",
|
||||||
"list.databases.title.plural": "connexions 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": "Afrikaans",
|
||||||
"language.af_NA": "Afrikaans (Namibië)",
|
"language.af_NA": "Afrikaans (Namibië)",
|
||||||
"language.af_ZA": "Afrikaans (Suid-Afrika)",
|
"language.af_ZA": "Afrikaans (Suid-Afrika)",
|
||||||
|
Loading…
x
Reference in New Issue
Block a user