add confirm box

This commit is contained in:
Jay 2017-04-26 15:05:03 +08:00
parent 27d2209ea2
commit b07e51ef7c
11 changed files with 481 additions and 407 deletions

View File

@ -16,6 +16,16 @@ export const remove_dialog_msg = () => ({
type: 'dialog_remove_first' type: 'dialog_remove_first'
}); });
export const add_confirm = (msg, act = null) => ({
type: 'confirm_addmsg',
msg,
act
})
export const remove_confirm = () => ({
type: 'confirm_remove'
})
/** /**
* set i18next object * set i18next object
* @param {object} i18n i18next object * @param {object} i18n i18next object

View File

@ -75,13 +75,15 @@ class Location extends React.Component {
delLocation = (id) => { delLocation = (id) => {
if(!id) return ; if(!id) return ;
let {showDialog} = this.props; let {showDialog, callConfirm} = this.props;
callConfirm('確定要刪除這筆定位點資料?', ()=>{
fetch('/api/wristband/dellocation', getRequest({id})) fetch('/api/wristband/dellocation', getRequest({id}))
.then(response => response.json()) .then(response => response.json())
.then(json => { .then(json => {
if(json.status != 1) return showDialog(json.message); if(json.status != 1) return showDialog(json.message);
this.getList(); this.getList();
}) })
})
} }
render() { render() {

View File

@ -44,13 +44,16 @@ class WristbandInfo extends React.Component {
delWristband = (id) => { delWristband = (id) => {
if(!id) return ; if(!id) return ;
let {showDialog, callConfirm} = this.props;
callConfirm('確定要刪除這筆手環資料?', ()=>{
fetch('/api/wristband/delwristband', getRequest({id})) fetch('/api/wristband/delwristband', getRequest({id}))
.then(response=>response.json()) .then(response=>response.json())
.then(json=>{ .then(json=>{
if(json.status!=1) return showDialog(json.message); if(json.status!=1) return showDialog(json.message);
this.getList(); this.getList();
}) })
})
} }
openModal = (type, data = {}) => { openModal = (type, data = {}) => {

View File

@ -0,0 +1,15 @@
import React from 'react';
import {Modal, Button} from 'semantic-ui-react';
const ConfirmBox = ({obj, getNext}) => (
<Modal open={obj && obj.msg != '' ? true : false} onClose={() => getNext()} style={{zIndex: "2001"}}>
<Modal.Content>{obj && obj.msg ? obj.msg : ''}</Modal.Content>
<Modal.Actions>
<Button onClick={() => getNext(true, obj.act)} content="Submit" />
<Button onClick={() => getNext()} content="Cancel" />
</Modal.Actions>
</Modal>
);
export default ConfirmBox;

View File

@ -1,5 +1,5 @@
import { connect } from 'react-redux'; import { connect } from 'react-redux';
import { add_dialog_msg, toggle_loading } from '../../../actions'; import { add_dialog_msg, toggle_loading, add_confirm } from '../../../actions';
import LocationPage from '../../../components/AdminPage/Wristband/Location'; import LocationPage from '../../../components/AdminPage/Wristband/Location';
@ -13,6 +13,9 @@ const mapDispatchToProps = (dispatch, ownProps) => ({
}, },
toggleLoading: (flag = false) => { toggleLoading: (flag = false) => {
dispatch(toggle_loading(flag)); dispatch(toggle_loading(flag));
},
callConfirm: (msg, act = null) => {
dispatch(add_confirm(msg, act))
} }
}) })

View File

@ -1,5 +1,5 @@
import { connect } from 'react-redux'; import { connect } from 'react-redux';
import { add_dialog_msg, toggle_loading } from '../../../actions'; import { add_dialog_msg, toggle_loading, add_confirm } from '../../../actions';
import WristbandInfo from '../../../components/AdminPage/Wristband/WristbandInfo'; import WristbandInfo from '../../../components/AdminPage/Wristband/WristbandInfo';
@ -13,6 +13,9 @@ const mapDispatchToProps = (dispatch, ownProps) => ({
}, },
toggleLoading: (flag = false) => { toggleLoading: (flag = false) => {
dispatch(toggle_loading(flag)); dispatch(toggle_loading(flag));
},
callConfirm: (msg, act = null) => {
dispatch(add_confirm(msg, act))
} }
}) })

View File

@ -1,5 +1,5 @@
import { connect } from 'react-redux'; import { connect } from 'react-redux';
import {add_dialog_msg, toggle_loading} from '../../../actions'; import { add_dialog_msg, toggle_loading, add_confirm } from '../../../actions';
import WristbandPage from '../../../components/AdminPage/Wristband'; import WristbandPage from '../../../components/AdminPage/Wristband';

View File

@ -4,6 +4,7 @@ import Datetime from 'react-datetime';
import MainMenu from '../../containers/MenuControl'; import MainMenu from '../../containers/MenuControl';
import Loading from '../../containers/LoadingControl'; import Loading from '../../containers/LoadingControl';
import Dialog from '../DialogControl'; import Dialog from '../DialogControl';
import ConfirmBox from '../ConfirmControl';
import Dashboard from '../../containers/DashBoard'; import Dashboard from '../../containers/DashBoard';
import {toggle_dashboard} from '../../actions' import {toggle_dashboard} from '../../actions'
@ -27,6 +28,7 @@ class AdmPage extends React.Component {
<div style={{height: '100%'}}> <div style={{height: '100%'}}>
<Loading /> <Loading />
<Dialog /> <Dialog />
<ConfirmBox />
<MainMenu i18n={i18n} > <MainMenu i18n={i18n} >
<Dashboard /> <Dashboard />
{children} {children}

View File

@ -0,0 +1,19 @@
import { connect } from 'react-redux';
import ConfirmBox from '../components/ConfirmBox';
import { remove_confirm } from '../actions'
const mapStateToProps = (state) => ({
obj: state.confirmbox[0] || null
});
const mapDispatchToProps = (dispatch, ownProps) => ({
getNext: (doit = false, act = null) => {
//get next dialog message
if (doit) {
if (typeof act == 'function') act();
}
dispatch(remove_confirm());
}
});
export default connect(mapStateToProps, mapDispatchToProps)(ConfirmBox);

View File

@ -0,0 +1,15 @@
const confirmbox = (state = [], action) => {
switch (action.type) {
case 'confirm_addmsg':
return [...state, {
msg: action.msg,
act: action.act || null
}];
case 'confirm_remove':
return state.slice(1);
default:
return state;
}
}
export default confirmbox;

View File

@ -4,13 +4,15 @@ import i18n from './i18n';
import ui from './ui'; import ui from './ui';
import sysinfo from './sysinfo'; import sysinfo from './sysinfo';
import lists from './lists'; import lists from './lists';
import confirmbox from './confirmbox';
const reducers = combineReducers({ const reducers = combineReducers({
dialog, dialog,
i18n, i18n,
ui, ui,
sysinfo, sysinfo,
lists lists,
confirmbox
}); });
export default reducers; export default reducers;